增加begin主题杂志布局中各模块分类图标设置选项

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

begin主题每次更新后都会增加一些新的功能,同时也会修正和优化一些之前存在的问题,这对于正版用户而言这没什么好说的,直接更新主题就可以了,但对于像我这样的(你懂的)用户来说,想要同步更新主题新增的功能,却需要花点时间。

在较早的时候,就有自定义杂志布局中各模块标题前的分类图标(以下简称“分类图标”)的想法,当时也询问了很多群里的朋友,但得到的结果却不理想,多数都是简单的告诉你在代码里添加标签,然后设置样式就好了。虽然这样的操作方式也可以实现自定义分类图标的想法,但由于这种操作方式将代码写死了,如果后续对这些模块调用了不同的分类时,又需要重新修改这些代码,这显然不是上上策。

最初我的想法是既然在菜单设置中可以设置分类图标(并已经设置了分类图标),那就应该有办法通过函数来获取这些分类图标,然后调用这些分类图标到各个模块的标题前,这样就可以实现各模块前分类图标自动显示的效果,后期如果在各模块中调用了其他分类,也不需要再次修改相关的代码。只是因为能力的原因,没法成功实现。后来,有幸得到一份最新版的主题文件,于是花了一些时间研究了一下,终于把这个功能实现了。

 

基本思路

主题选项中增加分类图标设置选项 -> 分类目录中添加分类图标设置选项 -> 添加分类图标文件加载判断 -> 各模块文件中添加分类图标显示判断语句 -> 增加分类图标CSS样式

 

第一部分:添加功能

一、主题选项中增加分类图标设置选项

打开inc/options/begin-options.php文件,在适当位置添加代码

  1. $options[] = array(
  2. 'name' => '',
  3. 'desc' => '分类图标',
  4. 'id' => 'cat_icon',
  5. 'std' => '0',
  6. 'type' => 'checkbox'
  7. );
  8. $options[] = array(
  9. 'id' => 'clear'
  10. );

代码说明:

该选项在主题选项中的具体显示位置和你添加代码的位置有关。考虑到管理上的方便,我是添加在了大约3627行的位置,代码

  1. $options[] = array(
  2. 'name' => '',
  3. 'desc' => '显示相同父分类链接',
  4. 'id' => 'child_cat',
  5. 'std' => '1',
  6. 'type' => 'checkbox'
  7. );
  8. $options[] = array(
  9. 'id' => 'clear'
  10. );

下面, 显示的位置在基本设置--显示相同父分类链接选项的下面

 

二、分类目录中添加分类图标设置选项

inc目录下新建一个名为cat-icons.php的文件,然后复制代码

  1. <?php
  2. add_action('admin_init', 'zm_icon_init');
  3. function zm_icon_init() {
  4. $zm_icon_taxonomies = get_taxonomies();
  5. if (is_array($zm_icon_taxonomies)) {
  6. foreach ($zm_icon_taxonomies as $zm_icon_taxonomy) {
  7. add_action($zm_icon_taxonomy.'_add_form_fields', 'zm_add_icon_texonomy_field');
  8. add_action($zm_icon_taxonomy.'_edit_form_fields', 'zm_icon_edit_texonomy_field');
  9. }
  10. }
  11. }
  12. // 新建分类添加图标字段表单
  13. function zm_add_icon_texonomy_field() {
  14. if (get_bloginfo('version') >= 3.5)
  15. wp_enqueue_media();
  16. else {
  17. wp_enqueue_style('thickbox');
  18. wp_enqueue_script('thickbox');
  19. }
  20. echo '<div class="form-field">
  21. <label for="taxonomy_icon">' . __('分类图标', 'begin') . '</label>
  22. <input type="text" name="taxonomy_icon" id="taxonomy_icon" value="" />
  23. <br/>
  24. <span class="cat-words">输入图标字体代码</span><br />
  25. </div>';
  26. }
  27. // 在分类编辑添加图标字段表单
  28. function zm_icon_edit_texonomy_field($taxonomy) {
  29. if (get_bloginfo('version') >= 3.5)
  30. wp_enqueue_media();
  31. else {
  32. wp_enqueue_style('thickbox');
  33. wp_enqueue_script('thickbox');
  34. }
  35. $icon_code = zm_taxonomy_icon_code( $taxonomy->term_id, NULL, TRUE );
  36. echo '<tr class="form-field">
  37. <th scope="row" valign="top"><label for="taxonomy_icon">' . __('分类图标', 'begin') . '</label></th>
  38. <td>' . zm_taxonomy_icon_code( $taxonomy->term_id, 'medium', TRUE ) . '<br/><input type="text" name="taxonomy_icon" id="taxonomy_icon" value="'.$icon_code.'" /><br />
  39. <span class="cat-words">输入图标字体代码</span><br />
  40. </td><br />
  41. </tr>';
  42. }
  43. // 保存分类图标字段
  44. add_action('edit_term','zm_save_taxonomy_icon');
  45. add_action('create_term','zm_save_taxonomy_icon');
  46. function zm_save_taxonomy_icon($term_id) {
  47. if(isset($_POST['taxonomy_icon']))
  48. update_option('zm_taxonomy_icon'.$term_id, $_POST['taxonomy_icon'], NULL);
  49. }
  50. // 获取图标
  51. function zm_icon_get_attachment_id_by_code($icon_name) {
  52. global $wpdb;
  53. $query = $wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid = %s", $icon_name);
  54. $id = $wpdb->get_var($query);
  55. return (!emptyempty($id)) ? $id : NULL;
  56. }
  57. // 获取指定term_id分类图标代码
  58. function zm_taxonomy_icon_code($term_id = NULL, $size = 'full', $return_placeholder = FALSE) {
  59. if (!$term_id) {
  60. if (is_category())
  61. $term_id = get_query_var('cat');
  62. elseif (is_tag())
  63. $term_id = get_query_var('tag_id');
  64. elseif (is_tax()) {
  65. $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
  66. $term_id = $current_term->term_id;
  67. }
  68. }
  69. $taxonomy_icon_code = get_option('zm_taxonomy_icon'.$term_id);
  70. if(!emptyempty($taxonomy_icon_code)) {
  71. $attachment_id = zm_icon_get_attachment_id_by_code($taxonomy_icon_code);
  72. if(!emptyempty($attachment_id)) {
  73. $taxonomy_icon_code = $taxonomy_icon_code[0];
  74. }
  75. }
  76. return $taxonomy_icon_code;
  77. }

