Cara Mudah 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 sisi-klien 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 snipet 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 situs web Anda.

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

Terkadang Anda akan diminta untuk menyalin dan menempelkan cuplikan kode JavaScript ke situs web untuk menambahkan alat 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 Anda, 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 Anda salin ke salah satu kotak ini dan kemudian klik tombol save.

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

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 tajuk situs WordPress. Anda harus menambahkan kode berikut ke file functions.php tema Anda 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 Anda 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');

Alih-alih 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');

Alih-alih 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.

Metode 3. Menambahkan Kode Javascript di dalam Tulisan 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 Anda.

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 Anda.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Close
Close

Adblock Detected

Please consider supporting us by disabling your ad blocker