Cara Menambahkan Bidang Pencarian ke Menu Sekunder Divi

Dalam tutorial Divi hari ini, kami akan menunjukkan cara menambahkan bidang pencarian ke menu sekunder Anda. Menu sekunder juga dikenal sebagai tajuk halaman Anda dan tempat Anda mencoba memasukkan beberapa informasi praktis tentang situs web atau perusahaan Anda. Menambahkan bidang pencarian ke dalamnya mungkin merupakan permintaan yang Anda miliki dari klien atau kebutuhan yang Anda miliki untuk situs web Anda sendiri. Either way, kami akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah mengintegrasikan bidang pencarian ini ke navigasi sekunder Anda saat Anda menggunakan tema Divi.

Hasil

Sebelum kita menyelami langkah-langkah berbeda yang harus Anda ambil untuk sampai ke sana; mungkin menarik untuk menunjukkan kepada Anda hasilnya terlebih dahulu. Dengan mengikuti langkah-langkah dalam posting dan menambahkan perubahan tampilan CSS, Anda akan mendapatkan hasil berikut pada menu sekunder default:

Mengapa Menambahkan Bidang Pencarian ke Menu Sekunder Anda

Menambahkan kemungkinan pencarian ke menu sekunder Anda adalah salah satu hal yang mungkin telah Anda coba lakukan. Namun tidak seperti menu utama, header tidak memiliki halaman terpisah di dalam WordPress yang membantu Anda menambahkan sesuatu secara manual, tanpa harus menambahkan baris kode PHP ke file header.php situs web Anda.

Namun, menambahkan kemungkinan pencarian di menu sekunder Anda bisa menjadi hal yang menarik. Mari kita lihat beberapa alasan mengapa Anda ingin menambahkannya.

Tawarkan Pengunjung Anda Kemungkinan Pencarian Dari Awal

Anda memiliki semua jenis pengunjung di situs web Anda. Beberapa dari mereka ingin menjelajahi berbagai hal dan meluangkan waktu, sementara yang lain ingin segera menemukan informasi spesifik. Dengan menambahkan bidang pencarian Anda ke menu sekunder, Anda akan dijamin bahwa pengunjung yang mencari sesuatu yang spesifik, memiliki kemampuan untuk melakukannya segera. Karena menu sekunder terletak di bagian atas halaman, pengunjung yang terburu-buru akan menghargai upaya yang meningkatkan pengalaman pengguna mereka.

Untuk Menyimpan Menu Utama Anda Dari Bidang Pencarian

Tentu saja, hal lain yang dapat Anda lakukan adalah menambahkan bidang pencarian ke menu utama. Tetapi dalam beberapa kasus, Anda mungkin tidak ingin melakukan itu. Sebagai contoh; jika Anda ingin tetap fokus pada item menu Anda atau jika Anda tidak ingin mencampur item menu dengan bidang pencarian. Alasan lain mungkin karena Anda sudah memiliki beberapa item menu yang membuat menu utama Anda terlihat sibuk, dan Anda tidak ingin menambahkan bidang pencarian di atasnya.

Tekankan Bidang Pencarian Tanpa Memiliki Menu Utama yang Mencolok

Kebanyakan orang cenderung menjaga menu utama mereka tetap tenang dan membuat menu sekunder mereka muncul. Terutama, karena mereka ingin menunjukkan perbedaan yang jelas antara kedua menu tersebut. Dan sekunder, karena menu sekunder seringkali memiliki beberapa hal yang ingin mereka tekankan (seperti ikon media sosial). Ketika Anda memutuskan untuk mengintegrasikan bidang pencarian dalam menu sekunder Anda juga, itu akan secara otomatis disorot juga dan itu akan merangsang pengunjung Anda untuk mencari dan menemukan apa yang mereka cari.

Cara Menambahkan Bidang Pencarian ke Menu Sekunder Divi

Berlangganan Saluran Youtube Kami

Tambahkan Bidang Pencarian ke File PHP Header

