Cara Menambahkan Kode Header dan Footer di WordPress

Menyesuaikan situs web WordPress Anda menggunakan kode bisa jadi menakutkan. Seringkali, Anda harus menggali file inti untuk mengubah konfigurasi atau menambahkan parameter baru, yang dapat merusak situs Anda jika Anda melakukannya dengan cara yang salah.

Namun, menambahkan kode header dan footer cenderung lebih sederhana. Seringkali, Anda hanya perlu menyalin dan menempelkan cuplikan kode tertentu. Ini berarti jika Anda tahu cara mengakses file header dan footer, Anda telah melewati bagian yang paling menakutkan.

Pada artikel ini, kami akan mengajari Anda cara menambahkan kode header dan footer di WordPress baik secara manual maupun dengan plugin. Kedua pendekatan ini sangat mudah, jadi mari kita langsung!

Mengapa Anda Mungkin Perlu Menambahkan Kode Header dan Footer di WordPress

Jika Anda menjalankan situs web, Anda mungkin akrab dengan setidaknya satu layanan pihak ketiga yang mengharuskan Anda menyematkan kode untuk menyambungkannya.

Beberapa contoh paling populer termasuk Google Analytics, Search Console, Facebook Pixel, dan banyak alat lain yang melibatkan pelacakan situs web.

Semua layanan tersebut mengharuskan Anda untuk menambahkan skrip khusus di antara tag kepala situs web Anda. Header situs Anda adalah komponen penting termasuk elemen seperti skrip, judul, file gaya, dan banyak lagi.

Tag footer bekerja mirip dengan rekan-rekan kepala mereka. Secara teknis, jika Anda menambahkan cuplikan kode ke footer situs Anda, cuplikan tersebut akan berjalan sama seperti jika Anda memasukkannya ke dalam header.

Namun, penting untuk dipahami bahwa situs web Anda akan menjalankan skrip sesuai urutan Anda memasukkannya. Plus, kode header akan   dijalankan sebelum halaman dimuat, sedangkan kode footer akan dijalankan setelahnya.

Jika Anda memiliki opsi untuk memilih dan Anda peduli dengan pengoptimalan situs web, memindahkan JavaScript ke footer situs Anda dapat membantu mempercepat waktu pemuatan. Namun, beberapa layanan akan secara eksplisit meminta Anda untuk menambahkan kode mereka ke header Anda untuk menghindari masalah eksekusi.

Sebagai aturan praktis, jika suatu layanan menanyakan hal ini kepada Anda, kami sarankan untuk mengikuti sarannya. Untuk cuplikan kode JavaScript lainnya, letakkan di footer situs WordPress Anda. Kode CSS selalu masuk ke header.

Cara Menambahkan Kode Header dan Footer di WordPress (2 Metode)

Seperti yang sering terjadi pada WordPress, Anda dapat mencapai tujuan yang sama dengan memodifikasi file secara manual atau menggunakan plugin.

Mari kita mulai dengan berbicara tentang pendekatan plugin.

1. Gunakan Plugin Seperti Head, Footer, dan Post Injection

Menggunakan plugin untuk menambahkan kode ke file header dan footer Anda di WordPress adalah pendekatan yang paling aman. Dengan plugin, Anda tidak perlu mengubah file tema secara manual atau memastikan bahwa Anda menambahkan skrip di tempat yang tepat.

Meskipun ada banyak plugin bagus untuk dipilih, rekomendasi kami untuk pekerjaan ini adalah plugin Head, Footer, dan Post Injections.

Plugin ini memberi Anda banyak kendali atas di mana dalam kode Anda, Anda ingin menambahkan cuplikan kode Anda. Ini juga menawarkan opsi untuk menambahkan skrip yang berbeda untuk rendering seluler dan desktop situs Anda.

Untuk menambahkan plugin, buka Plugins > Add New di dalam dasbor Anda dan gunakan fitur pencarian untuk menemukan plugin. Klik install, lalu aktifkan plugin.

Setelah plugin aktif, Anda dapat langsung menuju ke Settings > Header and Footer . Anda akan melihat beberapa bidang tempat Anda dapat menambahkan cuplikan kode.

Jika Anda menggali opsi plugin, Anda akan melihat bahwa plugin itu menawarkan banyak penempatan tambahan untuk cuplikan kode Anda. Namun, dalam kebanyakan kasus, Anda dapat tetap menggunakan tab Head dan footer .

Untuk kode global, pastikan Anda menempatkan cuplikan tersebut di dalam bidang Di Setiap Halaman . Namun, jika Anda hanya membutuhkan kode untuk dijalankan di beranda, gunakan opsi Only On The Home Page .

Setelah Anda selesai menambahkan kode ke situs web Anda, simpan perubahan ke plugin dan Anda siap melakukannya!

2. Tambahkan Cuplikan Kode Melalui File functions.php Anda

Menambahkan kode header dan footer secara manual di WordPress tidak rumit, tetapi membutuhkan lebih banyak pertimbangan daripada pendekatan plugin.

Anda dapat menambahkan kode langsung ke file header.php atau footer.php tema aktif Anda. Anda dapat menemukan file-file ini di dalam direktori /public_html/wp-content/themes/ dengan membuka folder tema aktif Anda dan melihat ke dalam:

Anda dapat mengakses file tersebut melalui File Transfer Protocol (FTP) dan mengeditnya menggunakan editor kode favorit Anda. Namun, mengedit file header dan footer secara langsung bisa jadi berantakan. Dengan mengingat hal ini, kami memiliki dua rekomendasi jika Anda berencana menggunakan pendekatan manual:

1. Buat tema anak untuk tema Anda. Dengan cara ini, Anda tidak akan kehilangan penyesuaian apa pun saat memperbarui tema induk.
2. Gunakan kait untuk menambahkan kode melalui file functions.php Anda. Ini menawarkan pendekatan yang lebih bersih untuk mengedit file header dan footer secara manual.

Idealnya, Anda harus selalu menggunakan tema anak jika Anda berencana melakukan segala jenis penyesuaian tema. Anda dapat mengakses file functions.php tema anak Anda di foldernya di dalam direktori /wp-content/themes .

Buka file functions.php di editor kode Anda. Untuk menambahkan kode yang Anda inginkan, Anda harus menggunakan wp_head   atau wp_footer   kait.

Cuplikan kode berikut menambahkan kode khusus Anda ke header situs Anda:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

Anda dapat menggunakan kait wp_footer alih-alih wp_head jika Anda ingin menempatkan kode di footer. Anda juga dapat mengubah nama fungsi (test_script) jika Anda mau.

Ketika Anda selesai mengutak-atik file functions.php Anda, ingatlah untuk menyimpan perubahan Anda, dan hanya itu. Kode apa pun yang Anda tambahkan seharusnya berfungsi sekarang!

Kesimpulan

Banyak layanan pihak ketiga seperti Google Analytics atau Facebook Pixel mengharuskan Anda menambahkan cuplikan kode ke situs web Anda sehingga mereka dapat terhubung dengannya. Namun, ini hanyalah salah satu dari banyak kasus di mana Anda perlu menambahkan kode ke header dan footer Anda di WordPress, jadi ada baiknya mengetahui cara melakukannya.

Ada dua cara Anda dapat menambahkan cuplikan kode ke header dan footer Anda. Anda dapat menggunakan plugin seperti 'Head, Footer dan Post Injection', atau menambahkan potongan kode melalui file functions.php Anda.

Apakah Anda memiliki pertanyaan tentang cara menambahkan kode header dan footer di WordPress? Mari kita bicara tentang mereka di bagian komentar di bawah!