شخصی سازی ابزارک جستجو وردپرس

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

شخصی سازی قالب ابزارک جستجو وردپرس

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

برای شخصی سازی ابزارک جستجو نیار به 2 کار هستش…

• اضافه کردن یا ویرایش فایل searchform.php به قالب
• اضافه کردن یا ویرایش استایل برای ابزارک جستجو

استایل ابزارک جستجو وردپرس

اگر کدهای زیر رو به انتهای فایل style.css قالب خودتون اضافه کنید و تا آخر آموزش با ما باشید در نهایت ابزارک جستجو شما این شکلی میشه.

#search {
float:right;
margin-top:10px;
width: 200px;
padding: 10px 10px 10px 10px;
outline: none;
background: #e8e8e8;
border: 1px solid #CCC;
color: #666;
text-shadow: 1px 1px 1px #FFF;
font-family:Tahoma;
}
#search:focus { }

فقط دقت کنید اگرتو style.css از قبل search# رو دارید ، اونو پاکش کنید.

فایل searchform.php ابزارک جستجو

یک موقع اشتباه نکنید فایل search.php برای آرشیو جستجو هستش ( زمانی که یک چیزی جستجو میشه آرشیو طبق این قالب میاد ) ولی فایلی که ما باهاش کار داریم searchform.php هستش.

اگر قالبتون همچین فایلی داره فقط ویرایش کنید و کدهای زیر رو داخلش قرار بدید.

<form method="get" id="searchbar" action="<?php echo home_url( '/' ); ?>">
<input type="text" size="16" name="s" value="دنبال هر چی هستی + اینتر" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" id="search" />
</form>

اگر هم قالبتون فایل searchform.php رو نداره یک فایل با این نام درست کنید و کدهای زیر را داخلش قرار بدید.داخل فایل ضمیمه هم قرارش دادیم.

حالا برید و ابزارک جستجو رو فعال کنید ( دقت کنید باید راست کلیک کنید و reload رو بزنید تا تغییرات رو ببینید ! ) .

دانلود فایل ضمیمه