WordPress Sayfa Başına Özel Script ve Style Ekleme

Tarafındankomut
0 Comments

WordPress geliştirme süreçlerinde en sık karşılaşılan sorunlardan biri, belirli sayfalar için gereksiz script ve style dosyalarının yüklenmesidir. Ana sayfaya özel bir slider kütüphanesi mi var? İletişim sayfasında Google Maps JavaScript API mı kullanıyorsunuz? Bu dosyaları sitenin her sayfasında yüklemek hem performansı öldürür hem de Google PageSpeed skorunu yerle bir eder. İşte tam burada WordPress’in functions.php dosyası devreye giriyor ve bize çok güçlü araçlar sunuyor.

Bu yazıda, WordPress’te sayfa bazında script ve style eklemenin tüm yöntemlerini gerçek dünya senaryolarıyla ele alacağız. Basit wp_enqueue_scripts kullanımından koşullu etiket kombinasyonlarına, custom post type’lara özel script yüklemeye kadar her şeyi pratik kod örnekleriyle göstereceğim.

wp_enqueue_scripts Hook’u Neden Bu Kadar Önemli?

WordPress’te script veya style eklemek için etiketine direkt HTML yazmak en kötü pratiklerden biridir. Tema veya eklenti güncellemeleri bu değişiklikleri siler, önbellekleme sistemleriyle çakışır ve bağımlılık yönetimi yapılamaz.

wp_enqueue_scripts hook’u tam olarak bu sorunu çözer. WordPress’e “bu dosyayı şu koşullarda, şu bağımlılıklarla yükle” diyebilirsiniz. Sistem geri kalanını halleder.

// functions.php'ye eklenen temel yapı
add_action('wp_enqueue_scripts', 'tema_adi_scripts_yukle');
function tema_adi_scripts_yukle() {
    // Burada koşullarınızı belirleyeceksiniz
}

Bu yapı çok basit görünse de içine yerleştireceğiniz koşullu etiketler (conditional tags) sistemi gerçekten güçlü hale getirir.

WordPress Koşullu Etiketleri (Conditional Tags)

Sayfa bazında script yükleyebilmek için önce WordPress’in hangi koşullu etiketleri sunduğunu bilmek gerekiyor. En çok kullanılanları şunlar:

  • is_front_page(): Ana sayfa (statik veya blog listesi)
  • is_home(): Blog yazıları listesi sayfası
  • is_page(): Belirli bir sayfa veya sayfa tipi
  • is_single(): Tekil yazı sayfası
  • is_singular(): Herhangi bir tekil içerik (yazı, sayfa, CPT)
  • is_archive(): Arşiv sayfaları (kategori, etiket, tarih)
  • is_category(): Kategori arşiv sayfası
  • is_tag(): Etiket arşiv sayfası
  • is_tax(): Custom taxonomy arşivi
  • is_search(): Arama sonuçları sayfası
  • is_404(): 404 hata sayfası
  • is_post_type_archive(): Custom post type arşivi
  • is_woocommerce(): Herhangi bir WooCommerce sayfası
  • is_shop(): WooCommerce mağaza sayfası
  • is_product(): Ürün detay sayfası

Bu etiketlerin güzelliği, parametreler alabilmeleridir. Mesela is_page(42) yalnızca ID’si 42 olan sayfada true döner. is_page('iletisim') slug’a göre kontrol yapar.

Senaryo 1: Sadece Ana Sayfaya Slider Script’i Ekleme

En klasik senaryo budur. Bir tam ekran slider kütüphanesi ana sayfada kullanıyorsunuz ama bu kütüphane 150KB. Her sayfada yüklemek saçmalık olur.

