صفحه اصلی / آموزش وردپرس / ساخت جستجو پیشرفته در وردپرس

ساخت جستجو پیشرفته در وردپرس

داشتن یک جستجوی پیشرفته در وبسایت برای کاربران امکانی رو ایجاد خواهد کرد تا سریعتر به اهداف محتوایی خودشان برسند . ساخت جستجوی پیشرفته آنچنان هم سخت نیست و به راحتی با استفاده از این آموزش میتوانید ساخت باکس جستجوی پیشرفته رو ایجاد کنید .

ساخت جستجوی پیشرفته در سایت

ساخت جستجو پیشرفته در وردپرس

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

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

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

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

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

گام اول : اضافه کردن فرم جستجو جدید به وردپرس

برای شروع ساخت جستجو پیشرفته در وردپرس با استفاده از کد، ابتدا قطعه کد زیر را در فایل Functions.php قالب وردپرس خود قرار دهید.

//--- custom Search Form -------------------------------------
function custom_search_form($custom_search){
 
$default=array(
                'cat_show'=>false,
				'tag_show'=>false,
				'author_show'=>false,
				'archive_show'=>false,
				'field_show'=>true,
				'label_show'=>false,
				'button_show'=>true,
				'rememberd'=>true,
				'echo'=>false
);//default array
foreach((array)$custom_search as $key=>$value){
	$default[$key]=$value;
}

گام دوم : اضافه کردم متغیرها

دو مرتبه قطعه کد زیر را در فایل functions.php پوسته وردپرس خود اضافه کنید.

//--base vars------------------------
global $WP_Query,$query,$wp_user;
$cat_option='';$tag_option='';$author_option='';$archive_option='';
$advance_option='';$close_option='';$field_option='';$button_option='';
$cat_selected=get_query_var('cat');
$tag_selected=get_query_var('tag');
$author_selected=get_query_var('author');
$day_selected=get_query_var('day');
$month_selected=get_query_var('monthnum');
$year_selected=get_query_var('year');
if($day_selected==0)$day_selected='';
if($month_selected==0)$month_selected='';
if($year_selected==0)$year_selected='';

گام سوم : معرفی فیلترها

در این بخش نیز تمامی کد ها در فایل functions.php قالب وردپرس شما قرار میگیرد.
جایگذاری اولین فیلتر: دسته بندی

//--------category--------------------	
if($default['cat_show']==1):
$categories = get_categories(); 
$cat_option='<li><ul>';
if($default['label_show']):
$cat_option .='<li class="cat-label">'.__('دسته بندی','zistfa').'</li>';
endif;	
$cat_option .='<li class="search-cat"><select name="cat" id="searchcat" >
<option value="">'.__('همه','zistfa').'</option>';
foreach ($categories as $category) {
$cat_option .= '<option value="'.$category->cat_ID.'"';
if(($cat_selected == $category->cat_ID)&&($default['rememberd']==1)):
$cat_option .=' selected';
endif;
$cat_option .= '>'.$category->cat_name;
$cat_option .= '</option>';
}
$cat_option .= '</select></li></ul></li>';
endif;

فیلتر دوم : برچسب

//--------tag--------------------
if($default['tag_show']==1):
$tags = get_categories('taxonomy=post_tag'); 
$tag_option='<li><ul>';
if($default['label_show']):
$tag_option .='<li class="tag-label">'.__('برچسب','zistfa').'</li>';
endif;
$tag_option .='<li class="search-tag" ><select name="tag" id="searchtag" >
<option value="">'.__('همه','zistfa').'</option>';
 foreach ($tags as $tag) {
$tag_option .= '<option value="'.$tag->slug.'"';
if(($tag_selected == $tag->slug)&&($default['rememberd']==1)):
$tag_option .=' selected';
endif;
$tag_option .= '>'.$tag->cat_name;
$tag_option .= '</option>';
}
$tag_option .= '</select></li></ul></li>';
	endif;

فیلتر سوم : نویسنده

//--------author--------------------		
if($default['author_show']==1):
$authors=get_users(array('who'=>'authors','fields'=>array('id','display_name')));
$author_option='<li><ul>';
if($default['label_show']):
$author_option .='<li class="author-label">'.__('نویسنده ','zistfa').'</li>';
endif;
$author_option .='<li class="search-author" >
<select name="tag" id="searchauthor" ><option value="">'.__('همه','zistfa').'</option>';
 foreach ($authors as $author) {
$author_option .= '<option value="'.$author->id.'"';
if(($author_selected == $author->id)&&($default['rememberd']==1)):
$author_option .=' selected';
endif;
$author_option .= '>'.$author->display_name;
$author_option .= '</option>';
}
$author_option .= '</select></li></ul></li>';
endif;

فیلتر چهارم : تاریخ

//--------Date--------------------		
if($default['archive_show']==1):
$archive_option='<li><ul>';
if($default['label_show']):
$archive_option .='<li class="archive-label">'.__('تاریخ','zistfa').'</li>';
endif;
$archive_option .='<li class="archive-field">
<input type="text" value="' . $year_selected . '"
 name="year" id="year" size="3" placeholder="'.__('سال','zistfa').'" />
<input type="text" value="' . $month_selected . '" 
name="monthnum" id="monthnum" size="2" placeholder="'.__('ماه','zistfa').'" />
<input type="text" value="' . $day_selected. '"
 name="day" id="day" size="1" placeholder="'.__('روز','zistfa').'" />
</li></ul></li>';
endif;

ساخت فیلد جستجو

//--------search field--------------------		
if($default['field_show']==1):
$field_option='<li><ul>';
if($default['label_show']):
$field_option .='<li class="search-label">'.__('جستجو برای : ','zistfa').'</li>';
endif;
$field_option .='<li class="search-field">
<input type="text" value="' . get_search_query() . '"
 name="s"  placeholder="'.__('کلمه مورد نظر + اینتر','zistfa').'" />
</li>
</ul>
</li>';
endif;

ساخت دکمه جستجو

//--------search button--------------------		
if($default['button_show']==1):
$button_option='<li>
<input type="submit" class="search-submit" value="'. esc_attr__( 'جستجو','zistfa' ) .'" />
</li>';
endif;

گام چهارم : ثبت جستجوگر جدیدمان در وردپرس

$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" ><ul>
			'.$cat_option.$tag_option.$author_option.$archive_option.$field_option.$button_option.'
			</ul></form>';
 
		if($default['echo']==1):
			echo $form;
		else:
			return $form;
		endif;
 
}
add_filter( 'get_search_form', 'custom_search_form',10,1 );

