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

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

فیلم آموزش ساخت فرم جستجو

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

آموزش طراحی قالب وردپرس – ساخت فرم جستجو

اول از همه یک فایل 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: ساخت بخش دیدگاه ها

25 دیدگاه برای “آموزش طراحی قالب وردپرس – ساخت فرم جستجو

  • حمید
    - ۵ مرداد , ۱۳۹۴

    سلام
    من یه آشنایی مختصر از php و asp.net و html و css و jquery دارم و کار با وردپرس رو تازه شروع کردم باید بگم مطالبتون واقعا عالیه

  • مریم
    - ۲۱ مهر , ۱۳۹۴

    با سلام
    ببخشید کدهای php مربوط به وردپرس باید تمامشو یاد بگیریم یا اینکه کپی پیست کنیم.

    • الناز
      - ۲۳ مهر , ۱۳۹۴

      سلام دوست عزیز. خب یاد بگیری بهتره.

  • aria
    - ۲۹ آبان , ۱۳۹۴

    سلام.
    واقعا به کارم اومد.
    میشه اسم این فونت سر دسته های سایتتون رو ایمیل کنید؟
    مثلا همین منوی بالا ، فونتشو میخوام.
    ممنون.

    • فراز
      - ۲۲ آذر , ۱۳۹۴

      سلام
      اسم فونتش دینار هست. اگه درست گفته باشم دقیقش :MRT_Dinar هست.

  • عماد
    - ۱۵ آذر , ۱۳۹۴

    سلام الناز جان
    آیا آموزش طراحی قالب ادامه داره؟

    • الناز
      - ۱۹ آذر , ۱۳۹۴

      سلام بله ادامه دارم در اسرع وقت ادامه رو میزارم

  • مریم
    - ۲۶ بهمن , ۱۳۹۴

    با سلام و تشکر فراوان بابت همه ی خوبیهاتون
    آیکن سرچ برای من نمایش داده نمیشه. اگه ممکنه راهنمایی کنید.

    • الناز
      - ۳ اسفند , ۱۳۹۴

      سلام دوست عزیز. میشه کدتون رو بدید بهم

  • مهدی
    - ۲۹ اردیبهشت , ۱۳۹۵

    میخوام این کد رو تو هدرم بزارم چ کنم؟

    • مهدی
      - ۳۰ اردیبهشت , ۱۳۹۵

      گذاشتم ولی میر که سرچ کنی صفحه یهو رفرش میشه و کامات توش دوباره پاک میشه. من فقط کد تو هدرشو گذاشتم.

    • الناز
      - ۱ خرداد , ۱۳۹۵

      تابع get_search_form() رو داخل headr.php قرار بده

  • علی
    - ۱۱ خرداد , ۱۳۹۵

    سلام من فرم جستجوی قالب رو به ووکامرس تغییر دادم یعنی وقتی توش سرچ کنی توی محصولات فقط سرچ میشه.
    بعد رفتم سراغ فایل search.php قالب و ادیتش کردم که اینم درست شده و بعد جستجو توی سایت محصولات رو به نمایش درمیاره و درسته عملکردش.
    اما مشکل من اینجاست که استایل نمایش نتایج جستجوی محصولات مثل صفحه shop نیست. توی صفحه شاپ محصولات با استایل پیشفرض ووکامرس که چهار ستونه است نمایش داده میشن. خاستم بپرسم باید از چه classی استفاده کنم که ظاهر نمایش نتایج جستجوی محصولات شبیه صفحه shop بشه.

    • الناز
      - ۱۶ خرداد , ۱۳۹۵

      سلام دوست عزیز. می تونید از کلاس های woocommerce و products استفاده کنید و همچنین نتایج رو با قالب li بیارید. همچنین می تونید به div نتایج width:25% بدید

  • پسر خوب
    - ۱۵ خرداد , ۱۳۹۵

    با سلام
    از زحمات شما ممنونم.
    من از ابزارک نمیتونم استفاده کنم چون قالبم فاقد ابزارک هست و در فوتر میخوام از این فرم جستجو استفاده کنم.
    توی headr باید چه کدی رو بزارم تا فرم جستجو به نمایش در بیاد؟
    ممنون.

    • الناز
      - ۱۶ خرداد , ۱۳۹۵

      سلام دوست عزیز. این کد رو قرار بدید

  • ابوالفضل
    - ۱۶ تیر , ۱۳۹۵

    سلام
    چه کپی باشه چه نباشه به کار ملت میاد اونی هم که اول منتشر کرده خواسته خدمتی کنه شما هم همینطور
    ممنون که زحمت کشیدید

  • احمد
    - ۱ مهر , ۱۳۹۵

    سلام خدا قوت من فرم جستوم در تمام صفحات نمایش داده میشه چطور میشه از صفحات بجز صفحه اصلی حذفش کرد؟ ممنون میشم راهنمایی بفرمایید

    • الناز
      - ۶ مهر , ۱۳۹۵

      سلام. با استفاده از شرط
      if(is_front_page())

  • حسن
    - ۱۳ آبان , ۱۳۹۵

    واقعا پشتکارتون قابل تحسینه
    همیشه از سایت هایی که تولید محتوا میکنند خوشم اومده

  • رضا واحدی
    - ۲۱ آذر , ۱۳۹۵

    باسلام وخداقوت
    خواستم بگم با وجود اثر بخشی فوق العاده کلیپ آموزشی به صوت سمعی وبصری ، بدلیل نظم وانسجام مطالب ارائه شده ، می تونم به جراًت بگم یکی از بهترین آموزش ها در نوع خود می باشد لذا از جنابعالی به خاطر ارائه مطالب مفیدتون سپاسگزارم

  • mohhammad
    - ۲۰ اسفند , ۱۳۹۵

    واقعا سایت شاهکاری دارین خدا قوت ممنون به خاطر این مطالب به درد بخورتون چند وقت بود دنبال این میگشم

  • محمد
    - ۹ خرداد , ۱۳۹۶

    واقعااااا سپاسگزارم از شما چقدر ساده و روان بیان کردید و چقدر عالییی بدون هیچ افزونه ای واقعا ممنونم از شما…….

  • علی
    - ۲۳ خرداد , ۱۳۹۸

    سلام.
    ممنون از مطالب خوبتون.
    من این مقاله را دنبال کردم ولی جستجو به این شکل نشان داده می شود.
    https://imgur.com/vfjakLE

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --