Bu yazımda sizlere WordPress projelerinizi Frontity framework’ünü kullanarak nasıl React.js projesine çevirebileceğinizi anlatmaya çalışacağım.

WordPress bildiğiniz üzere PHP üzerine geliştirilmiş olan günümüzün en popüler içerik yönetim sistemidir. React.js ise topluluk desteği oldukça yüksek olan gelişmiş oldukça popüler bir Front-end kütüphanesidir. Bu iki aracı kullanarak oldukça kullanışlı ve modern web uygulamaları geliştirilebilir.

WordPress ve React.js kullanarak geliştirdiğiniz web projelerinin ön yüzünde oldukça modern bir teknoloji kullanırken işin mutfağında yani yönetim paneli tarafında oldukça aşina olduğumuz WordPress’i kullanabilirsiniz. Ön bir bilgilendirmeden sonra bu işlemi nasıl yapabileceğimize bir bakalım.

WordPress + React Projelerinizi Frontity İle Paketleyin

Frontity, WordPress ve React kullanarak gerçekten oldukça hızlı web siteleri oluşturmanın en kolay yoludur. Açık kaynak ve kullanımı ücretsiz.

Frontity’nin çalışma mekanizmasına biraz daha detaylı değinmek gerekirse;

WordPress ve React kullandığımız projelerde WordPress REST-API’lar aracılığı ile headless bir CMS olarak kullanılır. API aracılığı ile ulaştığımız verileri kullanarak React tarafında websitemizin ön yüzünü tasarlayabiliriz. Frontity bunlara ek olarak react serve ile paketlenir ve projenizi ayrı bir node.js projesi üzerinde çalıştırmanıza olanak sağlar. Bu işlemleri herhangi bir araç kullanmadan da yapabileceğimiz gibi bizim Frontity kullanma sebebimiz WordPress ile oldukça hızlı bağlanabilmesi ve karmaşık konfigürasyon işlemleri ile olabildiğince az zaman harcayarak daha fazla projemiz ile ilgilenmemize fırsat tanıması.

Frontity Projemizi Kuralım

Daha fazla zaman kaybetmeden örnek ve küçük bir proje ile Frontity’nin bizlere sunduklarını sizlere göstermek istiyorum. Öncelikle işleme Frontity projemizi kurarak başlıyoruz. Aşağıdaki npx komutunu kullanarak Frontity projenizi çalıştırabilirsiniz.

npx frontity create frontitywp

Kurulum sırasında bize iki adet örnek tema seçeneğinden birini seçmemiz istenecek. Bu kısımda dilediğiniz temayı seçebilirsiniz ben önerilen mars-theme’sını kullanarak devam ediyorum. Gerekli paketlerin kurulmasını ve uygulamamızın tamamlanmasını bekliyoruz. İşlemler tamamlandıktan sonra proje dizinimize geçiş yaparak development server’ımızı başlatıyoruz.

cd frontitywp
npx frontity dev

Sunucumuz çalıştıktan sonra bizi otomatik olarak tarayıcımızda ilgili port’a yönlendirecektir. Frontity ile proje oluşturmak bu kadar kolay! Artık performans ve SEO açısından oldukça güçlü arka tarafında da alışık olduğumuz WordPress altyapısını kullanan server-side projelerimizi paketleyip dağıtabileceğiz.

WordPress Frontity  React Örnek Proje

Frontity Uygulamamızı Yapılandırıyoruz

Uygulamamızı yapılandırmaya frontity.settings.js dosyasından başlayabiliriz. Bu dosya uygulamamızın genel ayarlarını yapmamızı sağlar. Örnek vermek gerekirse bu sayfa içerisinde routing, navigation, packages ve head tag’lerimizi ayarlayabiliriz. Daha detaylı incelemek isterseniz dokümantasyonu inceleyebilirsiniz.

WordPress REST API’yımızı Frontity Uygulamamıza Bağlama

Frontity hem WordPress.org hem de WordPress.com yapıları ile çalışabilir. Kolay bir şekilde API URL’mizi bağlayabiliriz. Sayfamın REST-API’ına nasıl ulaşacağım diye düşünüyorsanız dert etmenize gerek yok. Website URL’nizin sonuna /wp-json ekleyerek ulaşabilirsiniz. Frontity ayar dosyamızı açarak state.source.api attribute’umuza kendi URL’mizi bağlayalım. Örnek olması adına ilgili kısmı aşağıdaki kod parçacığı kısmına da ekliyorum ilgili kısım ayar dosyasının 45 satırında bulunuyor tabii ki bu güncellemeler ile değişebilir.

