WordPress’e tam ekran arama nasıl eklenir

Son zamanlarda, okuyucularımızdan biri, WordPress’e tam ekran kaplamasının nasıl ekleneceğine dair bir öğretici yazıp yazamayacağımızı sordu. Bunu Wired gibi popüler sitelerde görmüş olabilirsiniz. Kullanıcı arama simgesini tıkladığında, arama kutusu açıktır ve mobil cihazlarda kullanıcı deneyimini geliştirebilecek tüm ekranı kapsar. Bu makalede, WordPress’e tam ekran araması nasıl ekleyeceğinizi göstereceğiz.

Tam ekran arama yavaş yavaş bir trend haline gelir, çünkü hücresel kullanıcılar için arama deneyimini büyük ölçüde geliştirir. Hücresel ekran çok küçük olduğundan, tam ekran genişliği sunarak, kullanıcıların web sitenize yazmasını ve arama yapmasını kolaylaştırırsınız.
Bu öğretici için ilk bir istek aldığımızda, bunun birkaç kod gerektireceğini biliyorduk. WPBeginner’daki amacımız işleri olabildiğince basit hale getirmektir. Öğreticiyi yazmayı bitirdikten sonra, sürecin çok karmaşık olduğunu ve basit bir eklentiye konulması gerektiğini fark ettik. Daha kolay hale getirmek için, aşağıda izleyebileceğiniz tam ekran kaplamasının nasıl ekleneceğine dair bir video öğretici yaptık.
WPBeginner’a abone olun
Ancak yalnızca metin talimatlarını takip etmek istiyorsanız, WordPress’e Fulllay Tam Ekran Araması Nasıl Ekleneceğiniz İçin Adım Adım Eğitimimizi izleyebilirsiniz.
WordPress’te Kaplama Tam Ekran Arama Ekle Yapmanız gereken ilk şey WordPress Tam Ekran Arama Kaplama Eklentisini yüklemek ve etkinleştirmektir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. WordPress tam ekran arama eklentileri kutunun dışında işlev görür ve yapılandırmanız için hiçbir ayar yoktur. Sadece web sitenizi ziyaret edin ve eylem eklentisini görmek için arama kutusuna tıklayın. Umarım eklentinin SearchPress varsayılan arama özelliği ile çalıştığını unutmayın. Ayrıca, SearchPress varsayılan aramasını büyük ölçüde geliştiren premium bir eklenti olan SearchWP ile çok iyi çalışır.

Ne yazık ki, bu eklenti Google Özel Arama ile çalışmıyor. Tam Ekran Aramasının Ayarlanması Tam Ekran Eklentisi Arama Overlay WordPress kendi stil sayfasıyla birlikte gelir. Kaplama arama ekranını değiştirmek için, CSS eklenti dosyasını düzenlemeniz veya CSS’de önemli! İlk olarak, FTP istemcileri kullanarak web sitenize bağlı olmalısınız. Sadece FTP kullanıyorsanız, FTP’yi kullanarak dosyaları WordPress’e nasıl yükleyeceğiniz konusundaki kılavuzumuza bakın. Bağlandıktan sonra, CSS eklenti klasörünü bulmanız gerekir. Bunu aşağıdaki yolun altında bulacaksınız: yourwebsite.com/wp-content/plugins/full-seare-search-overlay/asses/css/css/
CSS klasöründe tam ekran-search.css dosyaları bulacaksınız. Bu dosyayı bilgisayarınıza indirmeniz gerekir. Not Defteri gibi sıradan bir metin düzenleyicisine yeni indirdiğiniz dosyayı açın. Bu dosyada herhangi bir değişiklik yapabilirsiniz. Örneğin, demo web sitemize uyacak şekilde yazı tipinin arka planını ve rengini değiştirmek istiyoruz ./**
* Sıfırla
* – Temaların ve diğer eklentilerin tam ekran aramamıza kendi stillerini uygulamasını önledi*
#Tam ekran-exam,
#Tam ekran arama düğmesi,
#tam ekran-arama düğmesi.Close,
#Tam ekran-araştırma formu,
#Tam ekran-araştırma formu div,
#Tam ekran-araştırma formu div girişi,
#Tam ekran-araştırma formu div girişi.search {
Yazı tipi ailesi: Arial, sans-serif;
Arka plan: yok;
Sınır: 0 Yok;
Border-Radius: 0;
-Webkit-Sınırlı-Radius: 0;
-Moz-Sınırlı-Radius: 0;
Şamandıra: yok;
yazı tipi boyutu:%100;
Yükseklik: Otomatik;
Mektup Alanı: Normal;
Liste tarzı: yok;
Anahat: Yok;
Pozisyon: Statik;
Metin dekorasyonu: yok;
Metin-Bağımlı: 0;
Metin gölgesi: yok;
Metin-Transform: Yok;
Genişlik: Otomatik;
Görünürlük: Görünür;
Taşma: Görünür;
Marj: 0;
Dolgu: 0;
Çizgi yüksekliği: 1;
Kutu Boyutlandırma: Sınır Kutusu;
-Webkit-Box Boyutlandırma: Border-Box;
-Moz-box boyutu: sınır kutusu;
-Webkit-Box-Shadow: Yok;
-Moz-Box-Shadow: Yok;
-Ms-box-shadow: yok;
-O-box-shadow: yok;
Box-Shadow: Yok;
-Webkit-Apearacce: Yok;
Geçiş: Yok;
-Webkit-Transition: Yok;
-Moz-Transition: Yok;
-O-geçiş: yok;
-MS-Transition: Yok;
}
/**
* Arka fon
*/
#Tam ekran-exam {
Görünürlük: gizli;
Opaklık: 0;
Z-endeks: 999998;
Üst: 0;
Sol: 0;
Genişlik:%100;
Yükseklik:%100;
Arka plan: #1BC69E;
/**
* Tam ekran aramasını göstermek için bazı CSS3 geçişleri ekleyin
*/
Geçiş: Opaklık 0.5s doğrusal;
}
/**
* Açık Ekranda Tam Ekran Arama
*/
#Tam ekran-search.open {
/**
* Çünkü CSS geçiş desteği için görünürlük ve opaklık kullanıyoruz,
* Konum tanımlıyoruz: Sabit; Burada tam ekran araması engellemez
* Açık olmadığında temel HTML öğeleri
*/
Konum: Sabit;
Görünürlük: Görünür;
Opaklık: 1;
}
/**
* Arama Formu
*/
#tam ekran-araştırma formu {konum: göreceli;
Genişlik:%100;
Yükseklik:%100;
}
/**
* Kapat düğmesi
*/
#tam ekran-arama düğmesi.Close {
Pozisyon: Mutlak;
Z-endeks: 999999;
Üst: 20px;
Sağ: 20px;
yazı tipi boyutu: 30px;
yazı tipi-ağırlık: 300;
Renk: #999;
İmleç: işaretçi;
}
/**
* Div formunu arama
*/
#Tam ekran-araştırma formu div {
Pozisyon: Mutlak;
Genişlik:%50;
Yükseklik: 100 piksel;
Üst:%50;
Sol:%50;
Marj: -50px 0 0-25;
}
/**
* Yer tutucu renk giriş formunu arayın
*/
#Tam Ekran-Araştırma Formu Div girişi ::-WebKit-Input-Plateholder {
Yazı tipi ailesi: Arial, sans-serif;
Renk: #CCC;
}
#Tam Ekran-Araştırma Formu Div girişi: -moz-yer sahibi {
Yazı tipi ailesi: Arial, sans-serif;
Renk: #CCC;
}
#Tam Ekran-Araştırma Formu Div girişi ::-moz-localholder {
Yazı tipi ailesi: Arial, sans-serif;
Renk: #CCC;
}
#Tam Ekran-Araştırma Formu Div girişi: -ms-input-yer sahibi {
Yazı tipi ailesi: Arial, sans-serif;
Renk: #CCC;
}
/**
* Giriş formunu arama
*/
#Tam ekran-araştırma formu div girişi {
Genişlik:%100;
Yükseklik: 100 piksel;
Arka plan: #EEE;
Dolgu: 20px;
yazı tipi boyutu: 40px;
Hat yüksekliği: 60px;
/ * Buraya kendi yazı tipi rengimizi ekledik */
Renk:#50B0A6;
}
Bu kodda, arka plan rengini yalnızca satır 62 olarak değiştiririz ve 150 satırına yazı tipi renkleri ekleriz. CSS ile yetkinseniz, diğer stilleri de değiştirmekten çekinmeyin.
Bittiğinde, bu dosyayı FTP kullanarak CSS eklentisi klasörüne geri yükleyebilirsiniz. Artık değişikliklerinizi web sitenizi ziyaret ederek görebilirsiniz.
Önemli Not: Bunu kendi temanızda kullanırsanız, eklenti güncellemesinin herhangi bir değişikliği göz ardı etmemesi için etiketi kullanmak daha iyidir!Geliştiriciler ve danışmanlar için eklentinin adını da değiştirebilir ve temanızın veya hizmetinizin bir parçası olarak birleştirebilirsiniz.Bu eklentiyi sadece yapıyoruz çünkü bu öğreticiyi yazmanın diğer tüm yolları acemi kullanıcılar için çok karmaşık olacaktır.Bu makalenin WordPress sitenize tam ekran arama kaplaması eklemenize yardımcı olduğunu umuyoruz.Ayrıca, WordPress’e bir arama anahtarı efekti nasıl ekleneceğine dair kılavuzumuzu görmek isteyebilirsiniz, bu makaleyi beğendiyseniz, lütfen WordPress video öğreticileri için YouTube kanalımıza abone olun.Bizi Twitter ve Facebook’ta da bulabilirsiniz.