Cara Membuat Header Lengket di WordPress

Dalam dekade terakhir ini, ada penekanan yang terus tumbuh pada navigasi situs web. Ini bertepatan dengan meluasnya penggunaan smartphone yang memiliki opsi navigasi terbatas dibandingkan dengan antarmuka desktop tradisional. Perbedaan dalam desain situs web lebih dari jelas jika Anda melihat perbandingan antara situs dari tahun 2011. dan yang dibuat sekarang.

Salah satu metode utama yang digunakan dalam mengkonfigurasi ulang tata letak situs adalah elemen lengket. Dinamakan dengan tepat, elemen-elemen ini menempel pada halaman di perbatasannya saat Anda bergerak di sekitarnya, yaitu, mereka mempertahankan posisi aslinya (pikirkan panel beku di Excel, dan Anda akan memiliki ide bagus tentang cara kerjanya).

Atas, bawah, kiri, dan kanan

Elemen lengket biasanya disediakan untuk menu, header, dan/atau bilah status; ini membawa fleksibilitas yang besar kepada pengunjung karena ia dapat langsung beralih dari satu halaman ke halaman berikutnya tanpa harus mundur sama sekali. Juga, semua ini diposisikan di batas halaman atas dan bawah untuk memulai, yang bekerja dengan baik dengan seluruh premis. Akan sangat sulit untuk membangun halaman di sekitar elemen lengket yang diposisikan di tengah halaman.

Jarang juga ditemukan pada batas kiri dan kanan, dengan fungsi yang sama, hanya tata letak yang berbeda. Dalam kasus ini, mereka akan disembunyikan sampai Anda mengarahkan kursor ke atasnya atau menyentuhnya di layar.

Penghemat ruang

Hal yang menarik tentang elemen lengket adalah mereka menghemat ruang Anda di halaman dan di situs secara keseluruhan – mereka sebenarnya dapat digunakan untuk mengganti seluruh halaman. Ini karena mereka membiarkan bagian utama situs tetap utuh dan membuat perbatasan alat multifungsi yang mengambil banyak fungsi halaman itu sendiri. Pikirkan sejenak tentang tata letak situs rata-rata Anda.

Bagian atas disediakan untuk menu yang memerlukan halaman yang diurutkan berdasarkan kategori yang ditentukan dan bilah pencarian. Keduanya tersembunyi di balik bilah saat menggulir dan memperluas saat diperlukan. Jika ini tidak terjadi, hanya pohon menu yang akan mengambil seluruh bagian atas halaman Anda dan tidak akan "mengikuti" saat menggulir ke bawah, sehingga pengunjung Anda akan diminta untuk terus bergerak ke atas dan ke bawah hanya untuk menavigasi halaman .

Di sisi lain, elemen bawah yang lengket dapat menggantikan seluruh halaman dukungan dengan cukup mudah – cukup tambahkan email dan/atau nomor bersama dengan tombol obrolan, dan Anda siap melakukannya. Anda memberi pengunjung Anda cara yang selalu ada untuk menghubungi Anda. Sekali lagi, aplikasi praktisnya luar biasa – pelanggan menelusuri halaman produk Anda, memiliki pertanyaan, dan dapat langsung mengetahui apa yang dia butuhkan dengan mengklik tombol obrolan.

Membuat elemen lengket

Ketika kita berbicara tentang WordPress, selalu ada banyak cara untuk melakukan apa pun yang dapat Anda pikirkan, dan hal yang sama berlaku di sini. Anda dapat membuat elemen lengket secara manual di dalam editor default, atau Anda dapat menggunakan plugin yang menggantikan kebutuhan pengkodean dengan antarmuka yang ramah bagi pemula. Kontras antara hasil akhir minimal, tetapi cara Anda mencapainya membuat semua perbedaan. Untuk contoh kita, kita akan menggunakan header lengket karena sejauh ini merupakan elemen paling umum yang dibuat untuk menempel.

Membuat header lengket secara manual

Membuat header lengket secara manual di WordPress membutuhkan penggunaan kode CSS. Tanpa terlalu teknis, kode CSS adalah sesuatu yang dapat kita tambahkan ke hampir semua elemen di halaman untuk mengubah propertinya. Saat coding secara manual, ini adalah metode kustomisasi utama kami. Menggunakan CSS terlebih dahulu mengharuskan tajuk ada di halaman, jadi pastikan ada sesuatu untuk disesuaikan terlebih dahulu. WordPress menyederhanakan proses ini karena bahkan editor default memberikan opsi untuk menambahkannya dengan satu klik.

Setelah Anda memiliki tajuk untuk digunakan, Anda harus mengakses konsol. Cukup buka bagian tampilan yang ada di sisi kiri dasbor Anda, pilih "sesuaikan", lalu klik "CSS tambahan". Dengan konsol sekarang terbuka, Anda perlu memasukkan kode yang membuat header Anda lengket:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Kode di atas hanyalah contoh bagaimana tampilannya secara umum, bukan perintah definitif be-all-end-all. Ingatlah bahwa baris pertama selalu spesifik untuk setiap situs – ganti #website-navigation dengan kelas CSS atau ID header navigasi Anda sebelum kembali ke editor halaman.

