Divi'nin İkincil Menüsüne Arama Alanı Nasıl Eklenir

Bugünkü Divi eğitiminde, ikincil menünüze nasıl arama alanı ekleyeceğinizi göstereceğiz. İkincil menü, sayfanızın başlığı ve web siteniz veya şirketiniz hakkında bazı pratik bilgilere sığdırmaya çalıştığınız yer olarak da bilinir. Buna bir arama alanı eklemek, bir müşteriden aldığınız bir talep veya kendi web siteniz için sahip olduğunuz bir ihtiyaç olabilir. Her iki durumda da, Divi temasını kullanırken bu arama alanını ikincil navigasyonunuza nasıl kolayca entegre edebileceğinizi göstereceğiz.

Sonuç

Oraya ulaşmak için atmanız gereken farklı adımlara geçmeden önce; sonucu size önceden göstermek ilginç olabilir. Gönderideki adımları izleyerek ve CSS görünüm değişiklikleri ekleyerek, varsayılan ikincil menüde aşağıdaki sonucu elde edersiniz:

Neden İkincil Menünüze Bir Arama Alanı Eklemelisiniz?

İkincil menünüze bir arama olanağı eklemek, yapmayı denemiş olabileceğiniz şeylerden biridir. Ancak, birincil menünün aksine, başlığın WordPress içinde, web sitenizin header.php dosyasına PHP kod satırları eklemenize gerek kalmadan manuel olarak bir şeyler eklemenize yardımcı olan ayrı bir sayfası yoktur.

Ancak, ikincil menünüze bir arama olanağı eklemek ilginç bir şey olabilir. Neden bir tane eklemek istediğinize dair bazı nedenlere bir göz atalım.

Ziyaretçilerinize En Baştan Arama İmkanı Sunun

Web sitenizde her türlü ziyaretçiniz var. Bazıları bir şeyleri keşfetmek ve zaman ayırmak isterken, diğerleri hemen belirli bilgileri bulmak istiyor. Arama alanınızı ikincil menüye ekleyerek, belirli bir şey arayan ziyaretçilerin bunu hemen yapabilmeleri garanti edilir. Sayfanın üst kısmında ikincil bir menü bulunduğundan, acelesi olan ziyaretçiler, kullanıcı deneyimini iyileştiren çabayı takdir edeceklerdir.

Arama Alanından Birincil Menünüzü Kaydetmek İçin

Elbette yapabileceğiniz başka bir şey de arama alanını birincil menüye eklemek. Ancak bazı durumlarda bunu yapmak istemeyebilirsiniz. Örneğin; menü öğelerinize odaklanmak istiyorsanız veya menü öğelerini arama alanıyla karıştırmak istemiyorsanız. Başka bir neden de, birincil menünüzü meşgul gösteren bazı menü öğeleriniz olması ve bunun üzerine bir arama alanı eklemek istememeniz olabilir.

Gösterişli Birincil Menü Olmadan Arama Alanını Vurgulayın

Çoğu insan, birincil menülerini ayık tutma ve ikincil menülerini pop yapma eğilimindedir. Öncelikle, iki menü arasındaki bariz farkı göstermek istedikleri için. Ve ikincil, çünkü ikincil menüde genellikle vurgulamak istedikleri bazı şeyler vardır (sosyal medya simgeleri gibi). Arama alanını ikincil menünüze de entegre etmeye karar verdiğinizde, bu da otomatik olarak vurgulanacak ve ziyaretçilerinizi tam olarak aradıklarını aramaya ve bulmaya teşvik edecektir.

Divi'nin İkincil Menüsüne Arama Alanı Nasıl Eklenir

Youtube Kanalımıza Abone Olun

Başlık PHP Dosyasına Arama Alanı Ekle

Şimdi, arama alanını aşağıdaki resimde gösterildiği gibi başlığınıza gerçekten eklemek için, öncelikle web sitenizin header.php dosyasına bir şeyler eklemeniz gerekecek. İhtiyacınız olacak kod satırı şudur:

<?php get_search_form(); ?>

Devam edin ve bu PHP kod satırını kopyalayın ve WordPress Kontrol Panelinize gidin. WordPress Kontrol Panelinizde Görünüm > Düzenleyici > header.php'ye gidin.

Artık kod satırını arama çubuğunuzun görünmesini istediğiniz yere yerleştirebilirsiniz. Sosyal medya simgelerinin hemen yanında görünmesini istediğimiz için, kodu tam olarak nereye yerleştireceğinizi size göstereceğiz. İkincil menü, kap ve üst başlık kapanmadan hemen önce yerleştirmemiz gerekecek.

Arama Alanınızı Stillendirin

Varsayılan olarak, arama alanı biraz eski görünüyor. Muhtemelen, istediğiniz gibi görünmesi ve web sitenizin geri kalanının görünümüne ve hissine uyması için bazı şeyleri değiştirmek isteyeceksiniz. Bunlar muhtemelen değiştirmek isteyeceğiniz üç şeydir: arama etiketi, arama girişi ve düğme girişi.

Arama alanında herhangi bir CSS değişikliği yapmazsanız, ikincil menünüzde varsayılan olarak şöyle görünür:

Bu, elde etmek istediğimiz nihai sonuç değil. Neyse ki, alanda istediğimiz kadar değişiklik yapabiliriz. Bu gönderinin sonraki bölümünde, arama alanının tüm öğelerini nasıl değiştireceğinizi göstereceğiz ve aşağıdaki sonucu elde etmek için CSS kod satırlarını da paylaşacağız:

Arama Etiketini Kaldır/Değiştir

Arama alanının parçası olan ilk öğe arama etiketidir. Bu, insanlara alanı kullanarak web sitesinde herhangi bir şey arayabileceklerini açıklayan metindir. Ancak bu etiket gerekli değildir. Bugünlerde herkes bir arama alanının nasıl çalıştığını biliyor. Her zaman 'display:none;' ekleyerek arama etiketinin kaybolmasını sağlayabilirsiniz. bu etiketin CSS'sine. Veya etiketin görünümünü değiştirebilirsiniz.

Arama etiketinde herhangi bir değişiklik yapmanız gereken sınıf “.screen-reader-text”. Aşağıdaki örnekte gösterildiği gibi, görünmesini devre dışı bırakabilirsiniz.

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

Arama Girişinizi Stillendirin

Stil vermek isteyebileceğiniz bir sonraki şey, arama girişidir. Bu girişte herhangi bir ayarlama yapmak için tüm CSS kod satırlarını aşağıdaki parantezler arasına yerleştirin:

 input#s
{

}

Düğme Girişinizi Stillendirin

Ve son olarak, düğme stilimiz de var. Arama alanının bu bölümünde herhangi bir değişiklik yapmak için CSS kod satırlarınızı aşağıdaki parantezler arasına yerleştirin:

input#searchsubmit
{
}

Örneğimiz İçin Gerekli CSS Kodu

PHP değişikliğini yaptıktan sonra, WordPress Panonuz > Divi > Tema Seçenekleri > Genel > Özel alanına aşağıdaki CSS kodu satırlarını ekleyerek yukarıda gösterilen sonuca anında ulaşabilirsiniz :

.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;
}}

Sonuç

Artık tüm adımların üzerinden geçtik, şimdi başlığınızın nasıl görünmesi gerektiğine bir kez daha bakalım:

Son düşünceler

Bu öğreticide, ikincil menünüze nasıl arama alanı ekleyeceğinizi gösterdik. Bunun yanı sıra, size o arama alanındaki öğeleri nasıl değiştireceğinizi de gösterdik ve kendi kullanımınız için kopyalayıp yapıştırabileceğiniz bir CSS kod satırı örneği sunduk. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

D Line / Shutterstock.com tarafından Öne Çıkan Görsel