آموزش طراحی قالب وردپرس – ساخت فرم جستجو

آموزش طراحی قالب وردپرس – ساخت فرم جستجو

اول از همه یک فایل php به نام searchform.php بسازید در قسمت روت پوسته ای که آموزش میدادیم. سپس کدهای زیر را داخلش قرار بدید و بعد ذخیره کنید

<form class="search-form clearfix" action="<?php echo home_url(); ?>">
<input type="text" class="search-form-input text" name="s" placeholder="جستجو در سایت"/>
<button type="submit" class="submit search-button"><i class="fa fa-search"></i></button>
</form>

حالا اگر ابزارک جستجو را در سایدبار قرار بدید میبینید که فرم با توجه به امکاناتی که توی کد بالا گذاشتیم قرار داده شده اما خوشگل و کاربر پسند نیست. پس حالا نوبت میرسه به زیبا کردن فرم با استفاده از CSS

پس در ادامه فایل style.css را در حالت ادیت باز کرده و این کد را هم داخلش قرار بدید

/**************** Search Form ********************/
 
.search-form-input {
padding: 5px 10px;
background-color: #ECECEC;
border: 1px solid #f5f5f5;
border-radius: 5px;
}
 
.search-button {
  padding: 5px 7px;
  border: 1px solid #e74c3c;
  background: #e74c3c;
  color: #fff;
  border-radius: 5px;
}