ساخت فرم جستجو برای قالب های وردپرس
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

ronakweb-com-wordpress-search

در این بخش از مقالات آموزشی به ایجاد فرم جستجو برای قالب های وردپرس اشاره می کنیم .همانطور که می دونید فرم جستجو و یا به طور کل یک جستجو گر حرفه ای می تونه به بازدید راحت از سایتتون کمک کنه… خب بدون پیش نیاز می ریم سراغ آموزش:

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

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

<?php get_search_form(); ?>

امیدوارم که این آموزش ساده ولی در عید حال کاربردی برای شما مفید بوده باشه

امیر رضائی وبسایت


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

مطالب مشابه با این موضوع

بالا رفتن