Cara menggunakan dequeue jquery wordpress

//Remove JQuery migrate
 function remove_jquery_migrate[ $scripts ] {
 if [ ! is_admin[] && isset[ $scripts->registered['jquery'] ] ] {
 $script = $scripts->registered['jquery'];
 
 if [ $script->deps ] { // Check whether the script has any dependencies
 $script->deps = array_diff[ $script->deps, array[ 'jquery-migrate' ] ];
 }
 }
 }
 
 add_action[ 'wp_default_scripts', 'remove_jquery_migrate' ];

Mengetahui cara yang tepat untuk memasukkan file JavaScript dan CSS pada tema dan plugin WordPress anda sangat penting bagi perancang dan pengembang. Jika anda tidak mematuhi praktik terbaik, anda berisiko konflik dengan tema dan plugin lain, dan berpotensi menciptakan masalah yang mudah dihindari. Artikel ini dimaksudkan sebagai referensi untuk menggunakan dengan baik dengan yang lainnya.

Sebelum memulai, anda dapat melihat-lihat Tema WordPress dan Plugin WordPress kami, jika anda memerlukan dalam memulai proyek anda secara profesional.

Dan jika setelah membaca tutorial ini, anda masih belum yakin bagaimana cara memasukkan file JavaScript dan CSS dengan benar, mungkin perlu memesan beberapa layanan WordPress yang tersedia di Envato Studio.

Dari proses instalasi hingga penyesuaian, atau bahkan SEO dan pengoptimalan kecepatan, anda bisa mendapatkan pakar WordPress profesional untuk menyiapkan semuanya dengan benar dari awal.

Praktik Terbaik Membuat Semua Orang Bahagia

Jika anda pernah mengembangkan tema atau plugin untuk WordPress, atau bekerja dengan yang dibuat orang lain, anda mungkin menemukan beberapa metode yang berbeda untuk memasukkan JavaScript dan CSS. Meskipun ada beberapa metode yang mungkin muncul untuk bekerja dalam rangkaian situasi tertentu, namun ada satu metode utama yang direkomendasikan di WordPress Codex.  Cara yang disukai ini akan memastikan tema atau plugin anda bekerja dalam semua kasus, dengan asumsi lainnya juga dengan cara kode yang benar.

Ada juga beberapa kesalahpahaman tentang apa yang sebenarnya Codex katakan tentang ini, yang akan saya bantu klarifikasi.

Apa yang ada di dalam kotak?

Saat anda mendownload WordPress, pilihan library JavaScript secara umum sudah disertakan dan dapat anda gunakan untuk pengembangan JavaScript anda. Daftar library yang disertakan dapat ditemukan di artikel WordPress Codex wp_enqueue_script.

Semua library tersebut disertakan, tapi secara default WordPress hanya memuat yang dibutuhkan saja, dan hanya jika dibutuhkan diadmin. Jika anda menulis JavaScript yang menggunakan salah satu library ini, anda perlu memberi tahu WordPress bahwa script anda memerlukan library yang dimuat terlebih dahulu.

Memberitau WordPress Tentang Script Anda dan Apa yang Dibutuhkan

Beberapa hal yang perlu dipikirkan saat anda membuat kode JavaScript untuk WordPress adalah:

• Apakah ada library yang bisa saya pakai?
• Dapatkah saya menggunakan versi yang disertakan?
• Apakah saya perlu memuat skrip saya pada front-end dan admin?
• Halaman front-end dan admin apa yang perlu saya muatkan script saya?

Menjawab pertanyaan ini membantu anda mengetahui apa yang perlu anda lakukan untuk mendaftar dan memuat script anda. Hal ini dilakukan dengan menggunakan fungsi WordPress yang disebut wp_register_script, dan inilah penggunaannya menurut WordPress Codex:

wp_register_script[ $handle, $src, $deps, $ver, $in_footer ];

Jadi, apa variabel ini dan apakah kita membutuhkannya setiap saat? [Ini tercakup dalam halaman Codex, jadi saya akan singkat dan menggunakan bahasa Inggris yang sederhana]

• $handle - apa yang akan anda gunakan untuk merujuk ke script khusus ini dimanapun anda mungkin perlu enqueue itu, dan anda harus menyertakan variabel ini paling tidak
• $src - path ke file sumber dalam plugin atau tema anda
• $deps - sebuah array yang berisi $handle untuk script lain yang dibutuhkan script anda [yaitu dependensi]
• $ver - nomor versi untuk script anda, yang dapat digunakan untuk cache-busting. Secara default, WordPress akan menggunakan nomor versinya sendiri sebagai nomor versi untuk script anda
• $in_footer - apakah anda ingin skrip anda dimuat di footer?  Tetapkan ini ke true atau false.  Ini false secara default, jadi dimuat di header dimana adalah wp_head[], dan jika anda menentukan true itu akan memuat dimana wp_footer[] muncul dalam tema

Apa itu "Cache-Busting"?

Browser mengingat skrip dan stylesheet yang telah mereka unduh untuk situs tertentu berdasarkan URL skrip dan stylesheet.  Jika anda mengubah URL, bahkan hanya dengan menambahkan querystring, browser menganggap itu file baru dan mendownloadnya.

Ok, Jadi Mari Coba Beberapa Contoh

Berikut adalah contoh paling dasar untuk memuat custom script:

function wptuts_scripts_basic[]
{
  // Register the script like this for a plugin:
	wp_register_script[ 'custom-script', plugins_url[ '/js/custom-script.js', __FILE__ ] ];
	// or
	// Register the script like this for a theme:
	wp_register_script[ 'custom-script', get_template_directory_uri[] . '/js/custom-script.js' ];

	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script[ 'custom-script' ];
}
add_action[ 'wp_enqueue_scripts', 'wptuts_scripts_basic' ];

Pertama, kita mendaftarkan scriptnya, jadi WordPress tahu apa yang sedang kita bicarakan. Cara untuk menemukan path untuk file JavaScript kita berbeda apakah kita mengkodekan plugin atau tema, jadi saya menyertakan contoh keduanya di atas. Kemudian kami membuat antrian [queue] untuk ditambahkan ke HTML untuk halaman saat dibuat, secara default  dimana wp_head[] ada di dalam tema.

Output yang kita dapatkan dari contoh dasar itu adalah:

Sekarang jika script anda bergantung pada salah satu library yang disertakan dengan WordPress, seperti jQuery, anda dapat membuat perubahan yang sangat sederhana pada kode:

