همه روش های قرار دادن فرم جستجو در قالب وردپرس

487 بازدید
سه شنبه ۲۰ مهر ۱۳۹۵
همه روش های قرار دادن فرم جستجو در قالب وردپرسReviewed by جواد نبوی on Oct 11Rating: 4.0

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

آموزش قرار دادن فرم جستجو در قالب وردپرس

روش اول: قرار دادن فرم جستجو از طریق تابع جستجوی وردپرس

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

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
 <label>
 <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
 <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
 </label>
 <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
 </form>

حالا فرم شما ایجاد شده. اما استایل زیبایی احتمالا ندارد. برای اینکه یک استایل شکیل و جذاب داشته باشید می توانید توسط CSS اینکار را انجام دهید.

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

توجه داشته باشید که کد بالا از خصوصیت های html5 استفاده می کند و بنابراین قالب شما باید بر اساس html5 باشد. یعنی در بخش بالای فایل head باید اعلان <!DOCTYPE html> را داشته باشید. نه هیچ اعلان دیگری. برای اطلاعات بیشتر آموزش قدم به قدم html را بخوانید.

اگر می خواهید تعداد نتایج جستجو را نشان دهید کافیست کد زیر را در محل مناسب از فایل search.php وارد کنید:

<?php printf(the_search_query());?>

روش دوم: جستجوگر گوگل در وردپرس

در این روش با استفاده از موتور جستجوی گوگل، یک فرم جستجو در سایت خود قرار می دهیم که پس از وارد کردن عبارت و کلیک کردن روی دکمه جستجو، از طریق سایت گوگل این عملیات انجام گیرد. برای اضافه کردن فرم جستجوی گوگل به سایت خود میتوانید به سایت custom search engine بروید و با انجام دادن تنظیمات، کد ایجاد فرم جستجو را دریافت کرده و درون قالب خود قرار دهید. همچنین میتوانید از کد زیر استفاده کنید:

<form name="Form1" id="form" method="get" action="http://www.google.com/search">
 <input type="text" id="search_text" placeholder="جستجو در مطالب سايت..." value="جستجو در مطالب سايت..." onclick="this.value = '';" id="Button1" name="q">
 <input type="hidden" name="sitesearch" value="<?php bloginfo('url'); ?>">
 <input type="submit" id="search_submit" value="بگرد" name="submit">
 </form>

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

روش سوم: افزونه های جستجوی پیشرفته وردپرس

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

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

 

تبلیغات

نویسنده (مدیر سایت)

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

4 دیدگاه برای “همه روش های قرار دادن فرم جستجو در قالب وردپرس”

  1. دانلود پروژه معماری گفت:

    ممنون از شما بابت مطالب خوبی که میذارین.
    من از کدی که در (روش دوم: جستجوگر گوگل در وردپرس) دادین استفاده کردم.
    با جستجو در کادر موردنظر توی کل گوگل سرچ میکنه نه توی جستجوگر اختصاصی گوگل که واسه سایتم ساختم. اینو چجوری حلش کنم؟
    ممنون میشم راهنمایی بفرمایین.

    1. جواد نبوی گفت:

      سلام عزیز
      خواهش می کنم
      توی کدی که معرفی کردیم یک بخشی هست که عبارت < ?php bloginfo('url'); ?> بین دو تا دابل کوتیشن روبروی عبارت value= قرار گرفته. اون عبارت بین دو تا دابل کوتیشن رو حذف کنید و آدرس سایت خودتون رو با http:// وارد کنید.

  2. قالی شویی گفت:

    علاوه بر گذاشتن فرم جستجو بخوایم استایل خاصی بهش بدیم چگونه میشه؟

    1. جواد نبوی گفت:

      باید از css برای استایل دهی استفاده کنید

پاسخ دهید

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