WordPress’te Özel Komut Dosyaları ve Stil Sayfaları Nasıl Sıkıştırılır

WordPress sitenize özel komut dosyaları veya stil sayfaları eklemek genellikle bir sitenin işlevselliğini, özelliklerini ve tasarımını geliştirmek için yapılır. Temanıza veya eklentinize JavaScript (JS olarak da adlandırılır) ve CSS kodu eklemenin birden çok yolu vardır. Farklı bir makalede, anlaşılması ve uygulanması daha kolay olanlardan kodlama açısından daha yoğun olanlara kadar JS kodu eklemenin tüm yollarını ele aldık. Bu yazıda, bu yöntemlerden biri olan kuyruğa sokmaya daha yakından bakacağız. Daha büyük özel betikler ve stil sayfaları eklemek için en iyisidir, fakat gelişmiş bir kullanıcı yöntemidir. Bu yüzden bu makale, mevcut bilgileri geliştirmek isteyen geliştiriciler veya WordPress kullanıcıları için daha uygundur. Elbette, herhangi bir WordPress kullanıcısı için iyi bir okumadır, fakat bunu denemek istiyor ancak kodlama konusunda rahat değilseniz ek araştırma yaptığınızdan emin olun. Bu makalede özel betikleri ve stil sayfalarını kuyruğa almaya yönelik çeşitli yaklaşımları ele alacağız ve bunlar için örnekler sağlayacağız:

• Ön uç için komut dosyaları ve stil sayfaları ekleme

• Arka uç için komut dosyaları ve stil sayfaları ekleme

• koşullu kuyruğa alma

• Satır içi JS ve CSS kodu ekleme

Sıralama ve WordPress Kancaları

Bu makalenin ana bölümüne geçmeden önce, enqueueing ve WordPress kancalarının ne olduğuna bir göz atalım. Kuyruğa alarak, yani wp_enqueue_script ve wp_enqueue_style işlevlerini kullanarak, WordPress’e özel betikleri ve stil sayfalarını ne zaman ve nereye yükleyeceğini bildirirsiniz. Basitçe söylemek gerekirse, yükleme sürenizi yavaşlatacak olan tüm kodunuzu tek bir yerde bulundurmak yerine, enqueue işlevini kullanırsınız. WordPress’in özel bir kod dosyasıyla ne zaman etkileşime girmesi gerektiğini ve bu dosyanın hangi bağımlılıklara sahip olduğunu belirlemenize yardımcı olur.

WordPress kancaları, geliştiricilerin davranışını değiştirmek ancak dosyalarını olduğu gibi bırakmak için WordPress Çekirdeği ile etkileşime giren eklentilere ve temalara özel kod eklemelerine olanak tanıyan bir özelliktir. Bir geliştirici, özel kod eklemenin yanı sıra, WordPress PHP işlemesi sırasında bu kodun ne zaman çalışacağını seçebilir. Bu kancalar kullanılarak yapılır. Varsayılan bir WordPress kancası seçebilir veya özel bir kanca ekleyebilir ve kullanabilirsiniz. Kanca kullanmak için önce özel bir fonksiyon yazmanız gerekir (genellikle geri arama veya kancalı fonksiyon olarak adlandırılır). Bu işlevler iki türe ayrılır: eylemler ve filtreler. Kancanız için kullandığınız işlev türüne bağlı olarak, eylem kancalarına veya filtre kancalarına sahip olabilirsiniz. Eylemler ve filtreler arasındaki fark, eylemlerin mevcut içeriğe ekleme yapması, filtrelerin ise yalnızca içeriği değiştirebilmesidir. Filtreler kendilerine verilen bağımsız değişkeni düzenler ve her zaman bir değer döndürmesi gerekir. Aksine, eylemlere her zaman bağımsız değişken verilmez ve bir değer döndürmeleri gerekmez.

Ön Uç için Komut Dosyaları ve Stil Sayfaları Ekleme

