Salah satu cara terbaik untuk meningkatkan fungsionalitas front-end situs web Anda adalah dengan menambahkan JavaScript kustom WordPress. Namun, mencari tahu bagaimana melakukannya bisa jadi rumit, terutama jika Anda terbiasa bekerja dengan Penyesuai untuk menyisipkan CSS khusus.
Untungnya, Anda dapat menggunakan beberapa strategi berbeda tergantung pada tingkat pengalaman Anda dan apa yang ingin Anda capai. Setelah Anda mempelajari apa pilihan Anda, Anda akan dapat memilih solusi JavaScript kustom yang paling masuk akal untuk Anda.
Dalam posting ini, kami akan memandu Anda melalui tiga metode yang dapat Anda gunakan untuk menambahkan JavaScript khusus ke situs WordPress Anda, serta mendiskusikan pro dan kontra dari setiap opsi. Berikut adalah tiga metode yang akan kami bahas – Anda dapat mengklik untuk langsung menuju ke metode tertentu:
Gunakan plugin Head & Footer Code (opsi paling sederhana untuk pengguna non-teknis)Tambahkan kode ke file functions.phpTambahkan kode ke header (menggunakan fungsi wp_enqueue_script atau kait wp_head)
Ayo masuk!
1. Instal plugin seperti Head & Footer Code
Menggunakan plugin adalah salah satu cara termudah untuk menambahkan JavaScript kustom WordPress ke situs web Anda. Misalnya, Kode Head & Footer adalah alat yang bagus:
Plugin gratis ini memungkinkan Anda memasukkan kode dalam berbagai cara. Anda dapat menggunakannya untuk Piksel Facebook, Google Analytics, CSS khusus, dan banyak lagi.
Untuk memulai, tambahkan plugin ke situs Anda dengan menavigasi ke Plugins → Add New dari dasbor admin Anda, lalu cari “Head & Footer Code”.
Setelah Anda mengklik tombol Instal Sekarang dan Aktifkan, Anda dapat menemukan pengaturan plugin dengan membuka Alat → Kode Head & Footer. Pada layar ini, ada tiga kotak untuk bagian header, footer, dan body:
Anda dapat memasukkan JavaScript kustom WordPress Anda ke salah satu kotak ini. Setelah selesai, pilih tombol Simpan Perubahan di bagian bawah layar. Kode kemudian akan dimuat ke setiap halaman situs Anda.
Pro dan kontra menggunakan plugin
Keuntungan utama menggunakan plugin adalah opsi yang ramah bagi pemula. Anda tidak perlu khawatir tentang mengedit file tema Anda. Plugin Head & Footer Code juga mungkin berguna jika Anda mencari cara yang mulus untuk menambahkan jenis kode lain dan CSS khusus.
Namun, kelemahan dari metode ini adalah melibatkan pemasangan plugin pihak ketiga, yang coba dihindari oleh beberapa pemilik situs. Jika Anda ingin menjaga ekstensi Anda seminimal mungkin, Anda mungkin lebih baik menggunakan salah satu metode lain. Selain itu, plugin dirancang untuk perubahan JavaScript di seluruh situs daripada halaman atau posting tertentu.
2. Gunakan file functions.php Anda
Metode lain untuk menambahkan JavaScript kustom WordPress ke situs web Anda adalah memanfaatkan fungsi dan kait bawaan untuk mengedit file function.php. Pendekatan ini melibatkan pengunggahan skrip secara manual ke server Anda.
Sebelum memulai, kami sarankan membuat tema anak. Langkah ini membantu memastikan Anda masih dapat memperbarui tema induk dengan aman. Kamu juga harus ambil cadangan situs Anda untuk berjaga-jaga jika terjadi kesalahan.
Metode ini melibatkan penggunaan IS_PAGE fungsi. Anda dapat menambahkan logika bersyarat untuk menerapkan JavaScript khusus Anda ke satu posting atau halaman.
Untuk memulai, cari dan buka file functions.php Anda, lalu salin dan tempel cuplikan kode berikut:
fungsi ti_custom_javascript() { ?>
Kode ini akan menambahkan JavaScript ke header Anda. Untuk menerapkannya ke satu posting, Anda dapat menggunakan yang berikut ini:
function ti_custom_javascript() { if (is_single (‘3’)) { ?>
Perhatikan bahwa Anda harus mengganti 3 pada contoh di atas dengan nomor ID pos yang ingin Anda tambahkan kodenya. Untuk menemukan nomor itu, navigasikan ke pos dari dasbor admin Anda, lalu klik Edit. Di URL bilah browser, nomor ID adalah nomor di sebelah “posting=”:
Simpan file Anda setelah Anda mengganti nomor ID dan menambahkan JavaScript khusus Anda ke area yang ditentukan. Anda juga dapat mengulangi proses yang sama untuk satu halaman WordPress.
Pro dan kontra mengedit file functions.php Anda
Keuntungan mengedit file functions.php Anda adalah Anda tidak perlu menginstal plugin lain. Anda juga dapat menggunakan teknik ini untuk menambahkan fitur dan fungsionalitas ke tema Anda dan WordPress itu sendiri. Misalnya, metode ini dapat menyisipkan JavaScript ke dalam a satu posting atau halaman atau semua halaman.
Satu-satunya kelemahan dari metode ini adalah melibatkan bekerja dengan kode dan mengedit file situs Anda. Oleh karena itu, ini mungkin bukan pilihan terbaik jika Anda tidak berpengalaman di departemen ini.
Ada cara untuk menambahkan JavaScript WordPress khusus dengan memasukkan:
Perhatikan bahwa kait wp_head hanya menyala di ujung depan situs web Anda. Ini berarti bahwa setiap JavaScript khusus yang Anda tambahkan menggunakan metode ini tidak akan muncul di area admin atau login. Namun, jika Anda ingin menambahkan JavaScript ke area tersebut, Anda dapat menggunakan kait tindakan admin_head dan login_head masing-masing.
Pro dan kontra menambahkan JavaScript ke header Anda
Fungsi wp_enqueue_script lebih disukai di antara pengembang karena mencegah konflik yang dapat muncul dengan opsi lain, seperti menambahkan skrip secara langsung ke file header.php Anda. Selain itu, menggunakan metode ini tidak membuat skrip dependen apa pun.
Masalah utama dengan menambahkan JavaScript WordPress khusus ke header situs Anda adalah hal itu dapat menyebabkan masalah dengan plugin lain yang memuat skrip mereka sendiri. Pengaturan ini juga dapat menyebabkan beberapa skrip dimuat lebih dari sekali, yang dapat menghambat keseluruhan situs web Anda kecepatan dan kinerja.
Mulailah dengan JavaScript kustom WordPress
Secara default, WordPress tidak mengizinkan Anda memasukkan potongan kode JavaScript ke halaman dan posting Anda. Untungnya, beberapa go-around dapat menambahkan JavaScript kustom WordPress Anda tanpa merusak situs web Anda. Metode terbaik tergantung pada tingkat kenyamanan Anda dengan mengedit file situs Anda dan di mana Anda ingin menerapkan skrip.
Seperti yang telah kita bahas dalam posting ini, ada tiga cara Anda dapat menambahkan JavaScript kustom WordPress ke situs web Anda:
Instal plugin seperti Head & Footer Code.Gunakan file functions.php Anda untuk menambahkan JavaScript khusus ke satu halaman atau posting. Tambahkan JavaScript ke header Anda menggunakan fungsi wp_enqueue_script atau wp_head hook.
Sekarang setelah Anda tahu cara menambahkan JavaScript khusus ke WordPress, Anda mungkin tertarik dengan yang lain panduan tentang menambahkan CSS khusus ke WordPress.
Apakah Anda memiliki pertanyaan tentang menambahkan JavaScript kustom WordPress ke situs web Anda? Beri tahu kami di bagian komentar di bawah!
Panduan gratis