export const settings = {
    packages: [
      {
        name: "@frontity/wp-source",
        state: {
          source: {
            api: "https://islamsanliturk.com/wp-json"
          },
        },
      }
    ],
  };

Örnek olarak kendi websitemi bağlayarak devam ediyorum. Değişiklikleri kaydettikten sonra websitem üzerinde bulunan yazıların uygulamamıza geldiğini görebiliyoruz.

WordPress Frontity İslam Şanlıtürk

Frontity Teması Üzerinde Style İşlemleri

Sayfa bağlantımızı tamamladıktan sonra artık uygulamamızın görünümünü özelleştirmeye başlayabiliriz. CSS in JS mantığında çalışan stil işlemleri daha önce React ile proje geliştiren arkadaşlara oldukça tanıdık gelecektir.

Packages klasörü altında bulunan src klasörü altında proje dosyalarımızı görüntüleyebilirsiniz. Değişikliklerimizi bu dosyalar üzerinde yapacağız. Dilerseniz index.js dosyası üzerinde dilerseniz komponent özelinde stillendirme yapabilirsiniz. Ben kullanabileceğiniz birkaç yöntemden bahsederek devam etmek istiyorum.

Styled ile stillendirme

Kullanacağımız Frontity paketini dahil ettikten sonra aşağıdaki kullanım şekli ile stillendirme yapabilirsiniz.

import { styled } from "frontity";

const StyledDiv = styled.div`
    text-align: left;
    background: blue;
`;

CSS propları ile stillendirme

Css paketimizi import ederek ilgili komponent altında in-line css olarak da stillendirme işlemi yapabiliriz.

import { css } from "frontity";

const Component = () => (
    <div css={css`background: blue`}>
        Frontity kullanarak React + WordPress Projesi Geliştiriyoruz!
    </div>
);

Global Stillendirme

Yukarıdaki stillendirme seçeneklerinin yanı sıra stil işlemlerinizi global olarak da yapabilirsiniz. Bunun için de öncelikle gerekli paketlerimizi ve komponentimizi dahil ediyoruz ve stil işlemlerimizi yapıyoruz.

import { Global, css } from "frontity";

const Page = () => (
    <>
        <Global
          styles={css`
            body {
                margin: 0;
                padding: 0;
            }
          `}
        />
        <SampleContent />
    </>
);

Frontity Uygulamamızı Nasıl Deploy Ederiz?

Uygulamamızı websitemize bağladıktan ve stil işlemlerimizi tamamladıktan sonra sıra geldi uygulamamızı deploy etmeye. Proje dizinimizde terminalimize geri dönüş yaptıktan sonra aşağıdaki gibi projemizi build edebiliriz.

npx frontity build

İşlem tamamlandıktan sonra projemizi herhangi bir Node.js hostingi (Vercel, DigitalOcean, Heroku, AWS vb.) üzerinde barındırabiliriz. Build işlemleri hakkında detaylı bilgi için farklı bir yazı yazmayı düşünüyorum ayrıca dokümantasyonu inceleyerek daha detaylı bilgi edinebilirsiniz.

Frontity projeleri için iki adet domain kullanmamız gerekiyor. Bunlardan biri uygulamamızın ön yüzü olacak ana websitemiz için diğeri ise WordPress Backend’imiz için olacak.

Buna ek olarak production versiyonunuzu local olarak servis etmek isterseniz aşağıdaki komutu kullanabilirsiniz.

npx frontity serve

Yazımızda genel olarak Frontity’ i tanıdık ve basit bir proje geliştirdik. Özelleştirme ve geliştirmenin sonu yok. Bu yazımı daha derin konulara girmeden sonlandırmak istiyorum. Şu an kullandığım Websitesini tamamen Frontity uygulamasına çevireceğim bir seriye bu yazı ile başlamış olduk. İlerleyen yazılarımda başlıklar halinde navigation, routing, SEO gibi konulara değinerek devam edeceğim. Umarım faydalanabileceğiniz bir yazı olmuştur. İyi kodlamalar. 🙂

Yazar Hakkında