Cara Menyesuaikan Header WordPress Anda (Panduan Pemula)

Cara Menyesuaikan Header WordPress Anda (Panduan Pemula)

Apakah Anda ingin menampilkan tajuk khusus untuk situs web WordPress Anda?

 

Banyak tema WordPress hadir dengan header bawaan yang berada di bagian atas setiap halaman. Anda mungkin perlu menyesuaikannya untuk menambahkan tautan penting, ikon sosial, pencarian situs, atau elemen lain untuk membuat kesan pertama yang baik.

 

Pada artikel ini, kami akan menunjukkan cara menyesuaikan header WordPress Anda dan bahkan membuat header kustom sepenuhnya untuk seluruh situs atau halaman tertentu.

 

Header situs web Anda adalah bagian teratas dari setiap halaman di situs WordPress Anda, dan mungkin hal pertama yang akan dilihat pengunjung Anda.

 

Ini sering menampilkan logo dan judul situs web Anda, menu navigasi, dan elemen penting lainnya yang Anda ingin agar dilihat pengguna terlebih dahulu.

 

Misalnya, inilah area tajuk kami di WPBeginner yang dilihat jutaan pembaca setiap bulan.

 

Dengan itu, mari kita lihat cara menyesuaikan header WordPress Anda dengan mudah. Anda dapat menggunakan tautan berikut untuk melompat ke bagian yang ingin Anda baca.

 

Banyak tema WordPress populer memungkinkan Anda menggunakan penyesuai tema WordPress untuk membuat perubahan pada area header tata letak WordPress Anda. Fitur ini terkadang disebut tajuk khusus , tetapi tidak semua tema mendukungnya.

 

Anda harus mulai dengan menavigasi ke Appearance » Customize di area admin WordPress Anda.

 

Tema Anda dapat menambahkan bagian ‘Header’ ke penyesuai, atau menambahkan opsi tajuk di bawah bagian ‘Warna’, tetapi ini bervariasi dari satu tema ke tema lainnya. Berikut adalah beberapa contoh.

 

Beberapa tema, seperti Twenty Twenty-One, tidak menawarkan opsi penyesuaian header sama sekali. Dalam hal ini, kami sarankan Anda menggunakan plugin pembuat tema drag & drop seperti SeedProd yang kami bahas di bawah ini.

 

Tema Twenty Sixteen memungkinkan Anda menambahkan gambar latar belakang ke header, dan bahkan menambahkan gambar header acak .

 

Beberapa tema WordPress gratis dan premium menawarkan lebih banyak opsi penyesuaian tema. Misalnya, Anda mungkin dapat mengubah gaya font header, tata letak, warna, dan banyak lagi. Tetapi Anda terbatas pada apa yang diizinkan oleh pengembang tema.

 

Untuk memulai, cukup arahkan kursor ke area kosong di header dan klik ikon ‘+’ untuk menambahkan blok header.

 

Plus, pembuat header juga memungkinkan Anda menarik dan melepas blok dan menempatkannya di atas atau di bawah header.

 

Anda dapat menyesuaikan lebih lanjut setiap blok yang Anda tambahkan ke header.

 

Misalnya, memilih blok Judul & Logo Situs akan memberi Anda opsi untuk mengunggah judul dan logo situs, mengubah lebar logo, menampilkan tagline situs, dan banyak lagi.

 

Setelah selesai mengedit tajuk khusus, cukup klik tombol ‘Terbitkan’.

 

Untuk detail lebih lanjut, lihat panduan utama kami tentang cara menggunakan penyesuai tema WordPress .

 

WordPress menambahkan pengeditan situs lengkap ke WordPress di versi 5.9 . Jika tema Anda mendukung fitur baru, maka itu akan menggantikan penyesuai tema. Namun, saat ini hanya ada beberapa tema yang bekerja dengan editor situs lengkap.

 

Saat Anda menggunakan tema yang kompatibel, Anda dapat menyesuaikan header Anda dengan menavigasi ke Appearance » Editor . Ini akan meluncurkan editor situs lengkap, yang sama seperti editor blok yang Anda gunakan untuk menulis posting dan halaman WordPress.

 

Ketika Anda mengklik header, Anda akan melihat nama template di bagian atas halaman berubah menjadi ‘Page Header’.

 

Sekarang ketika Anda mengklik ikon ‘Pengaturan’ pada bilah alat, Anda akan melihat opsi untuk menyesuaikan tata letak, warna, batas, dan dimensi tajuk.

 

Sebagai contoh, kita akan mengubah warna latar belakang header. Pertama, Anda perlu mengklik bagian ‘Warna’ untuk memperluasnya. Setelah itu, Anda harus mengklik opsi ‘Latar Belakang’.

 

Sebuah popup akan muncul yang memungkinkan Anda untuk memilih warna solid atau gradien. Juga akan ada sejumlah warna yang bisa Anda pilih. Saat Anda mengklik warna, latar belakang header Anda akan segera berubah.

 