Artık sıkma ve kancaların ne olduğunu anladığımıza göre, WordPress’e komut dosyaları ve stil sayfaları eklemeye geçebiliriz. İlk olarak kodunuz için ayrı bir dosya oluşturmanız gerekir. Dosyanın uzantısı .js (Javascript ekleniyorsa) veya .css (bir stil sayfası ekleniyorsa) olmalıdır. Daha sonra dosyayı temanızın veya eklenti dizininizin içine yerleştirin. Daha sonra, dosyayı kuyruğa alan bir kod parçacığı oluşturun. Özel betik/stil sayfası dosyanızın konumuna bağlı olarak, onu ana veya alt temanızın functions.php dosyasına veya bir eklenti dosyasının içine eklemeniz gerekir. Kod parçacığı iki farklı kod parçası içerir. İlk parça, dosyayı wp_enqueue_script ve wp_enqueue_style kullanarak sıkıştıran bir işlevdir. İkincisi, iki varsayılan WordPress komut dosyası ve stil sayfası yükleme kancasından birine (wp_enqueue_scripts ve admin_enqueue_scripts) takılan add_action işlevinin kullanımını temsil eder. İlk kanca, sitenin ön ucunu etkileyen komut dosyalarını ve stil sayfalarını yüklemek için, ikincisi ise yönetici kontrol panelini etkileyenler içindir.

İyi kodlanmış bir temanın veya eklentinin herhangi bir geliştiricisi, bu komut dosyası ve stil sayfası ekleme yöntemini tercih eder. Aynı komut dosyalarının ve stil sayfalarının birden çok kez yüklenmesini engeller ve uyumsuzluğa dayalı eklenti çakışmalarını azaltır. Ayrıca geliştiriciler, kodlamalarını daha da standart hale getirmek için yaygın olarak kullanılan betiklerin bir listesinden yararlanabilirler.

Komut Dosyalarını Kuyruğa Al

wp_enqueue_script işlevi, aşağıda açıklayacağımız beş parametreye (argümanlar da denir) sahiptir. Yalnızca ilki zorunludur ve benzersiz olması gerekir.

$handle – benzersiz bir betik adı.

$src – betiğin tam URL yolu veya yol işlevleriyle birleştirilmiş göreli bir yol (örnekler aşağıdadır). Varsayılan değer boş bir dizedir (“).

$deps – kuyruğa almak istediğiniz betiğin bağlı olduğu bir dizi betik/komut dosyası işleyicisi. Varsayılan değer boş bir dizidir (array()).

$ver – komut dosyasının sürümünü belirleyen bir sayı. Değer yanlışsa, otomatik olarak geçerli WordPress sürümüne ayarlanır. Null değerine ayarlandığında sürüm eklenmez. Varsayılan değer yanlıştır.

$in_footer – Komut dosyanızın yerleşimini belirleyen ‘doğru’ veya ‘yanlış’ değeri. “true” olarak ayarlanırsa, komut dosyası kapanış gövde etiketinden () önce yüklenir. ‘false’ olarak ayarlanırsa, şuraya yüklenir. Varsayılan olarak değer “yanlış”tır.

wp_enqueue_script işlevinin kullanımını anlamanıza yardımcı olmak için birkaç örnek ekledik. Aynı durum, bu makaledeki diğer tüm bölümler için de geçerlidir. Fakat devam etmeden önce, makalenin tamamıyla ilgili olan iki temel noktaya değinmemiz gerekiyor.

İşlevin yalnızca bir gerekli bağımsız değişkeni ($handle) olduğundan, başka parametre eklemezseniz, bunun yerine varsayılan değerleri kullanılacaktır.

İkinci nokta, tam URL’leri kullanmaktan kaçınmanız ve yolu alan varsayılan WordPress işlevlerini kullanmayı tercih etmeniz gerektiğidir. Bu durum URL’nin değişmesi durumunda işe yaramaz hale gelecek sabit kodlama statik URL’lerinden kaçınmak için yapılır. Yol alma için birkaç farklı WordPress işlevini kullanabilirsiniz; Aşağıda üç örnek ekledik.