到这个文件中,并保存。

代码作用:

  • 后台--文章--分类目录中增加分类图标设置选项

 

三、添加分类图标文件加载判断

打开inc/load.php文件,在适当位置添加代码

  1. if (zm_get_option('cat_icon')) {
  2. require get_template_directory() . '/inc/cat-icons.php';
  3. }

代码说明:

考虑到代码一致性问题,我是加在了15行代码

  1. if (zm_get_option('cat_des')) {
  2. require get_template_directory() . '/inc/cats-img.php';
  3. }

下面, 具体添加位置可自行决定。

 

四、各模块文件中添加分类图标显示判断语句

由于杂志布局中的模块比较多,因此这部分涉及的文件也比较多,但都集中在cms目录下。同时,由于代码中涉及的类名不同,因此需要分别替换(不要使用相同的代码去替换所有内容),具体如下:

大约第7行的位置,找到代码

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>"><span class="title-i"><span></span><span></span><span></span><span></span></span><?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a></h3>

将其替换

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>">
  2. <?php if (zm_get_option('cat_icon')) { ?>
  3. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  4. <?php } else { ?>
  5. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  6. <?php } ?>
  7. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  8. </h3>

大约第7行的位置,找到代码

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>"><span class="title-i"><span></span><span></span><span></span><span></span></span><?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a></h3>

将其替换

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>">
  2. <?php if (zm_get_option('cat_icon')) { ?>
  3. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  4. <?php } else { ?>
  5. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  6. <?php } ?>
  7. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  8. </h3>

大约第5行的位置,找到代码

  1. <h3 class="cat-grid-title">
  2. <a href="<?php echo get_category_link($category);?>">
  3. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  4. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
  5. </a>
  6. </h3>

将其替换

  1. <h3 class="cat-grid-title">
  2. <a href="<?php echo get_category_link($category);?>">
  3. <?php if (zm_get_option('cat_icon')) { ?>
  4. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  5. <?php } else { ?>
  6. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  7. <?php } ?>
  8. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  9. </h3>

大约第6行的位置,找到代码

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>"><span class="title-i"><span></span><span></span><span></span><span></span></span><?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a></h3>

将其替换

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>">
  2. <?php if (zm_get_option('cat_icon')) { ?>
  3. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  4. <?php } else { ?>
  5. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  6. <?php } ?>
  7. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  8. </h3>

大约第6行的位置,找到代码

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>"><span class="title-i"><span></span><span></span><span></span><span></span></span><?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a></h3>

将其替换

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>">
  2. <?php if (zm_get_option('cat_icon')) { ?>
  3. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  4. <?php } else { ?>
  5. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  6. <?php } ?>
  7. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  8. </h3>

大约第7行的位置,找到代码

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>"><span class="title-i"><span></span><span></span><span></span><span></span></span><?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a></h3>

将其替换

  1. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>">
  2. <?php if (zm_get_option('cat_icon')) { ?>
  3. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  4. <?php } else { ?>
  5. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  6. <?php } ?>
  7. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  8. </h3>

大约第5行的位置,找到代码

  1. <h3 class="cat-square-title">
  2. <a href="<?php echo get_category_link($category);?>">
  3. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  4. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span>
  5. </a>
  6. </h3>

将其替换

  1. <h3 class="cat-square-title">
  2. <a href="<?php echo get_category_link($category);?>">
  3. <?php if (zm_get_option('cat_icon')) { ?>
  4. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  5. <?php } else { ?>
  6. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  7. <?php } ?>
  8. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  9. </h3>

 

五、增加分类图标CSS样式

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

  1. .cat-title .title-i,
  2. .cat-square-title .title-i,
  3. .cat-square-title .title-i,
  4. .cat-grid-title .title-i,
  5. .widget-title .title-i,
  6. .child-title .title-i {
  7. margin: 0 10px 0 15px;
  8. padding: 7px 0 0 0;
  9. }

在其下面添加

  1. .t-icon {
  2. margin: 0 10px 0 15px;
  3. padding: 7px 0 0 0;
  4. font-weight: normal;
  5. }

第一部分到此结束,接下来就是正常的设置,请接着往下看。

 

第二部分:相关设置

六、启用分类图标

勾选后台--主题选项--基本设置(看你自己添加的位置)--分类图标选项

 

七、分类目录中添加图标代码

进入后台--菜单--分类目录,进入已经添加的分类目录,在分类图标中添加图标代码,并更新

图标代码可以直接套用在菜单中添加图标代码的方法,格式为zm zm-abc。其中,zmzm-这两个前缀不要修改,abc为你在阿里图标库中设置的图标代码。如果你不清楚如何添加阿里图标库的字体图标,请 参考这里

完成以上所有操作后,刷新前台,正常情况下各模块标题前的分类图标就会显示了。

发表评论

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