Anda dapat menemukan lebih banyak opsi penyesuaian dengan mengklik ikon ‘Gaya’ di kanan atas halaman. Ini akan memungkinkan Anda mengubah font, warna, dan tata letak header.

 

SeedProd adalah plugin pembuat tema WordPress terbaik yang memungkinkan Anda membuat tema WordPress kustom dengan mudah tanpa menulis kode apa pun. Ini termasuk membuat header, footer, dan semua hal lain yang diperlukan untuk tema WordPress yang menarik.

 

Anda bahkan dapat membuat beberapa gaya tajuk khusus untuk berbagai halaman dan bagian situs web Anda.

 

Pertama, kami sarankan untuk mengikuti panduan kami tentang cara mudah membuat tema WordPress kustom tanpa kode apa pun . Setelah Anda selesai melakukannya, SeedProd mempermudah penyesuaian header Anda.

 

Yang perlu Anda lakukan adalah mengeklik tautan ‘Edit Desain’ yang ada di bawah tajuk.

 

Ini akan membuka tajuk di editor seret dan lepas SeedProd.

 

Dari sini, Anda dapat dengan mudah menyesuaikan tajuk dengan menambahkan blok baru.

 

Ada blok untuk tag template seperti logo situs, salah satu widget WordPress Anda, dan blok lanjutan seperti penghitung waktu mundur, menu navigasi, atau tombol berbagi sosial.

 

Dengan SeedProd, Anda juga dapat menambahkan bagian lengkap ke template header tema Anda.

 

Untuk menggunakan bagian tajuk, pertama-tama alihkan ke tab ‘Bagian’ di panel Desain.

 

Setelah itu, pilih bagian tajuk yang ingin Anda gunakan untuk situs web Anda. SeedProd menawarkan beberapa templat bagian yang dapat Anda gunakan.

 

Selanjutnya, lanjutkan dan sesuaikan bagian header.

 

Setelah Anda puas dengan tajuk khusus Anda, pastikan Anda mengeklik tombol ‘Simpan’ untuk menyimpan perubahan Anda.

 

Sekarang, Anda siap untuk memublikasikan tajuk khusus Anda.

 

Cukup buka halaman SeedProd »Pembuat Tema dari dasbor WordPress Anda dan klik sakelar di sebelah opsi ‘Aktifkan Tema SeedProd’ ke Ya.

 

Setelah Anda mengaktifkan opsi, SeedProd akan mengganti tema WordPress default Anda dengan tema dan header kustom baru.

 

Anda sekarang dapat mengunjungi situs web Anda untuk melihat tajuk khusus baru beraksi.

 

Buat Header Kustom Berbeda untuk Setiap Halaman

 

Tahukah Anda bahwa menggunakan SeedProd, Anda dapat membuat header khusus untuk halaman yang berbeda?

 

Untuk memulai, Anda harus pergi ke SeedProd » Theme Builder dari dashboard WordPress Anda dan klik tombol ‘Add New Theme Template’.

 

Jendela popup baru akan muncul di mana Anda harus memasukkan detail template tema.

 

Silakan dan masukkan nama untuk template tema Anda. Setelah itu, pilih ‘Header’ sebagai jenis template dari menu dropdown. Anda dapat mengosongkan bidang ‘Prioritas’.

 

Selanjutnya, Anda harus memasukkan kondisi tampilan untuk tajuk khusus Anda. Misalnya, kami menggunakan kondisi di mana itu akan ditampilkan di semua posting dan halaman yang ada dalam kategori tutorial.

 

Jangan lupa klik tombol ‘Simpan’ jika sudah selesai.

 

Setelah itu, Anda dapat melanjutkan dan mengedit tajuk khusus menggunakan pembuat tema seret dan lepas SeedProd.

 

Setelah Anda selesai mengedit tajuk khusus, cukup klik tombol ‘Simpan’ di bagian atas.

 

Anda dapat melihat lebih banyak ide tentang cara menyesuaikan header Anda menggunakan SeedProd di panduan pemula kami tentang cara mudah membuat tema WordPress kustom menggunakan pembuat tema SeedProd.

 

Sebagian besar situs web menampilkan tajuk yang sama di semua posting, halaman, kategori, dan halaman arsip. Namun, Anda dapat menampilkan header yang berbeda untuk setiap kategori WordPress .

 

Ini dapat dilakukan dengan menambahkan kode ke file tema Anda, tetapi Anda akan memiliki kontrol lebih besar dengan menggunakan pembuat tema.

 

Untuk membuat tajuk baru, Anda perlu menavigasi ke SeedProd »Pembuat Tema dan klik tombol oranye ‘Tambah Template Tema Baru’. Atau, Anda dapat menduplikasi tajuk Anda saat ini dan menggunakannya sebagai titik awal.

 

