سلام دوستان عزیز. مدتی رو به خاطر مشغله کاری نتونستم مقاله جدیدی توی سایت بزارم اما امروز بالاخره تایمی واسش گذاشتم هرچند کوتاه اما مفید. در این قسمت از آموزش طراحی قالب وردپرس نحوه ساخت فرم جستجو رو خواهم گرفت.
هر چند این رو به یاد داشته باشید که به صورت پیشفرض اگر فرم جستجو رو تعریف نکنید توی قسمت ابزارک ها فرم جستجو وجود داره و شما میتونید ازش استفاده کنید. اما خب چندان قابلیت سفارشی سازی ندارید.
فیلم آموزش ساخت فرم جستجو
آموزش طراحی قالب وردپرس – ساخت فرم جستجو
اول از همه یک فایل 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; }
و بعد ذخیره کنید و دوباره صفحه رو رفرش کنید. فرم شما باید به این شکل شده باشه
این هم از ساخت قسمت فرم جستجو در آموزش طراحی قالب وردپرس.
دوستان من یک نکته ای رو باید بهتون بگم. اخیرا تعدادی کاربر برای من کامنت گذاشتند که شما مقالات رو کپی پیست کرده و توی سایت میذارید. باید بهتون بگم که جز به جز کدهایی که میزارم توی سایت رو خودم روی سیستمم تست می کنم و بعد میزارم تا کدها مشکلی نداشته باشه ، همچنین این آموزش رو.
من در ابتدای آموزش گفتم که برای اینکار باید با کد php,html و css آشنایی داشته باشید در غیر اینصورت نمیتونید این آموزش رو درک کنید. همچنین هدف این آموزش در واقع آموزش جمع کردن کدها کنار هم و در نهایت آماده سازی یک پوسته هستش نه خط به خط توضیحات دادن کد ها
چرا که کدها بسیار ساده و قابل فهم هستند. پس اگر با php,html و css آشنایی ندارید ابتدا پایه خود را قوی کنید و بعد این مقالات رو مطالعه کنید.
توجه: در صورت نیاز به ساخت جستجو پیشرفته در وردپرس می توانید مقالات فرم جستجوی Suggestion در وردپرس و ساخت افزونه جستجوی پیشرفته و افزودن جستجوگر گوگل به وردپرس را مطالعه کنید.
امیدوارم مقاله امروز هم به دردتون خورده باشه.
موفق باشید
آموزش طراحی قالب وردپرس – قدم اول : دانلود نرم افزار های مورد نیاز
آموزش طراحی قالب وردپرس – قدم دوم: راه اندازه لوکال هاست و نصب وردپرس
آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش اول
آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش دوم
آموزش طراحی قالب وردپرس – قدم چهارم: کار با حلقه ها
آموزش طراحی قالب وردپرس – قدم پنجم: طراحی سایدبار
آموزش طراحی قالب وردپرس – قدم هفتم بخش 1: ساخت فایل single.php
آموزش طراحی قالب وردپرس – قدم هفتم بخش 2: ساخت باکس درباره نویسنده
آموزش طراحی قالب وردپرس – قدم هفتم بخش 3: ساخت بخش دیدگاه ها
سلام
من یه آشنایی مختصر از php و asp.net و html و css و jquery دارم و کار با وردپرس رو تازه شروع کردم باید بگم مطالبتون واقعا عالیه
با سلام
ببخشید کدهای php مربوط به وردپرس باید تمامشو یاد بگیریم یا اینکه کپی پیست کنیم.
سلام دوست عزیز. خب یاد بگیری بهتره.
سلام.
واقعا به کارم اومد.
میشه اسم این فونت سر دسته های سایتتون رو ایمیل کنید؟
مثلا همین منوی بالا ، فونتشو میخوام.
ممنون.
سلام
اسم فونتش دینار هست. اگه درست گفته باشم دقیقش :MRT_Dinar هست.
سلام الناز جان
آیا آموزش طراحی قالب ادامه داره؟
سلام بله ادامه دارم در اسرع وقت ادامه رو میزارم
با سلام و تشکر فراوان بابت همه ی خوبیهاتون
آیکن سرچ برای من نمایش داده نمیشه. اگه ممکنه راهنمایی کنید.
سلام دوست عزیز. میشه کدتون رو بدید بهم
میخوام این کد رو تو هدرم بزارم چ کنم؟
گذاشتم ولی میر که سرچ کنی صفحه یهو رفرش میشه و کامات توش دوباره پاک میشه. من فقط کد تو هدرشو گذاشتم.
کد رو واسم ایمیل کن مشکل رو بررسی کنم
wpschool1@gmail.com
تابع get_search_form() رو داخل headr.php قرار بده
سلام من فرم جستجوی قالب رو به ووکامرس تغییر دادم یعنی وقتی توش سرچ کنی توی محصولات فقط سرچ میشه.
بعد رفتم سراغ فایل search.php قالب و ادیتش کردم که اینم درست شده و بعد جستجو توی سایت محصولات رو به نمایش درمیاره و درسته عملکردش.
اما مشکل من اینجاست که استایل نمایش نتایج جستجوی محصولات مثل صفحه shop نیست. توی صفحه شاپ محصولات با استایل پیشفرض ووکامرس که چهار ستونه است نمایش داده میشن. خاستم بپرسم باید از چه classی استفاده کنم که ظاهر نمایش نتایج جستجوی محصولات شبیه صفحه shop بشه.
سلام دوست عزیز. می تونید از کلاس های woocommerce و products استفاده کنید و همچنین نتایج رو با قالب li بیارید. همچنین می تونید به div نتایج width:25% بدید
با سلام
از زحمات شما ممنونم.
من از ابزارک نمیتونم استفاده کنم چون قالبم فاقد ابزارک هست و در فوتر میخوام از این فرم جستجو استفاده کنم.
توی headr باید چه کدی رو بزارم تا فرم جستجو به نمایش در بیاد؟
ممنون.
سلام دوست عزیز. این کد رو قرار بدید
سلام
چه کپی باشه چه نباشه به کار ملت میاد اونی هم که اول منتشر کرده خواسته خدمتی کنه شما هم همینطور
ممنون که زحمت کشیدید
سلام خدا قوت من فرم جستوم در تمام صفحات نمایش داده میشه چطور میشه از صفحات بجز صفحه اصلی حذفش کرد؟ ممنون میشم راهنمایی بفرمایید
سلام. با استفاده از شرط
if(is_front_page())
واقعا پشتکارتون قابل تحسینه
همیشه از سایت هایی که تولید محتوا میکنند خوشم اومده
باسلام وخداقوت
خواستم بگم با وجود اثر بخشی فوق العاده کلیپ آموزشی به صوت سمعی وبصری ، بدلیل نظم وانسجام مطالب ارائه شده ، می تونم به جراًت بگم یکی از بهترین آموزش ها در نوع خود می باشد لذا از جنابعالی به خاطر ارائه مطالب مفیدتون سپاسگزارم
واقعا سایت شاهکاری دارین خدا قوت ممنون به خاطر این مطالب به درد بخورتون چند وقت بود دنبال این میگشم
واقعااااا سپاسگزارم از شما چقدر ساده و روان بیان کردید و چقدر عالییی بدون هیچ افزونه ای واقعا ممنونم از شما…….
سلام.
ممنون از مطالب خوبتون.
من این مقاله را دنبال کردم ولی جستجو به این شکل نشان داده می شود.
https://imgur.com/vfjakLE
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس