Tentunya kita sudah mengenal jQuery sebagai salah satu tool (biasa disebut JavaScript Library) untuk membuat interaksi website kita lebih oke dengan programming yang lebih simple dibanding javascript biasa. Sangat sesuai dengan slogannya yaitu write less do more. Untuk menambahkan fungsi jquery ke dalam halaman web kita, cara yang biasa dilakukan adalah menambahkan baris sbb:
<script type="text/javascript" src="/path/ke/file/jquery.js"></script>
Hal ini hanya jika file jquery.js kita taruh di hosting kita bersama-sama dengan file-file yang lain. Dalam contoh di atas terdapat pada folder /path/ke/file/ . File jquery.js ini dapat pula kita dapatkan tanpa perlu menaruhnya di hosting kita. Caranya adalah dengan menggunakan file yang dihost di g00gle misalnya:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
atau bisa juga:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
</script>
atau yang dihost di Micr0s0ft:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
Dengan ini kita tak perlu mendownload lalu menguploadnya ke hostingan kita. Mudah bukan?!
jQuery di WordPress
jQuery sudah dimasukkan dalam script standar WordPress tapi tidak dimuat secara default. Dengan kata lain library ini sudah termasuk dalam file instalasi WordPress. Untuk memuatnya kita perlu mengedit template WordPress kita sehingga memanggil fungsi wp_enqueue_script(), contohnya sbb:
<?php wp_enqueue_script('jquery') ?>
Fungsi itu bisa dipanggil berapa kalipun di halaman template manapun dan tak perlu takut akan dobel-dobel, karena WordPress cuma akan memuatnya satu kali saja. Jika kita tengok source hasil keluarannya akan nampak kurang lebih sbb:
<script type='text/javascript' src='http://itx.web.id/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
Baris itu akan otomatis tertampil di dalam tag <head> sesuai dengan halaman di mana script itu dipanggil dengan fungsi wp_enqueue_script() . Jika ingin tampil di semua halaman, panggil saja di halaman template header.php atau footer.php. Mudah bukan?! Selain jQuery core, WordPress (pada versi 2.9.2) juga menyertakan script lain yang dapat dipanggil dengan wp_enqueue_sript() yaitu:
| Nama Script | dipanggil dengan: |
|---|---|
| Scriptaculous Root | scriptaculous-root |
| Scriptaculous Builder | scriptaculous-builder |
| Scriptaculous Drag & Drop | scriptaculous-dragdrop |
| Scriptaculous Effects | scriptaculous-effects |
| Scriptaculous Slider | scriptaculous-slider |
| Scriptaculous Sound | scriptaculous-sound |
| Scriptaculous Controls | scriptaculous-controls |
| Scriptaculous | scriptaculous |
| Image Cropper | cropper |
| SWFUpload | swfupload |
| SWFUpload Degarade | swfupload-degrade |
| SWFUpload Queue | swfupload-queue |
| SWFUpload Handlers | swfupload-handlers |
| jQuery | jquery |
| jQuery Form | jquery-form |
| jQuery Color | jquery-color |
| jQuery UI Core | jquery-ui-core |
| jQuery UI Tabs | jquery-ui-tabs |
| jQuery UI Sortable | jquery-ui-sortable |
| jQuery UI Draggable | jquery-ui-draggable |
| jQuery UI Droppable | jquery-ui-droppable |
| jQuery UI Selectable | jquery-ui-selectable |
| jQuery UI Resizable | jquery-ui-resizable |
| jQuery UI Dialog | jquery-ui-dialog |
| jQuery Interface | interface |
| jQuery Schedule | schedule |
| jQuery Suggest | suggest |
| ThickBox | thickbox |
| jQuery Hotkeys | jquery-hotkeys |
| Simple AJAX Code-Kit | sack |
| QuickTags | quicktags |
| ColorPicker | colorpicker |
| Tiny MCE | tiny_mce |
| Prototype Framework | prototype |
| Autosave | autosave |
| WordPress AJAX Response | wp-ajax-response |
| List Manipulation | wp-lists |
| WP Common | common |
| WP Editor | editor |
| WP Editor Functions | editor-functions |
| AJAX Cat | ajaxcat |
| Admin Categories | admin-categories |
| Admin Tags | admin-tags |
| Admin custom fields | admin-custom-fields |
| Password Strength Meter | password-strength-meter |
| Admin Comments | admin-comments |
| Admin Users | admin-users |
| Admin Forms | admin-forms |
| XFN | xfn |
| Upload | upload |
| PostBox | postbox |
| Slug | slug |
| Post | post |
| Page | page |
| Link | link |
| Comment | comment |
| Admin Gallery | admin-gallery |
| Media Upload | media-upload |
| Admin widgets | admin-widgets |
| Word Count | word-count |
| WP Gears | wp-gears |
| Theme Preview | theme-preview |
Enaknya lagi, jika kita memanggil suatu script yang tergantung pada script lain, maka otomatis semua dependencies akan dipanggil. Misalnya kita memanggil jQuery UI Dialog yang hanya bisa berjalan dengan adanya script jQuery dan jQuery UI Core dengan menggunakan fungsi sbb:
<?php wp_enqueue_script('jquery-ui-dialog') ?>
Maka kita tak perlu lagi memanggil script jQuery ataupun jQuery UI Core karena keduanya otomatis terpanggil. Mudah bukan?!
Menggunakan jQuery di WordPress
Misalnya kita akan membuat suatu link berubah warna jika mouse dihover di atasnya, lalu warnanya memudar secara perlahan jika mouse ditarik keluar. Hasilnya dapat dilihat di theme Albizia pada link di bagian navigasi, sidebar, dan footer. Scriptnya sbb:
$(function(){
$('#sidebars a,#footbar a,#menu a').hover(
function(){$(this).stop().animate({'color':'red'},20)},
function(){$(this).stop().animate({'color':'white'},500)})
});
Script tersebut, jika dijalankan pada halaman web pada umumnya, maka akan jalan, tapi tidak di WordPress. Karena library jQuery yang dipanggil oleh WordPress menggunakan mode “no conflict”. Hal ini diperlukan oleh WordPress untuk menghindari konflik dengan library-library lain yang mungkin juga menggunakan shortcut tanda ‘$’. Agar kita bisa menggunakan shortcut ‘$’ untuk jQuery, kita bisa menggunakan wrapper sbb:
jQuery(document).ready(function($) {
// $() bisa digunakan sebagai alias dari jQuery() di dalam fungsi ini
});
Wrapper tersebut akan membuat script dalam fungsi tersebut dieksekusi setelah halaman selesai dimuat. Jika oleh karena satu dan lain hal kita ingin script dieksekusi segera (tanpa menunggu DOM ready), maka kita dapat memakai wrapper sbb:
(function($) {
// $() bisa digunakan sebagai alias dari jQuery() di dalam fungsi ini
})(jQuery);
Jadi kita akan melihat script berikut dapat dijalankan di WordPress dengan benar:
(function($) {
$(function(){
$('#sidebars a,#footbar a,#menu a').hover(
function(){$(this).stop().animate({'color':'red'},20)},
function(){$(this).stop().animate({'color':'white'},500)})
});
})(jQuery);
Mudah bukan?!