Bagaimana Cara Menambahkan Kode Header dan Footer di WordPress?

Diterbitkan: 2021-09-06

Apakah Anda terbiasa dengan situasi di mana Anda perlu menambahkan cuplikan kode ke header dan footer WordPress Anda?

Ini sering terjadi ketika Anda mencoba mengintegrasikan layanan seperti Google AdSense, Google Analytics, dan Google Search Console di situs web Anda.

Secara default, WordPress tidak menawarkan opsi untuk menambahkan kode ke header dan footer Anda. Tapi untungnya, ada cara mudah lainnya untuk pemula.

Dalam panduan ini, kami akan menjelaskan dua metode berbeda tentang cara menambahkan kode header dan footer di WordPress . Cara paling sederhana adalah dengan menggunakan plugin WordPress. Untuk metode selanjutnya, Anda dapat menambahkan cuplikan kode ke file PHP tema Anda.

Jadi, mari kita masuk ke detailnya!

Daftar isi

  • Menambahkan Kode Header dan Footer di WordPress – 2 Metode Sederhana
    • Metode 1: Menambahkan Kode ke Header dan Footer WordPress menggunakan Plugin
    • Metode 2: Menambahkan Kode Header dan Footer Secara Manual di WordPress
  • Kesimpulan

Menambahkan Kode Header dan Footer di WordPress – 2 Metode Sederhana

Seperti disebutkan di atas, Anda dapat menggunakan plugin atau menambahkan kode secara manual ke header dan footer WordPress Anda. Kami merekomendasikan menggunakan plugin sederhana karena jauh lebih mudah dan aman dibandingkan dengan metode manual.

Berikut adalah beberapa manfaat menggunakan plugin untuk menambahkan kode di header dan footer WordPress:

  • Mudah, Cepat, dan Terorganisir: Menggunakan plugin jauh lebih mudah dan lebih cepat dibandingkan dengan pendekatan manual. Plus, menggunakan plugin membuat tugas Anda tetap teratur dan memungkinkan Anda menyimpan kode header dan footer di satu tempat.
  • Mencegah Kesalahan: Plugin mudah digunakan dan ramah bagi pemula. Anda tidak perlu melakukan modifikasi pada kode khusus untuk menggunakannya di situs web Anda. Dengan demikian, ini mencegah kemungkinan kesalahan.
  • Perubahan Tetap Utuh: Plugin menyimpan kode header dan footer Anda di tempat aman yang terpisah. Oleh karena itu, bahkan jika Anda memperbarui atau mengedit tema Anda, pengaturannya tetap utuh.

Karena itu, mari gali proses langkah demi langkah untuk menambahkan kode header dan footer di WordPress menggunakan kedua metode ini.

Tetapi pertama-tama, pastikan untuk membuat cadangan file WordPress Anda jika terjadi kesalahan atau Anda ingin kembali ke pengaturan sebelumnya.

Metode 1: Menambahkan Kode ke Header dan Footer WordPress menggunakan Plugin

Ada banyak plugin WordPress untuk menambahkan kode header dan footer di WordPress. Namun, kami menyarankan untuk menggunakan plugin Sisipkan Header dan Footer. Plugin ini memiliki antarmuka yang sederhana dan fitur bawaan untuk memungkinkan Anda menambahkan kode ke file header dan file footer dengan mudah.

Berikut adalah cara Anda menambahkan kode header dan footer di WordPress menggunakan plugin ini:

  • Buka Plugin > Add New di dashboard WordPress Anda.
  • Cari plugin Sisipkan Header dan Footer.
  • Instal dan aktifkan.
  • Setelah aktivasi, buka Pengaturan di dasbor Anda. Kemudian, klik opsi Insert Header and Footers .
  • Anda dapat melihat kotak tempat Anda dapat menambahkan potongan kode untuk header, body, dan footer.
Nama tangkapan layar: Opsi untuk menambahkan kode pada header, body, dan footer.png
  • Anda cukup menambahkan kode Anda di kotak header dan footer.
  • Setelah selesai, klik tombol Simpan .

Sekarang, plugin secara otomatis memuat kode yang Anda tambahkan di masing-masing lokasi situs Anda. Untuk mengedit atau menghapus kode, kembali ke kotak header dan footer ini dan hapus kodenya. Terakhir, simpan perubahan untuk melanjutkan.