add_action('wp_enqueue_scripts', 'anasayfa_slider_yukle');
function anasayfa_slider_yukle() {
    if (is_front_page()) {
        // Swiper.js slider kütüphanesi
        wp_enqueue_style(
            'swiper-css',
            'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css',
            array(),
            '11.0.0'
        );
        
        wp_enqueue_script(
            'swiper-js',
            'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js',
            array(),
            '11.0.0',
            true  // Footer'da yükle
        );
        
        // Kendi özel slider init script'iniz
        wp_enqueue_script(
            'anasayfa-slider-init',
            get_template_directory_uri() . '/assets/js/slider-init.js',
            array('swiper-js'),  // Bağımlılık
            '1.0.0',
            true
        );
    }
}

Bu örnekte üç önemli nokta var. Birincisi, true parametresiyle script’leri footer’a alıyoruz; bu sayfa hızını artırır. İkincisi, array('swiper-js') ile bağımlılık tanımlıyoruz; WordPress otomatik sıralıyor. Üçüncüsü, versiyon numaraları önbellek kırma için kritik.

Senaryo 2: İletişim Sayfasına Google Maps API Ekleme

Google Maps JavaScript API’si hem ağır hem de API key gerektiren bir yapı. Bunu sadece iletişim sayfasında yüklemek hem performans hem de güvenlik açısından doğru yaklaşım.

add_action('wp_enqueue_scripts', 'iletisim_sayfasi_maps_yukle');
function iletisim_sayfasi_maps_yukle() {
    // Slug veya ID ile kontrol edebilirsiniz
    if (is_page('iletisim') || is_page(56)) {
        $api_key = get_option('gmaps_api_key', '');
        
        if (!empty($api_key)) {
            wp_enqueue_script(
                'google-maps-api',
                'https://maps.googleapis.com/maps/api/js?key=' . esc_attr($api_key) . '&callback=initMap',
                array(),
                null,  // API'lerde versiyon null bırakılabilir
                true
            );
            
            wp_enqueue_script(
                'harita-init',
                get_template_directory_uri() . '/assets/js/harita.js',
                array('google-maps-api'),
                filemtime(get_template_directory() . '/assets/js/harita.js'),
                true
            );
            
            // PHP'den JS'e veri aktarımı
            wp_localize_script('harita-init', 'haritaAyarlari', array(
                'lat'  => get_option('ofis_lat', '41.0082'),
                'lng'  => get_option('ofis_lng', '28.9784'),
                'zoom' => 15,
                'baslik' => get_bloginfo('name')
            ));
        }
    }
}

filemtime() kullanımına dikkat edin. Yerel geliştirme ortamında dosya değiştiğinde cache otomatik kırılır. Production’da sabit versiyon numarası kullanmak daha mantıklı.

Senaryo 3: WooCommerce Ürün Sayfalarına Özel Stil Ekleme

WooCommerce projelerinde ürün detay sayfalarına özel animasyonlar, renk seçici veya 360 derece görüntüleyici gibi özellikler eklemeniz gerekebilir.

add_action('wp_enqueue_scripts', 'woo_urun_sayfasi_scriptleri');
function woo_urun_sayfasi_scriptleri() {
    // Hem is_product() hem de is_product_category() kontrolü
    if (is_product()) {
        // Ürün resmi zoom kütüphanesi
        wp_enqueue_style(
            'drift-zoom-css',
            get_template_directory_uri() . '/assets/css/drift.min.css',
            array(),
            '3.0.1'
        );
        
        wp_enqueue_script(
            'drift-zoom',
            get_template_directory_uri() . '/assets/js/drift.min.js',
            array('jquery'),
            '3.0.1',
            true
        );
        
        // Ürün tipi kontrolü ekleyebilirsiniz
        global $product;
        if ($product && $product->is_type('variable')) {
            wp_enqueue_script(
                'varyasyon-renk-secici',
                get_template_directory_uri() . '/assets/js/color-picker.js',
                array('jquery', 'wc-add-to-cart-variation'),
                '2.1.0',
                true
            );
        }
    }
    
    // Sepet ve checkout sayfaları için ayrı kontrol
    if (is_cart() || is_checkout()) {
        wp_enqueue_style(
            'checkout-custom',
            get_template_directory_uri() . '/assets/css/checkout-custom.css',
            array('woocommerce-general'),
            '1.5.0'
        );
    }
}

