Tutorial Mengatur Header dan Footer Website WordPress: Panduan Lengkap & SEO Friendly
Header dan footer yang tertata rapi membantu pengunjung menavigasi website dengan lebih cepat dan profesional. Tutorial mengatur header dan footer website ini akan memandu Anda melalui berbagai metode praktis, mulai dari fitur bawaan tema hingga penggunaan page builder populer tanpa perlu menyentuh baris kode sama sekali.
Navigasi yang buruk sering kali menjadi alasan utama tingginya bounce rate. Dengan mengikuti panduan ini, Anda dapat memastikan elemen navigasi tetap konsisten, responsif di perangkat mobile, dan optimal untuk mesin pencari.
Menggunakan WordPress Customizer (Cara Termudah)
Hampir semua tema modern menyediakan fitur pengaturan header dan footer langsung melalui menu Customizer. Ini adalah cara paling aman karena tidak memerlukan instalasi plugin tambahan yang bisa memperlambat website.
Langkah-langkah Pengaturan:
- Login ke Dashboard WordPress Anda.
- Navigasi ke menu Appearance > Customize.
- Cari tab berjudul Header Builder atau Site Identity.
- Unggah logo website Anda dan atur lebar maksimalnya agar tidak menutupi menu.
- Pilih Primary Menu untuk menentukan daftar link yang akan muncul di navigasi atas.
- Untuk Footer, cari opsi Footer Builder atau Widgets.
- Tambahkan elemen seperti teks hak cipta (copyright), link kebijakan privasi, atau ikon media sosial.
- Klik Publish untuk menyimpan perubahan.
Tutorial Mengatur Header dan Footer Website dengan Elementor
Jika tema Anda memiliki keterbatasan desain, menggunakan plugin Elementor Header & Footer Builder adalah solusi terbaik. Metode ini memungkinkan Anda mendesain header secara visual dengan fitur drag-and-drop.
Tahapan Konfigurasi:
- Instal dan aktifkan plugin Elementor Header & Footer Builder dari repository WordPress.
- Pergi ke menu Appearance > Elementor Header & Footer Builder.
- Klik Add New dan beri judul (misal: Header Utama).
- Pada opsi “Type of Template”, pilih Header.
- Pada “Display On”, pilih Entire Website agar muncul di semua halaman.
- Klik Edit with Elementor.
- Desain header sesuai keinginan Anda menggunakan kolom dan widget (Logo, Nav Menu, Search).
- Ulangi langkah yang sama untuk membuat Footer.
Menambahkan Script ke Header via Plugin
Seringkali Anda perlu menambahkan kode pelacakan seperti Google Analytics atau Facebook Pixel ke bagian header. Jangan mengedit file header.php secara langsung karena kode akan hilang saat tema diperbarui.
Gunakan plugin WPCode (Insert Headers and Footers):
- Instal plugin WPCode.
- Masuk ke menu Code Snippets > Header & Footer.
- Tempelkan kode script Anda pada kolom Header atau Footer yang tersedia.
- Klik Save Changes.
Optimasi Header & Footer untuk Mobile
Lebih dari 60% trafik internet berasal dari perangkat mobile. Pastikan header Anda tidak memakan terlalu banyak ruang layar (viewport).
| Elemen | Optimasi Mobile |
|---|---|
| Menu Navigasi | Gunakan model Hamburger Menu (ikon tiga garis). |
| Logo | Gunakan versi logo yang lebih kecil atau ikon saja. |
| Footer Widget | Atur tumpukan (stacking) secara vertikal, bukan horizontal. |
| Sticky Header | Aktifkan fitur sticky agar menu tetap terlihat saat user scroll. |
Masalah Umum dan Solusinya
Saat mengatur header dan footer, Anda mungkin menemui beberapa kendala teknis. Berikut adalah solusi untuk masalah yang paling sering muncul:
1. Header Tidak Muncul di Halaman Tertentu
Penyebab: Pengaturan Display Conditions pada page builder belum mencakup seluruh situs atau ada konflik dengan template halaman (seperti Canvas mode di Elementor).
Solusi: Pastikan template halaman disetel ke “Default” dan periksa kembali kondisi display di pengaturan plugin builder Anda.
2. Perubahan Tidak Terlihat (Caching)
Penyebab: Browser atau plugin cache masih menyimpan versi lama dari website Anda.
Solusi: Bersihkan cache pada plugin (seperti LiteSpeed atau WP Rocket) dan tekan Ctrl + F5 pada browser Anda.
FAQ (Pertanyaan Umum)
Apakah mengganti header bisa merusak SEO?
Tidak, selama Anda tetap menyertakan elemen navigasi utama dan memastikan struktur heading (H1-H6) di dalam konten tidak terganggu. Pastikan juga logo memiliki atribut alt text yang relevan.
Bisakah saya memiliki header berbeda untuk landing page?
Ya. Jika menggunakan Elementor, Anda bisa mengatur Display Conditions untuk mengecualikan (exclude) halaman tertentu atau membuat header khusus hanya untuk satu halaman spesifik.
Berapa ukuran logo ideal untuk header?
Umumnya, tinggi logo berkisar antara 50px hingga 100px. Pastikan file gambar telah dikompresi agar tidak memperlambat loading website.
Kesimpulan
Mengatur header dan footer adalah langkah mendasar dalam membangun website profesional. Pilihlah metode Customizer untuk kesederhanaan, atau Elementor untuk fleksibilitas desain tanpa batas. Pastikan setiap elemen navigasi berfungsi dengan baik di perangkat mobile untuk memberikan pengalaman terbaik bagi pengunjung Anda.
