فرم جستجو در قالب وردپرس

search-form-in-wordpress

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

فرم جستجو در قالب وردپرس

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

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

 

<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 باشد. یعنی در بخش بالای فایل conduct باید اعلان !DOCTYPE html را داشته باشید. نه هیچ اعلان دیگری. برای اطلاعات بیشتر آموزش قدم به قدم html را بخوانید.

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

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

 

فرم جستجو در قالب وردپرس

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

در این روش با استفاده از موتور جستجوی گوگل، یک فرم جستجو در سایت خود قرار می دهیم که پس از وارد کردن عبارت و کلیک کردن روی دکمه جستجو، از طریق سایت گوگل این عملیات انجام گیرد. برای اضافه کردن فرم جستجوی گوگل به سایت خود میتوانید به سایت custom hunt 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 به آن استایل دهید. برای اطلاعات بیشتر در این زمینه مقاله جستجوگر گوگل در وردپرس از مبتدی تا حرفه ای را بخوانید.

فرم جستجو در قالب وردپرس

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

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

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

 

 

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

سفارش طراحی قالب وردپرس

طراحی قالب وردپرس

طراحی و کدنویسی انواع قالب وردپرس

تبدیل PSD به وردپرس

تبدیل psd به قالب استاندارد وردپرس

تبدیل Psd به Html

تبدیل انواع فایل Psd به فایل Html

طراحی قالب فروشگاهی

طراحی و راه اندازی فروشگاه اینترنتی

seo و بهینه سازی قالب

SEO و بهینه سازی سایت