Apakah Anda ingin menguasai cara menambahkan kode jQuery di WordPress? Jadi lanjutkan membaca untuk mempelajari lebih lanjut.

Terlepas dari kenyataan bahwa WordPress telah tersedia untuk sementara waktu, dan penambahan skrip tema dan plugin juga telah ada untuk sementara waktu, masih ada beberapa kebingungan mengenai metode mana yang digunakan. gunakan untuk menambahkan skrip di WordPress.

Jadi kami akan mencoba menjelaskan beberapa hal.

Karena jQuery adalah Kerangka JavaScript yang paling banyak digunakan, kami akan menunjukkan cara menambahkannya ke tema atau a WordPress Plugin.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Cara memasang blog WordPress dalam 7 langkah et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Mode kompatibilitas JQuery

Sebelum kita mulai menambahkan skrip di WordPress, mari kita jelajahi mode kompatibilitas jQuery. WordPress dilengkapi dengan salinan jQuery, yang dapat Anda gunakan dengan kode Anda. Ketika WordPress jQuery dimuat, ia menggunakan mode kompatibilitas, yang merupakan mekanisme untuk menghindari konflik dengan perpustakaan lain.

Cari tahu apakah dia Haruskah jQuery dihapus dari tema dan plugin Anda WordPress ?

Ini berarti Anda tidak dapat menggunakan tanda dolar secara langsung seperti yang Anda lakukan pada proyek lain. Saat menulis jQuery di WordPress, Anda harus menggunakan jQuery sebagai gantinya.

Lihatlah kode di bawah ini untuk melihat apa yang saya maksud:

/ * Mode normal * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Mode kompatibilitas * / jQuery ('. Hideable'). Aktif ('klik', fungsi () {jQuery (ini) .hide ();})

Yang perlu Anda ketahui adalah bahwa dengan beberapa modifikasi, Anda dapat menggunakan tanda dolar lagi. Menggunakan setiap kali "jQuery" pada semua kode Anda akan menyulitkan banyak penulisan.

Lihat Kode 10 editor untuk pengembang WordPress

Sekadar rekap, jika Anda tahu jQuery, tanda $ hanyalah alias untuk jQuery (), lalu alias untuk fungsi. Sintaks dasarnya adalah: $ (Selector) .action () :

• Tanda dolar untuk mendefinisikan jQuery
• A (selektor) untuk "menemukan" elemen HTML
• Tindakan jQuery () untuk dilakukan pada elemen-elemen ini

