menu
NONCreative
3 Cara Mudah Menambahkan JavaScript di Halaman atau Postingan WordPress - NonCreative

3 Cara Mudah Menambahkan JavaScript di Halaman atau Postingan WordPress

26 Oktober 2018 Tutorial

Berikut ini tutorial 3 Cara Mudah Menambahkan JavaScript di Halaman atau Postingan WordPress. Apakah Anda ingin menambahkan JavaScript di halaman atau postingan WordPress Anda? Terkadang Anda mungkin perlu menambahkan kode JavaScript ke seluruh situs web atau ke halaman tertentu. Secara default, WordPress tidak membiarkan Anda menambahkan kode langsung di postingan Anda.

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 Anda tetapi di browser pengguna. Pemrograman sisi-klien ini memungkinkan pengembang untuk melakukan banyak hal menakjubkan tanpa memperlambat situs web Anda.

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

Potongan kode JavaScript mungkin terlihat seperti ini:

<script type="text/javascript">
// Beberapa kode JavaScript
</script>
 
<!-- Contoh Lain: --!>
<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.

Dikatakan demikian, mari kita lihat bagaimana Anda dapat dengan mudah menambahkan JavaScript di halaman WordPress atau posting tanpa merusak situs web Anda.

3 Metode Cara Mudah Menambahkan JavaScript di Halaman atau Postingan WordPress

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

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

LIHAT:   Tutorial Mudah Cara Memasang Video di Posting Blog WordPress

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

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

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

Pertama, Anda perlu memasang dan mengaktifkan plugin Insert Headers and Footers. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah aktivasi, Anda perlu mengunjungi Pengaturan > Insert Header 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 simpan.

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

Metode 2. Menambahkan Kode JavaScript Secara Manual

Metode ini mengharuskan Anda untuk menambahkan kode ke file WordPress Anda. Jika Anda belum pernah melakukan ini sebelumnya, silakan lihat panduan kami tentang cara menyalin dan menempelkan kode di WordPress.

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

function wpb_hook_javascript () {
    ?>
        <script>
          // kode javscript Anda
        </ script>
    <? php
}
add_action ('wp_head', 'wpb_hook_javascript');

 

Menambahkan JavaScript ke Postingan atau Halaman Menggunakan Kode WordPress Tertentu

Anggap saja Anda hanya ingin memuat javascript ini pada postingan 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">
          // letakkan kode javscript Anda ada di sini
        </ script>
    <? php
  }
}
add_action ('wp_head', 'wpb_hook_javascript');

 

LIHAT:   Cara Membuat Plugin WordPress

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 postingan 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">
          // kode javscript Anda ada di sini
        </ script>
    <? php
  }
}
add_action ('wp_head', 'wpb_hook_javascript');

 

Selain is_single, kita sekarang menggunakan is_page untuk mengecek ID halaman.

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

function wpb_hook_javascript_footer () {
    ?>
        <script>
          // kode javscript Anda pergi
        </ script>
    <? php
}
add_action ('wp_footer', 'wpb_hook_javascript_footer');

 

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

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

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

Pertama, Anda perlu menginstal dan mengaktifkan plugin Code Embed. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah aktivasi, Anda perlu mengedit postingan atau halaman di mana Anda ingin menambahkan javascript. Pada halaman edit postingan, klik tombol ‘Screen Option‘ dan periksa opsi ‘Custom Fields’.

LIHAT:   Tutorial Cara Mendapatkan Sertifikat SSL Gratis WordPress Anda

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

Kolom nama dan bidang nilai kustom sekarang akan muncul.

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

Jangan lupa mengeklik tombol ‘Tambahkan Bidang Khusus’ untuk menyimpan bidang khusus 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 Anda.

{{CODEmyjscode}}

Anda sekarang dapat menyimpan posting atau halaman Anda dan melihat situs Anda. Anda akan dapat melihat kode javascript dengan menggunakan Inspect Tool atau dengan melihat sumber halaman.

Tip: 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 3 Cara Mudah Menambahkan JavaScript di Halaman atau Postingan WordPress membantu Anda mempelajari cara menambahkan JavaScript dengan mudah di halaman atau postingan WordPress. Anda mungkin juga ingin melihat daftar tutorial NonCreative lainnya yang sangat berguna untuk file fungsi WordPress.

Sumber: Javascript in WordPress

Tinggalkan Balasan