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?!
Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.

Pencarian ke sini:


Related Articles:

Artikel terkait:

About the author

Simple coder

21 Comments

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

x( X-( B-) ;-) :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :D :?: :-| :-x :-o :-P :-D :-? :-)) :-) :-( :-& :) :( :!: 8-O 8-) 8) (Русский) (yahoo) (worship) (woot) (wave) (unsure) (tongue) (thinking) (tears) (taser) (smileydance) (sleeping) (sick) (scenic) (rofl) (rock) (party) (panic) (okok) (nottalking) (ninja) (music) (muscle) (muhaha) (money) (mmm) (lonely) (lol) (lmao) (idiot) (hungry) (highfive) (heart_beat) (heart) (headspin) (hassle) (haha) (gym) (griltongue) (goodluck) (girlkiss) (funkydance) (fish_hit) (eyeroll) (evilsmirk) (evil_grin) (drinking) (doh) (devil) (dance) (cry) (cozy) (coffee) (brokenheart) (bringit) (blush) (bigeyes) (beer) (banana_rock) (banana_ninja) (banana_cool) (applause) (annoyed) (angry) (K) (: