Evet arkadaşlar, WordPress Dersleri ile ilgili ipuçlarını aktarmaya kaldığımız yerden devam ediyoruz. WordPress'te neredeyse her bir özellik için eklenti mevcut ancak mevcut hızı korumak ve sunucu stabilitesi için ben manuel aksiyon almaktan yanayım. Sizlerle düzenlemiş olduğum ve tamamen Responsive olarak çalışan (temanız uyumlu ise) bir arama formu paylaşmak istiyorum.

Aşağıdaki kodları izleyerek, siz de sitenize sorunsuz çalışan bir arama formu ekleyebilirsiniz. Mevcut renk kodlarını v.b. dilediğiniz gibi değiştirebilirsiniz.

AYRICA: WordPress’te Son 10 Yazımızı Eklentisiz Listeleyelim

WordPress için Eklentisiz Arama Formu Yapalım (Responsive)

1) Arama formuna ait ilgili kodlar aşağıdaki gibidir.

<form role="search" method="get" id="searchform" class="searchform" action="http://www.domain-adi.uzanti/">
<div>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="">
</div>
</form>


2) Temanızın CSS bölümüne ekleyeceğiniz kodlar ise aşağıdaki gibidir.

input#searchsubmit:hover{background-color:#333333;border:1px solid #333333;}
input#searchsubmit {
color: #ffffff!important;border:1px solid #B42924;
background: #B42924 url(https://www.teknobeyin.com/wp-content/themes/astra/manset/arasana.png) center center no-repeat;
font-family: Arial,sans-serif!important;
width:100%!important;cursor:pointer;
box-sizing:border-box;font-size:14px;
padding: 0px;height:48px;
}
.searchform input#s {
box-sizing:border-box;height:48px;
padding-left: 10px;padding-right:10px;margin-top:10px;
background-color: #fff;color:#333!important;
border: 1px solid #ccc;font-size:14px;
width:100%;margin-bottom:15px;
}


Örnek Görünüm

Not: Kodlardaki kırmızı alanı kendinize göre güncellemeyi unutmayınız.