WordPress Sayfa Sonuna Script Ekleme: wp_footer Kullanımı

Tarafındankomut
0 Comments

WordPress projelerinde en sık karşılaşılan ihtiyaçlardan biri, belirli scriptleri sayfanın sonuna doğru şekilde eklemektir. Tema dosyalarını direkt düzenlemek yerine functions.php üzerinden bu işi yapmak hem daha temiz hem de tema güncellemelerinde kayıp yaşamazsın. Bu yazıda WordPress’in script yükleme sistemini, wp_footer hook’unu ve wp_enqueue_scripts fonksiyonunu gerçek dünya senaryolarıyla birlikte ele alacağız.

WordPress Script Yükleme Sistemi Neden Önemli?

Çoğu geliştirici başlangıçta şablona direkt etiketi yerleştiriyor. Bu yaklaşım kısa vadede çalışıyor gibi görünse de büyük projelerde ciddi sorunlara yol açıyor. Aynı script iki kez yükleniyor, plugin çakışmaları oluyor ya da script sıralaması bozuluyor.

WordPress’in wp_enqueue_scripts sistemi bu sorunları çözmek için tasarlanmış. Bu sistem sayesinde:

  • Aynı scriptin birden fazla yüklenmesini engellersin
  • Script bağımlılıklarını tanımlarsın (jQuery yüklenmeden çalışan kod olmaz)
  • Scriptlerin head veya footer’a yerleşimini kontrol edersin
  • Cache ve minification araçlarıyla uyumlu çalışırsın

Temel wp_enqueue_script Kullanımı

En basit haliyle bir scripti footer’a eklemek şu şekilde yapılıyor:

function site_scriptleri_yukle() {
    wp_enqueue_script(
        'ozel-script',
        get_template_directory_uri() . '/js/ozel.js',
        array(),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'site_scriptleri_yukle' );

Burada son parametre olan true kritik. Bu değer true olduğunda WordPress script’i etiketinden hemen önce yükler. false veya boş bırakırsan içine gider.

wp_enqueue_script parametrelerine bakalım:

  • handle: Scriptin benzersiz adı, WordPress bunu takip etmek için kullanır
  • src: Dosyanın tam URL’i
  • deps: Bağımlı olduğu scriptlerin handle listesi
  • ver: Versiyon numarası, cache sorunlarını önler
  • in_footer: true olursa footer’a, false olursa head’e eklenir

jQuery Bağımlılığıyla Script Ekleme

Eğer yazacağın script jQuery kullanıyorsa bağımlılığı belirtmen gerekiyor. WordPress zaten jQuery’i barındırıyor, sadece jquery handle’ını deps dizisine eklemen yeterli:

function jquery_bagli_script_yukle() {
    wp_enqueue_script(
        'slider-script',
        get_template_directory_uri() . '/js/slider.js',
        array( 'jquery' ),
        '2.1.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'jquery_bagli_script_yukle' );

Bu tanımlamayı yaptıktan sonra jQuery her zaman slider scriptinden önce yüklenecek. Bağımlılık zinciri WordPress tarafından otomatik yönetiliyor.

Inline Script Ekleme (wp_add_inline_script)

Bazen dış dosya yerine küçük bir JavaScript bloğunu direkt sayfaya gömmek isteyebilirsin. Analitik kodları, konfigürasyon değişkenleri veya API anahtarları için bu yöntem çok işe yarıyor:

function php_verisi_scriptine_gonder() {
    wp_enqueue_script(
        'site-config',
        get_template_directory_uri() . '/js/config.js',
        array(),
        '1.0',
        true
    );

    $config_data = array(
        'ajax_url'   => admin_url( 'admin-ajax.php' ),
        'site_url'   => get_site_url(),
        'nonce'      => wp_create_nonce( 'guvenlik-nonce' ),
        'kullanici'  => get_current_user_id(),
    );

    wp_add_inline_script(
        'site-config',
        'var SiteConfig = ' . json_encode( $config_data ) . ';',
        'before'
    );
}
add_action( 'wp_enqueue_scripts', 'php_verisi_scriptine_gonder' );

wp_add_inline_script‘in üçüncü parametresi before veya after alıyor. before dersen inline kod dosyadan önce çalışır, after dersen dosyadan sonra. PHP verilerini JavaScript’e aktarırken genellikle before kullanmak daha mantıklı.

Belirli Sayfalarda Script Yükleme

Her sayfada her scripti yüklemek gereksiz istek sayısını artırır. Koşullu etiketler kullanarak scriptleri sadece ihtiyaç duyulan sayfalarda yükleyebilirsin:

function kosullu_script_yukle() {
    // Sadece tekil yazılarda yükle
    if ( is_single() ) {
        wp_enqueue_script(
            'yorum-efekti',
            get_template_directory_uri() . '/js/yorumlar.js',
            array( 'jquery' ),
            '1.0',
            true
        );
    }

    // Sadece iletisim sayfasında yükle
    if ( is_page( 'iletisim' ) ) {
        wp_enqueue_script(
            'google-maps',
            'https://maps.googleapis.com/maps/api/js?key=ANAHTAR_BURAYA',
            array(),
            null,
            true
        );
    }

    // Sadece WooCommerce sepet sayfasında yükle
    if ( function_exists( 'is_cart' ) && is_cart() ) {
        wp_enqueue_script(
            'sepet-hesaplama',
            get_template_directory_uri() . '/js/sepet.js',
            array( 'jquery', 'wc-cart' ),
            '1.2',
            true
        );
    }
}
add_action( 'wp_enqueue_scripts', 'kosullu_script_yukle' );

Sık kullandığım koşullu etiketler:

  • is_front_page(): Ana sayfa kontrolü
  • is_page(): Belirli bir sayfa kontrolü (ID, slug veya başlık alır)
  • is_single(): Tekil yazı sayfası
  • is_category(): Kategori arşiv sayfası
  • is_user_logged_in(): Giriş yapmış kullanıcı kontrolü
  • is_admin(): Admin paneli kontrolü

wp_footer Hook ile Doğrudan Script Yerleştirme

Bazen wp_enqueue sistemini atlamak ve direkt footer’a bir şey gömmek gerekebilir. Özellikle üçüncü parti araçların verdiği embed kodları için bu yöntem kullanılıyor:

function footer_tracking_kodu_ekle() {
    // Sadece admin olmayan kullanicilarda calis
    if ( current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXXXX');
    </script>
    <?php
}
add_action( 'wp_footer', 'footer_tracking_kodu_ekle' );

Dikkat etmem gereken nokta: wp_footer hook’u çalışması için temanın footer.php dosyasında çağrısı bulunması gerekiyor. Eğer bu çağrı eksikse hiçbir footer scripti çalışmaz.

WooCommerce Sipariş Sayfasına Özel Script

Gerçek bir senaryo olarak WooCommerce sipariş tamamlama sayfasına dönüşüm takip kodu ekleyelim. Bu sayfa çok kritik çünkü her yenilenmesinde script çalışmamalı, sadece gerçek satın alma sonrasında çalışmalı:

function woo_siparis_tamamlama_scripti() {
    if ( ! function_exists( 'is_order_received_page' ) ) {
        return;
    }

    if ( is_order_received_page() ) {
        global $wp;
        $siparis_id = absint( $wp->query_vars['order-received'] );

        if ( $siparis_id > 0 ) {
            $siparis = wc_get_order( $siparis_id );

            if ( $siparis ) {
                $toplam  = $siparis->get_total();
                $para_br = get_woocommerce_currency();

                wp_add_inline_script(
                    'jquery',
                    "
                    jQuery(document).ready(function($) {
                        console.log('Siparis tamamlandi: " . esc_js( $toplam ) . " " . esc_js( $para_br ) . "');
                        // Burada donusum pikseli veya ozel kod calistirilabilir
                        if(typeof fbq !== 'undefined') {
                            fbq('track', 'Purchase', {
                                value: " . floatval( $toplam ) . ",
                                currency: '" . esc_js( $para_br ) . "'
                            });
                        }
                    });
                    ",
                    'after'
                );
            }
        }
    }
}
add_action( 'wp_enqueue_scripts', 'woo_siparis_tamamlama_scripti' );

Bu kod gerçek sipariş ID’sini alıyor, sipariş verilerini çekiyor ve bu verileri Facebook Pixel’e gönderiyor. Statik bir dönüşüm kodu yerine dinamik sipariş tutarı kullanıldığı için çok daha doğru analitik verisi elde edilir.

Script Versiyonlama ve Cache Yönetimi

Üretim ortamında script güncellemelerinin kullanıcılara ulaşmaması çok sinir bozucu bir durum. Versiyon numarasına dosyanın değiştirilme tarihini ekleyerek cache sorununu otomatik olarak çözebilirsin:

function cache_dostu_script_yukle() {
    $script_dosyasi = get_template_directory() . '/js/ana.js';
    $versiyon       = file_exists( $script_dosyasi )
        ? filemtime( $script_dosyasi )
        : '1.0.0';

    wp_enqueue_script(
        'ana-script',
        get_template_directory_uri() . '/js/ana.js',
        array( 'jquery' ),
        $versiyon,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'cache_dostu_script_yukle' );

filemtime() fonksiyonu dosyanın son değiştirilme zamanını Unix timestamp olarak döndürüyor. Dosyayı her güncellediğinde URL parametresi değişeceği için tarayıcı cache’i otomatik olarak sıfırlanıyor. Geliştirme ortamında bunu WP_DEBUG ile kontrol altına alabilirsin:

function gelistirme_ortami_script() {
    $versiyon = WP_DEBUG ? time() : '1.5.2';

    wp_enqueue_script(
        'gelistirme-script',
        get_template_directory_uri() . '/js/main.js',
        array( 'jquery' ),
        $versiyon,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'gelistirme_ortami_script' );

Geliştirme modunda time() kullanmak her sayfa yüklemesinde taze dosyayı getiriyor. Prodüksiyonda ise sabit versiyon numarası cache’in verimli çalışmasını sağlıyor.

Birden Fazla Scripti Düzenli Yönetme

Projelerde script sayısı arttıkça tek bir büyük fonksiyon karmaşıklaşıyor. Scriptleri dizi olarak tanımlayıp döngüyle yüklemek çok daha yönetilebilir bir yapı sunuyor:

function tum_site_scriptlerini_yukle() {
    $scriptler = array(
        array(
            'handle'    => 'slick-slider',
            'src'       => get_template_directory_uri() . '/js/slick.min.js',
            'deps'      => array( 'jquery' ),
            'ver'       => '1.8.1',
            'footer'    => true,
            'kosul'     => true,
        ),
        array(
            'handle'    => 'iletisim-formu',
            'src'       => get_template_directory_uri() . '/js/iletisim.js',
            'deps'      => array( 'jquery' ),
            'ver'       => '2.0',
            'footer'    => true,
            'kosul'     => is_page( 'iletisim' ),
        ),
        array(
            'handle'    => 'urun-galerisi',
            'src'       => get_template_directory_uri() . '/js/galeri.js',
            'deps'      => array( 'jquery', 'slick-slider' ),
            'ver'       => '1.1',
            'footer'    => true,
            'kosul'     => ( function_exists( 'is_product' ) && is_product() ),
        ),
        array(
            'handle'    => 'analitik-kod',
            'src'       => 'https://cdn.ornek.com/analytics.js',
            'deps'      => array(),
            'ver'       => null,
            'footer'    => true,
            'kosul'     => ! is_user_logged_in(),
        ),
    );

    foreach ( $scriptler as $script ) {
        if ( ! empty( $script['kosul'] ) ) {
            wp_enqueue_script(
                $script['handle'],
                $script['src'],
                $script['deps'],
                $script['ver'],
                $script['footer']
            );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'tum_site_scriptlerini_yukle' );

Bu yapıyla yeni bir script eklemek sadece diziye bir eleman eklemek anlamına geliyor. Hangi scriptlerin aktif olduğunu, bağımlılıklarını ve koşullarını tek yerden görebiliyorsun.

Sık Yapılan Hatalar ve Çözümleri

Yıllarca WordPress projesinde çalışırken aynı hataların tekrar edildiğini görüyorum:

wp_footer çağrısı eksik: Tema footer.php’de wp_footer() yoksa hiçbir script çalışmaz. Her özel temada bunu kontrol et.

handle çakışması: İki farklı plugin aynı handle ismini kullanırsa biri diğerini eziyor. Projene özgü prefix kullan: mytema-jquery gibi.

Yanlış URL fonksiyonu: Child tema kullanıyorsan get_template_directory_uri() yerine get_stylesheet_directory_uri() kullanman gerekebilir. İkisinin farkını bilmek önemli:

  • get_template_directory_uri(): Her zaman parent temayı gösterir
  • get_stylesheet_directory_uri(): Aktif temayı gösterir, child temada child klasörünü döner

Null versiyon parametresi: Dış CDN’den yüklenen scriptlerde kendi versiyon numaranı eklemek anlamsız. Bu durumda null geçerek WordPress’in o parametreyi URL’e eklememesini sağlarsın.

Admin panelinde de çalışan scriptler: wp_enqueue_scripts hook’u frontend için çalışıyor ama eğer dikkatli olmazsan bazı kodlar admin panelini de etkiler. is_admin() kontrolü eklemek iyi bir alışkanlık.

Performans Optimizasyonu için defer ve async

Modern tarayıcılar defer ve async attribute’larını destekliyor. WordPress bu özellikleri doğrudan wp_enqueue_script üzerinden sunmuyor ama script_loader_tag filtresiyle ekleyebilirsin:

function script_defer_ekle( $tag, $handle, $src ) {
    $defer_scriptler = array( 'slick-slider', 'analitik-kod', 'chat-widget' );

    if ( in_array( $handle, $defer_scriptler ) ) {
        return '<script defer src="' . esc_url( $src ) . '"></script>' . "n";
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'script_defer_ekle', 10, 3 );

defer attribute’u scriptin parse işlemini engellemeden arka planda indirilmesini ve DOM yüklendikten sonra çalışmasını sağlıyor. Analytics ve chat widget gibi kritik olmayan scriptler için bu yöntemi her projede kullanıyorum. PageSpeed skorları belirgin şekilde artıyor.

async ile defer arasındaki fark önemli:

  • defer: DOM parse tamamlandıktan sonra, sırayla çalışır
  • async: İndirilir inmez çalışır, sıra garantisi yoktur

jQuery’e bağımlı scriptlerde async kullanma, sıralama bozulabilir. Bağımsız scriptlerde ise async daha iyi performans verebilir.

Gerçek Dünya Senaryosu: Üyelik Sitesi Script Yönetimi

Bir üyelik sitesi düşün. Misafir kullanıcılara kayıt teşvik popup’u, üyelere dashboard scripti, premium üyelere ek özellikler lazım. Bunu functions.php‘de şu şekilde yönetebilirsin:

function uyelik_sitesi_scriptleri() {
    // Herkes icin temel script
    wp_enqueue_script(
        'site-temel',
        get_template_directory_uri() . '/js/temel.js',
        array( 'jquery' ),
        '3.0',
        true
    );

    if ( ! is_user_logged_in() ) {
        // Misafir kullanicilar icin kayit popup
        wp_enqueue_script(
            'kayit-popup',
            get_template_directory_uri() . '/js/popup.js',
            array( 'jquery', 'site-temel' ),
            '1.5',
            true
        );

        // Popup ayarlarini JS'e gonder
        wp_add_inline_script(
            'kayit-popup',
            'var PopupConfig = { gosterim_suresi: 5000, cookie_sure: 7 };',
            'before'
        );

    } else {
        $kullanici    = wp_get_current_user();
        $uye_seviyesi = get_user_meta( $kullanici->ID, 'uyelik_seviyesi', true );

        // Tum uyeler icin dashboard
        wp_enqueue_script(
            'uye-dashboard',
            get_template_directory_uri() . '/js/dashboard.js',
            array( 'jquery', 'site-temel' ),
            '2.0',
            true
        );

        // Sadece premium uyeler icin
        if ( 'premium' === $uye_seviyesi ) {
            wp_enqueue_script(
                'premium-ozellikler',
                get_template_directory_uri() . '/js/premium.js',
                array( 'jquery', 'uye-dashboard' ),
                '1.0',
                true
            );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'uyelik_sitesi_scriptleri' );

Bu yapı hem temiz hem de genişletmesi kolay. Yeni bir üyelik seviyesi eklemek istediğinde sadece ilgili bloğu genişletiyorsun.

Sonuç

WordPress’te scriptleri sayfa sonuna doğru şekilde eklemek, hem performans hem de bakım kolaylığı açısından büyük fark yaratıyor. Tema dosyalarına direkt etiketi yerleştirmek yerine wp_enqueue_scripts sistemini kullanmak uzun vadede çok daha sağlam bir yapı sunuyor.

Özetlemek gerekirse en kritik noktalar şunlar:

  • Her zaman wp_enqueue_script kullan, direkt script etiketi yerleştirme
  • Bağımlılıkları tanımla, özellikle jQuery kullanan scriptlerde
  • Koşullu yükleme yap, gereksiz her sayfada her şeyi yükleme
  • Cache yönetimini ihmal etme, versiyon parametresini akıllıca kullan
  • defer ve async kullan, kritik olmayan scriptleri engelleme
  • Temanın wp_footer() çağırıp çağırmadığını kontrol et

Bu prensipleri uygulayan bir WordPress sitesinde hem kullanıcı deneyimi hem de arama motoru performansı belirgin şekilde iyileşiyor. functions.php, doğru kullanıldığında tema dosyalarına dokunmadan sitenin davranışını şekillendirmenin en güçlü aracı olmaya devam ediyor.

Bir yanıt yazın

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