Senaryo 4: Custom Post Type Sayfalarına Script Ekleme

Diyelim ki bir “Portfolyo” custom post type’ınız var ve sadece bu CPT’nin arşiv ve tekil sayfalarında bir lightbox kütüphanesi yüklemek istiyorsunuz.

add_action('wp_enqueue_scripts', 'portfolyo_cpt_scriptleri');
function portfolyo_cpt_scriptleri() {
    // Portfolyo tekil sayfaları
    if (is_singular('portfolyo')) {
        wp_enqueue_style(
            'fancybox-css',
            get_template_directory_uri() . '/assets/css/fancybox.min.css',
            array(),
            '5.0.0'
        );
        
        wp_enqueue_script(
            'fancybox-js',
            get_template_directory_uri() . '/assets/js/fancybox.umd.js',
            array(),
            '5.0.0',
            true
        );
        
        wp_enqueue_script(
            'portfolyo-galeri',
            get_template_directory_uri() . '/assets/js/portfolyo-galeri.js',
            array('fancybox-js'),
            '1.0.0',
            true
        );
    }
    
    // Portfolyo arşiv sayfası - masonry grid için
    if (is_post_type_archive('portfolyo') || is_tax('portfolyo_kategorisi')) {
        wp_enqueue_script(
            'isotope',
            get_template_directory_uri() . '/assets/js/isotope.pkgd.min.js',
            array(),
            '3.0.6',
            true
        );
        
        wp_enqueue_script(
            'portfolyo-filtre',
            get_template_directory_uri() . '/assets/js/portfolyo-filtre.js',
            array('isotope'),
            '1.2.0',
            true
        );
    }
}

Senaryo 5: Admin Paneline Sayfa Bazında Script Ekleme

wp_enqueue_scripts yalnızca frontend için çalışır. Admin paneline script eklemek için admin_enqueue_scripts kullanmanız gerekir. Üstelik hangi admin sayfasında olduğunuzu bilmek için $hook parametresini kullanırsınız.

add_action('admin_enqueue_scripts', 'admin_ozel_scriptler');
function admin_ozel_scriptler($hook) {
    // Sadece yazı düzenleme ekranında
    if ($hook === 'post.php' || $hook === 'post-new.php') {
        global $post;
        
        // Sadece portfolyo CPT için
        if (isset($post) && $post->post_type === 'portfolyo') {
            wp_enqueue_style(
                'portfolyo-admin-css',
                get_template_directory_uri() . '/assets/css/admin-portfolyo.css',
                array(),
                '1.0.0'
            );
            
            wp_enqueue_script(
                'portfolyo-admin-js',
                get_template_directory_uri() . '/assets/js/admin-portfolyo.js',
                array('jquery', 'media-upload', 'thickbox'),
                '1.0.0',
                true
            );
        }
    }
    
    // Sadece ayarlar sayfamızda
    if ($hook === 'settings_page_tema-ayarlari') {
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script(
            'tema-ayarlari-js',
            get_template_directory_uri() . '/assets/js/tema-ayarlari.js',
            array('wp-color-picker'),
            '1.0.0',
            true
        );
    }
}

Senaryo 6: Inline Script ve Style Ekleme

Bazen küçük bir JavaScript bloğunu veya CSS kuralını ayrı dosya açmadan inline eklemek istersiniz. WordPress bunun için wp_add_inline_script ve wp_add_inline_style sunar.

add_action('wp_enqueue_scripts', 'inline_script_ornegi');
function inline_script_ornegi() {
    if (is_front_page()) {
        // Önce handle'ı enqueue etmeniz gerekiyor
        wp_enqueue_script(
            'anasayfa-app',
            get_template_directory_uri() . '/assets/js/app.js',
            array('jquery'),
            '1.0.0',
            true
        );
        
        // PHP verilerini JSON olarak inline script ile aktar
        $ayarlar = array(
            'ajaxUrl'    => admin_url('admin-ajax.php'),
            'nonce'      => wp_create_nonce('anasayfa_nonce'),
            'animasyon'  => get_theme_mod('animasyon_aktif', true),
            'dil'        => get_locale()
        );
        
        // Script'ten önce veya sonra eklenir
        wp_add_inline_script(
            'anasayfa-app',
            'const temAyarlari = ' . json_encode($ayarlar) . ';',
            'before'  // 'before' veya 'after'
        );
        
        // CSS değişkenleri için inline style
        wp_enqueue_style(
            'anasayfa-css',
            get_template_directory_uri() . '/assets/css/anasayfa.css',
            array(),
            '1.0.0'
        );
        
        $birincil_renk = get_theme_mod('birincil_renk', '#3498db');
        $ikincil_renk  = get_theme_mod('ikincil_renk', '#2ecc71');
        
        $css_degiskenleri = "
            :root {
                --birincil-renk: {$birincil_renk};
                --ikincil-renk: {$ikincil_renk};
            }
        ";
        
        wp_add_inline_style('anasayfa-css', $css_degiskenleri);
    }
}

Senaryo 7: Koşullu Dequeue ile Gereksiz Script’leri Kaldırma

Script eklemek kadar önemli olan bir şey de gereksiz script’leri kaldırmaktır. Eklentiler bazen her sayfaya script yükler. Bunu kontrol etmek de sizin elinizde.

add_action('wp_enqueue_scripts', 'gereksiz_scriptleri_kaldir', 100);
function gereksiz_scriptleri_kaldir() {
    // Woocommerce sayfaları dışında woo script'lerini kaldır
    if (!is_woocommerce() && !is_cart() && !is_checkout()) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-smallscreen');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_script('wc-cart-fragments');  // Özellikle bu performans katili
    }
    
    // İletişim formu eklentisi sadece iletişim sayfasında yüklensin
    if (!is_page('iletisim')) {
        wp_dequeue_script('contact-form-7');
        wp_dequeue_style('contact-form-7');
    }
    
    // jQuery Migrate'i kaldır (modern temalar için)
    if (!is_admin()) {
        wp_dequeue_script('jquery-migrate');
    }
}

priority olarak 100 kullandık. Eklentilerin kendi enqueue işlemleri genellikle 10-20 önceliğinde çalışır; 100 ile bunların üzerine geçip dequeue yapabiliyoruz.

Gelişmiş Yöntem: Sınıf Tabanlı Yapı

Büyük projelerde fonksiyonları düzenlemek için sınıf tabanlı yapı kullanmak daha temiz bir kod tabanı sağlar. Özellikle birden fazla script grubunu yönetiyorsanız bu yaklaşımı öneririm.

class TemaScriptYoneticisi {
    
    private $tema_url;
    private $tema_dizin;
    private $versiyon;
    
    public function __construct() {
        $this->tema_url    = get_template_directory_uri();
        $this->tema_dizin  = get_template_directory();
        $this->versiyon    = wp_get_theme()->get('Version');
        
        add_action('wp_enqueue_scripts', array($this, 'genel_scriptler'));
        add_action('wp_enqueue_scripts', array($this, 'sayfa_scriptleri'));
        add_action('wp_enqueue_scripts', array($this, 'woo_scriptleri'));
        add_action('wp_enqueue_scripts', array($this, 'temizlik'), 99);
    }
    
    public function genel_scriptler() {
        // Her sayfada yüklenen temel dosyalar
        wp_enqueue_style(
            'tema-ana-css',
            $this->tema_url . '/assets/css/main.css',
            array(),
            $this->versiyon
        );
        
        wp_enqueue_script(
            'tema-ana-js',
            $this->tema_url . '/assets/js/main.js',
            array('jquery'),
            $this->versiyon,
            true
        );
    }
    
