WordPress’te Tam Ekran Arama Yer Paylaşımı Nasıl Eklenir

Geçtiğimiz günlerde okuyucularımızdan biri WordPress’te tam ekran arama arayüzünün nasıl ekleneceğine dair bir eğitim yazıp yazamayacağımızı sordu. Bunu muhtemelen Wired gibi popüler sitelerde görmüşsünüzdür. Bir kullanıcı arama simgesine tıkladığında, arama kutusu açılır ve tüm ekranı kaplar, bu da mobil cihazlarda kullanıcı deneyimini iyileştirebilir. Bu makalede, WordPress’te tam ekran arama yer paylaşımını nasıl ekleyeceğinizi göstereceğiz.

Tam ekran arama yavaş yavaş bir trend haline geliyor çünkü mobil kullanıcılar için arama deneyimini büyük ölçüde geliştiriyor. Mobil ekranlar çok küçük olduğundan, tam ekran bir yer paylaşımı sunarak kullanıcıların web sitenizde yazmasını ve arama yapmasını kolaylaştırırsınız.

Bu eğitim talebini ilk aldığımızda, biraz kod gerektireceğini biliyorduk. WPBeginner’daki amacımız işleri olabildiğince basit hale getirmektir.

Öğreticiyi yazmayı bitirdiğimizde, bunun çok karmaşık bir süreç olduğunu ve basit bir eklentiye dönüştürülmesi gerektiğini fark ettik.

Bunu kolaylaştırmak için, tam ekran arama kaplamasının nasıl ekleneceğine dair aşağıda izleyebileceğiniz bir eğitim videosu hazırladık.

Ancak yalnızca metin talimatlarını takip etmek istiyorsanız, WordPress’te tam ekran arama kaplamasının nasıl ekleneceğine ilişkin adım adım eğitimimizi takip edebilirsiniz.

WordPress’te Tam Ekran Arama Yerleşimi Ekleme

Yapmanız gereken ilk şey WordPress Tam Ekran Arama Yer Paylaşımı eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

WordPress Tam Ekran Yer Paylaşımlı Arama eklentisi kutudan çıktığı gibi çalışır ve yapılandırmanız gereken herhangi bir ayar yoktur.

Eklentiyi çalışırken görmek için web sitenizi ziyaret edebilir ve arama kutusuna tıklayabilirsiniz.

Eklentinin varsayılan WordPress arama özelliği ile çalıştığını lütfen unutmayın. Ayrıca, varsayılan WordPress aramasını büyük ölçüde geliştiren premium bir eklenti olan SearchWP ile de harika çalışır.

Ne yazık ki, bu eklenti Google Özel Arama ile çalışmaz.

Tam Ekran Arama Yerleşimini Özelleştirme

WordPress Tam Ekran Arama Yer Paylaşımı eklentisi kendi stil sayfasıyla birlikte gelir. Arama katmanının görünümünü değiştirmek için eklentinin CSS dosyasını düzenlemeniz veya CSS’de !important kullanmanız gerekecektir.

Öncelikle bir FTP istemcisi kullanarak web sitenize bağlanmanız gerekecektir. FTP kullanımında yeniyseniz, FTP kullanarak WordPress’e nasıl dosya yükleyeceğinizle ilgili kılavuzumuza göz atın.

Bağlandıktan sonra, eklentinin CSS klasörünü bulmanız gerekir. Aşağıdaki yol altında bulacaksınız:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Css klasörü içinde full-screen-search.c ss dosyasını bulacaksınız. Bu dosyayı bilgisayarınıza indirmeniz gerekiyor.

İndirdiğiniz dosyayı Not Defteri gibi bir düz metin düzenleyicisinde açın. Bu dosyada istediğiniz değişiklikleri yapabilirsiniz. Örneğin, arka plan ve yazı tipi rengini demo web sitemizle eşleşecek şekilde değiştirmek istedik.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

Bu kodda sadece 62. satırda arka plan rengini değiştirdik ve 150. satırda yazı tipi rengini ekledik. CSS ile aranız iyiyse, diğer stil kurallarını da değiştirmekten çekinmeyin.

İşiniz bittiğinde, bu dosyayı FTP kullanarak eklentinin CSS klasörüne geri yükleyebilirsiniz. Artık web sitenizi ziyaret ederek değişikliklerinizi görebilirsiniz.

Önemli Not:

Bunu kendi temanızda kullanıyorsanız, eklenti güncellemelerinin herhangi bir değişikliği geçersiz kılmaması için !important etiketlerini kullanmanız daha iyi olacaktır.

Geliştiriciler ve danışmanlar için eklentiyi yeniden adlandırabilir ve temanızın veya hizmetlerinizin bir parçası olarak paketleyebilirsiniz.

Bu eklentiyi oluşturmamızın tek nedeni, bu eğitimi yazmanın diğer tüm yollarının yeni başlayan kullanıcılar için çok karmaşık olmasıydı.

Umarız bu makale WordPress sitenize tam ekran arama kaplaması eklemenize yardımcı olmuştur. WordPress’te arama geçiş efektinin nasıl ekleneceğineilişkin kılavuzumuzu da görmek isteyebilirsiniz

Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.