WordPress'te Tam Ekran Arama Katmanını Ekleme

Yakın zamanda okuyucularımızdan biri, WordPress'te tam ekran arama katmanı ekleme konusunda bir eğitim yazısı yazıp yazamayacağımızı sordu. Bunu muhtemelen Wired gibi popüler sitelerde görmüşsünüzdür. 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 katmanı eklemeyi göstereceğiz.

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

Bu öğretici isteğini ilk aldığımızda, biraz kodlama gerektireceğini biliyorduk. WPBeginner'daki amacımız işleri olabildiğince basit hale getirmektir.

Eğitimi yazmayı bitirdikten sonra, sürecin çok karmaşık olduğunu fark ettik ve bunun yerine basit bir eklentiye sarılması gerektiğini düşündük.

Kolaylaştırmak için, aşağıda izleyebileceğiniz tam ekran arama katmanı ekleme konusunda bir video eğitim hazırladık.

Ancak yalnızca metin talimatlarını takip etmek isterseniz, WordPress'te tam ekran arama katmanı ekleme konusunda adım adım eğitimimizi takip edebilirsiniz.

WordPress'e Tam Ekran Arama Katmanı Ekleme

Yapmanız gereken ilk şey, WordPress Tam Ekran Arama Katmanı eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisi kurma hakkında adım adım kılavuzumuza bakın.

WordPress Tam Ekran Üst Katman Arama eklentisi kutudan çıktığı gibi çalışır ve yapılandırılacak ayarınız yoktur.

Eklentiyi çalışırken görmek için web sitenizi ziyaret edip arama kutusuna tıklamanız yeterlidir.

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

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

Tam Ekran Arama Üst Katmanını Özelleştirme

WordPress Tam Ekran Arama Katmanı eklentisi kendi stil sayfasını içerir. 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 FTP istemcisi kullanarak web sitenize bağlanmanız gerekecektir. FTP kullanmaya yeni başlıyorsanız, FTP kullanarak WordPress'e dosya yükleme kılavuzumuza göz atın.

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

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

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

İndirdiğiniz dosyayı Not Defteri gibi düz metin bir düzenleyicide açın. Bu dosyada herhangi bir değişiklik yapabilirsiniz. Örneğin, demo web sitemize uyum sağlaması için arka plan ve yazı tipi rengini 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, yalnızca 62. satırda arka plan rengini değiştirdik ve 150. satıra yazı tipi rengi ekledik. CSS ile iyiyseniz, 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. Web sitenizi ziyaret ederek değişikliklerinizi artık görebilirsiniz.

Önemli Not:

Bunu kendi temanızda kullanıyorsanız, eklenti güncellemelerinin değişiklikleri geçersiz kılmaması için !important etiketlerini kullanmak daha iyidir.

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

Bu eklentiyi yalnızca diğer tüm bu öğreticiyi yazma yöntemleri yeni başlayan kullanıcılar için çok karmaşık olacağından oluşturduk.

Umuyoruz ki bu makale, WordPress sitenize tam ekran arama katmanı eklemenize yardımcı olmuştur. Ayrıca WordPress'te arama geçiş efekti ekleme rehberimize de göz atmak isteyebilirsiniz.

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.