Vite ile Modern WordPress Tema Geliştirme Rehberi
WordPress temalarına Vite entegrasyonuyla Sass, JS modülleri, hash'li production dosyaları ve manifest tabanlı asset yükleme nasıl eklenir, adım adım anlatılıyor.
Bu rehber, klasik WordPress tema yapısını koruyarak frontend derleme sürecini Vite ile modernize etmenin pratik bir yolunu gösteriyor. Tema, hooks ve template hiyerarşisi gibi WordPress'in güçlü yönlerini kaybetmeden Sass desteği, JavaScript modülleri, hızlı yerel geliştirme ve hash'lenmiş production varlıkları kazanıyor. src/ klasöründe yazılan kod Vite tarafından derlenip dist/ altına, dosya adlarına hash eklenerek yerleştiriliyor.
Entegrasyonun merkezinde Vite'ın ürettiği manifest.json dosyası yer alıyor. functions.php ve inc/enqueue.php içinde bu manifest okunarak doğru CSS ve JS dosyaları wp_enqueue_style ve wp_enqueue_script ile WordPress'e tanıtılıyor; script etiketine type="module" ekleniyor. Build klasörü mevcut değilse sistem çökmek yerine style.css dosyasına geri dönüyor, bu da geliştirme sürecinde güvenli bir yedek mekanizma sağlıyor.
Opsiyonel olarak, Vite dev server'ının çalışıp çalışmadığını kontrol eden bir PHP fonksiyonu ile local geliştirme sırasında dosyaların doğrudan 127.0.0.1:5173 üzerinden servis edilmesi de mümkün. Ayrıca performans odaklı temalar için build sırasında kritik CSS'in ayrıştırılıp wp_head içinde inline edilmesi gösteriliyor. Bu yaklaşım, WordPress temalarını modern JS ekosistemiyle uyumlu hale getirmek isteyen geliştiriciler için pratik ve üretime hazır bir şablon sunuyor.