Setelah Anda memeriksa fungsionalitas di dalam jendela pratinjau halaman/posting, cukup publikasikan, dan Anda mendapatkan tajuk yang lengket. Kami harus menunjukkan bahwa Anda mungkin ingin memperluas kode CSS untuk mencakup lebih dari sekadar atribut "lengket" untuk header seperti ini – disarankan untuk menambahkan hal-hal yang akan menekankan header secara visual, seperti font warna, ukuran, lekukan, dll. Karena ini adalah perlengkapan permanen pada halaman, itu dapat dengan mudah diabaikan, jadi Anda harus mencoba dan membuatnya menonjol.

Membuat header lengket dengan plugin

Ada tumpang tindih besar antara mereka yang membutuhkan situs web untuk bisnis atau blog mereka dan mereka yang tidak memiliki pengetahuan untuk membangun sesuatu yang terlihat dan terasa profesional. Untungnya dengan WordPress, ada begitu banyak plugin yang membuat hidup lebih mudah bagi semua orang; hampir tidak perlu memiliki apa pun selain pengetahuan perangkat lunak dasar untuk mencapai tujuan Anda. WP Sticky adalah contoh bagus dari plugin yang menggantikan semua pengkodean yang telah kami bahas di atas dengan antarmuka yang mudah digunakan siapa pun dapat menguasainya dengan cepat. Pada saat yang sama, ia menawarkan jumlah fungsionalitas yang sama dengan yang Anda miliki saat membuat header lengket secara manual. Mari kita hancurkan.

Membuat elemen

Sama seperti Anda harus memiliki header untuk memulai saat menggunakan CSS, Anda perlu membuat elemen yang kemudian Anda tambahkan atribut sticky.

Ada dua cara yang berbeda untuk memilih elemen – Anda dapat memasukkan penunjukan di bidang yang diperlukan, atau Anda dapat memilih elemen melalui jendela pratinjau dengan mengkliknya (ini berfungsi dengan baik jika Anda mengalami kesulitan mencari tahu penunjukan) . Saat memilih elemen Anda di jendela pratinjau, Anda akan melihat perubahan penunjukan di bagian atas layar Anda.

Kami telah menemukan bahwa setelah bekerja dengan plugin selama beberapa waktu, Anda akan merasa sangat nyaman dengannya sehingga Anda hampir tidak akan pernah menggunakan visual picker. Penunjukan akan menjadi akrab, yang mengarah pada memasukkannya secara sederhana dan manual, menghemat waktu Anda. Sampai Anda terbiasa dengan tingkat itu, pemilih visual akan menjadi teman terbaik Anda. Pada akhirnya, salah satu metode akan membawa Anda ke tempat yang sama – header yang lengket di frontend.

Membuatnya terlihat bagus

Tidak semua elemen lengket dibuat sama, dan elemen Anda juga tidak boleh menjadi contoh biasa. Bagian pengaturan visual akan memberi Anda sejumlah besar opsi penyesuaian yang dapat Anda gunakan untuk membuat header lengket Anda unik dalam segala hal.

Hal pertama yang perlu Anda perhitungkan adalah posisi elemen Anda. Karena kami membuat tajuk, ini akan menjadi keputusan yang mudah – kami menempelkannya di bagian atas halaman. Pemosisian adalah kunci untuk tajuk yang baik, jadi jika Anda tidak ingin itu menempel di bagian paling atas halaman, Anda dapat memindahkannya ke bawah beberapa piksel agar lebih pas. Selain itu, jika situs Anda menggunakan bilah alat admin untuk pengguna terdaftar, Anda dapat membuat plugin secara otomatis memeriksanya dan menyesuaikan tajuknya.

Kami telah membahas sedikit tentang perlunya situs untuk sepenuhnya responsif karena ada banyak cara yang harus dilakukan calon pengunjung untuk menjelajahi web. Untuk membuat situs Anda sepenuhnya adaptif, Anda dapat memilih di layar mana header akan ditempelkan.

Biasanya, layar yang lebih kecil paling diuntungkan dari tajuk lengket, sedangkan yang lebih besar digunakan pada desktop tradisional yang memiliki lebih banyak opsi navigasi baik-baik saja tanpanya. Ukuran dibagi menjadi empat kelompok yang mencakup semua ukuran layar utama.

Z-index adalah pengaturan opsional yang dapat membingungkan banyak orang pada pandangan pertama. Karena ini dan fakta bahwa ini adalah fitur opsional, banyak yang mungkin akan mengabaikannya dan mengabaikannya. Jika semuanya berhasil, Anda mungkin tidak akan pernah melihat ke belakang; namun, jika ada masalah dengan tampilan, indeks-Z berpotensi menjadi solusi perbaikan cepat. Pada dasarnya, anggap halaman sebagai kumpulan tumpukan di mana tumpukan di atas memiliki angka yang lebih tinggi daripada yang ada di bawah. Oleh karena itu, jika ada sesuatu yang mengaburkan tajuk lengket Anda, cobalah untuk meningkatkan indeks-Z (99999 disarankan sebagai nilai yang berfungsi)

