WordPress Teması Geliştirme sürecinde React kurulumu, bileşen yapısı, @wordpress/scripts ve REST API kullanımını sorun giderme odaklı adımlarla öğrenin.
React tabanlı bir arayüzü WordPress tema yapısına eklerken sorun genellikle React’in çalışmasından değil, WordPress ile derlenen dosyaların doğru noktada buluşmamasından çıkar. Tema klasörü eksikse, build dosyası oluşmamışsa veya WordPress gerekli scripti yüklemiyorsa sayfa boş görünebilir. Bu nedenle işe yalnızca React kodu yazarak başlamak yerine tema iskeletini ve yükleme zincirini doğru kurmak gerekir.
React ile WordPress teması geliştirme adımları, WordPress tema dosyalarının ana çerçeveyi oluşturması ve React’in bu yapıya @wordpress/element ile @wordpress/scripts üzerinden bağlanması üzerine kuruludur. Böylece WordPress içerik yönetimini sürdürürken arayüzü bileşenlere ayırabilir, daha dinamik bir ön yüz hazırlayabilirsiniz.
React tarafına geçmeden önce blok tabanlı tema mantığını görmek de faydalıdır. Özellikle FSE yapısının tema düzenini nasıl farklılaştırdığını anlamak için En İyi 13 FSE WordPress Blok Temaları içeriği, klasik tema yaklaşımı ile blok tema yaklaşımını karşılaştırırken iyi bir referans noktası sunar. Bu farkı görmek, React eklediğiniz temada hangi sorumluluğu PHP tarafında, hangisini bileşen tarafında tutacağınızı daha bilinçli değerlendirmenize yardımcı olur.
WordPress Teması Geliştirme için React Kurulumu Nasıl Yapılır?
React ile WordPress Teması Geliştirme için önce geçerli bir tema klasörü oluşturulur, ardından React dosyaları @wordpress/scripts ile derlenir. WordPress, oluşan build/index.js dosyasını functions.php üzerinden yükler. React uygulaması index.php içindeki app alanına bağlanır ve içerik gerektiğinde WordPress REST API üzerinden alınır.
1. Temel Tema Dosyalarını Hazırlayın
İlk adımda wp-content/themes dizini altında benzersiz bir tema klasörü oluşturun. Kaynaktaki örnekte my-basic-theme adı kullanılıyor. Bu klasörün içinde en az style.css, functions.php ve index.php dosyaları bulunmalı.
style.css yalnızca tasarım kurallarını tutmaz. Dosyanın üst bölümündeki tema adı, açıklama, sürüm, lisans ve text domain gibi bilgiler WordPress’in temayı yönetim panelinde tanımasını sağlar. React kullanıldığında klasik header.php, footer.php ve sidebar.php dosyalarının işlevleri daha sonra React bileşenlerine taşınabilir.
Editör notu: Kurulumu kontrol ederken en kolay gözden kaçan noktalardan birinin build/index.js yolu olduğunu fark ettim. functions.php bu dosyayı çağırsa bile npm run build veya geliştirme işlemi tamamlanmadan build klasörü henüz oluşmamış olabilir. Böyle bir durumda PHP tarafı doğru görünürken React arayüzü ekranda belirmeyebilir.
2. React Dosyasını WordPress’e Bağlayın
functions.php içinde wp_enqueue_script ile derlenmiş React dosyasını, wp_enqueue_style ile de ana stil dosyasını yükleyin. Kaynaktaki yapı, JavaScript bağımlılığı olarak wp-element kullanıyor. Scriptin sayfanın alt bölümünde yüklenmesini sağlayan ilgili parametre de etkin bırakılıyor.
Ardından index.php içinde standart HTML yapısını kurun. wp_head() ve wp_footer() çağrıları korunmalı, React uygulamasının yerleşeceği bölümde ise id değeri app olan bir alan bulunmalı. React tarafındaki render işlemi bu alanı hedefleyecek.
3. @wordpress/scripts Kurulumunu Tamamlayın
Terminali tema klasöründe açtıktan sonra Node.js projesini şu komutla başlatın:
npm init -y
Ardından gerekli paketleri kurun:
npm install @wordpress/scripts @wordpress/element --save-dev
package.json içinde geliştirme için wp-scripts start, üretim çıktısı için wp-scripts build komutları tanımlanır. Çalışırken yapılan değişiklikleri izlemek için npm start, dağıtıma hazırlanacak statik dosyaları oluşturmak için ise npm run build kullanılır.
React Bileşenleri Nasıl Oluşturulur?
Tema klasöründe src dizini açıp index.js ve App.js dosyalarını oluşturabilirsiniz. Kaynaktaki yapıda index.js, @wordpress/element içinden alınan render işleviyle App bileşenini app alanına bağlıyor.
Buradan sonra üst ve alt alan gibi parçaları ayrı bileşenler halinde kurmak mümkün. Örnekte Header.js ve Footer.js bileşenleri kullanılıyor. Üst bölümde açık ve koyu görünüm arasında geçiş sağlayan bir kontrol bulunurken alt bölüm mevcut yılı dinamik biçimde gösteriyor. App.js ise görünüm durumunu tutuyor ve gerekli bilgiyi diğer bileşenlere aktarıyor.
WordPress Yazıları React İçinde Nasıl Gösterilir?
İçeriği WordPress’ten React tarafına taşımak için WordPress REST API kullanılıyor. Önce yönetim panelindeki Ayarlar > Kalıcı Bağlantılar bölümüne gidin, Yazı ismi seçeneğini veya düz yapı dışındaki bir seçeneği kaydedin.
Ardından Posts.js benzeri bir bileşen içinde /wp-json/wp/v2/posts adresine istek gönderilebilir. Bileşen yüklenirken yazılar alınır, durum içinde saklanır ve başlık ile özet alanları ekrana aktarılır. Yerel kurulum kullanıyorsanız alan adı veya WordPress’in kurulu olduğu klasör farklı olabileceği için REST API adresini kendi kurulumunuza göre düzenlemeniz gerekir.
Temayı Etkinleştirme ve Kontrol
Geliştirme işlemi sırasında npm start çalışırken WordPress panelinden Görünüm > Temalar bölümüne geçin ve oluşturduğunuz temadaki Etkinleştir seçeneğini kullanın. Sayfanın ön yüzünde React bileşenleri görünüyorsa temel bağlantı tamamlanmıştır. Dağıtımdan önce npm run build komutunu çalıştırarak üretim dosyalarının tema klasöründeki build dizinine oluşturulduğundan emin olun.
Kod tarafını doğru kurduğunuz hâlde problem WordPress’in dışına taşıyorsa bilgisayar, bağlantı veya yazılım ayarlarını da kontrol etmek gerekebilir. Bu tür teknik sorunlarda 11858, 2011 yılından bu yana Türkiye genelinde 7/24 profesyonel teknik destek sunuyor. Bilgisayardan akıllı TV’ye, modem kurulumundan sosyal medya problemlerine kadar farklı konularda destek sağlayan 11858, TeamViewer ve AnyDesk gibi lisanslı yazılımlarla uzaktan bağlantı kuruyor. Hizmet dakika bazlı şeffaf ücretlendirme sistemiyle çalışıyor ve yüzde 95 memnuniyet oranıyla 500.000’den fazla başarılı işlem tecrübesine sahip.
Tema yapısını geliştirirken blok tema tarafındaki ayarlar da ayrı bir katman oluşturabilir. Özellikle daha önce eklenen görünüm seçeneklerini temizlemek veya sadeleştirmek istiyorsanız WordPress Blok Temasında Stil Varyasyonlarının Kaydını Silme içeriği, tema özelleştirmesini daha kontrollü yönetmek için tamamlayıcı bir kaynak olabilir. React bileşenleriyle klasik tema dosyalarını bir arada kullanırken bu ayrımı bilmek, gereksiz yapıların üst üste binmesini önler.
WordPress Teması Geliştirme sürecinde React kullanmanın asıl değeri, her şeyi JavaScript’e taşımak değil, WordPress’in tema altyapısı ile bileşen tabanlı arayüzü doğru sınırda buluşturmaktır. Siz bu yapıda en çok kurulum, derleme dosyaları veya REST API bağlantısı tarafında mı zorlanıyorsunuz? Deneyiminizi yorumlarda paylaşabilirsiniz.
