Loncat ke Konten Utama

Bagaimana benar menambahkan kode jQuery di WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 framework JavaScript yang paling banyak digunakan, kami akan menunjukkan cara menambahkannya ke tema atau plugin WordPress.

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.

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. cara menambahkan kode jQuery di WordPress

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:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

(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 tersebut membutuhkan lima argumen. Yang pertama dapat Anda gunakan untuk menunjukkan skrip, yang kedua adalah lokasi file skrip, parameter ketiga adalah larik ketergantungan.

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

tambahkan kode jQuery dengan benar di WordPressAnda 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

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

1. Peta Dunia Interaktif

Interactive World Maps adalah plugin WordPress yang membantu Anda membuat peta sebanyak yang Anda inginkan, dengan penanda, benua, negara, atau wilayah yang interaktif dan berwarna.

Peta dunia interaktif

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

Plugin WordPress ini memungkinkan Anda menambahkan kontak atau formulir komentar dengan mudah ke blog WordPress Anda. Itu datang dengan manajer pengaturan yang dapat langsung diakses melalui dasbor WordPress.wp-ajax-kontak-bentuk-tracking-plugin-wordpress-to-safety

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

DownloadDemoHé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. 

Gateway pembayaran standar Paypal untuk formulir ninja

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

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

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.

... 

Artikel ini berisi 1 komentar

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
2 saham
saham2
menciak
Register