تا اینجای کار، تمامی کدها در فایل functions.php قالب وردپرس شما قرار میگرفت.

ساخت جستجو پیشرفته در وردپرس

گام پنجم : نمایش فرم جستجوگر

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

<!--custom-search-form-->	
<div class="search-form">
<?php custom_search_form(array(
					            'echo'=>1,
								'archive_show'=>1,
								'cat_show'=>1,
								'tag_show'=>1,
								'author_show'=>1,
								'label_show'=>1,
								));?>
</div><!--/custom-search-form-->

گام آخر : استایل دهی به فرم مورد نظر

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

.cat-label, .tag-label, .author-label, .archive-label, .search-label
 {font-size : normal;padding : 3px;text-align : center;}
.author-label,.search-author select{color:rgb(53, 122, 232);border-color:rgb(53, 122, 232)}
.tag-label,.search-tag select{color:rgb(142, 68, 173);border-color:rgb(142, 68, 173)}
.cat-label,.search-cat select{color:rgb(216, 66, 55);border-color:rgb(216, 66, 55)}
.archive-label,.archive-field input{color:rgb(0, 167, 83);border-color:rgb(0, 167, 83)}
form.searchform ul li {display: inline-block;}
form.searchform ul li ul li{display: list-item;}
.search-form select,.search-form input {
border: solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:3px;text-align:center
}

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


منبع مطلب

این مطالب را نیز ببینید!

بهترین قالب های رایگان سال ۲۰۲۱

بهترین قالب های رایگان سال ۲۰۲۱

۲۴ فروردین ۱۴۰۰ بهترین قالب های رایگان سال ۲۰۲۱ را در این مقاله برای شما …

دیدگاهتان را بنویسید

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