begin主题筛选功能增加筛选项

  • A+
所属分类:建博笔记

使用begin主题的童鞋都知道该主题有一个筛选功能,默认情况下,该功能只有三个筛选条件可供使用(最新版已增加到五个)。我想对我的 影视资源 分类添加这个功能,但默认的三个筛选条件不够,经过一番琢磨于是就有了这篇文章。

 

最终效果预览

 

预期实现的功能

  1. 添加筛选标题:点击筛选标题后可展开筛选条件,使筛选功能更灵活
  2. 默认情况下,使筛选功能处于“收起”状态:防止筛选模块太长影响用户体验
  3. 增加筛选条件至六个:丰富筛选条件,使筛选功能更自由,更强大

 

一、后台主题选项功能的追加

注意:本文涉及的文件较多,篇幅较长,操作前请务必备份相关文件。

首先:打开inc/options/begin-options.php文件,在大约4502~4509行的位置,找到代码

  1. $options[] = array(
  2. 'name' => '',
  3. 'desc' => '筛选C文字',
  4. 'id' => 'filters_c_t',
  5. 'class' => 'hidden',
  6. 'std' => '功能',
  7. 'type' => 'text'
  8. );

在其下面添加

  1. $options[] = array(
  2. 'name' => '',
  3. 'desc' => '',
  4. 'id' => 'filters_d',
  5. 'class' => 'fia-catid hidden',
  6. 'std' => '1',
  7. 'type' => 'checkbox'
  8. );
  9. $options[] = array(
  10. 'name' => '',
  11. 'desc' => '筛选D文字,用于内置文章类型',
  12. 'id' => 'filters_d_t',
  13. 'class' => 'hidden',
  14. 'std' => '国家地区',
  15. 'type' => 'text'
  16. );
  17. $options[] = array(
  18. 'name' => '',
  19. 'desc' => '',
  20. 'id' => 'filters_e',
  21. 'class' => 'fia-catid hidden',
  22. 'std' => '1',
  23. 'type' => 'checkbox'
  24. );
  25. $options[] = array(
  26. 'name' => '',
  27. 'desc' => '筛选E文字,用于内置文章类型',
  28. 'id' => 'filters_e_t',
  29. 'class' => 'hidden',
  30. 'std' => '清晰程度',
  31. 'type' => 'text'
  32. );
  33. $options[] = array(
  34. 'name' => '',
  35. 'desc' => '',
  36. 'id' => 'filters_f',
  37. 'class' => 'fia-catid hidden',
  38. 'std' => '1',
  39. 'type' => 'checkbox'
  40. );
  41. $options[] = array(
  42. 'name' => '',
  43. 'desc' => '筛选F文字,用于内置文章类型',
  44. 'id' => 'filters_f_t',
  45. 'class' => 'hidden',
  46. 'std' => '更新状态',
  47. 'type' => 'text'
  48. );

说明:因为我一共需要六个筛选条件,所以额外添加了三个。 这里根据自己的需要增加或删除条件即可,每两小段为一组条件,其中descidstd后面的内容根据自己的情况修改即可,下同。

然后:打开inc/options/includes/themes-options.php文件,大约626~631行的位置,找到代码

  1. jQuery('#filters').click(function() {
  2. jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').fadeToggle(400);
  3. });
  4. if (jQuery('#filters:checked').val() !== undefined) {
  5. jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').show();
  6. }

将其修改

  1. jQuery('#filters').click(function() {
  2. jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filters_d_t, #section-filters_e_t, #section-filters_f_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').fadeToggle(400);
  3. });
  4. if (jQuery('#filters:checked').val() !== undefined) {
  5. jQuery('#section-filters_a_t, #section-filters_b_t, #section-filters_c_t, #section-filters_d_t, #section-filters_e_t, #section-filters_f_t, #section-filter_id, .fi-catid, .fia-catid, #section-filters_img').show();
  6. }

说明:其实就是在这两段代码中添加了#section-filters_d_t#section-filters_e_t#section-filters_f_t三个类名。(这三个类名对应的是刚才在begin-options.php文件中添加的代码中的id)。

作用:让新添加的三个筛选条件能够在后台--外观--主题选项--辅助功能--多条件筛选中可以正常显示出来,如下图所示:

begin主题筛选功能增加筛选项

最后:打开inc/options/css/options.css文件,大约464~468行的位置,找到代码

  1. #section-filters_a, #section-filters_b, #section-filters_c {
  2. float: left;
  3. width: 10px;
  4. margin: 5px 0 0 0;
  5. }

