A-A+

wordpress自定义多重筛选功能通过代码实现的方法(实例)

2019年01月07日 WEB技术 暂无评论 阅读 492 次

对于wordpress的很多用户来说,多重筛选功能对于一些商城或是产品项目页等有很重要的意义.如果通过插件来实现,看起来容易,但无疑会大大降低网站的响应速率,同时,降低了用户体验.对搜索引擎的抓取来说,也是不利的.

本实例就是完全通过代码来实现wordpress的多重筛选功能.

请看详细介绍:

一、配置筛选数据。

用于筛选的数据要先确定好,所以先把要筛选的数据写入一个二维数组中,同时由于这个数组在前台后台都会使用到,所以用一个函数来返回,即执行函数ashuwp_get_sift_array()就可以获取到这个二维数组。

本范例以一个站点分类的筛选为例,配置了3个筛选项(可自行增减),分别是“阶段”、“类型”、“排序”。

提示:下面php代码应该添加到主题的functions.php文件。

//准备一个筛选数据的数组。
//需要多次用到,用一个函数来获取

function ashuwp_get_sift_array(){
$sift_array = array(
//阶段
'Course_Stage'=> array(
'Primary'=>'初级',
'Intermediate'=>'中级',
'Senior'=>'高级',
'Major'=>'专业',
),
//数组key避免用纯数字,以免筛选文章时不精确
//将key缓存a\b\c也可
'Course_type'=> array(
'Tool'=>'工具',
'FineArts'=>'美术',
'AudioFrequency'=>'音频',
'Screenwriter'=>'编剧',
'Interaction'=>'互动',
'Director'=>'导演',
'Standard'=>'规范',
),
'Course_sort'=> array(
'DefaultSort'=>'默认排序',
'HotTutorial'=>'热门教程',
'LatestRelease'=>'最新发布',
 
)
);
return $sift_array;
}

二、添加自定义字段

在后台建立自定义字段,在添加文章时选择对应的数据。

方法一:使用Ashuwp Framework框架(下载地址:https://github.com/devinsays/options-framework-theme/archive/master.zip)的话,参考配置数据以及效果图如下

提示:下面代码为使用Ashuwp Framework框架的配置代码。

//文章筛选面板
$sift_boxinfo = array(
'title' => '筛选信息',
'id'=>'sift_box',
'page'=>array('post'), //文章类型
'context'=>'normal',
'priority'=>'high',
'callback'=>''
);
$sift_array = ashuwp_get_sift_array(); //获取筛选数组
$sift_meta[] = array(
'name' => '阶段',
'id' => 'Course_Stage', //id
'desc' => '',
'std' => '',
'subtype'=> $sift_array['Course_Stage'], //阶段选项
'type' => 'checkbox',
);
$sift_meta[] = array(
'name' => '类型',
'id' => 'Course_type', //id
'desc' => '',
'std' => '',
'subtype'=> $sift_array['Course_type'], //类型选项
'type' => 'checkbox',
);
$sift_meta[] = array(
'name' => '排序',
'id' => 'Course_sort', //id
'desc' => '',
'std' => '',
'subtype'=> $sift_array['Course_sort'], //排序选项
'type' => 'checkbox',
);
$sift_box = new ashuwp_postmeta_feild($sift_meta, $sift_boxinfo);

 

 

wordpress多重筛选功能的文章页筛选选项

wordpress多重筛选功能的文章页筛选选项

 

 

三、文章查询

通过从url中获取筛选的参数,查询对应的文章数据。

1. 添加用于查询的参数,这里指的是使我们的参数可以用get_query_var函数获取,当然如果使用$_GET变量来获取的话,可以省略这一段内容。(提示:下面php代码应该添加到主题的functions.php文件。)

 

//筛选参数
function ashuwp_add_query_vars($public_query_vars) {
$public_query_vars[] = 'Course_Stage';
$public_query_vars[] = 'Course_type';
$public_query_vars[] = 'Course_sort';
return $public_query_vars;
}
add_action('query_vars', 'ashuwp_add_query_vars');

 

 

2. 通过pre_get_posts钩子来控制文章查询:

//文章筛选代码
//通过pre_get_posts钩子筛选
add_action('pre_get_posts','ashuwp_sift_posts_per_page');
function ashuwp_sift_posts_per_page($query){
//is_category()即为分类页面有效,自行更换。
//$query->is_main_query()使得仅对默认的页面主查询有效
//!is_admin()避免影响后台文章列表
if(is_category() && $query->is_main_query() && !is_admin()){
$sift_array = ashuwp_get_sift_array(); //获取筛选数组
//从筛选数组中获取筛选的有效值值
/*例如类型的值
* $genre_keys = array( 'love', 'literary', 'action', 'war', 'other');
*/
$Course_Stage_keys = array_keys( $sift_array['Course_Stage'] ); //阶段
$Course_type_keys = array_keys( $sift_array['Course_type'] ); //类型
$Course_sort_keys = array_keys( $sift_array['Course_sort'] ); //排序
$relation = 0; //用于计数筛选项目数
//从url中获取要筛选的参数,放入数组中
$sift_vars = array();
$sift_vars['Course_Stage'] = get_query_var('Course_Stage'); //从url获取类型
$sift_vars['Course_type'] = get_query_var('Course_type');
$sift_vars['Course_sort'] = get_query_var('Course_sort');
$meta_query = array(
'relation' => 'OR',
);
//判断类型是否合法,即是否存在于我们的配置数组中
//将筛选参数加入带
if( in_array( $sift_vars['Course_Stage'], $Course_Stage_keys ) ){
$meta_query[] = array(
'key'=>'Course_Stage',
'value'=> $sift_vars['Course_Stage'],
'compare'=>'LIKE', //使用LIKE匹配可适应多选
);
$relation++;
}
//判断类型是否合法
if( in_array( $sift_vars['Course_type'], $Course_type_keys ) ){
$meta_query[] = array(
'key'=>'Course_type',
'value'=> $sift_vars['Course_type'],
'compare'=>'LIKE',
);
$relation++;
}
//判断排序是否合法
if( in_array( $sift_vars['Course_sort'], $Course_sort_keys ) ){
$meta_query[] = array(
'key'=>'Course_sort',
'value'=> $sift_vars['Course_sort'],
'compare'=>'LIKE',
);
$relation++;
}
if($relation){
//若大于两个筛选
if($relation>=2){
$meta_query['relation'] = 'AND'; //多项筛选同时满足
}
$query->set('meta_query',$meta_query);
}
}
}

 

三、前台代码

wordpress自定义字段做文章多重筛选的实例,前台效果

wordpress自定义字段做文章多重筛选的实例,前台效果

<!-- 列表开始 -->
<div class="articleList container">
<div class="row">
<div class="col-md-12">
<!--single article-->
<!-- 筛选项开始 -->
<?php
//前台页面以在分类模板为例
//在分类模板中,使用get_queried_object获取当前分类
$currentterm = get_queried_object();
$base_url = get_term_link($currentterm,'category'); //获取当前分类的url
$sift_array = ashuwp_get_sift_array(); //获取筛选数组
//拆分数组,将all加上
/*范例,最终
* $Course_Stage_array = array( 'all'=>'全部', 'love'=>'爱情片', 'literary'=>'文艺片', 'action'=>'动作片', 'war'=>'战争片', 'other'=>'其他' );
* $Course_Stage_keys = array( 'all', 'love', 'literary', 'action', 'war', 'other');
*/
$Course_Stage_array['all'] = '全部'; //先建立数组,让all在最前面
$Course_Stage_array = array_merge( $Course_Stage_array, $sift_array['Course_Stage']); //用array_merge合并数组
$Course_Stage_keys = array_keys( $Course_Stage_array);
$Course_type_array['all'] = '全部';
$Course_type_array = array_merge( $Course_type_array, $sift_array['Course_type']);
$Course_type_keys = array_keys( $Course_type_array);
$Course_sort_array['all'] = '全部';
$Course_sort_array = array_merge( $Course_sort_array, $sift_array['Course_sort']);
$Course_sort_keys = array_keys( $Course_sort_array);
//从url中获取要筛选的参数,放入数组中,默认为all
$sift_vars = array();
$sift_vars['Course_Stage'] = get_query_var('Course_Stage', 'all'); //从url获取类型
$sift_vars['Course_type'] = get_query_var('Course_type', 'all');
$sift_vars['Course_sort'] = get_query_var('Course_sort', 'all');
//为add_query_arg函数的参数做准备
$Course_Stage_params = array();
$Course_type_params = array();
$Course_sort_params = array();
//判断类型是否合法,给另外N项加上
if( in_array( $sift_vars['Course_Stage'], $Course_Stage_keys ) ){
$Course_type_params['Course_Stage'] = $sift_vars['Course_Stage'];
$Course_sort_params['Course_Stage'] = $sift_vars['Course_Stage'];
}
//判断年代是否合法,给另外N项加上
if( in_array( $sift_vars['Course_type'], $Course_type_keys ) ){
$Course_Stage_params['Course_type'] = $sift_vars['Course_type'];
$Course_sort_params['Course_type'] = $sift_vars['Course_type'];
}
//判断地区是否合法,给另外N项加上
if( in_array( $sift_vars['Course_sort'], $Course_sort_keys ) ){
$Course_Stage_params['Course_sort'] = $sift_vars['Course_sort'];
$Course_type_params['Course_sort'] = $sift_vars['Course_sort'];
}
$selected = 'class="selected"';
//输出筛选项
//html标签仅做参考
?>
<div class="group clearfix">
<ul>
<li>
<span>阶段:</span>
<?php
foreach( $Course_Stage_array as $key=>$name ){
$Course_Stage_params['Course_Stage'] = $key;
?>
<a <?php if( $sift_vars['Course_Stage'] == $key ) echo $selected; ?> href="<?php echo esc_url( add_query_arg( $Course_Stage_params, $base_url ) ); ?>"><?php echo $name; ?></a>
<?php
}
?>
</li>
<li>
<span>类型:</span>
<?php
foreach( $Course_type_array as $key=>$name ){
$Course_type_params['Course_type'] = $key;
?>
<a <?php if( $sift_vars['Course_type'] == $key ) echo $selected; ?> href="<?php echo esc_url( add_query_arg( $Course_type_params, $base_url ) ); ?>"><?php echo $name; ?></a>
<?php
}
?>
</li>
<li>
<span>排序:</span>
<?php
foreach( $Course_sort_array as $key=>$name ){
$Course_sort_params['Course_sort'] = $key;
?>
<a <?php if( $sift_vars['Course_sort'] == $key ) echo $selected; ?> href="<?php echo esc_url( add_query_arg( $Course_sort_params, $base_url ) ); ?>"><?php echo $name; ?></a>
<?php
}
?>
</li>
</ul>
</div>
 
<!-- 筛选项结束 -->
<li class="Filterlist_title">
<ul class="list_title">教程</ul>
<ul class="stage">所属阶段</ul>
<ul class="type">所属类型</ul>
</li>
<?php if ( have_posts() ) : ?>
<?php while (have_posts()) : the_post();?>
<div class="article">
<div class="articleHeader">
<li class="Result">
<ul class="Tutorial_title"><h1 class="articleTitle" id="category-course_list_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></ul>
<ul class="title-stage"><?php echo $Course_Stage_array[get_post_meta(get_the_ID(), $key = "Course_Stage")[0][0]]; ?></ul>
<ul class="title-type"><?php echo $Course_type_array[get_post_meta(get_the_ID(), $key = "Course_type")[0][0]]; ?></ul>
</li>
</div>
</div>
<?php endwhile;?>
<?php endif;?>
</div>
</div>
</div>
 
<!-- 文章列表结束 -->

 

 

以上前台代码,仅作参考.

 

 

重要说明:

Ashuwp Framework框架需要手动下载植入:

要把默认的加载项注释掉:

/**
* 引入Ashuwp_framework-master框架
**/
require get_template_directory() . '/Ashuwp_framework-master/ashuwp_framework/ashuwp_framework_core.php'; //加载ashuwp_framework框架
//require get_template_directory() . '/Ashuwp_framework-master/ashuwp_framework/config-example.php'; //加载配置数据,config-example.php为配置范例。

 

 

好了,这就是本教程的全部内容了,你可以根据你的实现需求的字段要改写参数即可.

 

 

 

 

给我留言

icon_question icon_razz icon_sad icon_evil icon_exclaim icon_smile icon_redface icon_biggrin icon_surprised icon_eek icon_confused icon_cool icon_lol icon_mad icon_twisted icon_rolleyes icon_wink icon_idea icon_arrow icon_neutral icon_cry icon_mrgreen