function wptuts_scripts_with_jquery[]
{
	// Register the script like this for a plugin:
	wp_register_script[ 'custom-script', plugins_url[ '/js/custom-script.js', __FILE__ ], array[ 'jquery' ] ];
	// or
	// Register the script like this for a theme:
	wp_register_script[ 'custom-script', get_template_directory_uri[] . '/js/custom-script.js', array[ 'jquery' ] ];

	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script[ 'custom-script' ];
}
add_action[ 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' ];

Catatan: Secara default, jQuery dimuat dengan noConflict untuk mencegah bentrokan dengan library lain [seperti Prototype]. Lihat bagian noConflict Codex jika anda tidak tahu bagaimana menghadapinya.

Lihat apa yang saya lakukan di sana? Anda hanya menambahkan sebuah array dengan 'jquery' handle sebagai dependensi. Ini menggunakan array di sini, karena script anda bisa memiliki banyak dependensi.  Jika skrip anda menggunakan jQuery dan jQuery UI, anda akan menambahkan jQuery UI ke array dependensi anda, seperti array[ 'jquery', 'jquery-ui-core' ]

Jadi sekarang hasilnya telah berubah, dan kita bisa melihat bahwa jQuery juga telah ditambahkan ke dalam  pada halaman:

Mari kita coba contoh dengan semua fitur tambahan:

function wptuts_scripts_with_the_lot[]
{
	// Register the script like this for a plugin:
	wp_register_script[ 'custom-script', plugins_url[ '/js/custom-script.js', __FILE__ ], array[ 'jquery', 'jquery-ui-core' ], '20120208', true ];
	// or
	// Register the script like this for a theme:
	wp_register_script[ 'custom-script', get_template_directory_uri[] . '/js/custom-script.js', array[ 'jquery', 'jquery-ui-core' ], '20120208', true ];

	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script[ 'custom-script' ];
}
add_action[ 'wp_enqueue_scripts', 'wptuts_scripts_with_the_lot' ];

Ok, jadi saya sekarang menambahkan sebuah versi dan menentukan bahwa script ini perlu dimuatkan di footer.  Untuk nomor versi, saya telah memilih untuk menggunakan tanggal hari ini karena mudah untuk melacak, namun anda dapat menggunakan penomoran versi yang anda sukai.  Output untuk yang satu ini sedikit berbeda juga, jQuery adalah output di dan script kita bersama dengan jQuery UI adalah output sesaat sebelum , seperti ini:

...

...


...

Mendapatkan Prioritas Teratur Anda

Beberapa orang mungkin memilih untuk tidak menggunakan metode enqueuing yang tepat karena mereka merasa tidak memiliki kendali atas urutan skrip yang dimuat. Misalnya, dalam tema yang menggunakan modernizr, pemilik tema mungkin ingin memastikan bahwa modernizr telah dimuat sejak awal.

Sesuatu yang belum saya sebutkan tadi adalah detail lebih lanjut tentang bagaimana fungsi add_action bekerja, karena inilah dimana kita bisa menerapkan sedikit pengaruh terhadap suatu urutan. Inilah penggunaan fungsi sesuai dengan halaman WordPress Codex:

add_action[ $tag, $function_to_add, $priority, $accepted_args ];

Perhatikan bahwa sering, dan sampai sekarang dalam artikel ini, hanya $tag dan parameter $function_to_add yang digunakan.  Parameter $priority secara default menjadi 10, dan parameter $accepted_args accept_args secara default menjadi 1. Jika kita ingin script atau style kita dikenali lebih awal, kita cukup menurunkan nilai $priority dari default.  Sebagai contoh:

function wptuts_scripts_important[]
{
	// Register the script like this for a plugin:
	wp_register_script[ 'custom-script', plugins_url[ '/js/custom-script.js', __FILE__ ] ];
	// or
	// Register the script like this for a theme:
	wp_register_script[ 'custom-script', get_template_directory_uri[] . '/js/custom-script.js' ];

	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script[ 'custom-script' ];
}
add_action[ 'wp_enqueue_scripts', 'wptuts_scripts_important', 5 ];

Outputnya akan sama seperti yang pernah kita lihat sebelumnya, tapi akan terjadi lebih awal pada dokumen HTML.

Meng-override Default Library dan Menggunakan Content Delivery Networks

Mungkin ada saat-saat ketika anda ingin menggunakan versi yang berbeda dari sebuah library yang disertakan dengan WordPress. Mungkin anda ingin menggunakan versi mutakhir atau anda tidak ingin menunggu rilis WordPress berikutnya sebelum menggunakan versi stabil jQuery terbaru. Alasan lain mungkin anda ingin memanfaatkan versi library CDN dari Google.

Penting untuk dicatat bahwa ini hanya boleh dilakukan pada plugin atau tema yang digunakan di situs yang akan anda rawat [maintenance] secara pribadi. Setiap plugin atau tema yang anda rilis untuk penggunaan umum harus menggunakan library yang disertakan dengan WordPress.

"Mengapa?!", Saya dengar kamu bertanya. Untuk alasan sederhana bahwa anda tidak mengontrol situs tersebut. Anda tidak tahu plugin dan tema lain apa yang bisa digunakan disana, dan anda tidak tahu seberapa sering mereka memperbarui plugin atau tema anda.  Menggunakan library yang dikemas dengan WordPress adalah pilihan teraman.

Karena itu, jika anda ingin melakukan ini di situs yang anda kontrol, inilah cara melakukannya:

function wptuts_scripts_load_cdn[]
{
	// Deregister the included library
	wp_deregister_script[ 'jquery' ];
	
	// Register the library again from Google's CDN
	wp_register_script[ 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array[], null, false ];
	
	// Register the script like this for a plugin:
	wp_register_script[ 'custom-script', plugins_url[ '/js/custom-script.js', __FILE__ ], array[ 'jquery' ] ];
	// or
	// Register the script like this for a theme:
	wp_register_script[ 'custom-script', get_template_directory_uri[] . '/js/custom-script.js', array[ 'jquery' ] ];

	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script[ 'custom-script' ];
}
add_action[ 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' ];

Jadi pertama-tama, saya daftarkan ulang versi library yang disertakan, jika tidak, konflik diantara versi yang berbeda dapat dikenalkan. Kemudian daftarkan versi alternatifnya, dengan menggunakan penanganan yang sama, dan saya telah memilih untuk menentukan null sebagai versinya [sudah ada di URL!] dan tidak ditentukan di footer. Sisa dari kode kita adalah sama, karena kita bergantung pada script apa pun yang menggunakan penanganan 'jquery'.  Output yang kita dapatkan sekarang terlihat seperti:

Catatan: Salah satu alasan mengapa ini adalah ide yang buruk untuk dilakukan diplugin atau tema untuk rilis secara publik, adalah bahwa semua plugin dan tema lain yang digunakan pada situs ini sekarang harus menggunakan versi jQuery ini. Juga, versi jQuery yang baru terdaftar tidak memiliki aturan noConflict, jadi jika ada plugin atau script tema lainnya yang menggunakan Prototipe misalnya, ini akan menghancurkan banyak hal.

Jangan serakah

Sejauh ini kita belum menyebutkan apapun tentang bagaimana melakukan semua ini di admin, hanya di front-end.  Perbedaan utamanya adalah tindakan apa yang akan digunakan.  Sebagai ganti add_action[ 'wp_enqueue_scripts', 'wptuts_scripts_basic' ]; yang kita gunakan untuk front-end, tindakan untuk admin adalah add_action[ 'admin_enqueue_scripts', 'wptuts_scripts_basic' ];

Hal penting yang harus dilakukan untuk front-end dan admin adalah selektif tentang halaman mana yang memuat skrip anda. Jika plugin atau tema anda memiliki script yang hanya melakukan sesuatu disatu front-end atau halaman admin, seperti halaman theme options, atau mungkin halaman dengan widget tertentu, anda hanya perlu memuat script anda pada halaman itu.  Tidak ada gunanya menghalangi semuanya dan memuat script di halaman tempat mereka tidak digunakan!

Ada contoh bagus di WordPress Codex tentang cara memuat script hanya pada halaman plugin.  Karena plugin dan tema dapat sangat bervariasi dalam hal penulisannya, saya tidak akan membahas secara spesifik tentang bagaimana menjadi pemilih tentang halaman mana anda memuat script, namun penting untuk disebutkan bahwa anda menyadarinya saat anda sedang melakukan pengkodean.

Itu Script, Sekarang Styles

Proses untuk styles hampir sama persis dengan proses script. Hal ini dilakukan dengan menggunakan fungsi WordPress yang disebut wp_register_style, dan inilah penggunaannya menurut WordPress Codex:

wp_register_style[ $handle, $src, $deps, $ver, $media ];

Perhatikan bahwa satu-satunya perbedaan di antara wp_register_script dan wp_register_style adalah bahwa sebagai ganti parameter $in_footer, kami memiliki parameter $media. Parameter ini dapat diatur ke salah satu dari berikut ini: 'all', 'screen', 'handheld', dan 'print', atau jenis media W3C yang dikenali lainnya

Jadi contoh bagaimana anda mungkin bisa melakukan enqueue pada style adalah:

function wptuts_styles_with_the_lot[]
{
	// Register the style like this for a plugin:
	wp_register_style[ 'custom-style', plugins_url[ '/css/custom-style.css', __FILE__ ], array[], '20120208', 'all' ];
	// or
	// Register the style like this for a theme:
	wp_register_style[ 'custom-style', get_template_directory_uri[] . '/css/custom-style.css', array[], '20120208', 'all' ];

	// For either a plugin or a theme, you can then enqueue the style:
	wp_enqueue_style[ 'custom-style' ];
}
add_action[ 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' ];

Ini adalah contoh yang cukup komprehensif, dengan memanfaatkan sebagian besar parameter, dan output yang dihasilkannya terlihat seperti:

Jadi, Mengapa tidak semua orang sudah melakukan hal ini?

Pertanyaan bagus, dan pertanyaan lain yang saya kira mungkin anda tanyakan adalah, "Apa yang membuat anda berpikir bahwa ini adalah cara yang benar dan bukan hanya preferensi anda?". Intinya jawabannya adalah bahwa ini adalah pendekatan yang direkomendasikan oleh WordPress. Ini memastikan bahwa setiap kombinasi plugin dan tema harus dapat bekerja sama dengan baik dan tanpa adanya penggandaan.

Saya telah melihat beberapa tema dan kerangka kerja di sekitar tempat yang menggunakan  dan  pada header.php mereka, dan bahkan footer.php, file-file memuat script dan style untuk tema itu sendiri. . Tidak ada alasan untuk melakukan hal-hal seperti ini.  Seperti yang telah saya tunjukkan di atas, sangat mungkin untuk memprioritaskan script dan style dan menominasikan apakah mereka memuat di header atau footer dari kenyamanan dan keamanan functions.php anda. Manfaatnya karena tema / kerangka kerja anda akan bekerja dengan plugin / child theme lainnya yang lebih luas.

Salah satu contohnya adalah memuat jQuery menggunakan , yang mungkin tampak bekerja dengan baik, namun ini sebenarnya bisa menyebabkan jQuery dimuat dua kali! Loading jQuery dengan cara ini tidak akan menghentikan WordPress untuk memuat jQuery versinya untuk plugin lainnya, karena versi WordPress ada dalam mode noConflict secara default, dan sebuah plugin dapat menentukannya sebagai dependensi. Jadi sekarang anda akan memiliki jQuery yang bekerja untuk mode noConflict dan $, dan juga mungkin merusak plugin yang menggunakan library Prototipe.

Kesimpulan

WordPress adalah sistem yang fantastis, dan telah berkembang dengan banyak pemikiran. Jika ada mekanisme yang tersedia untuk melakukan sesuatu, seringkali ide bagus untuk menggunakannya. Saat mengembangkan plugin dan tema anda, cobalah mengingat kode secara serius dan untuk bermain dengan baik dengan orang lain.

Apa pendapat anda tentang penggunaan wp_enqueue_script dan keterkaitan functions dan actions?  Apakah anda tahu ada contoh dimana hal itu dilakukan dengan tidak benar? Apakah anda tahu alasan untuk tidak mengikuti saran di atas?

Jika anda membutuhkan solusi yang siap pakai, anda bisa melihat-lihat Tema Wordpress dan Plugin Wordpress di Envato Market.