get_template_directory_uri() – sonunda eğik çizgi olmadan ana tema dizini yolunu döndürür,

get_stylesheet_directory_uri() – alt tema dizini yolunu, eğik çizgi olmadan döndürür ve

plugins_url() – bir eklenti dizinine giden yolu döndürür. Bu üç işlevden yalnızca plugins_url() parametreye sahip olabilir (en fazla iki). Bunlar, sonuna eklenmesi gereken ekstra yol ve eklenti dizininde bulunan dosyanın (komut dosyası veya stil sayfası) tam göreli yoludur. İkincisi, ikinci parametre olarak __FILE__ dahil edilerek not edilir.

Örnekler:

• Bu kodu ana temanızın functions.php dosyasına yerleştirerek, theme-script tanıtıcısı ile bir JS betiğini sıkıştırabilirsiniz. Dosya yolu sitenizin-url/wp-content/themes/tema-adı/varlıklar/js/theme_script.js şeklindedir, geri kalan bağımsız değişkenler ise varsayılan değerlerine ayarlanmıştır. Bu durum komut dosyasının başka herhangi bir komut dosyasına bağlı olmadığı, sürümünün geçerli WordPress sürümüyle aynı olduğu ve sıralamanın etiketinden önce yapıldığı anlamına gelir.

function theme_js_script() {
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/assets/js/theme_script.js');
}
add_action('wp_enqueue_scripts', 'theme_js_script');

• Bu kodu, alt temanızın functions.php dosyasına yerleştirerek, tanıtıcı sayacıyla bir JS betiğini kuyruğa alabilirsiniz. Dosya yolu sitenizin-url/wp-content/themes/child-theme-name/js/counter.js şeklindedir ve jquery tanıtıcılı betiğe bağlıdır. Sürümü, mevcut WordPress sürümüyle aynıdır ve etiketinden önce sıralanmıştır.

function counter_script() {
wp_enqueue_script( 'counter', get_stylesheet_directory_uri() . '/js/counter.js', array( 'jquery' ), false, true );
}
add_action('wp_enqueue_scripts','counter_script');

• Bu kodu, alt temanızın functions.php dosyasına yerleştirerek, tanıtıcı sayacıyla bir JS betiğini kuyruğa alabilirsiniz. Dosya yolu sitenizin-url/wp-content/themes/child-theme-name/js/counter.js şeklindedir ve jquery tanıtıcılı betiğe bağlıdır. Sürümü, mevcut WordPress sürümüyle aynıdır ve etiketinden önce sıralanmıştır.

function my_plugin_script() {
wp_enqueue_script('compatible', plugins_url('assets/js/compatible.js', __FILE__), array(), '1.4', true);
}
add_action('wp_enqueue_scripts','my_plugin_script');

Stil Sayfalarını Kuyruğa Al

wp_enqueue_style işlevi ayrıca, çoğu enqueue scripts işleviyle aynı olan beş argümana sahiptir. Yalnızca ilk bağımsız değişken zorunludur ve benzersiz olmalıdır.

$handle – stil sayfasının benzersiz adı.

$src – stil sayfasına giden tam URL yolu veya aynı yol işlevleriyle birleştirilmiş göreli bir yol. Varsayılan değer boş bir dizedir (“).

$deps – sıraya koymak istediğiniz stil sayfasının bağlı olduğu bir dizi stil sayfası/stil sayfası işleyicisi. Varsayılan değer boş bir dizidir (array()).

$ver – bir stil sayfasının sürüm numarası. Değer yanlışsa, otomatik olarak geçerli WordPress sürümüne ayarlanır. Null değerine ayarlandığında sürüm eklenmez. Varsayılan değer yanlıştır.

