WordPress Script ve Style Yüklemesini Koşullu Yapma

Tarafındankomut
0 Comments

WordPress sitenizde her sayfa için aynı script ve style dosyalarını yüklemek, performansı ciddi şekilde etkileyen bir alışkanlıktır. Ziyaretçi sadece ana sayfayı görüntülüyor olsa bile iletişim formu eklentisinin CSS’i, slider JavaScript’i veya WooCommerce’e ait onlarca dosya arka planda yüklenir. Bu durum hem sayfa yükleme süresini artırır hem de gereksiz sunucu kaynağı tüketimine yol açar. Koşullu script ve style yüklemesi bu problemi çözen, öğrenmesi kolay ama etkisi büyük bir tekniktir.

Koşullu Yüklemenin Önemi

Bir WordPress sitesinde ortalama bir sayfa yüklemesinde onlarca CSS ve JavaScript dosyası devreye girer. Bunların büyük çoğunluğu ilgili sayfada hiçbir işe yaramaz. Mesela bir blog yazısını okuyan kullanıcı için WooCommerce checkout sayfasına ait wc-checkout.js dosyasının yüklenmesinin hiçbir mantığı yoktur.

Koşullu yüklemenin faydaları şunlardır:

  • Sayfa başına toplam HTTP istek sayısı düşer
  • Tarayıcının parse etmesi gereken JavaScript miktarı azalır
  • Core Web Vitals skorları iyileşir
  • Sunucu bant genişliği tasarrufu sağlanır
  • Cache etkinliği artar

Bu tekniklerin tamamı functions.php dosyasına veya özel bir eklentiye yazılır. Site genelinde çalışan bir mekanizma olduğu için dikkatli uygulamak gerekir.

WordPress Script ve Style Sistemini Anlamak

WordPress, wp_enqueue_scripts action hook’u üzerinden tüm frontend script ve style yüklemelerini yönetir. Benzer şekilde yönetici paneli için admin_enqueue_scripts hook’u kullanılır.

Temel kullanım şu şekildedir:

add_action('wp_enqueue_scripts', 'my_theme_assets');

function my_theme_assets() {
    wp_enqueue_style(
        'main-style',
        get_stylesheet_uri(),
        array(),
        '1.0.0'
    );

    wp_enqueue_script(
        'main-script',
        get_template_directory_uri() . '/js/main.js',
        array('jquery'),
        '1.0.0',
        true
    );
}

Bu yapıda tüm dosyalar her sayfaya yüklenir. Koşullu yükleme için bu fonksiyonun içine WordPress’in conditional tags’lerini yerleştirmeniz gerekir.

WordPress Conditional Tags ile Çalışmak

WordPress’in yerleşik koşul etiketleri sayfa türünü tespit etmenizi sağlar. Bunların en yaygın kullanılanları şunlardır:

  • is_front_page(): Ana sayfa kontrolü
  • is_home(): Blog listesi sayfası kontrolü
  • is_single(): Tekil yazı sayfası kontrolü
  • is_page(): Statik sayfa kontrolü
  • is_page_template(): Belirli bir şablon kullanılıyor mu kontrolü
  • is_archive(): Arşiv sayfası kontrolü
  • is_category(): Kategori arşivi kontrolü
  • is_tag(): Etiket arşivi kontrolü
  • is_woocommerce(): WooCommerce sayfası kontrolü
  • is_product(): Ürün sayfası kontrolü
  • is_cart(): Sepet sayfası kontrolü
  • is_checkout(): Ödeme sayfası kontrolü
  • is_search(): Arama sonuçları sayfası kontrolü
  • is_404(): 404 hata sayfası kontrolü
  • is_singular(): Herhangi bir tekil içerik kontrolü

Pratik Senaryo 1: Slider Sadece Ana Sayfada

En klasik örnek, slider eklentisinin yalnızca ana sayfada çalışmasını istemenizdir. Çoğu slider eklentisi kendi scriptlerini her sayfaya yükler, bu ciddi bir performance sorunudur.

add_action('wp_enqueue_scripts', 'load_slider_only_on_front_page');

function load_slider_only_on_front_page() {
    // Slider scriptleri sadece ana sayfada yükle
    if (is_front_page()) {
        wp_enqueue_style(
            'revolution-slider-css',
            get_template_directory_uri() . '/plugins/slider/css/slider.css',
            array(),
            '6.0'
        );

        wp_enqueue_script(
            'revolution-slider-js',
            get_template_directory_uri() . '/plugins/slider/js/slider.min.js',
            array('jquery'),
            '6.0',
            true
        );
    }
}

Bu basit kontrol, slider ile ilgisi olmayan tüm sayfalarda gereksiz yüklemeleri engeller.

Pratik Senaryo 2: İletişim Formu Sadece İletişim Sayfasında