Sekarang, untuk benar-benar menambahkan bidang pencarian ke header Anda seperti yang ditunjukkan pada gambar di bawah, Anda terutama harus menambahkan sesuatu ke file header.php situs web Anda. Baris kode yang Anda perlukan adalah sebagai berikut:

<?php get_search_form(); ?>

Silakan dan salin baris kode PHP ini dan pergi ke Dashboard WordPress Anda. Di dalam Dashboard WordPress Anda , buka Appearance > Editor > header.php.

Anda sekarang dapat menempatkan baris kode di mana pun Anda ingin bilah pencarian Anda muncul. Karena kami ingin itu muncul tepat di sebelah ikon media sosial, kami akan menunjukkan kepada Anda di mana tepatnya menempatkannya dalam kode. Kita harus meletakkannya tepat sebelum menu sekunder, wadah dan header atas ditutup.

Gaya Bidang Pencarian Anda

Secara default, bidang pencarian terlihat agak ketinggalan jaman. Anda mungkin ingin mengubah beberapa hal hanya untuk membuatnya terlihat seperti yang Anda inginkan dan membuatnya sesuai dengan tampilan dan nuansa situs web Anda yang lain. Ini adalah tiga hal yang mungkin ingin Anda ubah: label pencarian, input pencarian, dan input tombol.

Jika Anda tidak melakukan modifikasi CSS pada bidang pencarian, secara default akan terlihat seperti ini di menu sekunder Anda:

Yang jelas bukan hasil akhir yang ingin kita capai. Untungnya, kita bisa membuat modifikasi sebanyak yang kita mau. Di bagian selanjutnya dari posting ini, kami akan menunjukkan cara memodifikasi semua elemen bidang pencarian dan kami juga akan membagikan baris kode CSS untuk mencapai hasil berikut:

Hapus/Ubah Label Pencarian

Elemen pertama yang merupakan bagian dari kolom pencarian adalah label pencarian. Ini adalah teks yang muncul yang menjelaskan kepada orang-orang bahwa mereka dapat mencari apa pun di situs web dengan menggunakan bidang. Namun, label ini tidak diperlukan. Semua orang tahu saat ini bagaimana bidang pencarian bekerja. Anda selalu dapat menghilangkan label pencarian dengan menambahkan 'display:none;' ke CSS dari label itu. Atau, Anda dapat mengubah tampilan label.

Kelas yang Anda perlukan untuk melakukan modifikasi pada label pencarian adalah “.screen-reader-text”. Seperti yang ditunjukkan pada contoh di bawah ini, Anda dapat menonaktifkannya agar tidak muncul.

.screen-reader-text {
display: none;
}

Gaya Masukan Pencarian Anda

Hal berikutnya yang Anda mungkin ingin gaya adalah input pencarian. Untuk melakukan penyesuaian pada input ini, tempatkan semua baris kode CSS di antara tanda kurung berikut:

 input#s
{

}

Gaya Input Tombol Anda

Dan terakhir, kami memiliki gaya tombol juga. Untuk membuat modifikasi apa pun pada bagian bidang pencarian ini, tempatkan baris kode CSS Anda di antara tanda kurung berikut:

input#searchsubmit
{
}

Diperlukan Kode CSS Untuk Contoh Kita

Setelah Anda membuat modifikasi PHP, Anda dapat langsung mencapai hasil yang ditunjukkan di atas dengan membuka Dashboard WordPress > Divi > Theme Options > General > Dan menambahkan baris kode CSS berikut ke bidang Custom:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

Hasil

Sekarang setelah kita melalui semua langkah, mari kita lihat lagi bagaimana seharusnya tampilan header Anda:

Pikiran Akhir

Dalam tutorial ini, kami telah menunjukkan kepada Anda cara menambahkan bidang pencarian ke menu sekunder Anda. Selain itu, kami juga telah menunjukkan kepada Anda cara memodifikasi elemen dalam bidang pencarian itu dan memberi Anda contoh baris kode CSS yang dapat Anda salin dan tempel untuk digunakan sendiri. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh D Line / shutterstock.com