$media – stil sayfasının hangi medyaya hizmet ettiğini tanımlar. Değerler ortam türleri (ör. ‘ekran’, ‘tümü’ veya ‘yazdır’) olarak veya ortam sorguları kullanılarak (ör. (yön: manzara) veya (maks-genişlik: 1024 piksel)) verilebilir. Varsayılan değer ‘tümü’ şeklindedir.

Örnekler:

• Bu kodu alt temanızın functions.php dosyasına ekleyerek, yolu sitenizin-url/wp-content/themes/child-tema-adı/css/default olan default-style tanıtıcısıyla bir CSS stil sayfasını sıkıştırabilirsiniz.css. Bağımlı stil sayfaları yoktur, sürümü mevcut WordPress ile aynıdır ve tüm medya türleri için tasarlanmıştır.

function default_css_styles() {
wp_enqueue_style('default-style', get_stylesheet_directory_uri() .'/css/default.css');
}
add_action('wp_enqueue_scripts', 'default_css_styles');

• Bu kodu eklentilerin dosyalarından birine ekleyerek, plugin-styles tutamaçlı bir CSS stil sayfasını sıkıştırabilirsiniz ve dosyanın yolu sitenizin-url/wp-content/plugins/plugin-name/assets/css şeklindedir. /plugin.min.css. Bağımlı CSS stil sayfaları yoktur, dosya sürümü 2.1’dir ve CSS tüm ortam türleri için tasarlanmıştır. Varsayılan değer ‘all’dır ve bu parametreyi kod içinde görebilmeniz için kasıtlı olarak örneğe ekledik, fakat atlayabilirsiniz.

function my_plugin_styles() {
wp_enqueue_style('plugin-styles', plugins_url('assets/css/plugin.min.css', __FILE__), array(), '2.1', 'all');
}
add_action('wp_enqueue_scripts', 'my_plugin_styles');

Arka Uç için Komut Dosyaları ve Stil Sayfaları Ekleme

Önceki bölüm, sitenizin ön yüzünü etkileyecek komut dosyalarının ve stil sayfalarının nasıl ekleneceğini açıkladı. Bununla birlikte benzer yöntemleri kullanarak, sitenizin arka ucunu etkilemeyi amaçlayan komut dosyalarını ve stil sayfalarını kuyruğa alabilirsiniz. Daha doğrusu, yönetici kontrol paneliniz. Yönetici kontrol paneliniz için kullanılması amaçlanan komut dosyalarını ve stil sayfalarını sıkıştırmak için WordPress kancasına admin_enqueue_scripts denir. Kancanın doğru kullanımı, önce kuyruğa alma koduyla bir işlev oluşturmayı ve ardından kullanılan argümanlardan ikisi olarak kanca ve işlev adıyla bir eylem eklemeyi içerir.

Örnekler:

wp_enqueue_script ve wp_enqueue_style işlevlerini birden çok kez kullanarak bir işlev içinde birden çok dosyayı (hem betikleri hem de stil sayfalarını) kuyruğa alabilirsiniz. Ayrıca ayrı betikler ve stil sayfaları aynı tanıtıcı ile kuyruğa alınabilir. Her ikisi de temanıza veya eklentinize ek yapı sağlamak için yapılır. Bu örnekte, aynı tutamaçla hem komut dosyası hem de stil sayfası eklenmiştir. Yönetici paneli içinde bir gezinme menüsünün oluşturulmasını etkilemeleri amaçlanmıştır.

function admin_nav_menu_enqueue() {
wp_enqueue_script('nav-menu', get_template_directory_uri(). '/assets/js/nav-menu.js');
wp_enqueue_style('nav-menu', get_template_directory_uri(). '/assets/css/nav-menu.css');
}
add_action('admin_enqueue_scripts', 'admin_nav_menu_enqueue');

koşullu kuyruğa alma

Bazen, yalnızca bir veya daha fazla koşul yerine getirildiğinde belirli bir komut dosyasını veya stil sayfasını sıkıştırmak istersiniz. Bu durumlar için sözde kod aşağıda gösterilmiştir.

If ( /* insert a...