Contact Form 7 veya benzeri form eklentileri script ve style’larını varsayılan olarak her sayfaya yükler. Bunu belirli sayfalara kısıtlamak ciddi performans kazanımı sağlar.

add_action('wp_enqueue_scripts', 'conditional_contact_form_assets', 20);

function conditional_contact_form_assets() {
    // CF7 scriptlerini sadece "iletisim" slug'ına sahip sayfada tut
    if (!is_page('iletisim')) {
        wp_dequeue_script('contact-form-7');
        wp_dequeue_style('contact-form-7');
        wp_dequeue_script('wpcf7-recaptcha');
        wp_dequeue_style('wpcf7-block-editor-panel');
    }
}

Burada dikkat edilmesi gereken nokta: priority parametresi olarak 20 kullanıyoruz. Çünkü CF7 kendi scriptlerini 10 önceliğiyle yüklüyor, bizim dequeue işleminin ondan sonra çalışması gerekiyor.

Pratik Senaryo 3: WooCommerce Scriptlerini Optimize Etme

WooCommerce sitenizde mağaza dışındaki sayfalarda da onlarca script yükleyebilir. Bu özellikle blog sayfaları veya kurumsal içerik sayfaları olan sitelerde büyük bir sorun olur.

add_action('wp_enqueue_scripts', 'optimize_woocommerce_scripts', 99);

function optimize_woocommerce_scripts() {
    // WooCommerce sayfası değilse bazı scriptleri kaldır
    if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) {
        
        // WooCommerce genel scriptleri
        wp_dequeue_script('woocommerce');
        wp_dequeue_script('wc-add-to-cart');
        wp_dequeue_script('wc-cart-fragments');
        
        // WooCommerce stilleri
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
        
        // WooCommerce block stilleri
        wp_dequeue_style('wc-blocks-style');
    }
    
    // Sepet fragmentleri sadece cart ve checkout'ta
    if (!is_cart() && !is_checkout()) {
        wp_dequeue_script('wc-cart-fragments');
    }
}

wc-cart-fragments scripti özellikle performans için kritiktir, çünkü AJAX ile sürekli sepet güncellemesi yapar ve her sayfada çalışır. Eğer mini cart widget’ı kullanmıyorsanız bunu tamamen devre dışı bırakabilirsiniz.

Pratik Senaryo 4: Sayfa Şablonuna Göre Yükleme

Özel sayfa şablonları oluşturduğunuzda, o şablona özel scriptleri de koşullu yükleyebilirsiniz.

add_action('wp_enqueue_scripts', 'load_assets_by_page_template');

function load_assets_by_page_template() {
    // Portfolyo şablonu kontrolü
    if (is_page_template('templates/portfolio.php')) {
        wp_enqueue_style(
            'isotope-css',
            get_template_directory_uri() . '/css/isotope.min.css',
            array(),
            '3.0'
        );

        wp_enqueue_script(
            'isotope-js',
            get_template_directory_uri() . '/js/isotope.pkgd.min.js',
            array('jquery'),
            '3.0',
            true
        );

        wp_enqueue_script(
            'portfolio-filter',
            get_template_directory_uri() . '/js/portfolio-filter.js',
            array('jquery', 'isotope-js'),
            '1.0',
            true
        );
    }

    // Galeri şablonu için farklı bir kütüphane
    if (is_page_template('templates/gallery.php')) {
        wp_enqueue_style(
            'lightbox-css',
            get_template_directory_uri() . '/css/lightbox.min.css',
            array(),
            '2.11'
        );

        wp_enqueue_script(
            'lightbox-js',
            get_template_directory_uri() . '/js/lightbox.min.js',
            array('jquery'),
            '2.11',
            true
        );
    }
}

Pratik Senaryo 5: Post Type’a Göre Yükleme

Özel post type’larınız varsa, sadece o içerik türleri görüntülenirken ilgili scriptleri yükleyebilirsiniz.

add_action('wp_enqueue_scripts', 'load_assets_by_post_type');

function load_assets_by_post_type() {
    // "event" post type için takvim scripti
    if (is_singular('event') || is_post_type_archive('event')) {
        wp_enqueue_style(
            'event-calendar-css',
            get_template_directory_uri() . '/css/event-calendar.css',
            array(),
            '1.0'
        );

        wp_enqueue_script(
            'event-calendar-js',
            get_template_directory_uri() . '/js/event-calendar.js',
            array('jquery'),
            '1.0',
            true
        );

        // JavaScript değişkenlerini PHP'den aktarma
        wp_localize_script('event-calendar-js', 'eventData', array(
            'ajaxurl'  => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('event_nonce'),
            'currency' => get_option('currency_symbol', 'TRY')
        ));
    }

    // "portfolio" post type için
    if (is_singular('portfolio')) {
        wp_enqueue_script(
            'portfolio-detail-js',
            get_template_directory_uri() . '/js/portfolio-detail.js',
            array('jquery'),
            '1.0',
            true
        );
    }
}

