با سلام خدمت شما دوستان عزیز و گرامی.امروز قصد دارم بهتون نحوه اضافه کردن فایل جستجو در قالب وردپرس رو آموزش بدم.هر چند این رو به یاد داشته باشید که به صورت پیشفرض اگر فرم جستجو رو تعریف نکنید توی قسمت ابزارک ها فرم جستجو وجود داره و شما میتونید ازش استفاده کنید. اما خب چندان قابلیت  سفارشی سازی ندارید.

آموزش ساخت فرم جستجو در وردپرس

اول از همه یک فایل 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-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;
}

 

و بعد ذخیره کنید و دوباره صفحه رو رفرش کنید. فرم شما باید به این شکل شده باشه

form

موفق باشید

منبع
محمد جواد کوشکی
خودمو یک متخصص نمی دونم چون هر روز دارم چیز های جدیدی در حوزه کسب و کار اینترنتی یاد می گیرم.