Membuat header WordPress tanpa plugin
Header adalah satu-satunya bagian situs web yang dilihat setiap pengunjung, dan biasanya tema menyembunyikannya di balik layar pengaturan dengan sembilan opsi. Di Canvas, header adalah rekaman yang Anda bangun dari blok di editor, sehingga panduan ini adalah proses membangun, bukan tur kotak centang.
Langkah 1: Apa itu header di Canvas
Header adalah sebuah rekaman yang tercantum di admin WordPress seperti halaman, dan disunting di penyunting blok yang sama. Keputusan tunggal inilah yang menghapus plugin header dari rangkaian plugin Anda.
Tema lain membangun header di tempat lain. Blocksy dan Astra sama-sama menyimpan pembuat header mereka di Customizer, yaitu panel pengaturan di samping situs, terpisah dari penyunting tempat Anda menulis halaman. Perbandingan Blocksy kami menyandingkan kedua pendekatan tersebut.
Struktur bersarang
Sebuah rekaman header memuat Header Root. Root memuat Header Container, yang menentukan apakah header berbentuk boxed, lebar penuh, atau satu lebar pada satu breakpoint dan lebar lain di tempat lain. Container memuat Header Zones, dan zona adalah sel dalam baris header. Logo ditempatkan di salah satu zona, navigasi di zona berikutnya, serta ikon pencarian dan keranjang di zona terakhir.
Totalnya ada 22 blok header, dan Anda mungkin hanya memakai empat atau lima di situs yang umum. Sisanya tersedia untuk saat Anda membutuhkan pencarian toko, tautan bahasa, atau blok jam buka di sudut situs.
Tidak ada yang terpisah dari penyunting. Jika Anda menyunting halaman di WordPress, Anda juga bisa menyunting header dengan cara yang sama, termasuk urungkan, pengaturan blok, dan pintasan keyboard.
Langkah 2: Buat rekaman header
Buka daftar Headers di menu Canvas dan tambahkan entri baru. Ada dua titik awal yang jujur.
Mulai dari pola
Sisipkan pola header dan Anda akan mendapatkan blok biasa yang sudah disusun untuk Anda, siap diatur ulang, diganti namanya, atau dihapus. Header adalah kategori pola terbesar dalam produk ini, dari 183 pola secara keseluruhan, jadi biasanya ada sesuatu yang mendekati bentuk yang Anda inginkan. Ini adalah cara tercepat dan yang sebaiknya dipilih untuk build pertama.
Mulai dari demo
Jika Anda mengimpor salah satu dari 88 situs demo, header-nya sudah menjadi rekaman di situs Anda. Buka dan ubah, atau duplikasi dan bereksperimen pada salinannya. Mengedit header yang sudah berfungsi mengajarkan struktur lebih cepat daripada kanvas kosong.
Beri rekaman ini nama yang menunjukkan fungsinya, misalnya Header utama atau Header halaman arahan. Anda akan memiliki tiga rekaman seperti ini dalam sebulan, dan nama adalah satu-satunya cara untuk membedakannya.
Langkah 3: Atur zona
Zona mengatur tata letak, sehingga Anda hampir tidak pernah perlu bergelut dengan kelas perataan.
- Dorong satu zona ke tepi. Zona kiri untuk logo, zona tengah untuk menu, dan zona kanan untuk tindakan adalah susunan yang paling sering dipakai sebagian besar situs.
- Kelompokkan hal-hal yang saling terkait. Ikon pencarian, keranjang, dan tombol dalam satu zona tetap membentuk satu kelompok dengan spasi yang sama.
- Atur ulang per breakpoint. Zona yang berada di posisi ketiga pada desktop dapat berada di posisi pertama pada ponsel, tanpa rekaman header kedua.
- Batasi zona ke tingkat perangkat. Beri tahu zona untuk melewati perangkat yang tidak memiliki ruang untuknya, sehingga tidak ada yang perlu disembunyikan dengan CSS setelahnya.
- Tambahkan kelas Anda sendiri ke sebuah zona jika Anda ingin menjangkaunya dari stylesheet milik Anda sendiri.
Susun tata letak desktop terlebih dahulu dan biarkan sampai semua bagiannya terpasang. Keputusan tata letak jauh lebih mudah diambil saat konten sungguhan sudah berada di dalam baris.
Langkah 4: Tambahkan bagiannya
Sekarang isi setiap zona. Masing-masing merupakan blok, dan setiap blok memiliki panel pengaturan yang berisi opsi untuk blok tersebut.
- Header Logo. Logo Anda, dengan berkas terpisah untuk status sticky dan status gelap, sehingga header transparan di atas foto gelap tidak memerlukan solusi tambahan.
- Header Navigation. Menu utama, dengan dropdown dan panel Mega Menu. Blok ini menampilkan menu WordPress, sehingga menu itu tetap dikelola di tempat yang biasa Anda gunakan.
- Header Search. Ikon yang membuka kolom, atau kolom yang selalu terbuka, mana pun yang sesuai dengan desain.
- Header Button. Ajakan bertindak dengan pengaturan ukuran, gaya, dan tautan yang biasa. Satu sudah persuasif, tiga justru mengganggu.
- Header Cart. Keranjang WooCommerce dengan jumlah item dan ringkasan drop-down, untuk toko.
- Header Icon Link, Header Social dan Header Info. Nomor telepon, deretan profil sosial, sekumpulan kecil detail kontak, alamat, atau jam buka.
Mega menu, saat daftar saja tidak cukup
Mega Menu adalah rekaman tersendiri, dirancang sebagai blok dan dirender oleh blok Mega Menu, sehingga item menu membuka panel lebar penuh berisi kolom, gambar, dan tombol. Mega Menu Column menjaga panel tetap berada dalam grid. Gunakan saat kategori memang memiliki struktur, bukan untuk membuat situs kecil terlihat ramai.
Langkah 5: Lengket, transparan, dan preset tata letak
Perilaku berasal dari preset, yaitu kumpulan pengaturan tata letak yang Anda terapkan dengan satu klik lalu sesuaikan. Pilih perilaku yang Anda inginkan dan ubah apa pun yang Anda suka setelahnya.
- Transparan. Tanpa latar belakang, sehingga apa pun yang berada di belakang header akan terlihat. Padukan dengan varian logo gelap atau terang agar wordmark tetap terbaca.
- Semi-transparan. Latar belakang tembus pandang, yang membuat gambar di belakangnya tetap terlihat dan teks tetap mudah dibaca. Biasanya pilihan yang lebih aman dibanding foto yang ramai.
- Mengambang, dan mengambang semi-transparan atau mengambang kecil, saat header berada di dalam halaman dengan ruang di sekelilingnya, tidak menempel pada tepi jendela.
- Lebar penuh dan menempel. Membentang di seluruh viewport dan tetap menempel saat halaman digulir.
- Lengket saat menggulir ke atas. Bagian atas meninggalkan layar saat pengunjung menggulir ke bawah dan kembali saat mereka menggulir ke atas, sehingga halaman panjang mendapatkan ruangnya kembali.
Pengaturan seluruh situs yang mendasarinya
Opsi header adalah bagian terbesar di Opsi Tema, dengan 94 dari 533 bidang, dan opsi ini memuat hal-hal yang tidak seharusnya dimiliki satu rekaman pun: header default, perilaku sticky, tinggi, jarak, dan breakpoint seluler. Impor demo mengisi semuanya, dan Anda cukup mengubah yang Anda pedulikan.
Langkah 6: Header ponsel
Sebagian besar kunjungan datang dari ponsel, jadi periksa ini sebelum yang lain. Kabar baiknya, datanya tetap sama.
- Atur ulang, bukan bangun ulang. Pindahkan logo ke tengah, letakkan tombol toggle di kiri dan tombol panggil di kanan, semuanya melalui pengurutan zona.
- Buang yang tidak muat. Batasi detail kontak atau baris ikon media sosial hanya untuk layar yang lebih besar. Memaksakannya ke ponsel tidak membantu siapa pun.
- Jaga area ketuk tetap besar. Tombol menu dan ikon telepon adalah dua hal yang paling sering disentuh orang saat berjalan.
- Atur breakpoint dengan sengaja. Lebar tempat menu menciut adalah pengaturan, sehingga menu yang panjang dapat menciut lebih awal daripada menu yang pendek.
- Pertimbangkan Panel Samping untuk menu seluler. Panel samping adalah entri yang meluncur masuk dari tepi layar, dengan ruang untuk menu yang sesungguhnya, kolom pencarian, dan tombol.
Periksa di penyunting sebelum Anda menerbitkan. Canvas menampilkan header di kanvas penyuntingan dengan kode yang sama dengan yang menampilkannya untuk pengunjung, sehingga tata letak ponsel dapat Anda lihat saat membangun.
Langkah 7: Tetapkan untuk seluruh situs atau per halaman
Sebuah rekaman tidak berfungsi apa pun sampai ada yang merujuknya. Ada dua tingkat, dan keduanya bekerja dengan cara yang sama untuk setiap elemen kerangka situs.
Default untuk seluruh situs
Atur header default di Opsi Tema dan setiap halaman akan menggunakannya. Lakukan hal yang sama untuk top bar, desain Judul Halaman, dan footer. Pengaturan inilah yang membuat halaman baru tampil dengan benar begitu Anda menerbitkannya.
Penggantian per halaman
Setiap halaman dapat mengganti salah satu pengaturan ini dari pengaturannya sendiri. Halaman arahan kampanye menggunakan header transparan dan tanpa bilah atas; halaman kontak tetap menggunakan yang standar. Tidak ada yang digandakan untuk mencapainya, dan tidak ada yang perlu diingat nanti, karena penggantian berlaku pada halaman yang terdampak.
Bilah atas
Bilah atas adalah entri tersendiri dengan blok-bloknya sendiri: nomor telepon, jam buka, pengalih bahasa, pengumuman. Blok Header Topbar menempatkannya di atas baris header. Karena terpisah, pesan libur dapat berubah di seluruh situs tanpa perlu membuka header sama sekali.
Sumber
Jika panduan ini menjelaskan sesuatu di luar Canvas itu sendiri, berikut adalah halaman resmi yang mendokumentasikannya.
- Layar Menu Tampilanwordpress.org · Tempat menu WordPress dibuat dan ditetapkan ke lokasi yang disediakan oleh sebuah tema
- Memahami Kriteria Keberhasilan 2.5.8: Target Size (Minimum)w3.org · Mengapa target ketuk perlu berukuran minimum 24 x 24 piksel CSS
Langkah selanjutnya
Dua panduan tentang mengapa header menentukan pertanyaan yang lebih luas, serta Pembuat Header itu sendiri.
Pertanyaan umum
FAQ lengkap menjawab sisanya, dan dokumentasi membahas setiap pengaturan secara rinci.
Apakah Anda memerlukan header kedua untuk seluler?
Biasanya tidak perlu, karena satu rekaman header Canvas menyesuaikan diri dengan ponsel secara otomatis. Zona diurutkan ulang per breakpoint dan masing-masing dapat dibatasi ke tingkat perangkat tertentu, sehingga satu rekaman dapat memusatkan logo di ponsel, menghilangkan detail kontak, dan memindahkan menu ke balik tombol toggle. Buat rekaman kedua hanya jika Anda memang menginginkan desain yang berbeda, bukan untuk memperbaiki tata letak.
Dapatkah satu halaman memiliki header yang berbeda?
Ya, halaman Canvas mana pun dapat memiliki header sendiri. Header, bilah atas, Judul Halaman, dan footer masing-masing memiliki default seluruh situs dan penimpaan per halaman, sehingga halaman arahan kampanye dapat menampilkan header transparan di atas foto, sementara halaman lain tetap menggunakan header standar.
Ini area widget atau menu?
Header Canvas bukan keduanya: ia adalah record yang Anda sunting di editor blok, persis seperti halaman, dan logo, navigasi, pencarian, keranjang, serta tombol di dalamnya adalah blok dengan panel pengaturannya sendiri. Menu WordPress Anda tetap menu WordPress; blok Header Navigation yang menampilkannya.
Apa yang terjadi pada header Anda saat lisensi Anda berakhir?
Situs Anda tetap tampil persis seperti sekarang. Yang dijeda adalah layanannya: pembaruan, impor demo, AI, dan penyuntingan blok premium dihentikan hingga Anda memperpanjang, dan ada masa tenggang 14 hari jika pemeriksaan lisensi tidak dapat menjangkau server kami.
Bangun situs web Anda berikutnya dengan Canvas
Pemula, freelancer, atau agensi, Anda mendapatkan blok dan Demo yang sama. Mulailah dengan satu situs dan buat sebanyak yang Anda butuhkan dengan lisensi yang sama.