Gutenberg WordPress [Part 3]: Cara Membuat Header Kustom

Setelah memahami cara menggunakan block editor Gutenberg WordPress, selanjutnya Anda bisa langsung mempelajari cara membuat custom header menggunakan Gutenberg WordPress.

Header merupakan elemen penting dalam sebuah website yang terletak di bagian paling atas. Bagian ini bersifat statis, artinya tampilannya tidak berubah di setiap halaman website.

Pada tutorial pengantar membuat halaman website sederhana ini, Anda akan mempelajari cara membuat custom header sebagai berikut.

Hasil akhir header kustom yang dibuat menggunakan Gutenberg WordPress.

Langkah 1: Persiapan Membuat Halaman Situs Web

Sebelum memulai proses pembuatan header menggunakan Gutenberg, ada beberapa langkah persiapan yang perlu dilakukan, termasuk persiapan dasar dan lanjutan.

a. Persiapan Dasar

Berikut adalah persiapan dasar sebelum membuat halaman website menggunakan editor Gutenberg WordPress:

1. Unduh WordPress versi terbaru dan instal di localhost Anda. Anda dapat membaca petunjuk cara menginstall WordPress di WampServer atau menginstall WordPress di XAMPP jika Anda belum terbiasa menginstall di localhost.
   
2. Gunakan tema WordPress Twenty Twenty-Four. Tema ini sudah terinstal secara default di WordPress versi 6.6.1
   
3. Unduh, instal, dan kemudian aktifkan plugin Gutentor dan FakerPress. Baca panduan tentang cara menginstal plugin WordPress jika Anda belum bisa melakukannya.
4. Buat FakerPress untuk membuat postingan tiruan di WordPress. Kami telah memisahkan tutorial tentang cara membuat FakerPress di bawah ini karena melibatkan langkah-langkah spesifik.

b. Persiapan Lanjutan: Membuat FakerPress

Pembuatan FakerPress membantu Anda membuat postingan blog untuk tujuan pengujian dengan mudah. Selain itu, juga mudah dibersihkan setelahnya. Berikut ini cara membuat FakerPress:

1. Klik pada Posts> Pada bagian Quantity, masukkan nilai antara 1 dan 10.
   
2. Gulir ke bawah dan klik Generate.
   
3. Selesai. Postingan dummy telah muncul di bagian Posts.

Jika persiapan sudah selesai, Anda dapat melanjutkan untuk membuat header.

Langkah 3: Menambahkan Header

Header adalah bagian dari halaman situs web yang terletak di bagian atas. Biasanya, header berisi logo dan menu navigasi.

Secara default, WordPress 6.6.1 yang menggunakan WordPress Twenty-Twenty Four sudah memiliki pattern header yang bisa ditambahkan ke situs Anda.

1. Klik menu Appearance di sebelah kiri > Klik opsi Editor
   
   
2. Pada tab Design di sebelah kiri, pilih menu Patterns lalu pilih Header
   
   
3. Buka Pattern Header yang sudah disediakan oleh template Twenty Twenty-Four
   
4. Beginilah tampilan header dari template Twenty Twenty-Four,
   Anda bisa melakukan penyesuaian sesuai kebutuhan
   
5. Klik Save pada kanan atas halaman untuk menyimpan template

Itu dia cara menambahkan Header pada WordPress 6.6.1 yang menggunakan template Twenty Twenty-Four.

Salah satu fitur yang bisa digunakan adalah untuk membuat sticky header pada web WordPress Anda.

Langkah 4: Membuat Header

Jika anda masih menggunakan WordPress 6.2 yang menggunakan template Twenty Twenty-Three, berikut langkah-langkah untuk membuat header.

1. Klik menu Appearance di sidebar sebelah kiri > klik opsi Editor.
   
2. Pilih Template Parts > klik Header > klik ikon Edit.
   
3. Klik [+] untuk menambahkan fitur blok.
   
4. Ketik columns di kotak pencarian > pilih block Columns > pilih opsi dua kolom dengan bagian yang sama (Two columns equal split).
   
5. Pada kolom kiri, klik [+] > ketik site logo > pilih Site Logo untuk menambahkan logo ke situs web.
   
6. Klik Upload logo. Untuk mencocokkan dengan tutorial ini, Anda dapat mengunduh logo yang kami sediakan di sini.
   
7. Pada kolom sebelah kanan, klik [+] > ketik navigasi di kotak pencarian > klik Navigasi.
   
8. Ratakan ke kanan dengan memilih Justify items right.
   
9. Inilah hasil akhirnya.
   

Langkah 3: Mengedit Header

Selanjutnya, Anda perlu melakukan pengeditan dasar pada header yang sudah dibuat, yang meliputi penggabungan kolom kanan dan kiri header dan menyesuaikan ukuran header.

Ketika melakukan langkah pengeditan berikut ini, pastikan kolom header yang berisi logo dan navigasi sudah diklik atau dalam kondisi terseleksi. Jika sudah, berikut ini cara mengeditnya:

1. Klik List view > klik tiga titik pada Columns paling atas > pilih Group untuk menggabungkan kolom kanan dan kiri.
   
2. Klik Settings di sebelah kanan > pada bagian WIDE, masukkan nilai 1200 > kemudian klik Save.
   
3. Selesai. Sekarang kolom logo dan navigasi telah digabungkan menjadi satu. Ukurannya juga telah disesuaikan.

Langkah 4: Menambah dan Menghapus Navigasi

Setelah Anda selesai mengedit, langkah berikutnya adalah mempelajari cara menambah dan menghapus menu navigasi. Hal ini penting, apabila Anda ingin menambahkan menu yang belum ada atau menghapus menu yang tidak terpakai.

a. Menambahkan Navigasi

Berikut adalah cara menambahkan menu navigasi ke header:

1. Klik pada kolom Navigation.
   
2. Pada bagian Pengaturan, klik [+] untuk menambahkan Navigasi.
3. Pilih Page link.
   
4. Pilih halaman yang ingin Anda sertakan dalam navigasi.
   
5. Selanjutnya, klik Navigasi yang telah Anda buat.
   
6. Masukkan Label dan URL navigasi. Kemudian, klik Save.

b. Menghapus Navigasi

Berikut adalah cara untuk menghapus menu navigasi pada Header.

1. Klik pada Titik Tiga untuk menu navigasi yang ingin Anda hapus.
   
2. Pilih opsi Remove
3. Klik Save dan selesai, Anda telah berhasil menghapusnya.

Kesimpulan

Demikianlah tutorial cara membuat header kustom menggunakan editor WordPress Gutenberg. Pada tahap pertama pembuatan halaman ini, kita fokus pada header.

Pada tahap selanjutnya, Anda perlu membuat footer website untuk situs web Anda. Namun, membuat website dengan Gutenberg memang membutuhkan waktu, terutama jika Anda menginginkan website dengan fitur yang kompleks seperti Hipwee dan Astra International.

Untuk pembuatan website tingkat lanjut seperti itu, Anda bisa mempercayakannya pada Tim Tonjoo, sebuah agensi software profesional yang sudah berpengalaman dalam pembuatan website untuk pemerintahan dan start-up. Mari diskusikan lebih lanjut dengan kontak kami!

Baca artikel terkait WordPress, WooCommerce, Plugin dan pengembangan website lainnya dari Moch. Nasikhun Amin di blog Tonjoo.

Updated on August 31, 2024 by Hanif Mufid