4 Cara Mudah (3 Tanpa Kode)

Diterbitkan: 2022-07-21

Header adalah elemen pertama situs web Anda yang dilihat sebagian besar pengunjung. Biasanya, di sinilah logo dan menu situs Anda ditempatkan, dan merupakan bagian tak terpisahkan dari setiap halaman. Jika Anda tidak tahu cara mengedit header WordPress, Anda akan kesulitan ️ membuat kesan pertama yang kuat.

WordPress memungkinkan Anda untuk mengedit header situs Anda dalam beberapa cara. Hampir setiap tema hadir dengan desain header yang unik, yang dapat Anda sesuaikan secara manual. Sebagai alternatif, Anda dapat menggunakan berbagai alat yang disediakan oleh komunitas WordPress yang lebih besar.

Pada artikel ini, kami akan menunjukkan kepada Anda empat cara untuk mengedit header WordPress , baik dengan dan tanpa plugin. Ayo bekerja!

Daftar Isi:

  1. Edit header menggunakan Customizer
  2. Gunakan Pengeditan Situs Lengkap (dan tema yang kompatibel)
  3. Edit tajuk menggunakan pembuat halaman WordPress
  4. Tambahkan kode khusus ke header menggunakan plugin

1. Edit header menggunakan Customizer

Penyesuai WordPress adalah alat bawaan yang memungkinkan Anda mengedit elemen global situs web Anda. Anda dapat menggunakan Customizer untuk mengedit header, footer, tipografi, menu, dan aspek penting situs Anda.

Untuk mengakses Customizer, buka dasbor Anda dan klik Appearance > Customize . Penyesuai akan menampilkan menu opsi di sebelah kiri dan pratinjau situs web Anda di sebelah kanan:

Penyesuai WordPress

Perhatikan bahwa jika Anda tidak melihat opsi Penyesuai WordPress di dasbor, Anda mungkin menggunakan tema yang mendukung blok. Untuk mengedit tajuk untuk jenis tema ini, Anda perlu menggunakan Pengeditan Situs Lengkap, yang akan kita bahas di bagian selanjutnya.

Di Customizer, Anda akan melihat opsi yang terkait dengan header Anda. Terkadang ini mungkin langsung terlihat, seperti pada contoh di atas. Di lain waktu, Anda mungkin perlu membuka sub-menu. Misalnya, beberapa tema menempatkan opsi tajuk di opsi Tata Letak atau yang serupa.

Setelah Anda menemukan opsi header tema Anda, pilihan yang Anda lihat sekarang akan bergantung pada tema yang Anda gunakan. Misalnya, tema Neve kami menyertakan opsi untuk mengubah logo Anda, warna header, dan menu mana yang ditampilkan di bagian ini:

Menyesuaikan tajuk menggunakan tema Neve

Neve juga menawarkan pilihan elemen yang dapat Anda tambahkan ke header menggunakan fungsionalitas drag-and-drop. Pilih salah satu elemen di bawah Komponen yang Tersedia dan seret ke baris header di bagian bawah Penyesuai. Neve memungkinkan Anda untuk menambahkan hingga tiga baris elemen untuk header dan menempatkan elemen di posisi apa pun yang Anda inginkan:

Menempatkan elemen header menggunakan tema Neve di Customizer

Saat Anda puas dengan konfigurasi header Anda, simpan perubahan pada tema Anda dengan mengklik tombol Publish di bagian atas Customizer.

Perhatikan bahwa setiap perubahan yang Anda buat menggunakan Penyesuai hanya akan berlaku untuk tema aktif Anda. Jika Anda mengubah tema, Anda harus mengedit header WordPress lagi.

2. Gunakan Pengeditan Situs Lengkap (dan tema yang kompatibel)

Pengeditan Situs Lengkap adalah fitur baru yang memungkinkan Anda mengedit template tema menggunakan Editor Blok. Ini hanya berfungsi untuk tema yang mengaktifkan blok, jadi mungkin tersedia atau tidak tersedia di situs Anda.

Untuk melihat apakah tema Anda mendukung Full Site Editing, buka menu Appearance dan cari opsi Editor :

Mengakses Pengeditan Situs Lengkap di WordPress

Pilih itu opsi dan Editor Blok akan terbuka. Namun, Anda akan mengedit template tema Anda daripada halaman atau posting individual Anda.

Secara default, editor akan membuka template halaman beranda, yang harus menyertakan elemen Header :

Menggunakan Pengeditan Situs Lengkap di WordPress

Perhatikan bahwa beberapa blok hanya akan muncul sebagai placeholder saat Anda menggunakan Pengeditan Situs Lengkap. Itu karena alat ini bukan untuk mengedit blok individu, tetapi seluruh tata letak.

Saat mengedit header, Anda mendapatkan kontrol penuh atas blok dan elemen apa yang akan disertakan. Jika Anda membuka alat Tampilan Daftar , Anda dapat melihat perincian blok apa yang saat ini ada di header:

Menggunakan Pengeditan Situs Lengkap untuk mengedit header WordPress

Pada tahap ini, Anda dapat memilih untuk menambah atau menghapus blok dari header. Untuk menghapus atau mengedit blok yang ada, pilih dan gunakan menu kontekstual yang muncul di layar saat Anda melakukannya:

Mengedit blok WordPress

Saat Anda memilih blok, Anda juga dapat mengeditnya menggunakan Blok menu pengaturan di sisi kanan layar. Menu ini biasanya berisi opsi gaya, dan bervariasi tergantung pada blok mana yang Anda edit:

Contoh opsi blok.

Untuk menambahkan blok baru, pilih elemen Header dan cari ikon tanda plus . Tombol itu akan membuka menu yang memungkinkan Anda memilih blok mana yang akan ditambahkan:

Menambahkan blok baru ke header WordPress

Fitur lain yang berguna dari Editor Situs Lengkap adalah Anda dapat mengedit menu secara visual. Untuk melakukannya, cukup pilih menu menggunakan blok Navigasi . Anda akan melihat opsi untuk menambahkan tautan baru, membuat menu baru, dan bertukar di antara yang sudah ada:

Mengedit menu di header WordPress

Bila Anda senang dengan perubahan pada header Anda, klik Simpan e . Ini akan menyimpan perubahan pada templat tajuk tema, dan perubahan itu akan tercermin di situs web Anda secara otomatis.

3. Edit header menggunakan pembuat halaman WordPress

Beberapa plugin pembuat halaman WordPress menawarkan opsi untuk mengedit header WordPress. Misalnya, Elementor Pro menyertakan alat Pembuat Tema yang dapat Anda akses dengan lisensi premium.

Jika Anda tidak memiliki akses ke Elementor Pro, Anda dapat menggunakan ekstensi pihak ketiga gratis, seperti plugin Elementor Header & Footer Builder di WordPress.org.

Kami akan menunjukkan cara melakukannya menggunakan Elementor Pro dan fitur Pembuat Temanya.

Dalam praktiknya, Pembuat Tema Elementor bekerja mirip dengan Pengeditan Situs Lengkap.

Untuk mengakses Pembuat Tema, buka Template > Pembuat Tema . Pilih opsi Header di bawah SITE PARTS , dan cari template yang ada di sebelah kanan. Seharusnya hanya ada satu templat tajuk, dan Anda dapat mengklik tombol Edit di sebelahnya:

Menggunakan Pembuat Tema Elementor

Ini akan meluncurkan editor Elementor. Dari sini, Anda dapat memilih untuk membuat header menggunakan blok Elementor atau mengimpor template yang sudah jadi. Jika Anda mengklik ikon folder di dalam badan editor, Anda dapat melihat templat tajuk apa yang dapat Anda akses:

Memilih template header Elementor

Jika Anda menggunakan Elementor, kami sarankan Anda memanfaatkan template ini. Ini memungkinkan Anda bereksperimen dengan beberapa gaya tajuk, yang dapat Anda edit dengan menambahkan atau menyesuaikan modul:

Menambahkan modul baru ke Elementor.

