Home / CMS / Wordpress / Cara Mudah Menambahkan JavaScript di Halaman atau Postingan WordPress

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.

12 Komentar

  1. Awesome! Its in fact awesome post, I have got much clear idea concerning from this paragraph.

  2. 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!

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

  4. Wow! In the end I got a blog from where I can truly take
    valuable data concerning my study and knowledge.

  5. Very soon this web site will be famous among all blogging people,
    due to it’s pleasant content

  6. Hi there every one, here every one is sharing
    these kinds of experience, therefore it’s good to read this webpage, and I used to
    pay a visit this weblog every day.

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

  8. My spouse and I stumbled over here coming from a different
    web address and thought I should check things out.
    I like what I see so now i am following you. Look forward to finding out about your web page for a second time.

  9. It is not my first time to pay a visit this website,
    i am visiting this website dailly and obtain nice information from here everyday.

  10. Hello to every , for the reason that I am in fact keen of reading this web site’s post to be
    updated regularly. It includes pleasant data.

  11. I take pleasure in, cause I found exactly what I used to be looking for.
    You’ve ended my four day long hunt! God Bless you
    man. Have a great day. Bye

  12. bookmarked!!, I like your website!

Leave a Reply

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