    public function sayfa_scriptleri() {
        $sayfa_scriptleri = array(
            'anasayfa'  => array('slider', 'hero-animasyon'),
            'iletisim'  => array('google-maps', 'form-validasyon'),
            'hakkimizda' => array('timeline', 'sayac-animasyon'),
            'blog'      => array('infinite-scroll'),
        );
        
        foreach ($sayfa_scriptleri as $slug => $scriptler) {
            if (is_page($slug)) {
                foreach ($scriptler as $script) {
                    $this->script_yukle($script);
                }
            }
        }
    }
    
    private function script_yukle($isim) {
        $dosya = $this->tema_dizin . '/assets/js/' . $isim . '.js';
        
        if (file_exists($dosya)) {
            wp_enqueue_script(
                'tema-' . $isim,
                $this->tema_url . '/assets/js/' . $isim . '.js',
                array('tema-ana-js'),
                filemtime($dosya),
                true
            );
        }
    }
    
    public function woo_scriptleri() {
        if (!class_exists('WooCommerce')) return;
        
        if (is_product()) {
            $this->script_yukle('urun-galeri');
        }
        
        if (is_checkout()) {
            $this->script_yukle('checkout-ux');
        }
    }
    
    public function temizlik() {
        if (!is_woocommerce() && !is_cart() && !is_checkout()) {
            wp_dequeue_script('wc-cart-fragments');
        }
    }
}

new TemaScriptYoneticisi();

Performans Etkisini Ölçme

Script yönetiminin performansa etkisini görmek için birkaç pratik yöntem:

  • Query Monitor eklentisi: Hangi sayfalarda kaç script ve style yüklendiğini gösterir
  • Chrome DevTools Network sekmesi: Toplam yüklenen kaynak boyutunu ve sayısını listeler
  • Google PageSpeed Insights: “Render-blocking resources” uyarılarını takip edin
  • GTmetrix: Waterfall grafiği ile yükleme sırasını görselleştirin

Tipik bir WordPress sitesinde bu optimizasyonlarla ana sayfa dışındaki sayfalarda 200-500KB arası kaynak tasarrufu sağlanabilir. İletişim sayfasından gereksiz WooCommerce script’lerini kaldırmak bile bazen 300ms yükleme süresi kazandırır.

functions.php vs Özel Eklenti

Tema değiştirmeyi planlıyorsanız bu kodları functions.php yerine site-specific bir eklentiye taşımayı düşünebilirsiniz. Bunun için /wp-content/plugins/ altında basit bir eklenti dosyası oluşturmanız yeterli. Böylece temadan bağımsız olur.

Öte yandan eğer script’ler tamamen temaya özgüyse (tasarım elementleri gibi) functions.php doğru yerdir. Fonksiyonellik ekliyorsanız özel eklenti daha sağlıklıdır.

Sonuç

WordPress’te sayfa bazında script ve style yönetimi, performans optimizasyonunun en etkili ve en az zahmetli yollarından biridir. wp_enqueue_scripts hook’u ile koşullu etiketleri birleştirdiğinizde her sayfanın tam olarak ihtiyacı olan kaynakları yüklediğinden emin olabilirsiniz.

Özetlemek gerekirse, izlenmesi gereken temel prensipler şunlardır:

  • Global yükleme yapmayın: Her script için “bu gerçekten her sayfada gerekli mi?” diye sorun
  • Bağımlılıkları doğru tanımlayın: WordPress’in sıralama sisteminden yararlanın
  • Footer tercih edin: Render-blocking kaynakları minimumda tutun
  • Dequeue kullanın: Eklentilerin gereksiz yüklemelerini temizleyin
  • Ölçün: Değişiklik öncesi ve sonrası PageSpeed skorlarını karşılaştırın
  • wp_localize_script ile veri aktarın: PHP-JS arası veri geçişinde inline JSON kullanmayın

Bu pratiği alışkanlık haline getirdiğinizde, yönettiğiniz WordPress siteleri hem daha hızlı hem de daha temiz bir kod tabanına sahip olacak. Kullanıcı deneyimi iyileşir, SEO skorları yükselir ve sunucu yükü azalır. Hepsi birbirine bağlı ve hepsi bu küçük ama etkili optimizasyonla başlıyor.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir