Kategori
WordPress

Menggabungkan jQuery dan blog WordPress kita:

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?!

Oleh itx

Simple coder

21 replies on “Menggabungkan jQuery dan blog WordPress kita:”

saya sudah masuk ke wp-admin >Appearance>Editor
lalu edit, kemudian setelah saya edit di wordpress 3.0 kenapa tidak ada untuk save-nya,

Mohon bantuanya
Trims
D3nd1 🙄

Kalo gak ada tombol update untuk save di bawah teks area, mas haru merubah mode permission ( Chmod ) file tersebut. Bisa melalu file manager hosting anda, atau melalu ftp client. Kalo udah, pasti nongol deh tombolnya.

itx, tolong di bantu , saya masih newbie masalah bloger wordpress , cara mudah untuk mengedit header yang saya ingin di wordpress dimana ? mohon bantunanya

trims
D3nd1

JQuery ..
kalo pake Plug In Use Google Libraries .. terus yg di sisipkan di header.php yang mana om? ini udah tak install plug in nya. tolong, jika harus jawaban nya panjang kirimkan ke email aja om. ato add me on FB ery yulianto. thx alot yah.om

di file theme ybs.
kalo mau dimasukkan di semua halaman berarti edit saja header.php.

Wah… makasih untuk informasinya…
maaf mau tanya…
jquery menggunakan bahasa javascript ya? kalau di web browser di client di disable.. brarti aksi jquery-nya tidak terlihat ya?
thanx y…:)

kang mau tanya kalau upload file jquery dihosting gimana caranya,coba liat diblog ku sidebar kanan disitu ada gambar yang nyecroll itu pakai jquery tapi itu hasil upload orang lain,makanya blog ku kalau dibuka selalu lelet … mohon dibalas yah

kalo pake wordpress ya tinggal ngasih baris ini di file header.php. gak usah ngupload2 lagi.

hasil upload orang lain gimana maksudnya? (eyeroll) ada yg tau passwordmu? (thinking)

ya tinggal ngedit theme-nya. kalo di mau muncul di halaman depan yang diedit `index.php`, kalo di halaman post ya brarti `single.php`, kalo page ya di `page.php`…

Tinggalkan Balasan

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.