将其修改

  1. #section-filters_a, #section-filters_b, #section-filters_c, #section-filters_d, #section-filters_e, #section-filters_f {
  2. float: left;
  3. width: 10px;
  4. margin: 5px 0 0 0;
  5. }

作用:让新添加的三个筛选条件的样式与已有样式一致,如下图所示:

begin主题筛选功能增加筛选项

 

二、后台文章编辑页面模块的追加

打开inc/filter-tag.php文件,在最后添加代码

  1. if (zm_get_option('filters_d')) {
  2. // 筛选标签D
  3. add_action( 'init', 'create_filtersd' );
  4. function create_filtersd() {
  5. $labels = array(
  6. 'name' => '筛选D-国家地区',
  7. 'singular_name' => 'filtersd' ,
  8. 'search_items' => '搜索标签',
  9. 'edit_item' => '编辑标签',
  10. 'update_item' => '更新标签',
  11. 'add_new_item' => '添加新标签',
  12. );
  13. register_taxonomy( 'filtersd','post',array(
  14. 'hierarchical' => false,
  15. 'rewrite' => array( 'slug' => $filtersd ),
  16. 'labels' => $labels
  17. ));
  18. }
  19. }
  20. if (zm_get_option('filters_e')) {
  21. // 筛选标签E
  22. add_action( 'init', 'create_filterse' );
  23. function create_filterse() {
  24. $labels = array(
  25. 'name' => '筛选E-清晰程度',
  26. 'singular_name' => 'filterse' ,
  27. 'search_items' => '搜索标签',
  28. 'edit_item' => '编辑标签',
  29. 'update_item' => '更新标签',
  30. 'add_new_item' => '添加新标签',
  31. );
  32. register_taxonomy( 'filterse','post',array(
  33. 'hierarchical' => false,
  34. 'rewrite' => array( 'slug' => $filterse ),
  35. 'labels' => $labels
  36. ));
  37. }
  38. }
  39. if (zm_get_option('filters_f')) {
  40. // 筛选标签F
  41. add_action( 'init', 'create_filtersf' );
  42. function create_filtersf() {
  43. $labels = array(
  44. 'name' => '筛选F-更新状态',
  45. 'singular_name' => 'filtersf' ,
  46. 'search_items' => '搜索标签',
  47. 'edit_item' => '编辑标签',
  48. 'update_item' => '更新标签',
  49. 'add_new_item' => '添加新标签',
  50. );
  51. register_taxonomy( 'filtersf','post',array(
  52. 'hierarchical' => false,
  53. 'rewrite' => array( 'slug' => $filtersf ),
  54. 'labels' => $labels
  55. ));
  56. }
  57. }

作用:让新增的三个筛选条件显示在文章编辑页面和“文章”菜单中,如下图所示:

begin主题筛选功能增加筛选项

Ps:如果你看不到新增的这三个筛选模块的话,请点击右上角的显示选项,勾选对应的模块。

begin主题筛选功能增加筛选项

 

三、前台输出模块的追加

1、添加筛选标题

首先:打开inc/filter.php文件,在第1行代码

  1. <div class="filter-box">

下面添加代码

  1. <div class="filter-box-title">
  2. <span></span>
  3. </div>
  4. <div class="filter-box-main">

然后:在该文件的最后添加代码

  1. </div>

2、添加筛选条件

同文件中找到代码

  1. <?php if (zm_get_option('filters_c')) { ?>
  2. <div class="clear"></div>
  3. <div class="filter-main">
  4. <span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_c_t'); ?></span>
  5. <span class="filtertag" id="filtersc"<?php if($filtersc!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersc)))).'"';}?>>
  6. <?php
  7. $terms = get_terms("filtersc");
  8. $count = count($terms);
  9. if ( $count > 0 ){
  10. foreach ( $terms as $term ) {
  11. if(strtolower(urlencode(urldecode(urldecode($filtersc))))==$term->slug){
  12. echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
  13. }else{
  14. echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
  15. }
  16. }
  17. }
  18. ?>
  19. </span>
  20. </div>
  21. <?php } ?>

