Find An Answer

For Your Most Questions

Free Download

The Most Wanted Files

Hire Me

To Make Your Idea Comes True

Join My Life

By Follow My Stupid Journal

Cara Yang Bener Nambahin Jquery di Wordpress

Tuesday, April 30, 2013
Kalo mau, download saja jQuery dan letakin atau unggah ( upload ) file tersebut di server hosting anda kemudian taruh link file jquery itu dibagian <head> pada file header.php theme anda. Tapi hal tersebut kadang menghasilkan pesan kesalahan yang tidak
semestinya ada karena biasanya Mesin Wordpress sudah memuat jQuery tersendiri atau bahkan kemungkinannya beberapa plugin sudah memuatnya.

Jadi gimana caranya kita masukin kode jquery milik kita ke dalam wordpress tanpa mengganggu fungsi atau jquery yang lain, gimana cara nambahin jquery dengan benar dan aman? Sebenarnya cuma tinggal butuh satu baris kode yang kita butuhkan dan letakkan didalam tag <head> yang ada pada file header.php theme anda seperti berikut :


<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>


Kemungkinan pada theme yang kita buat memiliki sebuah fungsi yaitu wp_head, oleh karena itu pastikan bahwa kita meletakkan atau memanggil fungsi wp_enqueue_script SEBELUM itu. Dan sekarang kita siap untuk memanggil file jQuery milik kita sendiri, SETELAH fungsi wp_head.

<script type="text/javascript"
   src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>

Kita siap menggila, namun sampai disana masih ada beberapa pertimbangan. Misalnya, bersiap-siap atas kemungkinan yang terjadi nanti bakal ada konflik antar library yang lain. Sangat tidak disarankan untuk menggunakan Javascript Library lebih dari satu.

Untuk berjaga-jaga, kita dapat menambahkan mode “no conflict” dan menggunakan nama alias yang berbeda untuk pemanggilan jQuery. Dikasus ini menggunakan alias “$j” menggantikan alias “$” milik jQuery aslinya. Alias standar “$”, misalnya, akan konflik dengan Prototype. Contoh langkah aman agar jQuery tidak terjadi konflik bisa dengan cara seperti ini :

var $j = jQuery.noConflict();

$j(function(){

    $j("#sidebar li a").hover(function(){
     $j(this).stop().animate({
      paddingLeft: "20px&"
     }, 400);
    }, function() {
     $j(this).stop().animate({
      paddingLeft: 0
     }, 400);
    });

});

Oke, semoga tutorial ini membantu buat kalian yang ingin membuat wordpress theme..

No comments :

Post a Comment