Pratik Senaryo 6: Admin Panelinde Koşullu Yükleme

Sadece belirli admin sayfalarında script yüklemek de aynı derecede önemlidir. Özellikle özel meta box’lar veya ayar sayfaları geliştirdiğinizde bunu uygulamanız gerekir.

add_action('admin_enqueue_scripts', 'load_admin_assets_conditionally');

function load_admin_assets_conditionally($hook) {
    // Sadece post edit ekranında yükle
    if ('post.php' === $hook || 'post-new.php' === $hook) {
        global $post_type;

        // Sadece "property" post type için
        if ('property' === $post_type) {
            wp_enqueue_style(
                'property-admin-css',
                get_template_directory_uri() . '/admin/css/property-meta.css',
                array(),
                '1.0'
            );

            wp_enqueue_script(
                'google-maps-api',
                'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY',
                array(),
                null,
                true
            );

            wp_enqueue_script(
                'property-map-picker',
                get_template_directory_uri() . '/admin/js/map-picker.js',
                array('google-maps-api'),
                '1.0',
                true
            );
        }
    }

    // Sadece eklenti ayar sayfasında yükle
    if ('settings_page_my-plugin-settings' === $hook) {
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script(
            'my-plugin-settings-js',
            plugin_dir_url(__FILE__) . 'js/settings.js',
            array('wp-color-picker'),
            '1.0',
            true
        );
    }
}

$hook parametresi hangi admin sayfasında olduğunuzu belirlemenin anahtarıdır. Mevcut sayfanın hook adını öğrenmek için geçici olarak error_log($hook) ekleyebilirsiniz.

Pratik Senaryo 7: Kullanıcı Durumuna Göre Yükleme

Giriş yapmış kullanıcılar ile misafir kullanıcılar için farklı scriptler yüklemek isteyebilirsiniz. Bu özellikle üyelik sitelerinde veya müşteri portallarında işe yarar.

add_action('wp_enqueue_scripts', 'load_assets_by_user_status');

function load_assets_by_user_status() {
    if (is_user_logged_in()) {
        $current_user = wp_get_current_user();
        
        // Yöneticiler için debug aracı
        if (current_user_can('manage_options')) {
            wp_enqueue_script(
                'admin-debug-bar',
                get_template_directory_uri() . '/js/debug-bar.js',
                array('jquery'),
                '1.0',
                true
            );
        }

        // Üye paneli scripti - sadece dashboard sayfasında
        if (is_page('uye-paneli')) {
            wp_enqueue_style(
                'member-dashboard-css',
                get_template_directory_uri() . '/css/member-dashboard.css',
                array(),
                '1.0'
            );

            wp_enqueue_script(
                'member-dashboard-js',
                get_template_directory_uri() . '/js/member-dashboard.js',
                array('jquery'),
                '1.0',
                true
            );
        }
    } else {
        // Misafir kullanıcılar için giriş modal scripti
        if (!is_page(array('giris', 'kayit', 'sifre-sifirla'))) {
            wp_enqueue_script(
                'login-modal-js',
                get_template_directory_uri() . '/js/login-modal.js',
                array('jquery'),
                '1.0',
                true
            );
        }
    }
}

İleri Düzey: Shortcode İçeren Sayfalarda Yükleme

Bazen bir sayfanın belirli bir shortcode içerip içermediğini kontrol ederek script yüklemek istersiniz. Bu biraz daha karmaşık bir yaklaşım gerektirir.

add_action('wp_enqueue_scripts', 'load_assets_if_shortcode_present', 15);

function load_assets_if_shortcode_present() {
    global $post;

    // Post içeriği varsa ve belirli shortcode geçiyorsa
    if (is_singular() && isset($post->post_content)) {
        
        // [my_map] shortcode kontrolü
        if (has_shortcode($post->post_content, 'my_map')) {
            wp_enqueue_style(
                'leaflet-css',
                'https://unpkg.com/[email protected]/dist/leaflet.css',
                array(),
                '1.9.0'
            );

            wp_enqueue_script(
                'leaflet-js',
                'https://unpkg.com/[email protected]/dist/leaflet.js',
                array(),
                '1.9.0',
                true
            );
        }

        // [pricing_table] shortcode kontrolü
        if (has_shortcode($post->post_content, 'pricing_table')) {
            wp_enqueue_style(
                'pricing-table-css',
                get_template_directory_uri() . '/css/pricing-table.css',
                array(),
                '1.0'
            );

            wp_enqueue_script(
                'pricing-table-js',
                get_template_directory_uri() . '/js/pricing-table.js',
                array('jquery'),
                '1.0',
                true
            );
        }
    }
}