Jika Anda tidak terbiasa menggunakan Elementor, pembuat halaman ini memungkinkan Anda memilih modul menggunakan menu di sebelah kiri. Anda dapat menyeret modul ini ke halaman Anda, yang muncul dalam pratinjau di sisi kanan layar.

Saat menggunakan Pembuat Tema, Anda hanya mengedit template tema tertentu. Namun, Anda masih dapat menggunakan rangkaian lengkap modul dan opsi konfigurasi yang ditawarkan Elementor.

Setelah Anda selesai mengedit template header, simpan menggunakan tombol Publish . Kemudian, Elementor akan meminta Anda untuk memilih halaman mana yang akan ditampilkan template:

Memilih halaman mana yang akan menampilkan template Elementor

Kecuali Anda sudah membayar untuk lisensi Elementor premium, alat Pembuat Tema mungkin tidak membenarkan pembelian itu sendiri. Ia melakukan persis seperti yang dilakukan Pengeditan Situs Penuh, tetapi dengan biaya premium. Perbedaan utamanya adalah Anda bisa menggunakan array modul Elementor yang lebih luas, dan jika Anda sudah menggunakan Elementor, akan lebih mudah untuk memastikan desain header Anda konsisten dengan bagian situs Anda lainnya.

4. Tambahkan kode khusus ke header menggunakan plugin

Biasanya, menggunakan plugin adalah cara termudah untuk menerapkan penyesuaian di WordPress. Namun, biasanya tidak demikian dengan header. Jika Anda menginginkan plugin yang memungkinkan Anda mengedit header secara visual, Anda harus menggunakan pembuat halaman. Sebagian besar pembuat halaman yang menawarkan fungsionalitas ini datang dengan harga premium, seperti yang telah kita bahas di bagian sebelumnya.

Plugin gratis yang memungkinkan Anda untuk menyesuaikan tajuk biasanya hanya menawarkan cara yang lebih mudah untuk menambahkan kode khusus ke dalamnya. Alternatifnya adalah mengedit file tema Anda secara manual menggunakan tema anak, yang dapat mengintimidasi (dan berisiko) kecuali Anda memiliki pengalaman pengembangan web.

Salah satu contoh fantastis dari plugin tersebut adalah Header Footer Code Manager. Alat ini memungkinkan Anda untuk menambahkan cuplikan HTML, CSS, dan JavaScript ke header dan/atau footer, dan memilih di halaman mana cuplikan ini akan dimuat:

Setelah plugin aktif, buka halaman HFCM > Tambahkan Cuplikan Baru di dasbor. Di sini Anda dapat memilih jenis cuplikan apa yang ingin Anda tambahkan, di mana harus ditampilkan, dan apakah akan menambahkannya ke header atau footer:

Menambahkan kode khusus ke header WordPress

Jika Anda berencana untuk menambahkan elemen baru ke header, Anda harus menggunakan HTML. Untuk mengubah gaya tajuk dan elemen yang ada di dalamnya, Anda sebaiknya menggunakan cuplikan CSS.

Kelemahan utama dari pendekatan ini adalah Anda perlu memeriksa kode header untuk melihat kelas dan ID apa yang digunakannya, untuk menambahkan CSS ke dalamnya. Ini bisa menjadi proses yang memakan waktu saat Anda menambahkan cuplikan kode baru, memeriksa untuk melihat apakah perubahan berfungsi, dan mengubah kode sampai Anda puas dengan hasilnya.

Sesuaikan header WordPress hari ini

Mengedit header WordPress lebih mudah dari yang Anda harapkan. Itu karena WordPress menawarkan berbagai opsi untuk menyesuaikan elemen ini, mulai dari pengaturan bawaan tema Anda hingga pembuat halaman. Yang harus Anda lakukan adalah menemukan opsi yang menurut Anda paling nyaman digunakan, dan Anda bisa mulai bekerja.

Apakah Anda memiliki pertanyaan tentang cara mengedit header di WordPress? Mari kita bicara tentang mereka di bagian komentar di bawah!

Panduan gratis

5 Tips Penting untuk Mempercepat
Situs WordPress Anda

Kurangi waktu pemuatan Anda bahkan hingga 50-80%
hanya dengan mengikuti tips sederhana.