Apakah Anda ingin mengetahui cara memuat JavaScript di WordPress?

Semua tema WordPress biasanya terdiri dari file PHP, HTML, CSS dan JavaScript. JavaScript adalah bahasa pemrograman yang populer di kalangan pengembang. tema WordPress. Ini adalah bahasa yang membuat halaman HTML menjadi interaktif dan juga memungkinkan Anda untuk berinteraksi dengan server.

Mengetahui cara menggunakannya di situs web Anda akan menjadi keuntungan besar.

Untuk benar-benar menggunakan JavaScript, Anda harus tahu cara memuatnya di situs web Anda.

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

Lalu kembali ke mengapa kita ada di sini.

Cara memuat JavaScript WordPress

Mari kita mundur selangkah dan melihat pertama bagaimana WordPress memuat skrip dan gaya. Anda mengetahui bahwa saat membuat file JavaScript, Anda dapat menambahkannya ke halaman Anda di bagian header atau di footer.

Temukan juga tutorial kami di Cara mengompres file CSS, HTML dan Javascript Anda

WordPress melakukan hal yang persis sama, tetapi Anda tidak bisa begitu saja memasukkan tag skrip ini ke file header atau footer Anda tema WordPress. WordPress menggunakan mekanisme pemuatan cerdas yang disebut “ enqueueing '.

Mekanisme ini diperlukan untuk memberi makna pada dependensi. Jika Anda menulis kode jQuery untuk tema WordPress Anda, maka jQuery sendiri harus dimuat terlebih dahulu.

Anda menulis kode yang bergantung pada plugin jQuery. Dalam hal ini, jQuery harus dimuat terlebih dahulu, lalu plugin jQuery, lalu kode Anda.

Cara "Script" Enqueueing "(Tambahkan ke Antrian)

Anda dapat mengantri skrip di folder tema WordPress atau Anda WordPress Plugin. Berikut adalah kode lengkap untuk menyertakan skrip yang bergantung pada jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('my-script ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Pertama-tama, suatu fungsi harus " ketagihan Di WordPress (Menggunakan Hooks WordPress). Argumen pertama dari fungsi ADD_ACTIONsebagai () memberi tahu WordPress tempat skrip ini harus ditempatkan:

• Di ruang publik
• Di dashboard

Jika Anda menggunakan " wp_enqueue_scripts Mereka akan dimuat di ruang publik, jika Anda menggunakan " admin_enqueue_scripts Mereka akan dimuat di dasbor.

Dalam fungsi « ADD_ACTIONsebagai Anda bisa menggunakan " wp_enqueue_script Untuk menambahkan skrip yang Anda butuhkan. Fungsi ini mengambil parameter yang diperlukan dan empat parameter opsional:

• Parameter pertama adalah nama skrip Anda. Anda dapat memilih apa yang Anda inginkan, tetapi pastikan untuk menggunakan nama yang unik.
• Parameter kedua harus berisi lokasi file pada tema WordPress Anda atau WordPress Plugin.
• Parameter ketiga berisi larik dependensi. Dalam contoh di atas saya mengatakan bahwa jQuery adalah dependensi. Semua dependensi dimuat sebelum skrip yang dipermasalahkan.
• Parameter keempat adalah nomor versi
• Parameter kelima dan terakhir menunjukkan apakah Anda ingin memuat skrip di header atau footer. Gunakan "true" untuk memuat di footer, atau "false" untuk memuat skrip di header (Anda juga tidak dapat mengisi parameter ini).

Ketergantungan

WordPress menawarkan salinan jQuery, itulah sebabnya Anda dapat menambahkannya sebagai dependensi tanpa kerumitan. Ada sejumlah skrip dan plugin jQuery lain yang ditawarkan WordPress. Jika kode Anda bergantung pada salah satunya, Anda tidak harus menggunakan salah satu salinan Anda, Anda cukup menambahkannya sebagai dependensi. ini adalah daftar script yang WordPress penawaran.

Jika Anda menyertakan beberapa skrip independen, Anda dapat menambahkannya sebagai dependensi dengan cara yang persis sama. Lihat contoh di bawah ini:

my_theme_scripts of function () {

 wp_enqueue_script ("skrip basis-saya", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Karena skrip pertama bergantung pada jQuery, maka skrip berikutnya juga bergantung padanya. Jadi, Anda tidak perlu menambahkan jQuery sebagai ketergantungan untuk keduanya. Ini membuat manajemen ketergantungan lebih mudah.

Memuat bersyarat

Terkadang Anda ingin menggunakan skrip di setiap halaman, tetapi sering kali Anda ingin memuat skrip di halaman tertentu. Ini terutama benar ketika mempertimbangkan untuk menambahkan skrip ke dasbor. Contoh yang bagus adalah penggunaan shortcode. Kode pendek memungkinkan pengguna membuat tampilan lanjutan pada editor teks visual menggunakan beberapa trik sederhana.

my_theme_scripts of function () {

 wp_register_script ('skrip-saya', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('skrip-saya');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Kami telah menyimpan skrip sehingga WordPress mempelajari skrip tersebut, tetapi kami menggunakan " enqueue ". Dengan cara ini, skrip hanya ditambahkan ke halaman jika kode pendek digunakan pada halaman ini.

Metode lain untuk memuat skrip dengan kondisi adalah dengan menggunakan fungsi bersyarat. Jika Anda ingin memuat skrip pada semua halaman arsip kategori, Anda dapat menggunakan fungsi tersebut is_category ().

Misalnya, Anda dapat membuat carousel gambar yang dapat ditambahkan pengguna ke artikel seperti ini: [carousel ids = '42,124,123,331,90, XNUMX ′]. Korsel akan dibuat di halaman artikel menggunakan gambar yang ditentukan oleh ID mereka.

Untuk melakukan ini, Anda harus membuat file " carousel.js Yang didasarkan pada jQuery. Berikut adalah kode untuk sampai di sana (Ini tidak membuat carousel, tetapi memungkinkan Anda melihat bagaimana proses pemuatan terjadi):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('carousel-saya', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

fungsi my_carousel ($ args) {

 $ atts = shortcode_atts (array (

 'Id' => ",

 ), $ Atts, 'carousel');

 wp_enqueue_script ('carousel-saya');

 // Kode untuk menampilkan korsel di sini

}

Menghapus dan mengganti skrip

Ini sejauh ini merupakan skenario umum, tetapi kadang-kadang Anda mungkin perlu menghapus atau mengganti skrip. Saya jatuh ke situasi di mana skrip ditambahkan oleh plugin (tetapi tidak digunakan oleh tema) menyebabkan masalah kompatibilitas. "Penarikan" adalah opsi terbaik, karena kesalahan benar-benar hilang.

Anda juga dapat mengganti jQuery dengan versi yang lebih baru jika Anda menguji sesuatu untuk memastikannya kompatibel dengan versi yang lebih baru.

Dalam situasi ini fungsinya wp_deregister_script () "Dan" wp_dequeue_script () Bermanfaat. Berikut ini cara mengedit kode yang sudah ditambahkan di WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('skrip-saya', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Pikiran terakhir

Metode pengunggahan ke WordPress ini sangat bagus karena memungkinkan Anda menambahkan skrip Anda secara modular. Ini akan memungkinkan Anda untuk memastikan bahwa dependensi ditambahkan secara modular.

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. Paket SEO Premium

Paket SEO Premium adalah WordPress Plugin yang mengoptimalkan SEO Anda dan mengompresi CSS untuk meningkatkan kecepatan memuat situs web Anda.

Plugin ini juga memungkinkan Anda untuk mengelola desain situs web Anda dalam beberapa klik. Fungsinya antara lain: kompresi CSS dan JS, integrasi video dan snippet sitemap, pemformatan file HTML dan XML, pengalihan halaman 404 dan 301, berbagi di jejaring sosial, penyediaan Label ALT, tata letak yang sangat dapat disesuaikan

Download | Demo | Hébergement Web

2. Woocommerce Delivery Time Picker untuk Pengiriman

Woocommerce Delivery Time Picker for Shipping adalah ekstensi WooCommerce yang memungkinkan pelanggan memilih tanggal dan waktu pengiriman di halaman checkout. 

Pelanggan akan dapat memilih waktu pengiriman paket di rumah. Waktu pengiriman akan terlihat oleh administrator situs web dan juga akan dikirim melalui email ke administrator situs web atau toko online.

Download | Demo | Hébergement Web

3. menu pahlawan

Plugin ini memungkinkan Anda membuat menu WordPress kustom Anda sendiri dalam beberapa langkah yang cukup mudah. Secara khusus, ini memungkinkan Anda dengan mudah dan intuitif membuat menu WordPress yang elegan dan profesional. 

Dari menu mega paling rumit yang penuh fitur, hingga menu paling sederhana dengan menu tarik-turun, plugin WordPress HeroMenu menyiapkan jenis menu apa pun dan menjalankannya dalam hitungan menit.

Dari segi fitur yang ditawarkannya antara lain: pengoperasian yang sempurna di PC, tablet dan smartphone, dari CSS khusus untuk menambahkan gaya Anda sendiri ke menu, pembangun megamenu, beberapa browser yang didukung: Chrome, Firefox, Safari, Opera, IE9 dan banyak lagi.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Lihat sumber daya lain yang direkomendasikan yang akan membantu Anda mengatasi kesalahan umum WordPress lainnya. 

• Cara Perbaiki Redirect kesalahan pada WordPress
• Cara membuat tata letak kustom dengan Elementor
• Cara membuat WordPress intranet untuk organisasi Anda
• Cara membuat halaman login di WordPress

Kesimpulan

Disini adalah ! Sekian untuk tutorial ini, saya harap ini membantu Anda memahami cara memuat JavaScript di WordPress. Jangan ragu untuk membagikannya dengan teman-teman Anda di jaringan sosial disukai. 

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.

Tetapi sementara itu, beri tahu kami tentang Anda komentar dan saran di bagian khusus.

...