Jika Anda memuat skrip Anda di footer, Anda akan dapat membungkus kode Anda dalam fungsi anonim. Berikut cara melakukannya:

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Jika Anda ingin menambahkan skrip Anda pada header (apa yang harus Anda hindari jika memungkinkanAnda bisa membungkusnya dalam fungsi yang berjalan saat dokumen siap.

Temukan juga dengan cara Cara menambahkan Fasilitasi kode di WordPress tanpa merusak situs web Anda

jQuery (dokumen) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

Cara menautkan skrip Anda ke jQuery

Sekarang Anda dapat menulis kode jQuery yang valid di WordPress, kami akan menautkan pekerjaan kami ke situs web kami. Di WordPress prosesnya disebut ' enqueueing '(sistem ekor). Untuk situs web HTML biasa, kita harus menggunakan tagnaskah> untuk menambahkan skrip.

WordPress dapat melakukan hal yang sama, tetapi kami akan menggunakan fitur khusus WordPress untuk mencapai ini. Dengan cara ini, WordPress mengelola semua dependensi kami untuk kami.

Jika Anda sedang mengerjakan suatu tema, Anda dapat menggunakan fungsinya wp_enqueue_script () dalam file Anda functions.php mengajukan. Inilah cara Anda melakukannya:

function my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Fungsi ini membutuhkan lima argumen. Yang pertama dapat Anda gunakan untuk merujuk ke skrip, yang kedua adalah lokasi file skrip, parameter ketiga adalah larik dependensi.

Saya menambahkan jQuery sebagai dependensi karena skrip menggunakannya. Jika Anda membuat skrip yang bergantung pada "saya-besar-script Anda perlu menambahkannya ke daftar dependensi sehingga WordPress mengetahui file mana yang perlu dimuat terlebih dahulu.

Temukan juga Cara memuat JavaScript pada WordPress

Parameter keempat adalah nomor versi dan yang kelima memungkinkan WordPress mengetahui di mana harus meletakkan skrip. Secara default, skrip akan dimuat di header, yang merupakan praktik buruk, karena memperlambat pemuatan halaman situs Anda (browser menghentikan semua pemuatan halaman, setiap kali ada blok est rencontré). Anda harus memuat semua skrip Anda ke dalam footer, jika mungkin dengan membuat parameter kelima " benar '.

Bagaimana menambahkan script pada dashboard

Anda juga dapat menambahkan skrip di dasbor. Fungsi yang digunakan sama persis, Anda hanya perlu menggunakan " kait "berbeda. Lihat contoh di bawah ini:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Alih-alih menggunakan wp_enqueue_scripts kita harus menggunakan admin_enqueue_scripts, dan itu saja!

Penggunaan tag bersyarat

Gunakan tag kondisional sehingga Anda hanya memuat skrip Anda saat diperlukan. Ini paling sering digunakan di dasbor, tempat Anda ingin menggunakan skrip hanya pada halaman tertentu. Ini menghemat bandwidth dan waktu pemrosesan yang berarti waktu muat lebih cepat untuk situs web Anda.

Temukan juga milik kami Plugin 10 WordPress untuk meningkatkan kecepatan memuat blog Anda

Lihatlah yang admin_enqueue_scripts dokumentasi di WordPress Codex untuk informasi lebih lanjut.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Peta Dunia Interaktif

Peta Dunia Interaktif adalah WordPress Plugin yang membantu Anda membuat peta sebanyak yang Anda inginkan, dengan penanda, benua, negara, atau wilayah yang interaktif dan berwarna.

Ini sepenuhnya kompatibel dengan versi baru WordPress dan Visual Composer. Berkat plugin ini, Anda dapat menampilkan beberapa jenis wilayah seperti: peta seluruh dunia, benua atau anak benua (Afrika, Eropa, Amerika, Asia, Oceania dan semua sub-benua mereka), sebuah negara, sebuah negara dibagi dengan wilayahnya, negara bagian Amerika Serikat, Amerika Serikat dibagi dengan wilayah metropolitan, negara bagian Amerika Serikat dibagi dengan wilayah metropolitan.

Download | Demo | Hébergement Web

2. Formulir Kontak AJAX dengan Pelacakan

Ce WordPress Plugin memungkinkan Anda dengan mudah menambahkan formulir kontak atau komentar ke Anda blog WordPress. Muncul dengan manajer pengaturan yang dapat langsung diakses melalui dashboard WordPress.

Fitur utamanya antara lain: a funtuk email, dukungan dari Matematika CAPTCHA pada formulir, penyesuaian dan konfigurasi melalui dashboard WordPress, kemungkinan dmendefinisikan autoresponder khusus, dukungan untuk CSS khusus, dan banyak lagi

Download | Demo | Hébergement Web 

3. Gateway Pembayaran Standar PayPal untuk Formulir Ninja

Gateway Standar PayPal untuk Formulir Ninja memungkinkan Anda membuat formulir yang terintegrasi secara mulus dengan gateway pembayaran PayPal. 

Anda akan dapat membuat formulir pesanan yang dipersonalisasi dan menerima pembayaran menggunakan akun Paypal standar. Fitur utamanya adalah: integrasi yang mudah dan cepat, integrasi IPN, kemampuan untuk mengaktifkan / menonaktifkan gateway PayPal pada formulir individu, dukungan untuk pembayaran reguler, dll.

Download | Demo |  Hébergement Web

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

• Cara menggunakan kategori dan tag secara efektif di WordPress
• Cara membuat menu responsif untuk WordPress seluler
• Cara membuat WordPress intranet untuk organisasi Anda
• Cara menginstal plugin di WordPress

Kesimpulan

Sini! Itu saja untuk tutorial ini. Semoga Anda sekarang tahu cara menambahkan skrip ke WordPress. merasa bebas untuk bagikan tip dengan teman-teman Anda di jejaring sosial Anda.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Namun, sementara itu, beri tahu kami tentang file komentar dan saran di bagian khusus.

...