Bir önceki WordPress makalemde WP-CSS isimli eklentiden bahsetmiştim ve bu plugin aracılığı ile Css dosyalarını nasıl sıkıştırabileceğiniz konusunda bilgi vermiştim. Şimdi ise aynı işlemleri Javascript dosyalarımıza yapabilmemiz için WP-JS eklentisinden bahsedeceğim.

Ufak tefek farklılıklar olsada kullanım şekli aşağı yukarı aynı diyebilirim.

WP-JS

• ilk olarak buraya tıklayarak WP-JS pluginini bilgisayarınıza indiriyoruz ve zip dosyasından çıkartıyoruz.
• ikinci olarak indirdiğimiz dosyayı ZIP ‘ten çıkartarak herhangi bir FTP proğramı ile wordpress blogumuzun wp-content/plugins/ klasörüne upload yapıyoruz.
• Sonra WordPress Admin paneline girerek plugini aktif yapıyoruz. (Rutin işlemler burada sona eriyor)
• WP-JS eklentisini aktif ettiğimizde wp-content/plugins/wp-js klasörünün içinde cache isimli yeni bir klasör oluştuğunu göreceksiniz. Bu klasöre yazma izni veriyoruz (bir diğer değişle mod 777 yapıyoruz)
• Son olarak temamızda yer alan .js dosyalarının baglantılarını header.php dosyasını açarak <?php wp_js('dizin/javascript.js'); ?> şeklinde düzenliyoruz.

Normal de WordPress temalarının Js dosyaları aşağıda ki şekilde eklenmiştir;

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/javascipt.js"></script>

böyle bir kodu şu şekilde değiştirmemiz gerekiyor;

<script type="text/javascript" src="<?php wp_js('js/javascipt.js'); ?>"></script>

Ayrıca Php ‘den de performans sağlamak için tüm JavaScript dosyalarımızı birleştirebiliriz.

Örneğim tema dosyamızda aşağıdaki JavaScript dosyaları olduğunu farzedelim;

/javascript.js
/js/javascript1.js
/js/javascript2.js
/js/javascript3.js

Yukarıdaki .js dosyalarını aşağıdaki gibi temamıza ekleyebiliriz;

<script src="<?php wp_js('javascript.js, js/javascript1.js, js/javascript2.js, js/javascript3.js'); ?>" type="text/javascript"></script>

Burada dikkat etmeniz gereken şey .js dosyalarınızı, temamızın bulunduğu klasörün kök dizininde göre çağırmamız gerekiyor. Bu konuda aklınızda soru işareti kalmaması için yukarıdaki örnekte javascript.js dosyası direk en üst klasörde ve diğer 3 dosya ise js isimli bir alt klasörde yeralacak şekilde ayarladım.

veya aynı dosyaları aşağıdaki gibi çağırabilirsiniz;

<script src="<?php wp_js('javascript.js'); ?>" type="text/javascript"></script>
<script src="<?php wp_js('js/javascript1.js'); ?>" type="text/javascript"></script>
<script src="<?php wp_js('js/javascript2.js'); ?>" type="text/javascript"></script>
<script src="<?php wp_js('js/javascript3.js'); ?>" type="text/javascript"></script>

İlk şekliyle çağırmanız daha avantajlı olsada bazen yukarıdaki gibi dosyaları temanıza dahil etmeniz gerekebilir. Her iki kullanım şeklide aynı sonucu verecektir bu konuda tercih sizin.

WP-JS eklentisinin orjinal sitesinde ki açıklamaya göre builder.js, controls.js, dragdrop.js, effects.js, prototype.js, scriptaculous.js, slider.js and sound.js isimli 247kb boyutundaki toplam 8 javascript dosyasına yapalan testte %82 oranında dosyaların sıkıştırıldığı görülmüştür.

İlgili tabloyu aşağıda görebilirsiniz;

Makalenin başında belirttiğim gibi WP-CSS eklentisi ile aynı işlemleri CSS dosyalarına uygulayarak style dosyalarınızdan da performans sağlayabilirsiniz. WP-CSS eklentisinin kurulumu ve kullanımı için buraya tıklayarak bilgi edinebilirsiniz.