Apakah Anda ingin menambahkan kode JavaScript di halaman atau posting WordPress Anda?
Terkadang, untuk menambah fitur dari website, perlu menambahkan kode JavaScript ke seluruh web atau ke halaman tertentu.
Secara default, WordPress tidak mengizinkan Anda menambahkan kode langsung di postingan web.
Pada artikel ini, kita akan mempelajari cara menambahkan kode JavaScript dengan mudah di halaman atau posting WordPress.
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang dijalankan di browser pengguna.
Bahasa pemrograman yang berjalan di sisi klien ini memungkinkan pengembang melakukan banyak hal keren tanpa memperlambat web Anda.
Jika Anda ingin menyematkan pemutar video, menambahkan kalkulator, atau beberapa layanan pihak ketiga lainnya, Anda akan selalu diminta untuk menyalin dan menempelkan kode JavaScript ke web Anda.
Potongan kode JavaScript biasanya terlihat seperti ini:
<script type="text/javascript"> // Kode JavaScript di sini </script> <!—Contoh lainnya: --!> <script type="text/javascript" src="/path/to/some-script.js"></script>
Jika Anda mencoa menambahkan potongan kode javascript ke posting atau halaman WordPress, maka WordPress secara otomatis akan menghapus kode tersebut ketika Anda mencoba menyimpannya.
Jadi, mari kita lihat cara mudah menambahkan kode JavaScript di halaman atau postingan WordPress tanpa merusak website Anda.
Cara 1. Tambahkan Kode JavaScript di Seluruh Website Menggunakan Insert Header and Footer
Terkadang Anda akan diminta untuk menyalin dan menempelkan kode JavaScript ke web untuk menambahkan fungsi fitur dari pihak ketiga.
Kode ini biasanya diletakkan di bagian head atau di footer sebelum tag </body> web Anda.
Dengan cara ini kode akan dimuat di setiap tampilan halaman.
Misalnya, kode pemasangan Google Analytics harus ada di setiap halaman web Anda, sehingga dapat melacak pengunjung website Anda.
Anda dapat menambahkan kode tersebut ke file header.php atau footer.php tema WordPress.
Namun, saat Anda melakukan pembaruan atau mengubah tema, kode ini akan tertimpa dan terhapus.
Itulah mengapa direkomendasikan penggunaan plugin untuk memuat kode javascript di website Anda.
Pertama, silahkan install dan aktifkan plugin Insert Headers and Footers. Untuk lebih jelasnya, lihat panduan cara memasang plugin WordPress.
Setelah aktivasi, silahkan masuk ke halaman Pengaturan » Insert Headers and Footers. Anda akan melihat 3 kotak, satu untuk header, body dan yang lainnya untuk bagian footer.
Anda sekarang dapat menempelkan kode JavaScript yang Anda salin ke salah satu kotak ini dan kemudian klik tombol simpan.
Plugin Insert Headers and Footers secara otomatis akan memuat kode yang Anda tambahkan di setiap halaman website.
Cara 2. Menambahkan Kode JavaScript Secara Manual Menggunakan Kode
Metode ini mengharuskan Anda untuk menambahkan kode ke file WordPress Anda.
Pertama, mari kita lihat cara menambahkan kode ke header di web WordPress Anda.
Anda perlu menambahkan kode berikut ke file functions.php tema Anda.
function wpb_hook_javascript() {
?>
<script>
// kode javascript Anda di sini
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
Menambahkan Kode JavaScript ke Posting atau Halaman WordPress Tertentu
Misalkan Anda hanya ingin menambahkan kode javascript ini di postingan WordPress tertentu saja.
Untuk melakukan itu, Anda perlu menambahkan logika kondisional ke kode.
Lihat contoh berikut:
function wpb_hook_javascript() {
if (is_single ('16')) {
?>
<script type="text/javascript">
// kode javascript Anda di sini
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Jika Anda melihat lebih teliti pada kode di atas, Anda akan melihat bahwa kode javascript diapit oleh kode logika kondisional “if” agar sesuai dengan ID posting tertentu.
Anda bisa ganti nilai 16 dengan ID posting Anda sendiri.
Kode ini akan berfungsi untuk semua jenis posting kecuali halaman. Kode ini akan memeriksa ID halaman tertentu sebelum menambahkan kode javascript ke bagian head.
Mari kita lihat contoh yang lain.
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// kode javascript Anda di sini
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Pada kode di atas kita menggunakan “is_page” untuk memeriksa ID halaman.
Kita juga dapat menggunakan kode yang sama dengan sedikit modifikasi untuk menambahkan kode javascript ke bagian footer website.
Lihat contoh berikut.
function wpb_hook_javascript_footer() {
?>
<script>
// kode javascript Anda di sini
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
Pada kode di atas, kita sekarang telah mengaitkannya ke wp_footer. Anda juga dapat menggunakannya dengan tag kondisional untuk menambahkan Javascript ke posting atau halaman tertentu.
Cara 3. Menambahkan Kode Javascript di Dalam Posting atau Halaman Menggunakan Plugin
Metode ini membantu Anda menambahkan kode di mana saja di dalam postingan dan halaman WordPress.
Anda juga akan dapat memilih konten mana yang ingin Anda sematkan kode javascript.
Pertama, silahkan install dan aktifkan plugin Code Embed. Untuk lebih jelasnya, lihat panduan cara memasang plugin WordPress.
Setelah aktivasi, silahkan edit posting atau halaman yangn ingin ditambahkan javascript.
Pada halaman edit posting, klik tombol ‘Opsi Layar’ dan centang opsi ‘Ruas Tersesuai’.
Sekarang gulir ke bawah dan di bawah editor posting, Anda akan melihat metabox ‘Ruas Tersesuai’ di mana Anda perlu mengklik link ‘Masukkan yang baru’.
Kolom nama dan nilai kolom khusus akan muncul.
Berikan nama untuk kolom khusus dengan awalan KODE (misalnya, CODEmyjscode) dan kemudian tempel kode javascript di kolom nilai.
Jangan lupa untuk mengklik tombol ‘Tambahkan Ruas Tersesuai’ untuk menyimpan kolom kustom Anda.
Sekarang Anda dapat menggunakan kolom khusus ini untuk menyematkan kode JavaScript di mana pun di posting atau halaman ini.
Cukup tambahkan kode ini di mana saja di konten postingan Anda.
{{CODEkodejssaya}}
Anda sekarang dapat menyimpan posting atau halaman lalu melihat hasilnya di website Anda.
Anda dapat melihat kode javascript dengan menggunakan Inspect Tool atau dengan melihat sumber halaman.
Tip: Metode ini untuk pemula dan pemilik web. Jika Anda sudah pernah belajar membuat tema atau plugin WordPress, maka Anda dapat memasukkan JavaScript dan CSS ke proyek sesuai dengan aturan yang benar.
Semoga artikel ini membantu Anda mempelajari cara menambahkan kode JavaScript dengan mudah di halaman atau postingan WordPress.
Anda mungkin juga ingin membaca panduan Cara Menonaktifkan Kode Editor Tema dan Plugin dari Panel Admin WordPress.
