Cara Mudah Menambahkan JavaScript di Halaman atau Postingan WordPress

21
Menambahkan JavaScript di Halaman atau Postingan WordPress

Apakah Anda ingin menambahkan JavaScript di halaman atau postingan WordPress? Terkadang Anda mungkin perlu menambahkan kode JavaScript ke seluruh situs web atau ke halaman tertentu. Secara default, WordPress tidak membiarkan untuk menambahkan kode langsung di posting. Dalam artikel ini, kami akan menunjukkan cara mudah menambahkan JavaScript di halaman atau postingan WordPress.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang tidak berjalan di server tetapi di browser pengguna. Pemrograman client-side ini memungkinkan pengembang untuk melakukan banyak hal keren tanpa memperlambat situs web.

Jika Anda ingin menanamkan pemutar video, menambahkan kalkulator, atau beberapa layanan pihak ketiga lainnya, maka Anda akan sering diminta untuk menyalin dan menempelkan cuplikan kode JavaScript ke situs web.

Cuplikan kode JavaScript tipikal mungkin terlihat seperti ini:

<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>

Sekarang, jika Anda menambahkan snippet kode javascript ke posting atau halaman WordPress, maka itu akan dihapus oleh WordPress ketika Anda mencoba untuk menyimpannya.

Langsung saja mari kita lihat bagaimana Anda dapat dengan mudah menambahkan JavaScript di halaman WordPress atau postingan tanpa melanggar kebijakan situs web.

Baca juga: Membuat Landing Page Dengan WordPress

Metode 1. Tambahkan JavaScript Site-Wide Menggunakan Plugin Insert Header dan Footers

Terkadang Anda akan diminta untuk menyalin dan menempelkan cuplikan kode JavaScript ke situs web untuk menambahkan tool pihak ketiga. Skrip ini biasanya berada di bagian head atau di bagian bawah sebelum tag </body> dari situs web. Dengan cara ini kode dimuat pada setiap tampilan halaman.

Misalnya, kode pemasangan Google Analytics harus ada di setiap halaman situs web, sehingga dapat melacak pengunjung situs web.

Anda dapat menambahkan kode tersebut ke file header.php atau footer.php dari tema WordPress. Namun, perubahan ini akan ditimpa ketika Anda memperbarui atau mengubah tema.

Itulah mengapa kami menyarankan penggunaan plugin untuk memuat javascript di situs web wordpress.

Pertama, Anda perlu menginstal dan mengaktifkan plugin Insert Headers and Footers.

Setelah aktivasi, Anda perlu mengunjungi halaman Settings » Insert Headers and Footers. Anda akan melihat dua kotak, satu untuk header dan yang lainnya untuk bagian footer.

Anda sekarang dapat menempelkan kode JavaScript yang di salin ke salah satu kotak ini dan kemudian klik tombol save.

Plugin Insert Headers and Footers sekarang akan secara otomatis memuat kode yang di tambahkan pada setiap halaman situs web.

Baca juga: Meningkatkan Batas Memori WordPress

Metode 2. Menambahkan Kode JavaScript Secara Manual Menggunakan Kode

Metode ini mengharuskan Anda untuk menambahkan kode ke file WordPress secara langsung.

Pertama, mari kita lihat cara menambahkan kode ke tema situs WordPress. Anda harus menambahkan kode berikut ke file functions.php tema atau plugin khusus situs.

function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');

Menambahkan JavaScript ke Post atau Halaman Menggunakan Kode WordPress Tertentu

Anggap saja Anda hanya ingin memuat javascript ini pada posting WordPress tertentu. Untuk melakukan itu, Anda perlu menambahkan logika kondisional ke kode. Lihatlah contoh berikut:

function wpb_hook_javascript() {
if (is_single ('16')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

Jika Anda melihat lebih dekat pada kode di atas, Anda akan melihat bahwa kami telah membungkus kode javascript di sekitar logika kondisional untuk mencocokkan ID entri tertentu. Anda dapat menggunakan ini dengan mengganti 16 dengan ID posting sendiri.

Sekarang, kode ini akan berfungsi untuk semua jenis posting kecuali halaman. Mari kita lihat contoh lain kecuali yang ini akan memeriksa ID halaman tertentu sebelum menambahkan kode javascript ke bagian head.

function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

Sebagai ganti is_single, kita sekarang menggunakan is_page untuk mengecek ID halaman.

Kita dapat menggunakan kode yang sama dengan sedikit modifikasi untuk menambahkan kode javascript ke footer situs. Lihatlah contoh berikut.

function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Sebagai ganti menghubungkan fungsi kita dengan wp_head, kita sekarang menghubungkannya ke wp_footer. Anda juga dapat menggunakannya dengan tag kondisional untuk menambahkan Javascript ke posting atau halaman tertentu.

Baca juga: Cara Meminta Google Untuk MeRecrawl URL Situs WordPress

Metode 3. Menambahkan Kode Javascript di dalam Post atau Halaman Menggunakan Plugin

Metode ini akan memungkinkan Anda untuk menambahkan kode di mana saja di dalam posting dan halaman WordPress. Anda juga akan dapat memilih di mana dalam konten yang ingin Anda embed kode javascript.

Pertama, Anda perlu menginstal dan mengaktifkan plugin Kode Embed.

Setelah aktivasi, Anda perlu mengedit posting atau halaman di mana Anda ingin menambahkan javascript. Pada halaman pengeditan posting, klik tombol ‘Screen Options‘ dan periksa opsi ‘Custom Fields‘.

Sekarang gulir ke bawah dan di bawah editor pos, Anda akan melihat metabox ‘Custom Fields’ di mana Anda perlu mengklik tautan ‘Enter new’.

Kolom name dan bidang value kustom sekarang akan muncul.

Anda harus memberikan nama untuk bidang kustom dengan awalan KODE (misalnya, CODEmyjscode) dan kemudian tempel kode javascript di bidang value.

Jangan lupa untuk mengeklik tombol ‘Add Custom Field’ untuk menyimpan bidang.

Sekarang Anda dapat menggunakan bidang khusus ini untuk menyematkan kode JavaScript di mana pun di pos atau halaman ini. Cukup tambahkan kode embed ini di mana saja di konten postingan.

{{CODEmyjscode}}

Anda sekarang dapat menyimpan posting atau halaman dan melihat situs apakah sudah berhasil. Anda akan dapat melihat kode javascript dengan menggunakan alat Inspect atau dengan melihat sumber halaman.

Tips: Metode ini untuk pemula dan pemilik situs web. Jika Anda sedang mempelajari tema WordPress atau pengembangan plugin, maka Anda perlu benar-benar memasukkan JavaScript dan stylesheet ke proyek.

Kami harap artikel ini membantu dalam mempelajari cara menambahkan JavaScript dengan mudah di halaman atau postingan WordPress.

12 KOMENTAR

  1. My brother recommended I might like this web site. He was entirely
    right. This post truly made my day. You can not imagine just how much time I had spent for this info!
    Thanks!

  2. Great post. I was checking constantly this blog and I’m impressed!
    Extremely helpful info specifically the last part 🙂 I care for such information much.

    I was seeking this certain information for a very long time.
    Thank you and best of luck.

  3. Good way of describing, and nice paragraph to take data on the
    topic of my presentation subject, which i am going to convey in institution of higher education.

  4. mantaf.. pelan-pelan tapi nyampai di otak. sekalian dihubungkan dengan css untuk postingan om. kan biasanya di github ada 3 file, html, js, css. nah ini yang bikin bingung bagaimana caranya agar bisa jalan di wordpress.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini