Gutenberg ile WooCommerce Ürün Sayfasını İçerik Bloğu Ötesi Nasıl Tasarlarsınız?
Gutenberg, WordPress 5.0 ile gelen blok temelli editör olduğu için pek çok içerik yöneticisi için ciddi bir dönüşüm sağladı. WooCommerce ise e-ticaretin kalbinde yer alırken, ürün sayfalarını tarayıcıların gözünde sabit bir yapıya soktu. Çoğu satıcı hâlâ klasik “product.php” template düzenleme yolunu izlerken, Gutenberg ile siz de tamamen özelleşmiş, dinamik blok tabanlı ürün sayfaları oluşturabilirsiniz.
Neden Gutenberg?
* Kolay sürükle & bırak – Tasarım yaparken kodlama beklenmez.
* Durum yönetimi – Dinamik içerik için API çağrıları edinilebilir.
* Daha iyi erişilebilirlik – Blok yapısı, her okuyucu için optimize edilir.
Başlangıç: Bloğu Özelle – “Custom Product Block” oluşturma
1. **Açılış**: <code>wp create-block custom-product-block</code> komutunu çalıştırın. Bu, temel dosyaları ve manifest.json oluşturur.
2. **Ayarları Tanımla**: <code>src/index.js</code> içinde editör bileşenini oluşturun. Burada ürün detaylarını çekmek için <code>wp.data.select( 'wc/store' ).getProduct()</code> kullanın.
3. **Görsel İçerik**: Resim galerisi, arka plan renkleri ve hover efektleri gibi görselleri bloğa doğrudan ekleyin.
4. **Hızlı Satın Al Butonu**: <code>addToCartId</code> özelliği ekleyerek, butona tıklanıldığında ürün otomatik sepeti doldurur.
5. **Public Site Değişikliği**: <code>renderCallback()</code> fonksiyonuyla sunucu tarafında bile aynı içeriği gösterin.
Dinamik İçerikle Güçlendir — Örneğin, Stok Durumuna Göre Kısayollar
* Bloğu yapılandırırken “Custom Fields” ile stok miktarını çekin.
* Stok 5’ten az olduğunda “Sınırlı Stok” etiketi otomatik olarak görünür.
* Stokta yoksa, buton yerine “Müşteriye Özel Sipariş” seçeneği gösterilir.
[C]SEO’da Avantaj – Düzgün Renkler ve Hızlı Yüklenme[/C]
Blok yapısı, gereksiz script ve stil yüklemeyi ortadan kaldırır, bu da sayfanın hızını ciddi biçimde artırır. Ayrıca, her bir blok için schema.org mikroveriler ekleyerek Google’ın ürün verilerini daha doğru algılaması sağlanır.
Sonuç?
Gutenberg ile WooCommerce ürün sayfalarınızı, bir içerik yöneticisinin bile kolayca güncelleyebileceği, tamamen dinamik ve SEO dostu bir tasarıma dönüştürüyoruz. Kodlama kabiliyeti kısıtlı bile olsa, ürünlerinizi geleceğe taşımak için bu yeni blok yaklaşımını denemeli ve satıcı deneyimini yeniden tanımlamalısınız.
Gutenberg Dokümantasyonu – Daha fazla blok geliştirme rehberi için bu kaynağa göz atabilirsiniz.