在其下面添加

  1. <?php if (zm_get_option('filters_d')) { ?>
  2. <div class="clear"></div>
  3. <div class="filter-main">
  4. <span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_d_t'); ?></span>
  5. <span class="filtertag" id="filtersd"<?php if($filtersd!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersd)))).'"';}?>>
  6. <?php
  7. $terms = get_terms("filtersd");
  8. $count = count($terms);
  9. if ( $count > 0 ){
  10. foreach ( $terms as $term ) {
  11. if(strtolower(urlencode(urldecode(urldecode($filtersd))))==$term->slug){
  12. echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
  13. }else{
  14. echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
  15. }
  16. }
  17. }
  18. ?>
  19. </span>
  20. </div>
  21. <?php } ?>
  22. <?php if (zm_get_option('filters_e')) { ?>
  23. <div class="clear"></div>
  24. <div class="filter-main">
  25. <span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_e_t'); ?></span>
  26. <span class="filtertag" id="filterse"<?php if($filterse!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filterse)))).'"';}?>>
  27. <?php
  28. $terms = get_terms("filterse");
  29. $count = count($terms);
  30. if ( $count > 0 ){
  31. foreach ( $terms as $term ) {
  32. if(strtolower(urlencode(urldecode(urldecode($filterse))))==$term->slug){
  33. echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
  34. }else{
  35. echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
  36. }
  37. }
  38. }
  39. ?>
  40. </span>
  41. </div>
  42. <?php } ?>
  43. <?php if (zm_get_option('filters_f')) { ?>
  44. <div class="clear"></div>
  45. <div class="filter-main">
  46. <span class="filter-name"><i class="be be-sort"></i><?php echo zm_get_option('filters_f_t'); ?></span>
  47. <span class="filtertag" id="filtersf"<?php if($filtersf!=''){echo ' data="'.strtolower(urlencode(urldecode(urldecode($filtersf)))).'"';}?>>
  48. <?php
  49. $terms = get_terms("filtersf");
  50. $count = count($terms);
  51. if ( $count > 0 ){
  52. foreach ( $terms as $term ) {
  53. if(strtolower(urlencode(urldecode(urldecode($filtersf))))==$term->slug){
  54. echo '<a class="filter-tag filter-on" data="'. $term->slug .'">' . $term->name . '</a>';
  55. }else{
  56. echo '<a class="filter-tag" data="'. $term->slug .'">' . $term->name . '</a>';
  57. }
  58. }
  59. }
  60. ?>
  61. </span>
  62. </div>
  63. <?php } ?>

3、前台CSS样式调整

打开style.css文件,大约10870~10923行的位置,找到代码

  1. /** 筛选 **/
  2. .filter-box {
  3. background: #fff;
  4. margin: 0 0 10px 0;
  5. padding: 10px 5px 8px 5px;
  6. border: 1px solid #ddd;
  7. border-radius: 2px;
  8. }
  9. .filter-main {
  10. float: left;
  11. }
  12. .filter-name {
  13. float: left;
  14. font-weight: bold;
  15. line-height: 35px;
  16. height: 100%;
  17. padding: 0 10px;
  18. }
  19. .filter-name .be {
  20. font-weight: normal;
  21. margin: 0 5px 0 0;
  22. }
  23. .filtertag {
  24. display: block;
  25. line-height: 25px;
  26. margin: 0 0 0 100px;
  27. }
  28. .filter-tag {
  29. float: left;
  30. background: #fff;
  31. color: #666;
  32. cursor: pointer;
  33. text-align: center;
  34. display: block;
  35. margin: 3px 5px 5px 0;
  36. padding: 0 5px;
  37. border-radius: 2px;
  38. border: 1px solid #fff;
  39. }
  40. .filter-tag:hover {
  41. color: #3690cf;
  42. }
  43. .filter-on {
  44. color: #fff !important;
  45. background: #3690cf;
  46. border: 1px solid #3690cf;
  47. }

将其替换

  1. /** 筛选 **/
  2. .filter-box {
  3. background: #fff;
  4. margin: 0 0 10px 0;
  5. padding: 10px 5px 8px 5px;
  6. border: 1px solid #ddd;
  7. border-radius: 2px;
  8. }
  9. .filter-box-title {
  10. cursor: pointer;
  11. }
  12. .filter-box-title, .filter-name {
  13. font-weight: bold;
  14. line-height: 35px;
  15. height: 100%;
  16. padding: 0 10px;
  17. }
  18. .filter-box-title::after, .off-filter-box-main::after {
  19. font-family: be;
  20. font-size: 15px !important;
  21. color: #777;
  22. }
  23. .filter-box-title::before {
  24. content: "展开筛选";
  25. }
  26. .off-filter-box-title::before {
  27. content: "关闭筛选";
  28. }
  29. .filter-box-title::after {
  30. content: "\e76f";
  31. float: rightright;
  32. }
  33. .off-filter-box-main::after {
  34. content: "\e77b";
  35. float: rightright;
  36. }
  37. .filter-box-main {
  38. display: none;
  39. }
  40. .filter-box-main-display {
  41. display: block;
  42. }
  43. .filter-main {
  44. float: left;
  45. }
  46. .filter-name {
  47. float: left;
  48. }
  49. .filter-name .be {
  50. font-weight: normal;
  51. margin: 0 5px 0 0;
  52. }
  53. .filtertag {
  54. display: block;
  55. line-height: 25px;
  56. margin: 0 0 0 100px;
  57. }
  58. .filter-tag {
  59. float: left;
  60. background: #fff;
  61. color: #666;
  62. cursor: pointer;
  63. text-align: center;
  64. display: block;
  65. margin: 3px 5px 5px 0;
  66. padding: 0 5px;
  67. border-radius: 2px;
  68. border: 1px solid #fff;
  69. }
  70. .filter-tag:hover {
  71. color: #3690cf;
  72. }
  73. .filter-on {
  74. color: #fff !important;
  75. background: #3690cf;
  76. border: 1px solid #3690cf;
  77. }