Gutenberg Blok Kontrolü

Gutenberg editörü kullananlar için belirli bir blok içeren sayfalarda script yüklemek mümkündür. Block editor içerikleri parse_blocks() fonksiyonuyla analiz edilebilir.

add_action('wp_enqueue_scripts', 'load_assets_for_blocks', 15);

function load_assets_for_blocks() {
    global $post;

    if (!is_singular() || !isset($post->post_content)) {
        return;
    }

    // Blokları parse et
    $blocks = parse_blocks($post->post_content);
    $block_names = array_column($blocks, 'blockName');

    // Özel harita bloğu varsa
    if (in_array('myplugin/interactive-map', $block_names)) {
        wp_enqueue_script(
            'interactive-map-block-js',
            plugin_dir_url(__FILE__) . 'js/interactive-map-frontend.js',
            array(),
            '1.0',
            true
        );
    }

    // Özel slider bloğu varsa
    if (in_array('myplugin/hero-slider', $block_names)) {
        wp_enqueue_style(
            'hero-slider-css',
            plugin_dir_url(__FILE__) . 'css/hero-slider.css',
            array(),
            '1.0'
        );
    }
}

Dikkat Edilmesi Gereken Noktalar

Koşullu yükleme yaparken bazı yaygın hatalardan kaçınmak gerekir:

  • Öncelik sırası önemlidir: Başka eklentilerin yüklediği scriptleri dequeue etmek istiyorsanız, öncelik değeriniz onların önceliğinden büyük olmalıdır. Genellikle 99 değeri güvenlidir.
  • Bağımlılıkları kontrol edin: Bir scripti dequeue ettiğinizde, ona bağımlı olan diğer scriptler de etkilenebilir. Dependency zincirini göz önünde bulundurun.
  • Cache’leri temizleyin: Koşullu yükleme değişikliklerinden sonra Cloudflare, WP Rocket veya kullandığınız cache eklentisinin cache’ini temizleyin.
  • is_woocommerce() hook sırası: Bu fonksiyon woocommerce_loaded aksiyonundan sonra kullanılabilir. Çok erken bir hook’ta çağrılırsa çalışmaz.
  • Test ortamında deneyin: Bir scripti dequeue etmeden önce o scriptin hangi sayfaları etkilediğini tam olarak bildiğinizden emin olun. Canlıda test yerine staging ortamında değişiklik yapın.
  • WordPress.org eklenti uyumluluğu: Bazı eklentiler kendi script yüklemelerini farklı hook’larda yapar. Bu durumlarda wp_print_scripts gibi daha geç hooklar gerekebilir.

Performans Testleri

Yaptığınız değişikliklerin etkisini ölçmek için şu araçları kullanabilirsiniz:

  • Google PageSpeed Insights: Core Web Vitals ve render-blocking resource tespiti için kullanın
  • GTmetrix: Sayfa bazında yüklenen tüm requestleri listeler, hangi sayfada ne yüklendiğini görürsünüz
  • WebPageTest.org: Waterfall grafiği ile her bir kaynağın yüklenme süresini analiz edebilirsiniz
  • Chrome DevTools Network sekmesi: Gerçek zamanlı olarak hangi dosyaların yüklendiğini izleyin ve gereksiz olanları tespit edin
  • Query Monitor eklentisi: WordPress admin panelinde hangi scriptlerin ve stillerin sıraya girdiğini gösterir, dependency zincirini görselleştirir

Sonuç

WordPress’te koşullu script ve style yüklemesi, performans optimizasyonunun en pratik ve etkili yöntemlerinden biridir. Bu teknik, kurumsal bir CDN veya pahalı bir cache çözümüne gerek kalmadan sayfa başına HTTP istek sayısını önemli ölçüde düşürür.

Uygulamayı küçük adımlarla başlatın. İlk olarak mevcut sitenizde Query Monitor veya GTmetrix ile hangi scriptlerin hangi sayfada yüklendiğini tespit edin. Ardından en büyük dosyaları ve en az sayıda sayfada gerçekten kullanılanları belirleyin. Bu analiz size öncelik sırası verir.

Özellikle WooCommerce kullanıyorsanız, wc-cart-fragments ve ödeme sistemi scriptlerini mağaza dışı sayfalarda devre dışı bırakmak tek başına büyük bir fark yaratabilir. Slider, galeri ve harita gibi görsel ağır scriptler için de aynı prensip geçerlidir: Yalnızca gerçekten ihtiyaç duyulan yerde yükle.

Bu alışkanlık, sadece ziyaretçi deneyimini değil, arama motoru sıralamalarını da doğrudan etkiler. Google, Core Web Vitals metriklerine giderek daha fazla ağırlık veriyor ve bu optimizasyon orada doğrudan yankısını bulacaktır.

Bir yanıt yazın

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