Catatan:

  • Anda harus tetap memasang dan mengaktifkan plugin ini setiap saat. Jika Anda menonaktifkan plugin, WordPress berhenti menambahkan kode ke situs Anda.
  • Setelah menyimpan perubahan, Anda perlu menghapus cache WordPress Anda . Melakukannya memastikan bahwa perubahan terlihat dengan benar di bagian depan situs web Anda.

Metode 2: Menambahkan Kode Header dan Footer Secara Manual di WordPress

Metode manual sedikit lebih teknis daripada yang pertama. Anda perlu menyiapkan cuplikan Anda dan kemudian menambahkannya ke file functions.php WordPress Anda. Sebelum melakukan modifikasi apa pun, pastikan untuk membuat cadangan WordPress .

Kami juga menyarankan untuk menggunakan tema anak saat mengedit karena kode akan ditimpa saat Anda memperbarui tema induk Anda. Menginstal dan mengedit file tema anak memastikan Anda tidak kehilangan pengaturan nanti.

Banyak pengembang menawarkan tema anak untuk tema WordPress tertentu. Namun, jika milik Anda tidak memilikinya, lihat Cara memasang tema anak di WordPress .

Sekarang, setelah membuat cadangan WordPress dan menginstal tema anak, ikuti langkah-langkah di bawah ini untuk menambahkan kode header dan footer secara manual:

Langkah 1: Menyiapkan Cuplikan Kode

Anda dapat menggunakan kerangka snippet berikut untuk header dan footer Anda:

Cuplikan Kode untuk Header

 /* Describe the code snippet for your header */ add_action('wp_head', 'your_function_name'); function your_function_name(){ ?> PASTE HEADER CODE HERE <?php };

Cuplikan Kode untuk Footer

 * Describe the code snippet for your footer*/ add_action('wp_footer', 'your_function_name'); function your_function_name(){ ?> PASTE FOOTER CODE HERE <?php };

Untuk setiap cuplikan ini, pastikan untuk mengubah yang berikut ini dengan milik Anda sendiri:

  • “Jelaskan cuplikan kode untuk header/footer Anda”
  • “nama_fungsi_Anda()”
  • “Tempel kode header/footer di sini”

Langkah 2: Menambahkan Cuplikan Kode ke File functions.php Tema Anak Anda

Setelah menyiapkan cuplikan kode untuk header dan footer, Anda perlu menambahkan kode tersebut ke file functions.php tema Anda.

Berikut adalah bagaimana Anda dapat melakukannya:

  • Buka Appearance > Theme Editor dari Panel Admin WordPress Anda.
Pengaturan editor tema
  • Klik file “ functions.php ”.
  • Sekarang, rekatkan kode Anda di akhir file.
  • Klik tombol Perbarui File untuk menyimpan pengaturan.
tambahkan kode header dan footer dalam fungsi

Jika Anda ingin menambahkan kode ke halaman atau posting tertentu, Anda dapat menambahkan pernyataan “ jika ” sebagai berikut:

Untuk Tajuk :

 /* Describe the code snippet for your header */ add_action('wp_head', 'your_function_name'); function your_function_name(){ if(is_single(73790)) { ?> PASTE HEADER CODE HERE <?php };

Untuk Catatan Kaki:

 /* Describe the code snippet for your footer*/ add_action('wp_footer', 'your_function_name'); function your_function_name(){ if(is_single(73790)) { ?> PASTE FOOTER CODE HERE <?php };

Catatan : pastikan untuk mengganti nomor " 73790 " dengan id halaman atau posting Anda.

Kesimpulan

Alasan utama untuk menambahkan kode header dan footer di WordPress adalah untuk menggunakan layanan pihak ketiga seperti Google AdSense, Google Analytics, Facebook Pixel, dan alat lainnya. Namun, mungkin ada berbagai alasan juga.

Apapun alasannya, Anda dapat menambahkan kode ke header dan footer Anda menggunakan plugin atau dengan menambahkan kode ke file functions.php. Meskipun kedua metode ini efektif, Anda harus menggunakan yang pertama dan metode pilihan kami jika Anda seorang pemula. Lebih mudah dan lebih aman.

Jika Anda memiliki pertanyaan atau masalah lebih lanjut, bagikan dengan kami di bagian komentar di bawah.