ساخت فرم جستجو برای قالب های وردپرس
دسته‌ها : آموزش های طراحی سایت , آموزش وردپرس , مقالات آموزشی ۲۱ مرداد ۱۳۹۴ - ۱۶:۵۷ امیر رضائی بدون نظر
خانه آموزش های طراحی سایتآموزش وردپرسمقالات آموزشی ساخت فرم جستجو برای قالب های وردپرس

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(); ?>

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

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


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

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید