Cara Menambahkan JavaScript di Postingan WordPress

Apakah kamu ingin menambahkan JavaScript di halaman atau postingan WordPress? Jika iya, sekarang berada di halaman yang tepat.

Pada suatu kesempatan kamu mungkin perlu menambahkan kode JavaScript ke seluruh website atau hanya ke halaman dan postingan tertentu. Secara default, WordPress tidak mengizinkan pengguna untuk menambahkan kode secara langsung di postingan.

Pada artikel ini, kami akan menunjukkan cara menambahkan JavaScript di halaman atau postingan WordPress dengan beberapa metode.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang berjalan di browser pengguna, bukan di bagian server. Pemrograman client-side ini memungkinkan pengembang untuk melakukan banyak hal tanpa memperlambat website.

Jika kamu ingin menyematkan video player, atau layanan pihak ketiga lainnya, maka kamu akan sering menggunakan kode JavaScript ke website.

Berikut adalah contoh cuplikan kode JavaScript sederhana.

// Some JavaScript code

</script>

<!-- Another Example: --!>

Tetapi, jika kamu menambahkan cuplikan kode JavaScript langsung ke postingan atau halaman, maka itu akan di hapus oleh WordPress saat kamu mencoba menyimpannya.

Oleh karena itu, sekarang mari kita lihat bagaimana cara kamu bisa menambahkan JavaScript ke halaman atau postingan WordPress dengan mudah dan tanpa merusak website.

Tambahkan JavaScript Menggunakan Plugin Insert Header and Footer

Beberapa alat mengharuskan kamu untuk memasukkan kode JavaScript ke bagian header atau footer website agar bisa berfungsi.

Misalnya saja Google Analytics, kode JavaScript yang di berikan harus dijalankan di setiap halaman situs, sehingga nantinya dapat melacak pengunjung.

Kamu bisa saja menambahkan kode secara manual ke file header.php atau footer.php, tetapi perubahan tersebut akan hilang ketika kamu mengubah tema atau memperbaruinya.

Itu sebabnya kami merekomendasikan menggunakan plugin WordPress untuk menambahkan kode JavaScript ke seluruh website.

Hal pertama yang perlu kamu lakukan adalah menginstal dan mengaktifkan plugin Insert Headers and Footers. Untuk detail lebih lanjut, lihat panduan kami tetang cara memasang plugin WordPress.

Setelah aktivasi, kamu harus membuka Settings > Insert Headers and Footers. Pada halaman ini, kamu akan melihat tiga columns untuk bagian header, body, dan footer.

Sekarang kamu dapat menempelkan kode JavaScript yang kamu salin di salah satu kotak ini dan klik tombol Save jika sudah selesai. Nantinya secara otomatis plugin akan memuat kode yang kamu tambahkan tersebut di setiap halaman website.

Menambahkan Kode JavaScript Ke WordPress Secara Manual

Menggunakan metode ini mengharuskan kamu untuk menambahkan kode ke file WordPress secara langsung.

Pertama, kami akan sedikit menunjukkan cara menambahkan kode ke header situs. Kamu hanya perlu menyalin kode berikut dan menambahkannya ke file functions.php tema, atau menggunakan plugin code snippets.

function nls_hook_javascript() {

// your javscript code goes

</script>

<?php

}

add_action('wp_head', 'nls_hook_javascript');

Menambahkan JavaScript ke Postingan WordPress Tertentu Menggunakan Kode

Jika kamu hanya ingin menambahkan JavaScript ke satu postingan WordPress, kamu perlu menambahkan conditional logic ke dalam kode.

Coba perhatikan cuplikan kode berikut:

function nls_hook_javascript() {

if (is_single ('1687')) {

// your javscript code goes here

</script>

<?php

}

add_action('wp_head', 'nls_hook_javascript');

Kode di atas hanya akan menjalankan JavaScript jika ID postingan cocok dengan 1687. Pastikan kamu mengganti 1687 dengan ID postingan kamu sendiri.

Untuk menemukan ID postingan, caranya buka postingan tempat kamu ingin menjalankan JavaScript. Kemudian, di URL halaman, kamu akan melihat ID postingan seperti ini.

Menambahkan JavaScript ke Halaman WordPress Tertentu Menggunakan Kode

Jika kamu ingin menambahkan JavaScript ke satu halaman di WordPress, kamu perlu menambahkan conditional logic ke kode, sama seperti di atas.

Maka contoh kodenya seperti ini:

function nls_hook_javascript() {

if (is_page ('100')) {

// your javscript code goes here

</script>

<?php

}

add_action('wp_head', 'nls_hook_javascript');

Kode di atas hanya akan menjalankan JavaScript jika ID halaman adalah 100. Pastikan kamu mengganti angka 100 dengan ID halaman yang kamu miliki.

Kamu dapat menggunakan metode yang sama seperti di atas untuk menemukan ID halaman.

Menambahkan JavaScript ke Postingan atau Halaman WordPress Tertentu Menggunakan Kode di Footer

Jika ingin JavaScript berjalan di footer situs, bukannya di header, maka kamu dapat menambahkan cuplikan kode berikut ke website.

function nls_hook_javascript_footer() {

// your javscript code goes

</script>

<?php

}

add_action('wp_footer', 'nls_hook_javascript_footer');

Kode di atas terhubung ke wp_footer alih-alih wp_head. Kamu juga dapat menambahkan conditional tags untuk menambahkan JavaScript ke postingan dan halaman tertentu seperti contoh di atas.

Menambahkan Kode JavaScript ke Postingan WordPress Menggunakan Plugin

Cara lain yang dapat kamu gunakan untuk menambahkan JavaScript ke postingan dan halaman adalah menggunakan plugin. Nantinya kamu dapat memilih di mana ingin menyematkan kode JavaScript di dalam konten.

Yang harus kamu lakukan pertama kali adalah menginstal dan mengaktifkan plugin Code Embed. Untuk detail lebih lanjut, lihat panduan kami tentang cara memasang plugin WordPress.

Setelah di aktivasi, kamu perlu mengedit postingan atau halaman tempat kamu akan menambahkan JavaScript. Kemudian, aktifkan custom fields yang disembunyikan secara default.

Untuk melakukannya, kamu perlu mengklik menu titik tiga di sudut kanan atas layar dan kemudian pilih Preferences dari daftar menu.

Ini akan memunculkan popup, kemudian kamu perlu beralih ke tab Panels. Dan selanjutnya aktifkan togle di samping “Custom fields” yang berada di bawah bagian “Additional”.

Setelah itu, kamu akan melihat meta box “Custom field” yang berada di bawah konten editor.

Selanjutnya, klik tautan Enter new.

Nama bidang khusus dan nilai bidang sekarang akan muncul.

Kamu perlu memberikan nama untuk bidang khusus dengan awalan CODE (misalnya, “CODEmyjscode”) dan dilanjutkan dengan menempelkan kode JavaScript ke dalam bidang value.

Kemudian, klik tombol Add Custom Field untuk menyimpan bidang khusus yang sudah di buat.

Sekarang kamu bisa menggunakan bidang khusus ini untuk menyematkan kode JavaScript di mana saja dalam postingan atau halaman ini. Cukup tambahkan kode embed berikut di tempat yang kamu inginkan.