Cara Mengedit Header WordPres Tanpa Plugin, Sesuai Tema!
Mengedit header di WordPress sering kali dianggap sulit jika kamu tidak menggunakan page builder atau plugin khusus.
Padahal, kamu bisa melakukan perubahan secara langsung melalui fitur bawaan WordPress, seperti theme Customizer atau dengan mengedit kode dalam theme files.
Dalam artikel ini, kita akan membahas bagaimana cara mengedit header WordPress tanpa menggunakan plugin, baik melalui Site Editor, Customizer maupun dengan langsung mengedit file theme.
Menyesuaikan Header Berdasarkan Jenis Tema
WordPress memiliki dua jenis tema utama yang menentukan cara kamu mengedit header:
- Tema Blok (Block Theme): Diperkenalkan sejak WordPress 5.9, tema ini mendukung Full Site Editing (FSE) menggunakan block editor, yang memungkinkan pengeditan seluruh bagian website secara visual tanpa perlu mengedit kode.
- Tema Klasik (Classic Theme): Tema lama yang masih mengandalkan Customizer dan pengeditan langsung melalui file PHP dalam folder tema.
Metode yang digunakan untuk mengubah header akan bergantung pada jenis tema yang kamu gunakan. Berikut tiga cara utama untuk mengedit header di WordPress:
1. Menggunakan Site Editor (untuk Block Theme)
WordPress 5.0 memperkenalkan Gutenberg, block editor yang membuat penyusunan konten lebih fleksibel. Kemudian, WordPress 5.9 membawa fitur Full Site Editing (FSE) yang memungkinkan kamu mengedit seluruh bagian tema, termasuk header, langsung dari Site Editor tanpa harus menyentuh kode.
2. Menggunakan WordPress Customizer (untuk Classic Theme)
Jika kamu menggunakan Classic Theme, pengeditan header dilakukan melalui Customizer. Meskipun lebih terbatas dibandingkan Block Theme, Customizer masih banyak digunakan dan terus diperbarui.
3. Mengedit File Tema Secara Langsung
Jika dua metode di atas tidak cukup, kamu bisa langsung mengedit file tema, terutama jika menggunakan Classic Theme. Namun, ini memerlukan pemahaman dasar tentang PHP dan bisa berisiko jika terjadi kesalahan. Biasanya, metode ini dipilih ketika opsi di Customizer tidak memberikan hasil yang diinginkan.
Cara Mengedit Header WordPress pada Block Theme dengan Site Editor
Jika kamu menggunakan block theme di website WordPress-mu, kamu bisa mengakses Site Editor melalui panel admin dengan masuk ke Appearance > Editor.
1. Masuk ke Site Editor
- Buka Dashboard WordPress.
- Pilih menu Appearance > Editor untuk masuk ke Site Editor.
2. Pilih Header yang Ingin Diedit
- Setelah masuk ke Site Editor, cari dan pilih bagian Header.
- Klik elemen yang ingin diubah, seperti logo, menu navigasi, atau warna latar belakang.
3. Mengedit Elemen dalam Header
a. Mengubah Logo
- Klik placeholder logo, lalu pilih Add Media.
- Pilih logo dari Media Library atau unggah logo baru sesuai kebutuhan.
b. Mengubah Judul dan Tagline Situs
- Klik elemen judul dan tagline, lalu edit teks sesuai dengan nama dan slogan website-mu.
- Gunakan Blok Navigasi untuk menambahkan, menghapus, atau mengatur ulang susunan menu di header.
4. Menyesuaikan Posisi dan Tampilan
- Gunakan opsi Justify Items untuk mengatur posisi elemen (tengah, kiri, atau kanan).
- Sesuaikan warna, tipografi, dan jarak antar elemen agar sesuai dengan desain website.
5. Simpan Perubahan
- Jika semua perubahan sudah sesuai, klik Save untuk menyimpannya.
Dengan metode ini, kamu bisa mengedit header secara fleksibel tanpa harus menyentuh kode sama sekali!
Cara Mengedit Header pada Classic Theme dengan Customizer
Jika kamu menggunakan Classic Theme, pengeditan header bisa dilakukan dengan mudah melalui Customizer. Fitur ini memungkinkan kamu mengubah tampilan header tanpa harus menyentuh kode.
Berikut langkah-langkah mengedit header menggunakan Customizer:
1. Masuk ke WordPress Customizer
Dari Dashboard, pilih menu Appearance > Customize untuk membuka Customizer.
2. Pilih Opsi “Site Identity”
Di dalam Customizer, cari dan pilih menu Site Identity. Di sini, kamu bisa mengubah logo, judul situs, dan tagline agar sesuai dengan identitas brand-mu.
Untuk menyesuaikan menu navigasi di header, pilih menu Menus > Primary Menu. Kamu bisa menambah, menghapus, atau menyusun ulang menu agar lebih rapi.
4. Menyesuaikan Warna dan Tata Letak
Beberapa theme klasik memungkinkan perubahan warna latar belakang header melalui opsi Colors. Jika ingin mengganti latar belakang dengan gambar, gunakan opsi Header Image.
5. Simpan Perubahan
Setelah selesai mengedit, klik Publish agar perubahan diterapkan di website.
Meskipun Customizer memiliki keterbatasan dibandingkan dengan Site Editor, fitur ini masih cukup untuk melakukan penyesuaian dasar pada header sesuai kebutuhanmu.
Cara Mengedit Header WordPress dengan Mengubah File Tema
Jika opsi bawaan tidak cukup atau kamu ingin lebih banyak kontrol, kamu bisa langsung mengedit file tema. Namun, ini membutuhkan pemahaman dasar tentang HTML, CSS, dan PHP.
Peringatan: Sebelum mengedit file tema, pastikan kamu melakukan backup untuk menghindari kesalahan fatal.
Berikut adalah langkah-langkah mengedit file header.php
1. Akses File Tema
- Masuk ke Appearance > Theme File Editor di dashboard WordPress.
- Cari dan pilih file header.php di folder tema yang aktif.
2. Edit Kode HTML dan PHP
- Mengubah Logo
Cari kode yang mengatur logo, biasanya seperti ini:
<div class="site-logo">
<a href="<?php echo esc_url(home_url('/')); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo">
</a>
</div>
Gantilah logo.png dengan URL logo yang kamu inginkan.
- Menyesuaikan Menu Navigasi
Jika ingin mengedit menu navigasi, cari kode berikut:
<nav class="main-navigation">
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>
Pastikan menu yang digunakan sudah terdaftar dalam tema.
3. Simpan Perubahan dan Periksa Hasilnya
- Jika sudah selesai, klik Update File.
- Periksa hasilnya di website untuk memastikan perubahan diterapkan dengan baik.
Tips: Jika tidak ingin mengedit langsung dari Theme Editor, kamu bisa menggunakan File Manager di cPanel atau mengakses file melalui FTP.
Kesimpulan
Mengedit header WordPress tanpa plugin sebenarnya tidak sesulit yang dibayangkan. Kamu bisa memilih metode yang sesuai dengan jenis tema yang digunakan:
- Jika menggunakan Block Theme, kamu bisa mengedit header dengan Site Editor, yang lebih fleksibel dan mudah digunakan.
- Jika menggunakan Classic Theme, kamu bisa menyesuaikan elemen header melalui Customizer tanpa harus menyentuh kode.
- Jika ingin kontrol lebih lanjut dan memahami HTML, CSS, serta PHP, kamu bisa langsung mengedit file header.php.
Agar lebih aman, selalu lakukan cadangan sebelum mengubah kode, sehingga kamu bisa mengembalikan tampilan lama jika terjadi kesalahan. Dengan metode yang tepat, kamu bisa menyesuaikan header sesuai kebutuhan tanpa harus bergantung pada plugin.
Namun, tampilan yang menarik saja tidak cukup jika website-mu berjalan di hosting yang lambat atau tidak stabil. Untuk memastikan website tetap cepat, aman, dan andal, gunakan layanan hosting berkualitas seperti IDwebhost.Â
Dengan server berkecepatan tinggi, fitur keamanan canggih, dan dukungan teknis 24/7, IDwebhost siap memastikan website-mu berjalan optimal setiap saat.