说明:其中的

  1. .filter-box-title::before {
  2. content: "展开筛选";
  3. }
  4. .off-filter-box-title::before {
  5. content: "关闭筛选";
  6. }

用来动态显示筛选标题,当筛选功能收起时显示“展开筛选”,当筛选功能展开时显示“关闭筛选”,如果不喜欢这个标题名字,自己修改就好。

4、添加展开/收起功能

打开js/script.js文件,大约324行的位置,找到注释

  1. // filters

在其下面添加

  1. $(".filter-box-title").click(function() {
  2. $ (this).toggleClass ("off-filter-box-title");
  3. $ (this).toggleClass ("off-filter-box-main");
  4. $ (".filter-box-main").toggleClass ("filter-box-main-display");
  5. });

5、添加地址栏参数传递

首先:在同文件中,该代码片段稍微下面点的位置找到代码

  1. var url = urlNow;
  2. var filtersa = $('#filtersa').attr('data');
  3. var filtersb = $('#filtersb').attr('data');
  4. var filtersc = $('#filtersc').attr('data');

在其下面添加

  1. var filtersd = $('#filtersd').attr('data');
  2. var filterse = $('#filterse').attr('data');
  3. var filtersf = $('#filtersf').attr('data');

然后:在再下面点的位置找到代码

  1. if (typeof(filtersc) != 'undefined') {
  2. if (url.substr( - 1) != '?') {
  3. url += '&';
  4. }
  5. if (filtersc.length > 0) {
  6. url += 'filtersc=' + filtersc;
  7. }
  8. }

在其后面添加

  1. if (typeof(filtersd) != 'undefined') {
  2. if (url.substr( - 1) != '?') {
  3. url += '&';
  4. }
  5. if (filtersd.length > 0) {
  6. url += 'filtersd=' + filtersd;
  7. }
  8. }
  9. if (typeof(filterse) != 'undefined') {
  10. if (url.substr( - 1) != '?') {
  11. url += '&';
  12. }
  13. if (filterse.length > 0) {
  14. url += 'filterse=' + filterse;
  15. }
  16. }
  17. if (typeof(filtersf) != 'undefined') {
  18. if (url.substr( - 1) != '?') {
  19. url += '&';
  20. }
  21. if (filtersf.length > 0) {
  22. url += 'filtersf=' + filtersf;
  23. }
  24. }

