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!
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.
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.
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.
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:
If you want to add custom JavaScript to all your pages via your site’s header, there are two ways you can go about it. You can edit the functions.php file and use the wp_enqueue_script function, which creates a generic function. Alternatively, you can use the wp_head action hook.
Let’s look at both options…
First, you’ll want to upload your custom JavaScript file to your template’s directory. You can do this via a File Transfer Protocol (FTP) client or File Manager.
Navigate to the template folder of your site (wp_content → themes → [yourtheme]). Then, select Upload:
Note the exact file path of this file. For example, it should be something like “https://www.yourdomain.com/wp-content/themes/twentytwentyuone/js/myjsfile.js”.
Next, locate and open your functions.php file, then copy and paste the following code snippet:
function ti_custom_javascript() { wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js'); } add_action('wp_enqueue_scripts', 'ti_custom_javascript');
Be sure to replace the template URL with your own. Finally, save your file.
You can also use the wp_head action hook to add custom JavaScript to your header via inline script. Again, this method isn’t preferable because it can create too many scripts. However, it’s better than directly inserting the scripts into your header.php file.
This method, which you can also use for the footer, uses the action hook(s) to add inline scripts to your site. While the wp_enqueue_script function enqueues custom scripts, the wp_head approach prints the scripts in your header template (and footer, if you use the wp_footer hook).
To get started, navigate to your functions.php file, then copy and paste the following:
function ti_custom_javascript() {
?>
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.
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.
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
Tanda tangan email berfungsi sebagai cara ampuh bagi individu dan bisnis untuk meninggalkan kesan abadi…
Apakah kesalahan 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' menghentikan Anda mengakses situs web WordPress? Kesalahan ini hanya terlihat saat mengunjungi…
Jika Anda adalah individu yang banyak akal dan berpikiran maju yang bekerja di bidang pemasaran,…
Siap menguasai Google Analytics 4 dengan sedikit bantuan dari MonsterInsights? GA4 adalah alat analitik yang…
Apakah Anda mencari cara untuk menerjemahkan plugin WordPress ke dalam bahasa Anda? Dengan menerjemahkan plugin…
Mencari solusi untuk hack redirect WordPress? ???????? Peretasan pengalihan WordPress sayangnya merupakan kejadian umum dan…