Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
65 lines (52 sloc) 5.05 KB
ID post_title author post_excerpt layout permalink published post_date
9960
WordPress Javascript Dosyalarını Footer’a Taşıma
Hakan Eren KESKİN
post
true
2017-08-08 17:45:40 -0700

WordPress alt yapılı bir siteniz varsa geliştirirken takıldığınız noktalardan birisinin de <head> etiketleri arasında yer alan javascript dosyalarının otomatik olarak footer’a taşınmamasıdır. Malesef bunu elinizle yapmanız gerekiyor.

Bu noktada devreye WordPress tarafından geliştirilmiş ve çok güzel şekilde çalışan bir fonksiyon giriyor. wp_enqueue_scripts() fonksiyonu içerisine girdiğiniz dosyaları otomatik olarak footer’a taşıma işlemini yapıyor. Ben bunu kendi kullandığım yöntem ile anlatacağım. Öncelikle bir fonksiyon oluşturarak içerisine bazı veriler girmem gerekiyor. Bu veriler ilk olarak daha önceden tanımlı bir dosya için geçerliyse onu iptal etmek ve yeniden footer’da gösterilmek üzere tanıtmak oluyor. Functions.php dosyamızı açarak aşağıdaki gibi kodlarımızı giriyoruz.

// Javascript'leri Footer'a taşıma Kodu
function footera_tasi() {
 
	// Tanımlı dosyaları tanımsız hale getiriyoruz.
	wp_deregister_script( 'jquery' );
	wp_deregister_script( 'jquery-migrate' );
 
	// Dosyaları kodlarımız arasında kaldırıyoruz.
	wp_dequeue_script( 'jquery' );
	wp_dequeue_script( 'jquery-migrate' );
 
	// Kendi dosyalarımızı tanımlıyoruz.
	wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/js/jquery.js', '', '', true );
	wp_register_script( 'jquery-migrate', get_stylesheet_directory_uri() . '/js/jquery-migrate.js', '', '', true );
 
	// Dosyaları kodlarımız arasına ekliyoruz.
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery-migrate' );
 
 
}
add_action('wp_enqueue_scripts', 'footera_tasi', PHP_INT_MAX);

Bu kodu kullanarak WordPress tarafından default olarak gelen ve eklentilerden kaynaklanan javascript dosyalarınızı footer’a taşıyabilirsiniz. Burda kullandığımız wp_register_script() fonksiyonu içerisine 5 parametre alır. Bunlar sırayla, ('dosya-ismi', 'dosya-yolu', 'dizisi – default olarak array() alır – ', 'versiyonu', 'footera taşınsın mı?') şeklinde olmalıdır. Biz kodumuzda dosya adı ve dosya yolunu girdikten sonra 3. ve 4. parametrelerimizi boş bırakarak default değerlerini almasını sağladık ama 5. parametremize true değerini vererek kodlarımızı footer’a gönderdik.

wp_register_script() fonksiyonunun Codex'te yer alan sayfasına göz atarsanız WordPress’in içerisinde otomatik olarak tanımlı olan javascript dosyalarının isimlerini görebilirsiniz.

Bunun dışında bu kod nerede işimize yarar diye soracak olursanız, benim oldukça fazla kullandığım yapılar arasında yer alır. Bu kod sayesinde istediğimiz javascript kodunu istediğimiz sayfa veya yazıda aktif edebiliriz. Mesela ben eğer Jetpack eklentisini ve ya Contact Form eklentisini anasayfa içerisinde hiçbir yer kullanmıyor, sadece bir sayfada veya yazı içerisinde kullanıyorsam, bunların anasayfa için yüklenmesi benim sitemi yavaşlatacaktır ki bu hiç istemediğimiz bir durum. Bunun önüne geçmek için aşağıdaki gibi bir yapı kullanabiliriz.

// Javascript'leri Footer'a taşıma Kodu
function footera_tasi() {

	// Tanımlı dosyaları tanımsız hale getiriyoruz.
	wp_deregister_script( 'jquery' );

	// Dosyaları kodlarımız arasında kaldırıyoruz.
	wp_dequeue_script( 'jquery' );

	// Kendi dosyalarımızı tanımlıyoruz.
	wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/js/jquery.js', '', '', true );

	// Sadece yazı içerisinde jquery dosyamızı kodlarımız arasına ekliyoruz.
	if(is_single()){
		wp_enqueue_script( 'jquery' );
	}
}
add_action('wp_enqueue_scripts', 'footera_tasi', PHP_INT_MAX);

Wordpress Tarafından Eklenen Javascript'ler

Son olarak, sitemizde yer alan eklentiler veya WordPress tarafından otomatik olarak eklenen javascript dosyalarının neler olduğunu veya adını bilmiyorsanız görünmesini istediğiniz yere
<?php global $wp_scripts; var_dump($wp_scripts); ?>
yazarak sitenizde bulunan bütün javascript dosyalarını ayrıntılı olarak görebilirsiniz. Sizin kullandığınız dosyalar ise en alt taraflarda bulunan dosyalar olacaktır. Buradan dosyanıza tanımlı kısa isimi öğrenip onu önce o ismi kullanarak tanımsız hale getirip daha sonra istediğiniz şekilde aktif edebilirsiniz. Eklentilerden kaynak dosyaları tekrar aynı isimle aktif ederseniz eklenti ile ilgili problemlerin önüne geçmiş olursunuz.