Sebuah popup akan ditampilkan di mana Anda dapat memberi nama template tema dan memilih ‘Header’ dari menu tarik-turun Jenis.

 

Anda juga harus memasukkan prioritas. Ini digunakan jika lebih dari satu header memenuhi persyaratan untuk halaman tertentu, dan header dengan prioritas terbesar akan ditampilkan. Header default memiliki prioritas 0, jadi pastikan Anda memasukkan 1 atau lebih tinggi.

 

Setelah itu, Anda harus menyiapkan satu atau beberapa kondisi. Ini membuat SeedProd tahu kapan harus menampilkan header tertentu. Anda cukup memilih kondisi dari menu drop down.

 

Pada dua menu pertama, Anda harus memilih ‘Sertakan’ dan kemudian ‘Memiliki Kategori’. Di bidang terakhir, Anda harus mengetikkan nama kategori di mana Anda ingin header ditampilkan.

 

Anda dapat dengan mudah menampilkan tajuk yang sama untuk beberapa kategori dengan mengklik tombol ‘Tambah Kondisi’ dan memasukkan kategori lain. Setelah selesai, pastikan Anda mengklik tombol ‘Simpan’ untuk menyimpan header baru.

 

Sekarang Anda dapat menyesuaikan desain setiap header baru menggunakan editor drag and drop SeedProd seperti yang kami tunjukkan sebelumnya.

 

Untuk mempelajari lebih lanjut, termasuk cara melakukannya menggunakan kode, lihat panduan kami tentang cara menambahkan header, footer, atau sidebar khusus untuk setiap kategori .

 

Jika Anda sedang membangun tema kustom dari awal menggunakan kode, maka Anda mungkin ingin menambahkan widget WordPress ke header Anda untuk menarik perhatian pengunjung Anda. Widget memungkinkan Anda untuk menambahkan blok konten ke bagian tertentu dari tema Anda dengan mudah, tetapi tidak setiap tema menyertakan area widget header.

 

Jika tema WordPress Anda saat ini tidak memiliki area widget WordPress di header, maka Anda harus menambahkannya secara manual dengan menambahkan kode berikut ke file functions.php Anda, di plugin khusus situs , atau dengan menggunakan kode plugin cuplikan .

 

Ini adalah opsi yang lebih maju, karena Anda harus tahu di mana menempatkan kode dan bagaimana menatanya menggunakan CSS.

 

Kode ini mendaftarkan bilah sisi baru atau area siap widget untuk tema Anda.

 

Jika Anda pergi ke Appearance »Widgets , maka Anda akan melihat area widget baru berlabel ‘Custom Header Widget Area’. Sekarang, Anda dapat menambahkan widget ke area baru ini.

 

Terakhir, Anda perlu menambahkan beberapa kode ke template header tema Anda yang terletak di file header.php tema Anda. Ini akan menambahkan area widget yang Anda buat sebelumnya ke header Anda sehingga widget akan ditampilkan di situs web Anda.

 

Anda perlu menyalin cuplikan kode ini dan menempelkannya di tempat yang Anda inginkan untuk menampilkan widget.

 

Tergantung pada tema Anda, Anda mungkin juga perlu menambahkan CSS ke WordPress untuk mengontrol bagaimana area widget ditampilkan.

 

Untuk detail lebih lanjut, lihat panduan kami tentang cara menambahkan widget WordPress ke header situs web Anda .

 

Cara lain untuk membuat header WordPress Anda lebih menarik adalah dengan menambahkan gambar acak ke bagian header.

 

Menampilkan gambar yang berubah secara acak membantu menarik perhatian pengunjung Anda dan membuat konten Anda lebih menarik.

 

Selanjutnya, lanjutkan dan pilih opsi ‘Acak tajuk yang diunggah’.

 

Anda dapat menemukan file header tema Anda dengan masuk ke Appearance » Theme File Editor dari panel admin WordPress. Dalam file tema ‘style.css’, Anda dapat menggulir ke bawah ke bagian header situs dan menambahkan atau menghapus kode.

 

Catatan: Kami tidak menyarankan Anda langsung mengedit file tema karena kesalahan sekecil apa pun dapat merusak situs web Anda dan mengacaukan desain.

 

Setelah aktivasi, Anda dapat pergi ke Pengaturan »Masukkan Header dan Footer dari dashboard WordPress Anda. Selanjutnya, masukkan kode khusus di bagian ‘Script in Header’.

 

Setelah memasukkan kode, simpan perubahan Anda.

 

Kami harap tutorial ini membantu Anda mempelajari cara menyesuaikan header WordPress Anda. Anda mungkin juga ingin mempelajari cara memilih perangkat lunak desain web terbaik , atau lihat daftar plugin yang harus dimiliki untuk mengembangkan situs Anda .

sumber

Leave a Reply

Your email address will not be published.

logo-whatsapp
1
error: