Bagaimana Cara Menambahkan Kode pada Header/Footer WordPress

Bingung cara menambahkan kode pada header WordPress? Pada tutorial singkat ini, saya akan menjelaskan cara memasukan kode pada header/footer WordPress dengan cara manual atau dengan bantuan plugin.

Pada beberapa tutorial, seperti ketika kamu ingin menggunakan Google Analytic ataupun mengatur OpenGraph dan Twitter Card, seringkali ada instruksi untuk memasukan kode HTML ke dalam header WordPress tanpa ada penjelasan lebih lanjut. Hal ini mungkin sepele bagi beberapa orang, namun untuk pemula hal ini akan sangat membingungkan.

Pada Blogger, cara ini sangat mudah untuk dilakukan karena semua elemen blog ada pada satu file template sehingga kamu dapat dengan mudah untuk menemukan header atau footer blog tersebut.

Sedangkan pada WordPress mungkin akan sedikit membingungkan karena tiap elemen memiliki file sendiri-sendiri. Namun hal ini akan sangat mudah sekali kalau kamu mengetahui apa yang harus kamu cari.

Cara Menambahkan Kode pada Header/Footer WordPress

Pada WordPress, ada dua cara yang bisa kamu lakukan untuk menambahkan kode pada header/footer yaitu dengan cara manual atau dengan bantuan plugin.

1. Menambahkan Kode pada Header/Footer WordPress Secara Manual

Cara pertama yang bisa kamu lakukan adalah dengan memasukannya secara manual melalui text editor tema yang bisa kamu akses melalui dashboard WordPress.

Masuk ke menu TAMPILAN » PENYUNTING atau APPEARANCE » EDITOR lalu cari file tajuk tema (header.php).

Bila kamu ingin memasukan kode pada footer, cari file footer.php yang juga ada di halaman yang sama.

Pada text editor akan muncul isi dari file header.php dan untuk memasukan kode pada file tersebut, kamu cukup mencari baris kode di antara tag <head> dan </head> yang biasanya berada pada baris-baris awal, seperti contoh berikut:

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head> //kamu bisa memasukan kode dari sini
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head> //...sampai sini

Setelah itu, masukan kode yang kamu inginkan dan klik tombol PERBARUI BERKAS.

Sedangkan untuk memasukan kode pada footer, cukup letakkan kode di atas tag </body>, selesai.

2. Menambahkan Kode pada Header/Footer WordPress dengan Plugin

Pada cara kedua, untuk kamu yang tidak ingin mengutak-atik isi file header.php, kamu juga dapat menggunakan beberapa plugin seperti,

Dan pada contoh kali ini, saya akan menggunakan plugin Header and Footer untuk memasukan kode ke dalam header WordPress.

Pertama-tama, pasang dulu plugin tersebut lalu aktifkan.

Untuk menggunakannya, masuk ke menu PENGATURAN » HEADER AND FOOTER.

masukan-kode-pada-header-footer-wordpress-dengan-plugin

NOTE: Perlu diketahui bahwa plugin ini tidak hanya bisa digunakan untuk menambahkan kode pada header saja tapi juga pada tempat lainnya seperti pos, laman depan (homepage), dll.

Untuk memasukan kode, kamu cukup mengetiknya pada kotak isian yang tersedia. Kalau kamu mau, ada juga opsi untuk menambahkan kode pada header yang berada di laman depan saja.

Setelah selesai, klik tombol save dan periksa hasil kerja kamu. Sangat mudah bukan?

Penutup

Itulah dua cara yang bisa dilakukan untuk menambahkan kode pada header/footer WordPress.

Untuk cara manual, kamu harus tahu bahwa kode yang kamu masukan akan hilang bila kamu mengupdate atau mengganti tema yang kamu pakai saat ini.

Bila kamu tidak ingin memakai plugin yang saya rekomendasikan, kamu bisa membuat tema anak (child theme) agar perubahan yang kamu lakukan tidak hilang.

Tulis pertanyaan dan saran pada kolom komentar di bawah ini. Kalau pos ini membantu kamu, jangan segan untuk berbagi dengan yang lain yah!

This Post Has 9 Comments

  1. Di tema saya tidak ada pilihan editor, untuk instal plugin tapi keterangannya upgrade dulu ke Business Plan, mau masukin kode google analytics. Ada cara lain? Terima kasih.

    1. Harus upgrade ke Business Plan dulu berarti pakai wordpress.com yah?

      Kalau iya, setahu saya wp.com memang tidak support kecuali upgrade paket dulu. Kalau sudah diupgrade, nanti ada fitur Analytics dan kita tinggal masukin tracking ID-nya di situ.

      Untuk paket gratis, pilihan statistiknya memang hanya data dari plugin JetPack saja. Kalau untuk cara lain, saya lihat ada yang bisa menghubungkan wp.com dengan Google Analytics menggunakan CloudFlare. Tapi saya belum pernah coba jadi belum bisa komentar banyak.

  2. Kalau muncul peringatan kaya gini
    (Terjadi kesalahan. Perubahan Anda mungkin tidak tersimpan. Silakan coba lagi. Ada kemungkinan Anda harus memperbaikinya secara manual dan mengunggah berkas tersebut melalui FTP.)
    Gimana solusi nya?

    1. Hi mas Nagakid

      Boleh tau apa yang sedang dikerjakan mas?

  3. Makasih tutorialnya gan, berguna banget buat saya yang baru pake WP

  4. Sepertinya sangat menarik, terus terang saya masih belum pernah utak atik baik itu header/footer karena masih awam sekali, dari kedua point diatas yang lebih baik apa ya gan? pengeditan dengan cara manual melalui text editor tema WordPress atau dengan menggunakan pluggin saja?
    Terimakasih

    1. Lebih enak pakai plugin.

      Kalau melakukannya secara manual langsung ke file tema, setiap kali update atau ganti tema, kode yang kita tambahkan di header/footer bisa hilang dan harus ditulis ulang.

  5. Sudah pernah coba pake tema “customizr” min ?
    pada tema itu susah banget cari kode dan nya .

    aku suka, page speed nya A.

    tapi pas aku mau pasang Page Level Ads by adsense dan Ads code by DoubleClick, aku bingung.

    bantu donk …

    1. Yup, pernah nyobain Customizr dulu. Tapi ternyata dah berubah banyak skrng, jd lebih bagus tuh pas nyobain tadi.

      Kalo mau masukin kode ke header, tag <head> pada tema Customizr mang ga’ ketemu di file header.php karena adanya di file czr-front.php. Kalo masukinnya manual, saran saya bikin child theme (tema anak) supaya ga’ repot masukin kode lagi klo nanti temanya diupdate.

      Selamat mencoba kembali, mudah-mudahan bisa membantu yah!

Leave a Reply

Close Menu
0 Shares
Share
Tweet
+1
Stumble