Wordpress

WordPress Özel CSS ve JS Ekleme

18 Haziran 2018

Merhabalar. WordPress sitesi tasarlarken çoğu zaman kendi özel CSS ve/veya JavaScript dosyamızı kullanmak isteriz. Özellikle temanın kendine özgü CSS ve JavaScript dosyalarını değiştirmemek için, var olan kodları değiştirmek yerine üzerine kendi kodlarımızı ekleriz.

Normalde siteye özel CSS ve JS dosyası eklemek için bir çok yöntem kullanabiliriz. Dışarıdan bir eklenti indirip sorunumuzu kolayca çözebiliriz mesela. Tabii ki bunun için bir eklenti kullanmaya gerek olmadığını düşünüyorum. Çünkü, WordPress’te zaten bize bunu çok kolay bir şekilde yaptıracak metodlar bulunuyor. Bunun dışında temamızın “header.php” ve “footer.php” dosyalarında düzenleme yapabilirdik. Ama bu yöntemlerin hiçbiri WordPress’in tavsiye ettiği yöntemler değil.  WordPress’in geliştirici sitesine gittiğimizde bize bunun için en iyi yöntemi çok anlaşılır bir şekilde anlatıyor. Makalede neden bu yöntemin en iyi yöntem olduğunu da ayrıntılı bir şekilde anlatıyor. İsterseniz makaleyi inceleyip ayrıntılı bilgi alabilirsiniz. Çok uzatmadan hemen başlayalım.

Makaleye bakmak isterseniz: https://developer.wordpress.org/themes/basics/including-css-javascript/


Script ve CSS dosyalarını kuyruğa ekleme.

WordPress’te “enqueueing” denilen bir metod bulunuyor. Türkçe karşılığı “kuyruğa ekleme” olarak çevrilebilir. Yani, bir CSS veya Script dosyasını diğer dosyalarla kuyruğa ekliyor. Bu şekilde özel CSS ve Script dosyanız istediğiniz sıraya göre siteye ekleniyor. Elimizde iki tür dosya (Style ve Script) olduğu için iki ayrı metodumuz bulunuyor. Bunlar:

  • wp_enqueue_script()
  • wp_enqueue_style()

Stylesheet (CSS dosyalarını ekleme)

Öncelikle her temada “style.css” dosyası bulunmak zorundadır. Çünkü, tema ile alakalı genel bilgiler bu CSS dosyasında saklanır. Bunun dışında kullanılan tüm CSS dosyaları “custom CSS” yani özel CSS olarak sayılır. Kullanılan bu özel CSS dosyalarının hepsi kuyruğa eklenmelidir. Bu dosyaları eklemek için de temamızın tüm fonksiyonlarının bulunduğu “functions.php” dosyasında bir kaç kod eklememiz gerekiyor. Bu dosya temanın klasöründe bulunuyor. Örneğin, temanızın adı “rawsly” olsun. O zaman fonksiyonların bulunduğu PHP dosyası “wp-contents/themes/rawsly/functions.php” konumunda olur. Bu dosyayı herhangi bir yazı editörü ile açın ve önce CTRL + F yaparak “wp_enqueue_style” yazısını aratın. Eğer, bu metot kullanıldıysa aramanız sonuç verecektir. Temanızda başka bir CSS dosyası için kuyruğa ekleme işlemi yapıldıysa, hemen altına gerekli kodu ekleyeceğiz. Eğer ekleme yapılmadıysa, arama sonuç vermeyecektir. O zaman da kodu en aşağıya ekleyeceğiz. Örneğin; bu sitenin temasında “wp_enqueue_style” diye arattığımda daha önce bu kodun başka ek CSS dosyaları eklemek için kullanıldığını gördüm.

Şimdi, kodumuz şu:

Kodda gördüğünüz gibi 5 adet parametre bulunuyor: $handle, $src, $deps, $ver, $media. Kodumuzu bu parametrelere göre belirleyeceğiz. Bunlardan ilk ikisi zorunlu parametredir. Kalan üçünü belirtmek zorunda değilsiniz.

$handle = Stil dosyasının adı.

$src = Stil dosyasının konumu.

$deps = Eğer kullandığınız CSS dosyası başka bir CSS dosyasına bağlı olarak çalışıyorsa, burada bağlı olduğu CSS dosyasını belirtmeniz gerekiyor. Bu sayede WordPress önce bağlı olunan CSS dosyasını yüklerken, daha sonra sizin CSS dosyanızı yükler.

$ver = Versiyon numarasını belirtiyor.

$media = Stil dosyası eklerken hangi medyada, yani CSS’in hangi cihazlarda çalıştırılması gerektiğini belirtebiliyorsunuz. Burada “all”, “screen”, “printed” veya “handheld” seçeneklerinden birini kullanabilirsiniz.

Daha önce de belirttiğim gibi, sadece $handle ve $src parametreleri zorunludur. Şimdi, isterseniz iki adet örnek yapalım. Varsayalım ki, “custom.css” adında bir CSS dosyanız var. Bu dosyayı “style.css” dosyanızın olduğu klasöre eklediniz. Yani “wp-contents/themes/rawsly <tema adı>/custom.css” konumunda.

O zaman, kodumuz şöyle olacak:

veya sadece zorunlu alanları doldurmak isterseniz:

Yukarıdaki kodda “get_template_directory_uri()” metodu temanızın konumunu veriyor. Yani bu örnekte “wp-contents/themes/rawsly” konumunu veriyor. Buna ek olarak ‘/custom.css’ yaptığımızda tam olarak istediğimiz konumu belirtmiş oluyoruz. Bu metodu kullanmanız çok önemli. Eğer, metod kullanmadan direk link yazarsanız, temanızın ismini değiştirdiğiniz zaman beklenmeyen sonuçlar alabilirsiniz.

Başka bir örnek daha yapalım. Diyelim ki, eklemek istediğiniz CSS dosyası temanın klasörünün içindeki “css” klasöründe. O zaman kodunuz şöyle değişecek:

Sanırım bu kısım anlaşılmıştır.

Script (JavaScript dosyalarını ekleme)

Benzer işlemi yapacağız. Bu sefer metodumuzun adı “wp_enqueue_script” olacak. Yine “functions.php” dosyamızı açıp bu yazıyı aratıyoruz. Eğer, sonuç verirse hemen altına ekleyebilirsiniz. Eğer, bir şey bulamazsanız dosyanın en sonuna kodu ekleyebilirsiniz.

Gördüğünüz gibi yine 5 parametre var. Yine ilk iki parametre zorunlu olanlar. Diğerleri opsiyonel.

$handle, $src, $deps ve $ver parametreleri CSS ile aynı parametreler.

$in_footer = JavaScript dosyanızın site açıldığı gibi “head” kısmında mı yüklenmesini istersiniz yoksa site açıldıktan sonra “footer” kısmında mı yüklenmesini isterseniz. Bunu eğer “true” yaparsanız, dosyanız sitenin alt kısmında yani “footer” bölgesinde yüklenir. Genelde “footer” kısmında yüklenmesini isteriz. Hemen bir örnek kullanım yapalım. Varsayalım ki elimizde “main” adında bir JavaScript dosyası var. Bu dosya “js” isimli klasörün içinde ve aynı zaman “jQuery” gerektiriyor. Bu dosyanın “footer” kısmında yüklenmesini istiyoruz. Versiyon olarak da “1.0” belirleyelim.O zaman kodumuz şöyle olacak:

Sanırım her şey çok açık. Bunları yaptıktan sonra artık temanızda özel CSS veya JavaScript dosyalarını kullanabileceksiniz.

    Bir Cevap Yazın

    This site uses Akismet to reduce spam. Learn how your comment data is processed.