Kaydırılarak açılan bir arama düğmesi, WordPress sitenize daha temiz, daha modern bir görünüm kazandırabilir. Üstbilginizde tam bir arama çubuğu göstermek veya aramayı tamamen gizlemek yerine, bir düğme, aramanın erişilebilir olmasını sağlarken düzeni dağınık tutar.
Bu tür bir tasarım tercihi, önemli bir özelliği erişilebilir durumda tutarken görsel karmaşayı azaltmaya yardımcı olur, bu da özellikle küçük ekranlarda veya minimalist düzenlerde kullanışlıdır.
Daha da iyisi, WordPress'e bu özelliği eklemenin basit ve etkili yolları var.
Bu eğitimde, WordPress sitenize sorunsuz, kaydırılarak açılan bir arama düğmesi efekti eklemeyi göstereceğiz. Bir blog, işletme web sitesi veya çevrimiçi mağaza çalıştırıyor olun, bu küçük yükseltme, tasarımınızı temiz ve tutarlı tutarken kullanılabilirliği artırabilir.
WordPress'te Arama Geçiş Efekti Nedir?
Arama düğmesi efekti, bir arama formu yerine bir arama simgesi görüntülemenizi sağlayan bir web tasarım tekniğidir. Bir kullanıcı tıkladığında, arama formu bir animasyonla kaydırılarak açılır.
Varsayılan WordPress arama formu pek iyi görünmüyor. Birçok üst düzey WordPress teması varsayılan formu zaten kendi stilleriyle değiştiriyor.
Ancak, temanız hala statik, düz bir arama formu kullanıyorsa, onu daha kullanıcı dostu hale getirmek için bu öğreticiyi kullanabilirsiniz.
Bu doğrultuda, WordPress'e arama geçiş efektini nasıl kolayca ekleyeceğinizi ve sitenizi daha etkileşimli hale getireceğinizi göstereceğiz. İşte bu kılavuzda ele alacağımız tüm konulara hızlı bir genel bakış:
💡 İçeriden İpucu: Bu eğitim, özel bir kod parçacığı eklemeyi içerse de, uzman olmanıza gerek yok. Gerekli CSS kodunu adım adım kopyalayıp yapıştırma konusunda size rehberlik edeceğiz.
Başlayalım.
WordPress'te Bir Arama Geçiş Efekti Ekleme
WordPress'te bir arama geçişi efekti eklemek için web sitenize bir arama formu bloğu veya widget'ı yerleştirmeniz ve ardından özel CSS kodu eklemeniz gerekecektir.
Öncelikle web sitenizde bir arama formu olduğundan emin olalım.
Tam Site Düzenleme ile Bir Blok Temasına Arama Formu Ekleme
Tam site düzenleme özelliğine sahip bir WordPress blok teması kullanıyorsanız, arama formunu web sitenize bu şekilde ekleyeceksiniz.
WordPress kontrol panelinizden Görünüm » Düzenleyici'yi ziyaret etmeniz yeterlidir. Düzenleme ekranında, arama formunu görüntülemek istediğiniz yere 'Arama' bloğunu eklemek isteyeceksiniz.
Bundan sonra, değişikliklerinizi kaydetmek için 'Kaydet' düğmesine tıklamayı unutmayın.
Klasik WordPress Temalarına Arama Formu Ekleme
Tam site düzenleme özelliğine sahip olmayan WordPress temaları için, arama bloğunu veya widget'ını kenar çubuğunuza veya herhangi bir widget'a hazır alana ekleyebilirsiniz.
Bunu yapmak için WordPress kontrol panelinizden Görünüm » Widget'lar bölümüne gitmek isteyeceksiniz. Ardından, arama formunu görüntülemek istediğiniz kenar çubuğuna 'Arama' blok/widget'ını ekleyebilirsiniz.
Sonra, arama simgesi için şeffaf bir resim bulalım.
Bu eğitim için, koyu arka planlara uygun olduğu için bu resmi kullanıyoruz (web sitenizde kullanmaktan çekinmeyin).
Kendi arama simgenizi oluşturmanız gerekiyorsa, boyutları 50x50 pikselden büyük olmayan şeffaf bir PNG kullanmanız harika olacaktır.
Bir sonraki adım, simgeyi web sitenize yüklemektir. Sadece Medya » Yeni Ekle'ye gidin ve arama simgesi resminizi yüklemek için ‘Dosya Seç’e tıklayın.
Yüklendikten sonra, ‘Panoya URL'yi Kopyala’ düğmesine tıklayın, ardından URL'yi Not Defteri veya TextEdit gibi düz metin düzenleyicisine yapıştırın.
Artık her şey yerindeyken, WordPress web sitenize özel CSS eklemeniz gerekecek. Özel CSS'nizi kaydetmek için en iyi kod parçacığı eklentisi olan WPCode'u kullanmanızı öneririz.
WPCode, WordPress'e özel kod parçacıkları eklemenizi kolaylaştırır. Kullanımı kolaydır ve kodunuz tema güncellemelerinden veya farklı bir temaya geçtiğinizde etkilenmez.
Ortak markalarımızdan bazıları özel parçacıklarını eklemek ve yönetmek için onu kullanıyor. Onlar için olağanüstü iyi çalıştı ve detaylı WPCode incelememizde bunun hakkında daha fazla bilgi edinebilirsiniz.
💡 Profesyonel ipucu: Çoğu site için harika çalıştığı için WPCode'un ücretsiz sürümünü kullanıyoruz. Daha sonra çok sayıda özel parçacık eklemeye başlarsanız, planlanmış parçacıklar, sürüm geçmişi ve daha gelişmiş kontroller gibi ekstralar için WPCode Pro'ya yükseltmek isteyebilirsiniz.
Öyleyse, WPCode eklentisini kuralım ve etkinleştirelim.
WordPress kontrol panelinizden Eklentiler » Yeni Eklenti Ekle'ye gidin.
Sonraki ekranda, WPCode'u aramak için arama çubuğunu kullanın.
Sonuçlarda bulduğunuzda, ‘Şimdi Yükle’ düğmesine ve ardından etkinleştirmek için ‘Etkinleştir’ düğmesine tıklayın.
Yardıma ihtiyacınız olursa, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakabilirsiniz.
Etkinleştirdikten sonra, WPCode Kod Parçacığı Kitaplığını açmak için yönetici kontrol panelinizdeki Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.
‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğinin üzerine gelin ve göründüğünde ‘+ Özel Parçacık Ekle’ düğmesine tıklayın.
Bundan sonra, ekranda bir kod türleri listesi görünecektir.
Bu eğitim için, 'HTML Snippet' seçeneğini seçelim. Bunun nedeni, özel CSS'yi HTML kullanarak web sitesi başlığına yükleyecek olmanızdır.
Buradan, bu kod parçacığına bir başlık sağlamanız gerekir.
Parçacığı tanımlamanıza yardımcı olabilecek herhangi bir şey olabilir.
Şimdi, aşağıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırabilirsiniz:
<style>
.wp-block-search__inside-wrapper .wp-block-search__input {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.wp-block-search__inside-wrapper .wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.wp-block-search__inside-wrapper .wp-block-search__input::placeholder {
opacity: 0;
}
.search-form .search-submit,
.wp-block-search__button {
display: none;
}
</style>
⚠️ Önemli: /url/to/search-icon.png kısmını daha önce kopyaladığınız resim URL'si ile değiştirmeyi unutmayın. URL'nin etrafındaki tek tırnak ‘ ‘ işaretlerini koruduğunuzdan emin olun.
Bundan sonra, 'Devre Dışı' düğmesini 'Etkin' olarak değiştirmeniz gerekecek.
Ardından, ‘Snippet Kaydet’ düğmesine tıklamayı unutmayın.
Ve hepsi bu!
WordPress sitenizi ziyaret ederseniz, arama formunuzda geçiş efektinin çalıştığını görebilirsiniz.
Arama Formu Geçiş Efekti Sorun Giderme
Yukarıdaki yöntem, widget bloklarını kullanan çoğu modern WordPress temasıyla çalışacaktır. Ancak, bazı temalar için bu yöntem çalışmayabilir.
Bu, WordPress temanızdaki arama formunda wp-block-search__inside-wrapper ve wp-block-search__input sınıfları olmadığında gerçekleşebilir.
Bu durumda, WordPress temanız tarafından hangi CSS sınıflarının kullanıldığını öğrenmek için Denetle aracını kullanmanız gerekecektir.
Örneğin, aşağıdaki ekran görüntüsünde demo temanız arama formu için bu CSS sınıflarını kullanıyor.
İlk kod parçacığı sizin için çalışmadıysa, onu silebilir ve bunun yerine aşağıdaki kodu deneyebilirsiniz.
Bu sürüm, yukarıdaki örnekte bulunan belirli CSS sınıflarını kullanır. Ancak bunları kendi temanızdaki sınıflarla değiştirmelisiniz:
<style>
.search-wrap input.s {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.search-form .search-submit {
display: none;
}
</style>
⚠️ Önemli: background-image: url('/url/to/search-icon.png'); kısmını simgenizin gerçek URL'si ile değiştirmeyi unutmayın. URL'nin etrafındaki tek tırnak ‘ ‘ işaretlerini koruduğunuzdan emin olun.
Test web sitemizde nasıl göründüğü aşağıdadır:
Bonus İpucu: Web Siteniz İçin Daha İyi Bir WordPress Araması Ekleyin
Geçiş efekti, WordPress arama formunuzun yalnızca güzel görünmesini sağlar. Web sitenizin arama sonuçlarının kalitesini etkilemez.
WordPress varsayılan olarak çok temel bir arama özelliği ile birlikte gelir. Bu özellik genellikle yavaş, doğru olmayan ve boş sonuçlar gösterebilir.
İşte SearchWP, yani en iyi WordPress arama eklentisi burada devreye giriyor. Varsayılan arama özelliğini güçlü bir arama motoruyla kolayca değiştirmenize olanak tanır.
Tüm özelliklerini keşfetmek için test ettik ve daha fazla bilgi edinmek için tam SearchWP incelememize bakabilirsiniz.
SearchWP, arama formlarını otomatik olarak değiştirir, bu nedenle herhangi bir tema dosyasını düzenlemenize gerek kalmaz. Web sitenizde her yerde eşleşmeler arar ve arama sonuçlarının kalitesini önemli ölçüde iyileştirir.
Ayrıca, kullanıcılar sorgularını yazdıkça anında sonuçları görüntüleyen bir canlı arama uzantısıyla birlikte gelir. Ayrıca, çevrimiçi mağazanızda akıllı bir WooCommerce arama deneyimi oluşturmanıza olanak tanıyan tam eCommerce desteğine sahiptir.
Adım adım talimatlar için WordPress aramasını SearchWP ile iyileştirme kılavuzumuza göz atmaktan çekinmeyin.
SSS: WordPress'te Arama Açma/Kapama Efekti Ekleme
Arama geçişinin nasıl çalıştığı veya WordPress sitenizde nasıl özelleştirebileceğiniz hakkında sorularınız mı var? İşte size yardımcı olacak net cevaplarla sıkça sorulan sorular.
Bir arama geçiş efekti eklemek için kodlama bilmem gerekiyor mu?
Pek sayılmaz. HTML veya CSS hakkında temel bir anlayış yardımcı olabilse de, bu kılavuzdaki adımları herhangi bir kodlama deneyimi olmadan izleyebilirsiniz.
Temam geçiş efektini düzgün göstermezse ne olur?
Bazı temaların ek ayarlamalar yapması gerekebilir. Geçiş doğru görüntülenmiyorsa, temanızın CSS sınıflarını bulmak ve öğreticide gösterildiği gibi özel CSS'yi ayarlamak için tarayıcınızın Denetle aracını kullanabilirsiniz.
Bu arama geçişi mobil cihazlarda çalışacak mı?
Evet! Geçiş efekti duyarlıdır ve hem masaüstü hem de mobilde iyi çalışmalıdır. Her şeyin iyi göründüğünden emin olmak için farklı ekran boyutlarında test ettiğinizden emin olun.
Arama simgesi için herhangi bir resim kullanabilir miyim?
Evet, ancak sitenizin arka planında öne çıkan şeffaf bir PNG simgesi kullanmak en iyisidir. Keskin görünmesi ve hızlı yüklenmesi için 50x50 pikselin altında tutmanızı öneririz.
WordPress Aramanızı İyileştirmek İçin Daha Fazla Rehber
Bu makalenin WordPress'te bir arama geçiş efekti eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Sonra, bu kılavuzlar size yardımcı olabilir:
- WordPress'te Kategoriye Göre Arama Nasıl Yapılır
- WordPress'e Çok Dilli Arama Nasıl Eklenir
- Özel Gönderi Türlerini WordPress Arama Sonuçlarına Nasıl Dahil Edilir
- WordPress Arama Sonuçlarından Sayfaları Hariç Tutma
- WordPress Sitenize Sesli Arama Yeteneği Nasıl Eklenir
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Prad
Bunun için teşekkürler.
Varsayılan Arama bloğu kullanıcı arayüzü oldukça sönük. Bu uygulamayı beğendim. Ancak, 'Yalnızca Düğme' seçildiğinde, kullanıcı arama simgesine tıkladığında, arama çubuğu sola doğru kayarak menüyü iter ve bu da kullanıcı arayüzünü bozar. Birçok web sitesinde olduğu gibi Arama çubuğunun arama düğmesinin altında görünmesini sağlayabilir miyim? Bu yaklaşım bence çok daha temiz görünüyor.
Teşekkürler.
WPBeginner Desteği
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Yönetici
Dennis Muthomi
Bir müşteri web sitesinde bu etkiye sahibim.
Bu özelliği uygularken dikkate almanız gereken bir şey mobil deneyimdir.
Küçük ekranlarda, genişletilmiş arama çubuğunun diğer öğelerle çakışmamasını sağlamak için CSS'yi ayarlamak faydalı olabilir.
Jiří Vaněk
Ana menümde, arama kutusunun oldukça fazla yer kapladığı bir yerden tasarruf etmenin bir yolunu arıyordum. Dürüst olmak gerekirse, menü oldukça uzun olduğu için yerden nasıl tasarruf edeceğimi düşünemedim. Bu yüzden arama kutusunun boyutunu küçültmeyi denedim. Bu makaleyi okuduktan sonra çözümünüzü uyguladım ve tam olarak aradığım şey buydu. Web sitemde arama pek sık kullanılmıyor ve bu, ana menüye yer açmak ve arama kutusunu yalnızca gerekli boyuta indirmek için zarif bir çözüm. Harika iş.
WPBeginner Desteği
Yardımcı olduğunuza sevindim!
Yönetici
James Burns
Çok teşekkürler. Tam olarak ihtiyacım olan bilgi, anlaşılması kolay bir formatta sunulmuş.
WPBeginner Desteği
You’re welcome, glad you found our content helpful
Yönetici
Osh
Merhaba,
Bir alt tema kullanıyorum, bu kodları ana temanın dosyalarına mı eklemeliyim?
Bunu yapmaya çalıştım ve çalışmıyor, lütfen yardım edin!!!
Teşekkürler
WPBeginner Desteği
Kodu çocuk temanıza eklemek istersiniz
Yönetici
Benjamin Rutledge
Bu yalnızca mobilde uygulanabilir mi? Temamın masaüstünde güzel bir animasyonlu arama işlevi var, ancak mobilde logomun yerine arama kutusunu göstermek/gizlemek için yalnızca bir geçiş var.
Beth Terry
Merhaba. Bu kod için çok teşekkür ederim. Arama düğmesinin istediğim yerde görünmesini sağlamak için konumlandırma ile biraz oynamam gerekti ve yalnızca mobil sürümde görünmesini istediğim için, 800 piksel üzeri ekranlar için medya sorgusuna tam arama alanını simge yerine göstermek üzere css ekledim. Harika çalıştırdım, ancak yalnızca temel olarak tak ve çalıştır bir şey isteyenler için biraz karmaşık olduğunu düşünüyorum.
Sonuçları buradan görüntüleyebilirsiniz:
Şüphe eden herkese, javascript kesinlikle gerekli değildir.
Beth Terry
Ayrıca, HTML4 arama koduna sahip bir Twenty Twelve alt teması kullandığımı da eklemek istiyorum. HTML5 desteğini functions.php'ye eklemek sorunu çözmedi, bu yüzden yukarıda yayınladığınız HTML5 arama kodunu, arama kutusunun olmasını istediğim tema başlığına kopyalayıp yapıştırdım.
Emily G
Merhaba – bunu bir web sitesine uyguluyorum ve bir resim yerine FontAwesome kullanmak istiyorum. Ancak simgenin görünmesini sağlayamıyorum. Herhangi bir ipucunuz var mı? Fontu ve simgeyi .search-form input[type="search"]'e font-family: FontAwesome;
content: “\f002"; olarak ekliyorum
Teşekkürler!
Bradley
Şunu dene:
yazı tipi: normal normal normal 1em/1 FontAwesome;
Steve
Bunun benim için işe yarayacağını umuyordum. Kodu temamın (twentytwelvechild) Ek CSS alanına yapıştırdım, FTM kullanarak arama-ikonu.png dosyasını tema klasörüme ekledim ve tema'mın functions.php dosyasına add_theme_support(‘html5’, array(‘search-form’)); ekledim. Hiçbir değişiklik göremiyorum ve neyi kaçırdığımı merak ediyorum. Umarım biri bana bir ipucu verebilir. teşekkür ederim.
Harmandeep Singh
Çalışmıyor.
Kalabalık
Çok teşekkür ederim, harika çalışıyor.
Sizce arama alanının şu anki gibi soldan sağa değil de sağdan sola doğru görünmesini sağlamanın bir yolu var mı?
Marimar
Metni sağa hizala
metin-hizalama: sağ;
Diğer tarafa kayar.
Tony López
Teşekkürler! Mükemmel çalıştı.
Cato
Evet… düşündüğüm gibi, bu hiç çalışmıyor. Zaten JS olmadan nasıl çalışması bekleniyor?
Cato
Hmmm bu biraz eski ama... burada gerçekten javascript gerekmiyor mu? bu ne tür bir kara büyü?
WPBeginner Desteği
JS yerine bu teknik CSS kullanır.
Yönetici
SiRetu
Kod için teşekkürler… Duyarlı mı? Yani, mobil cihazlarda arama alanının tam olarak gösterilmesini istiyorum. Mümkün mü?
Panfi
Not working for me and wonder why
Cassy
Bunu genesis'te çalıştırdım ama arama formum navigasyon çubuğumda ve ekran genişliği nispeten küçük olduğunda, arama formu aşağı iniyor.
Sohan
Çalışıyor!
Çooooook teşekkür ederim!
Anur
Bunun Genesis'te çalıştığını sanmıyorum
Cassy
Genesis'te çalışır hale getirdim. search-icon.png dosyasını genesis child tema resimler klasörüne taşımanız gerekiyor. Ardından, arama formunuzu nereye yerleştirdiğinize bağlı olarak, benimki gezinme çubuğunda olduğu için biraz farklı, css stilini istediğiniz gibi ayarlarsınız. Çalıştırmak için ".genesis-nav-menu .search input" sınıfını değiştirmem gerekti.
Laura
Merhaba Cassy, .genesis-nav-menu .search input sınıfını nasıl değiştirdiğiniz hakkında biraz daha bilgi verebilir misiniz? Çalıştıramıyorum. Teşekkürler!
Maria
Merhaba! Genesis kullanıyorum ve bu efekti çalıştıramıyorum. Neden olabileceğine dair ipuçlarınız var mı?
Anur
evet aynı sorun, genesis'teyim ve enteprise pro teması çalışmıyor.
Bunu genesis'te çalıştırmanın bir çözümünü bilen var mı..
Roy
bu gerçekten harika! Simgenin sağda sabit durup formun sola kayması mümkün mü? Çözemedim!
Joshua Farr
Merhaba – Bu harika kod için teşekkürler. Üzerinde çalıştığım bir müşterinin sitesine HTML5 sürümünü kullanarak eklemeyi denedim, ekstra parçayı functions.php'ye yerleştirdim ve tüm CSS'leri ekledim. Bir arama simgesi ekledim ve formun sitede istediğim gibi görünmesini sağladım – hatta istenen tüm geçiş efektini bile yapıyor – ancak test etmek için aramak istediğim metni girdiğimde, arama sonuçlarını görüntülemek için aramayı gönderemiyorum. Varsayılan bir arama formuna sahip bir woocommerce teması olan “Mystile” kullanıyoruz (bu girildiğinde çalışıyor) ancak bu sayfada bahsedilen formun görünümünü ve işlevselliğini çok daha çok tercih ediyorum.
WooCommerce arama formu kodunu verdiğiniz kodun yanına koymaya çalıştık, parçaları değiştirerek ikisini "birleştirmeye" çalıştık... ama sonuç alamadık.
Herhangi bir tavsiye çok yardımcı olacaktır.
Teşekkürler!
-Josh
WPBeginner Desteği
Bunun birçok nedeni olabilir, tema uyumluluğu sorunlarına yardımcı olmamız mümkün değil.
Yönetici
Rajeesh Nair
İşte ilginç bir şey. Ben sadece bir acemiyim ve aslında blog temasının varsayılan olarak gelen, açılır pencere gibi olan (tam olarak açılır pencere değil, CSS'i JavaScript değil) ve arama çubuğunu gösteren arama seçeneğini kullanıyorum.
Ancak tam olarak aradığım şey, ListVerse gibi popüler bloglarda bulunan Google Aramayı Blog aramasıyla birlikte nasıl göstereceğim. Lütfen bana bu konuda rehberlik edin!
WPBeginner Desteği
WordPress'e Google araması ekleme kılavuzumuza göz atın.
Yönetici
adolf witzeling
Harika bir eğitim daha. Sadece havalı olduğu için siteme ekleyeceğim.
alexisnicholson
Kod harika görünüyor, çabalarınızı takdir ediyorum, kesinlikle bunu wordpress projem için deneyeceğim.
Codingbrains
Shahraar Khan
Bir demo yardımcı olur.. Ayrıca form etiketindeki role=\"search\" özniteliğinin kullanımı ne anlama geliyor, \"role\" özniteliği ne için kullanılıyor?
Susan Silver
Bununla ilgili basit bir eğitim arıyordum. Teşekkürler! Facebook mobil uygulamasındaki gibi kayan menüler hakkında bir tane yaptınız mı? Bu menüler masaüstü uygulamaları için bile giderek daha popüler hale geliyor.
WPBeginner Desteği
Aslında yaptık, WordPress'e kayan panel menüsü eklemeyi nasıl yapacağımızı inceleyin.
Yönetici