WordPress Yönetim Sayfalarına Özel Javascript Eklemek

Auto Attachments için yeni versiyon isteklerini karşılamak adına kodlama yaparken farkettim ve araştırdım. Daha doğrusu bunun gibi bir şeye yani, istediğim javascript kodunu, dosyasını istediğim sayfa üzerindeyken çalıştırmak ihtiyacı doğduğundan yaptım bu işi. WordPress yönetim sayfalarında istediğiniz bölüm ve sayfalarda javascript, css vb. içerikleri çağırabiliyorsunuz. Bunu kullanmak adına add_action aksiyonlarından yararlanıyoruz. Basit olarak anlatmak gerekirse;

Sorun

WordPress 3.5 ile birlikte gelen (en azından benim öyle tanımladığım) jQuery, javascript kullanımlarındaki bazı değişiklikler, eklentilerimizin çakışma yaşamasına ve hatta yönetim paneli olan alanın menülerinin dahi çalışmaz hale gelmesine sebebiyet verebiliyor. Genel maksatla yazılacak olan javascript kodları içerisinde ne kadar dikkat ederseniz edin, başka bir eklentinin kodlarından dolayı sıkıntı yaşayabiliyorsunuz. Bu kodları “sayfaya göre” düzenlemek ihtiyacı.

Çözüm

WordPress’in ön yüzünde bunu yapabilmek kolay. is_page(), is_archive(), is_single() gibi belirli sayfalarda gösterim yapabilmek için gerekli if durumlarını yazabilmemmiz mümkün. Ama bunun yönetim alanında kullanımı pek na-mümkün. Yani mümkün olmuyor. Tabiiki bunların kullanılabildiği alanlar da var ama çok kısıtlı. Amaca hizmette kusurları var.

Bunun yerine yukarıda da bahsettiğim gibi add_action fonksiyonundan yararlanacağız. Eklenti yazmak serisinde bahsetmiştim bu fonksiyondan. Çok amaçlı kullanılabilen ve faydalı fonksiyonlardan bir tanesi. Bu gün admin_head aksiyonundan bahsedeceğim.

admin_head aksiyonuyla birlikte WordPress yönetim panelinin üst kısmına, yani javascript, css vb içerikleri gömdüğümüz head kısmına içerik ekleyebiliyoruz. Basit olarak kullanımı şöyle;

add_action('admin_head','fonksiyonum');
funciton fonksiyonum(){
	echo "Merhaba dünya";
}

Bu şekilde kullanırsanız yazdırdığımzı “Merhaba dünya” yazısı gereksiz şekilde üst bar alanının üstünde görünecektir. Ve bu şekilde kullanımı tüm sayfalar içerisinde geçerli olacaktır.

Bununla birlikte şu yazıda anlattığım WordPress içerisine javascript ve css gömmek de mümkün. admin_head aksiyonuyla beraber kullanabiliyorsunuz.

Bizi çözüme ulaştıracak olan kısım burada devreye giriyor. admin-head aksiyonunun yanına görünmesini istediğimiz sayfaları ekleyebiliyoruz. Buna kendi yaptığımız eklenti sayfaları da dahil. Örnek olarak benim yeni yazdığım kodda kullandığım javascript Jetpack eklentisiyle en azından istatistik bölümüyle çakışma ihtimali yüksek kodlar içeriyordu. Bundan kaçınmak ve kullanıcıları mağdur etmemek adına gerekli kodları post-new.php, post.php ve edit.php içerisinde çağırmam gerekiyordu.

Araştırırken zar zor da olsa bir yol buldum. Stackoverflow ya da stackexchange (tam hatırlayamıyorum) bir yorumda geçen düşünceden yola çıktım. Belki benden daha önce bu yolu bilen, kullanan milyonlarca kişi var ama, araştırmamda bu yolu kullanan bir örnek ya da anlatım bulamadım. admin_head aksiyonunun yanına -post-new.php ekledim. Ve bum! Kodlar istediğim sayfada görüntülendi :) Örnek olarak şu mantıkta kullanılıyor.

add_action('admin_head-post-new.php','fonksiyonum');
funciton fonksiyonum(){
	echo "Merhaba dünya";
}
// Sadece Yeni yazı eklerken görünür. Yani wp-admin/post-new.php dosyasında

Benim yaptığım kodlamadaki girdim şu şekilde (fonksiyonlar öylesine eklenmiştir);

add_action('admin_head-edit.php','fonksiyonum');
add_action('admin_head-post-new.php','fonksiyonum');
add_action('admin_head-post.php','fonksiyonum');
funciton fonksiyonum(){
	echo "<script type="text/javascript">
	jQuery(function($){
		$('#tıkla').click(function(){
			alert('Tıkladın');
		});
	});
	</script>";
}

Temanız içerisinde birşey ekliyorsanız temanıza ait functions.php dosyasına eklemelisiniz. Eklentinize ekliyorsanız bunu nereye koyacağınızı bilirsiniz herhalde :)

Selametle

5 thoughts on “WordPress Yönetim Sayfalarına Özel Javascript Eklemek”

  1. Serkan Bey merhaba, sitemizin ana sayfasına bir manşet sistemi ekledikten sonra js kullanan bir eklenti çalışmamaya başladı. Manşet sistemini sadece hazırlanmış bir şablon sayfada kullanıyoruz. Çakışan eklentiyi bu sayfa şablonu hariç sitenin diğer bölümlerinde çalıştırabilir miyiz? Yazınızdaki mantık burada uygulanabilir mi?

    1. Sadece anasayfa ise is_home() fonksiyonunu kullanabilirsiniz. Ya da herhangi bir sayfa ise is_page('sayfanın id veya kısa ismi')

  2. merhaba ben sitemde basit bir hesaplama yaptıyorum js ile bu js normal html bir sayfada sorunsuz çalışıyor ancak bunu wp sitemde kullanmak istiyorum ve yeni yazı oluştur deyip bu kodları wp yazıya eklediğimde kodlar çalışmıyor. etiketleri ile yazıları sarmasından olabilirmi bilmiyorum bi şekilde kodlar script olmaktan çıkıyor. bunu nasıl aşarım. yardımcı olursanız sevinirim

    1. Doğan,

      WordPress yazılarının içerisine eklenen tüm kodları temizler. Bahsettiğin hesaplama alanlarını temanın herhangi bir yerinde, sidebar alanında vb kullanabilirsin ama yazı içerisine, editörle eklediğinde silinip gitme ihtimalleri %100 e yakındır.

      E-Postana da cevap vermiştim bu konuda.

      1. Teşekkürler ilgin için. Belki başkalarına fikir olur. Ben bu sorunu özel sayfa oluşturarak çözdüm. Özel sayfalarda kodları olduğu gibi gösteriyor ancak eksi yanı yorum etiket özelliği olmuyor doğal olarak. etiket olayını all in one seo programı ile çözdüm. yorumda olmasın napalım.

Comments are closed.