Temiz, kaydırılarak açılan bir arama geçişi, WordPress sitenizin anında şık ve modern görünmesini sağlayabilir. Tam bir arama çubuğunu üstbilginizde göstermek veya tamamen gizlemek yerine, bir geçiş efekti, arama işlemini erişilebilir hale getirirken tasarımınızı düzenli tutar.
Bu küçük kullanıcı arayüzü detayının büyük bir fark yarattığını, sitelere karmaşa katmadan daha cilalı, profesyonel bir görünüm kazandırdığını gördük.
En iyi yanı? Bunu akıllıca ve verimli bir şekilde yapmanın yolları var.
Bu eğitimde, WordPress'te pürüzsüz, kayan bir arama geçiş efekti eklemenin tam olarak nasıl yapılacağını göstereceğiz. Bir blog, işletme sitesi veya çevrimiçi mağaza çalıştırıyor olun, bu yükseltme basit, şık bir dokunuşla kullanıcı deneyiminizi iyileştirmenize yardımcı olacaktır. 🎨
WordPress'te Arama Geçiş Efekti Nedir?
Arama geçiş efekti, bir arama formu görüntülemek yerine bir arama simgesi göstermenizi sağlayan bir web tasarım tekniğidir. Bir kullanıcı tıkladığında, arama formu bir kaydırma animasyonu ile görünür.
Varsayılan WordPress arama formu pek iyi görünmüyor. Birçok en iyi WordPress temaları varsayılan formu kendi stilleriyle zaten 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ış:
- WordPress'te Bir Arama Geçiş Efekti Ekleme
- Arama Formu Geçiş Efekti Sorun Giderme
- Bonus İpucu: Web Siteniz İçin Daha İyi Bir WordPress Araması Ekleyin
- SSS: WordPress'te Arama Açma/Kapama Efekti Ekleme
- WordPress Aramanızı İyileştirmek İçin Daha Fazla Rehber
💡 İçeriden İpucu: Bu öğretici, HTML / CSS hakkında temel bir anlayış gerektirdiği için orta ve ileri düzey WordPress kullanıcıları için en uygundur.
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 şu ş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.
Diğer WordPress Temalarında 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 gitmeniz gerekecek. Ardından, arama formunu görüntülemek istediğiniz kenar çubuğuna 'Arama' bloğunu/widget'ını ekleyebilirsiniz.
Sonra, arama simgesi için şeffaf bir resim bulalım.
Bu eğitimde, koyu arka planlara uygun olduğu için bu resmi kullanıyoruz (web sitenizde kullanmaktan çekinmeyin).
Kendi arama simgenizi oluşturmanız gerekiyorsa, en fazla 50x50 piksel boyutlarında şeffaf bir PNG görüntüsü oluşturmak 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, 'URL'yi panoya kopyala' düğmesine tıklamak ve URL'yi Not Defteri veya TextEdit gibi düz metin düzenleyiciye yapıştırmak isteyeceksiniz.
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 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 bunu kullanıyor. Onlar için olağanüstü iyi çalışıyor ve detaylı WPCode incelememizde bunun hakkında daha fazla bilgi edinebilirsiniz.
O halde, ücretsiz WPCode eklentisini kuralım ve etkinleştirelim. Yardıma ihtiyacınız olursa, WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakabilirsiniz.
Etkinleştirdikten sonra, WordPress yönetici kontrol panelinizdeki Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.
Bir sonraki ekranda WPCode Snippet Kitaplığı'nı göreceksiniz.
Kütüphanedeki ‘Özel Kod Ekle (Yeni Parça)’ seçeneğinin üzerine gelin ve göründüğünde ‘Özel Parça Ekle’ düğmesine tıklayın.
Ardından ekranda bir kod türleri listesi görünecektir. Bu eğitim için ‘HTML Snippet’ seçeneğini seçmeniz gerekir.
Bunun nedeni, özel CSS'yi HTML kullanarak web sitesi üstbilgisinde 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 type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
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.
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!
Web sitenizi ziyaret ederseniz, arama formunuzu geçiş efektiyle çalışırken 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ı temalarda 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 İnceleme 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.
Şimdi, aşağıdaki kodu değiştirebilir ve bunun yerine bu CSS sınıflarını kullanabilirsiniz.
İşte bir örnek:
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
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, 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 incelememizi görebilirsiniz.
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ı ile 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, SearchWP ile WordPress aramasını nasıl iyileştireceğiniz hakkındaki 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ı olabilirken, bu kılavuzdaki adımları herhangi bir kodlama deneyimi olmadan izleyebilirsiniz.
Temam geçiş efektini düzgün göstermezse ne olur?
Bazı temalar ek ayarlamalar gerektirebilir. Geçiş düzgün görüntülenmiyorsa, tarayıcınızın İncele aracını kullanarak temanızın CSS sınıflarını bulabilir ve öğreticide gösterildiği gibi özel CSS'yi ayarlayabilirsiniz.
Bu arama geçişi mobil cihazlarda çalışacak mı?
Evet! Geçiş efekti duyarlıdır ve hem masaüstü hem de mobil cihazlarda 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 Menüsüne Arama Çubuğu Nasıl Eklenir
- 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'te Aranabilir Bir Üye Dizini Nasıl Oluşturulur
- WordPress'te Aranabilir Bir Veritabanı Nasıl Oluşturulur
- WordPress Arama Sonuçlarından Sayfaları Hariç Tutma
- WordPress Sitenize Sesli Arama Yeteneği Nasıl Eklenir
- WordPress Kullanıcıları İçin En İyi Arama Eklentileri
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
text-align: right;
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'te 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'te kayan panel menüsü eklemeyi nasıl ekleyeceğinize göz atın.
Yönetici