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