Dengan tajuk lengket Anda "bagian atas tumpukan", saatnya untuk menjadi lebih kreatif dengan menambahkan efek saat menggulir ke bawah. Ketika kedua opsi dinonaktifkan, tajuk hanya akan mempertahankan posisinya di atas seperti potongan halaman asli. Anda dapat menambahkan lebih banyak suar dengan efek seperti fade-in atau slide ke bawah. Pertimbangkan desain visual keseluruhan situs Anda sebelum Anda memilih jenis efek ini; namun – seringkali, lebih sedikit lebih banyak.

Efek visual tidak terbatas hanya pada yang terhubung dengan gerakan. Anda juga dapat menyesuaikan tajuk itu sendiri (selain gerakan yang Anda buat saat membuat tajuk). Opacity berguna jika Anda tidak ingin tajuk mengaburkan konten lain di halaman. Mengaturnya menjadi sekitar 50% akan membuat header dan konten di bawahnya relatif terlihat.

Fitur yang bahkan lebih berguna daripada opacity adalah menyesuaikan rentang gulir. Jika Anda memiliki halaman yang sangat panjang seperti blog biasanya, ada titik tertentu dalam menavigasi ke bawah di mana memiliki header yang lengket tidak masuk akal lagi. Ini adalah saat-saat di mana merupakan ide yang baik untuk membuat tajuk tidak menempel setelah pengunjung Anda menggulir ke bawah cukup jauh.

Terakhir, ada opsi untuk mengubah warna latar belakang header saat lengket, membuatnya lebih menonjol, tetapi membalikkannya ke nilai aslinya saat header tidak lengket lagi.

Bagian terakhir dari pengeditan visual membawa kita kembali ke lingkaran penuh untuk mengedit header lengket secara manual melalui CSS.

Meskipun Anda benar-benar tidak perlu memiliki pengetahuan pengkodean sebelumnya untuk berhasil menggunakan WP Sticky, itu dapat meningkatkan pekerjaan Anda jika Anda menggunakannya. Fitur ini opsional, jadi terserah Anda apakah ingin menggunakannya dan sejauh mana.

Opsi lanjutan

Bagian opsi lanjutan hampir semuanya tentang pengecualian, yaitu, dalam hal apa header lengket akan berhenti menjadi lengket dan kembali ke "pemrograman asli".

Menyetel ukuran layar secara manual di mana tajuk tidak lengket adalah peningkatan dari empat ukuran default yang Anda sajikan di bagian pengaturan visual. Di sini, Anda akan menjadi sespesifik yang Anda inginkan, jadi jika ada layar liar di masa depan yang tidak sesuai dengan ukuran yang telah ditentukan, Anda dapat membuat aturan yang sesuai untuk itu.

Membuat header tidak lengket tidak hanya tentang ukuran layar, tetapi juga konten di situs Anda, lebih khusus lagi kategorisasi. Anda dapat membuat header Anda tidak menempel pada halaman yang ditentukan, posting dan jenis posting, kategori tertentu, atau konten dengan tag tertentu. Semua kondisi ini dapat dicampur dan dicocokkan untuk membuat ringkasan yang sempurna ketika header lengket digunakan dan ketika tidak.

Mirip dengan cara Anda memilih elemen lengket (dalam kasus kami, header) kembali di awal, Anda juga dapat memilih elemen push-up lebih rendah pada halaman di mana Anda ingin header Anda didorong ke atas. Ini pada dasarnya akan membuat tajuk Anda pindah ke perbatasan elemen ini tanpa bantalan atau ruang apa pun di antara mereka.

Untuk mengakhiri semuanya, ketika Anda muak dan tidak ingin elemen lengket Anda lagi, selalu ada opsi terakhir untuk menghapusnya sepenuhnya. Berhati-hatilah bahwa ini adalah tindakan permanen, dan semua penyesuaian yang telah Anda lakukan pada elemen (dalam hal ini, header) akan hilang.

Ringkasan

Sulit untuk mengatakan cara melakukan sesuatu yang lebih baik. Anda pasti memiliki lebih banyak opsi yang Anda inginkan menggunakan CSS, tetapi itu adalah solusi untuk sangat sedikit orang secara keseluruhan. Di sisi lain, plugin seperti WP Sticky menggabungkan kemudahan penggunaan dengan fungsionalitas yang masih kuat yang menjadikannya pilihan yang sempurna untuk pemula atau mereka yang masih tidak yakin tentang pengkodean dari awal. Mungkin cara terbaik untuk membuat tajuk yang lengket dan berfungsi adalah memulai dengan yang terakhir dan bekerja sendiri hingga yang pertama.

Pengarang: Matej Milohnoja

Dulu menulis tentang game dan game secara umum, tetapi sejak itu beralih ke pengujian dan penulisan tentang perangkat lunak pengembangan web. Masih memainkan banyak permainan, hanya untuk bersenang-senang.