至此,关于// filters部分的完整代码应该是这样的:展开

  1. // filters
  2. $(".filter-box-title").click(function() {
  3. $ (this).toggleClass ("off-filter-box-title");
  4. $ (this).toggleClass ("off-filter-box-main");
  5. $ (".filter-box-main").toggleClass ("filter-box-main-display");
  6. });
  7. $('.filtertag a').click(function() {
  8. var papaDate = $(this).parent('.filtertag').attr('data');
  9. $(this).parent('.filtertag').find('a').css('borderColor', '');
  10. if (papaDate == undefined | papaDate == "" | papaDate != $(this).attr('data')) {
  11. $(this).css('borderColor', '#ddd').parent('.filtertag').attr('data', $(this).attr('data'));
  12. } else if (papaDate == $(this).attr('data')) {
  13. $(this).css('borderColor', '').parent('.filtertag').attr('data', '');
  14. } else {
  15. $(this).css('borderColor', '').parent('.filtertag').attr('data', '');
  16. }
  17. var ishttps = 'https:' == document.location.protocol ? true: false;
  18. if(ishttps){
  19. var urlNow = 'https://' + window.location.host + '/?';
  20. }else{
  21. if (window.location.host=="127.0.0.1" || window.location.host=="localhost" ){
  22. var urlNow = 'http://' + window.location.host + '/wordpress/?';
  23. }else{
  24. var urlNow = 'http://' + window.location.host + '/?';
  25. }
  26. }
  27. var url = urlNow;
  28. var filtersa = $('#filtersa').attr('data');
  29. var filtersb = $('#filtersb').attr('data');
  30. var filtersc = $('#filtersc').attr('data');
  31. var filtersd = $('#filtersd').attr('data');
  32. var filterse = $('#filterse').attr('data');
  33. var filtersf = $('#filtersf').attr('data');
  34. if (typeof(filtersa) != 'undefined') {
  35. if (filtersa.length > 0) {
  36. url += 'filtersa=' + filtersa;
  37. }
  38. }
  39. if (typeof(filtersb) != 'undefined') {
  40. if (url.substr( - 1) != '?') {
  41. url += '&';
  42. }
  43. if (filtersb.length > 0) {
  44. url += 'filtersb=' + filtersb;
  45. }
  46. }
  47. if (typeof(filtersc) != 'undefined') {
  48. if (url.substr( - 1) != '?') {
  49. url += '&';
  50. }
  51. if (filtersc.length > 0) {
  52. url += 'filtersc=' + filtersc;
  53. }
  54. }
  55. if (typeof(filtersd) != 'undefined') {
  56. if (url.substr( - 1) != '?') {
  57. url += '&';
  58. }
  59. if (filtersd.length > 0) {
  60. url += 'filtersd=' + filtersd;
  61. }
  62. }
  63. if (typeof(filterse) != 'undefined') {
  64. if (url.substr( - 1) != '?') {
  65. url += '&';
  66. }
  67. if (filterse.length > 0) {
  68. url += 'filterse=' + filterse;
  69. }
  70. }
  71. if (typeof(filtersf) != 'undefined') {
  72. if (url.substr( - 1) != '?') {
  73. url += '&';
  74. }
  75. if (filtersf.length > 0) {
  76. url += 'filtersf=' + filtersf;
  77. }
  78. }
  79. if (urlNow != url) {
  80. window.location.href = url;
  81. }
  82. })

重要说明:如果你在完成整个操作(包括后面要讲的操作)后去测试时发现:当你点击筛选条件中的任何一个筛选内容(包括添加在主题原有的筛选条件中的筛选内容)时,页面无论如何都不会跳转到筛选结果页或筛选结果页显示404错误时,你需要将这部分代码中的

  1. if(ishttps){
  2. var urlNow = 'https://' + window.location.host + '/?';
  3. }else{
  4. if (window.location.host=="127.0.0.1" || window.location.host=="localhost" ){
  5. var urlNow = 'http://' + window.location.host + '/wordpress/?';
  6. }else{
  7. var urlNow = 'http://' + window.location.host + '/?';
  8. }
  9. }

修改

  1. if(ishttps){
  2. var urlNow = 'https://' + window.location.host + '/?';
  3. }else{
  4. // if (window.location.host=="127.0.0.1" || window.location.host=="localhost" ){
  5. // var urlNow = 'http://' + window.location.host + '/wordpress/?';
  6. // }else{
  7. var urlNow = 'http://' + window.location.host + '/?';
  8. // }
  9. }

Ps:由于 代码高亮 的原因,可能看的不是很清楚,其实就是注释掉第4~6行代码和第8行代码。

6、导航栏中追加“筛选结果”

打开inc/inc.php文件,大约401行的位置,找到代码

  1. if ( is_tax('filtersa') || is_tax('filtersb') || is_tax('filtersc') ) {
  2. echo '<i class="be be-arrowright"></i>筛选结果';
  3. }

将其修改

  1. if ( is_tax('filtersa') || is_tax('filtersb') || is_tax('filtersc') || is_tax('filtersd') || is_tax('filterse') || is_tax('filtersf') ) {
  2. echo '<i class="be be-arrowright"></i>筛选结果';
  3. }

作用:当用户点击筛选内容时,页面会跳转到筛选结果页,而导航栏中并不会显示“筛选结果”,所以需要在此追加“筛选结果”,其具体的显示位置如下图所示:

begin主题筛选功能增加筛选项

 

最后总结

至此,文章的整个实现过程已经结束了,剩下的事情就是在后台启用多条件筛选,并设置相关的选项,然后在文章编辑页面的筛选模块中分别输入想要显示的筛选内容即可。

重要说明:启用多条件筛选功能后,需要在后台--设置--固定链接中点一下保存更改按钮,否则前台可能不能正常显示筛选功能或筛选功能不能正常使用。

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: