给begin主题添加分类封面模块和分类封面小工具

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

第一部分 效果预览、功能介绍

一、效果预览

PC端效果预览：点击预览

移动端效果预览：点击预览

Ps：为了方便预览，我将分类封面模块和分类封面小工具同时截在一张图片里了。实际应用中，可根据需要在后台单独控制显示或不显示，以及他们的显示位置。

其他布局和页面中的效果预览就不再演示了，基本和杂志布局中的分类封面模块类似。因布局和页面自身的特点，分类封面模块的大小会略有不同。

 

二、功能介绍

定义

分类封面就是在内置文章类型下的分类目录和标签中添加一个分类封面（其实就是图片）功能，通过前台对该分类（或该标签）封面的调用来控制分类（或标签）的显示。

分类封面暂不支持自定义文章类型下的分类目录和标签的调用。

功能

  • 该功能已集成在：首页杂志布局、首页博客布局、首页图片布局、首页分类图片布局和杂志页面、博客页面、分类图片页面、分类封面页面（新增）以及侧边栏小工具中
  • 所集成的这些布局和页面可在后台单独控制其显示或不显示
  • 对于首页杂志布局和杂志页面，可自定义排序

注意事项

本文涉及文件较多，操作前务必备份好相关文件。

 

第二部分 注册分类封面设置项、加载分类封面注册文件、主题选项添加分类封面设置项

三、注册分类封面设置项

首先：在inc/目录下，新建一个名为cat-cover.php的文件，然后复制下面的代码到这个文件中展开

  1. <?php
  2. define('ZM_IMAGE_PLACEHOLDER', get_template_directory_uri()."/img/placeholder.png");
  3. add_action('admin_init', 'cat_cover_init');
  4. function cat_cover_init() {
  5.     $cat_taxonomies = get_taxonomies();
  6.     if (is_array($cat_taxonomies)) {
  7.         foreach ($cat_taxonomies as $cat_taxonomy) {
  8.             add_action($cat_taxonomy.'_add_form_fields', 'cat_add_texonomy_field');
  9.             add_action($cat_taxonomy.'_edit_form_fields', 'cat_edit_texonomy_field');
  10.             add_filter( 'manage_edit-' . $cat_taxonomy . '_columns', 'cat_taxonomy_columns' );
  11.             add_filter( 'manage_' . $cat_taxonomy . '_custom_column', 'cat_taxonomy_column', 10, 3 );
  12.         }
  13.     }
  14. }
  15. function cat_cover_add_style() {
  16.     echo '<style type="text/css" media="screen">
  17.         th.column-thumb_cover {width:60px;}
  18.         .form-field img.taxonomy-cover {border:1px solid #eee;max-width:150px;max-height:150px;}
  19.         .inline-edit-row fieldset .thumb_cover label span.title {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
  20.         .column-thumb_cover span {width:48px;height:48px;display:inline-block;}
  21.         .inline-edit-row fieldset .thumb_cover img,.column-thumb_cover img {width:48px;height:48px;}
  22.     </style>';
  23. }
  24. // 添加图片字段表单
  25. function cat_add_texonomy_field() {
  26.     if (get_bloginfo('version') >= 3.5)
  27.         wp_enqueue_media();
  28.     else {
  29.         wp_enqueue_style('thickbox');
  30.         wp_enqueue_script('thickbox');
  31.     }
  32.     echo '<div class="form-field">
  33.         <label for="taxonomy_cover">' . __('分类封面', 'begin') . '</label>
  34.         <input type="text" name="taxonomy_cover" id="taxonomy_cover" value="" />
  35.         <br/>
  36.         <button class="cat_upload_cover_button button">' . __('添加封面', 'begin') . '</button>
  37.     </div>'.cat_script();
  38. }
  39. // 在分类编辑添加图片字段表单
  40. function cat_edit_texonomy_field($taxonomy) {
  41.     if (get_bloginfo('version') >= 3.5)
  42.         wp_enqueue_media();
  43.     else {
  44.         wp_enqueue_style('thickbox');
  45.         wp_enqueue_script('thickbox');
  46.     }
  47.     if (cat_cover_url( $taxonomy->term_id, NULL, TRUE ) == ZM_IMAGE_PLACEHOLDER)
  48.         $cover_url = "";
  49.     else
  50.         $cover_url = cat_cover_url( $taxonomy->term_id, NULL, TRUE );
  51.     echo '<tr class="form-field">
  52.         <th scope="row" valign="top"><label for="taxonomy_cover">' . __('分类封面', 'begin') . '</label></th>
  53.         <td><img class="taxonomy-cover" src="' . cat_cover_url( $taxonomy->term_id, 'medium', TRUE ) . '"/><br/><input type="text" name="taxonomy_cover" id="taxonomy_cover" value="'.$cover_url.'" /><br />
  54.         <button class="cat_upload_cover_button button">' . __('添加封面', 'begin') . '</button>
  55.         <button class="cat_remove_cover_button button">' . __('删除封面', 'begin') . '</button>
  56.         </td>
  57.     </tr>'.cat_script();
  58. }
  59. // 使用wordpress
  60. function cat_script() {
  61.     return '<script type="text/javascript">
  62.         jQuery(document).ready(function($) {
  63.             var wordpress_ver = "'.get_bloginfo("version").'", upload_button;
  64.             $(".cat_upload_cover_button").click(function(event) {
  65.                 upload_button = $(this);
  66.                 var frame;
  67.                 if (wordpress_ver >= "3.5") {
  68.                     event.preventDefault();
  69.                     if (frame) {
  70.                         frame.open();
  71.                         return;
  72.                     }
  73.                     frame = wp.media();
  74.                     frame.on( "select", function() {
  75.                         // Grab the selected attachment.
  76.                         var attachment = frame.state().get("selection").first();
  77.                         frame.close();
  78.                         if (upload_button.parent().prev().children().hasClass("tax_list")) {
  79.                             upload_button.parent().prev().children().val(attachment.attributes.url);
  80.                             upload_button.parent().prev().prev().children().attr("src", attachment.attributes.url);
  81.                         }
  82.                         else
  83.                             $("#taxonomy_cover").val(attachment.attributes.url);
  84.                     });
  85.                     frame.open();
  86.                 }
  87.                 else {
  88.                     tb_show("", "media-upload.php?type=cover&amp;TB_iframe=true");
  89.                     return false;
  90.                 }
  91.             });
  92.             $(".cat_remove_cover_button").click(function() {
  93.                 $(".taxonomy-cover").attr("src", "'.ZM_IMAGE_PLACEHOLDER.'");
  94.                 $("#taxonomy_cover").val("");
  95.                 $(this).parent().siblings(".title").children("img").attr("src","' . ZM_IMAGE_PLACEHOLDER . '");
  96.                 $(".inline-edit-col :input[name=\'taxonomy_cover\']").val("");
  97.                 return false;
  98.             });
  99.             if (wordpress_ver < "3.5") {
  100.                 window.send_to_editor = function(html) {
  101.                     imgurl = $("img",html).attr("src");
  102.                     if (upload_button.parent().prev().children().hasClass("tax_list")) {
  103.                         upload_button.parent().prev().children().val(imgurl);
  104.                         upload_button.parent().prev().prev().children().attr("src", imgurl);
  105.                     }
  106.                     else
  107.                         $("#taxonomy_cover").val(imgurl);
  108.                     tb_remove();
  109.                 }
  110.             }
  111.             $(".editinline").click(function() {
  112.                 var tax_id = $(this).parents("tr").attr("id").substr(4);
  113.                 var thumb_cover = $("#tag-"+tax_id+" .thumb_cover img").attr("src");
  114.                 if (thumb_cover != "' . ZM_IMAGE_PLACEHOLDER . '") {
  115.                     $(".inline-edit-col :input[name=\'taxonomy_cover\']").val(thumb_cover);
  116.                 } else {
  117.                     $(".inline-edit-col :input[name=\'taxonomy_cover\']").val("");
  118.                 }
  119.                 $(".inline-edit-col .title img").attr("src",thumb_cover);
  120.             });
  121.         });
  122.     </script>';
  123. }
  124. // 保存分类图像
  125. add_action('edit_term','cat_save_taxonomy_cover');
  126. add_action('create_term','cat_save_taxonomy_cover');
  127. function cat_save_taxonomy_cover($term_id) {
  128.     if(isset($_POST['taxonomy_cover']))
  129.         update_option('cat_taxonomy_cover'.$term_id, $_POST['taxonomy_cover'], NULL);
  130. }
  131. // 获取图像网址
  132. function cat_get_attachment_id_by_url($cover_src) {
  133.     global $wpdb;
  134.     $query = $wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid = %s", $cover_src);
  135.     $id = $wpdb->get_var($query);
  136.     return (!emptyempty($id)) ? $id : NULL;
  137. }
  138. // 获取指定term_id分类封面图片
  139. function cat_cover_url($term_id = NULL, $size = 'full', $return_placeholder = FALSE) {
  140.     if (!$term_id) {
  141.         if (is_category())
  142.             $term_id = get_query_var('cat');
  143.         elseif (is_tag())
  144.             $term_id = get_query_var('tag_id');
  145.         elseif (is_tax()) {
  146.             $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
  147.             $term_id = $current_term->term_id;
  148.         }
  149.     }
  150.     $taxonomy_cover_url = get_option('cat_taxonomy_cover'.$term_id);
  151.     if(!emptyempty($taxonomy_cover_url)) {
  152.         $attachment_id = cat_get_attachment_id_by_url($taxonomy_cover_url);
  153.         if(!emptyempty($attachment_id)) {
  154.         $taxonomy_cover_url = wp_get_attachment_image_src($attachment_id, $size);
  155.         $taxonomy_cover_url = $taxonomy_cover_url[0];
  156.         }
  157.     }
  158.     if ($return_placeholder)
  159.         return ($taxonomy_cover_url != '') ? $taxonomy_cover_url : ZM_IMAGE_PLACEHOLDER;
  160.     else
  161.         return $taxonomy_cover_url;
  162. }
  163. // 分类快速编辑添加图片表单
  164. function cat_quick_edit_custom_box($column_name, $screen, $name) {
  165.     if ($column_name == 'thumb_cover')
  166.         echo '<fieldset>
  167.         <div class="thumb inline-edit-col">
  168.             <label>
  169.                 <span class="title"><img src="" alt="Thumbnail"/></span>
  170.                 <span class="input-text-wrap"><input type="text" name="taxonomy_cover" value="" class="tax_list" /></span>
  171.                 <span class="input-text-wrap">
  172.                     <button class="cat_upload_cover_button button">' . __('添加封面', 'begin') . '</button>
  173.                     <button class="cat_remove_cover_button button">' . __('删除封面', 'begin') . '</button>
  174.                 </span>
  175.             </label>
  176.         </div>
  177.     </fieldset>';
  178. }
  179. // 在分类列表管理添加缩略图
  180. function cat_taxonomy_columns( $columns ) {
  181.     $new_columns = array();
  182.     $new_columns['cb'] = $columns['cb'];
  183.     $new_columns['thumb_cover'] = __('分类封面', 'categories-covers');
  184.     unset( $columns['cb'] );
  185.     return array_merge( $new_columns, $columns );
  186. }
  187. // 缩略图列值添加到类别管理
  188. function cat_taxonomy_column( $columns, $column, $id ) {
  189.     if ( $column == 'thumb_cover' )
  190.         $columns = '<span><img src="' . cat_cover_url($id, 'thumbnail', TRUE) . '" alt="' . __('Thumbnail', 'begin') . '" class="wp-post-cover" /></span>';
  191.     return $columns;
  192. }
  193. // 更改“插入到”到“使用此图像”
  194. function cat_change_insert_button_text($safe_text, $text) {
  195.     return str_replace("Insert into Post", "Use this cover", $text);
  196. }
  197. // 列表中图像添加样式
  198. if (strpos( $_SERVER['SCRIPT_NAME'], 'term.php' ) > 0 ) {
  199.     add_action( 'admin_head', 'cat_cover_add_style' );
  200. }
  201. if ( strpos( $_SERVER['SCRIPT_NAME'], 'edit-tags.php' ) > 0 ) {
  202.     add_action( 'admin_head', 'cat_cover_add_style' );
  203.     // add_action('quick_edit_custom_box', 'cat_quick_edit_custom_box', 10, 3);
  204.     add_filter("attribute_escape", "cat_change_insert_button_text", 10, 2);
  205. }
  206. // term_id显示分类图像
  207. function cat_taxonomy_cover($term_id = NULL, $size = 'full', $attr = NULL, $echo = TRUE) {
  208.     if (!$term_id) {
  209.         if (is_category())
  210.             $term_id = get_query_var('cat');
  211.         elseif (is_tag())
  212.             $term_id = get_query_var('tag_id');
  213.         elseif (is_tax()) {
  214.             $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
  215.             $term_id = $current_term->term_id;
  216.         }
  217.     }
  218.     $taxonomy_cover_url = get_option('cat_taxonomy_cover'.$term_id);
  219.     if(!emptyempty($taxonomy_cover_url)) {
  220.         $attachment_id = cat_get_attachment_id_by_url($taxonomy_cover_url);
  221.         if(!emptyempty($attachment_id))
  222.             $taxonomy_cover = wp_get_attachment_cover($attachment_id, $size, FALSE, $attr);
  223.         else {
  224.             $cover_attr = '';
  225.             if(is_array($attr)) {
  226.                 if(!emptyempty($attr['class']))
  227.                     $cover_attr .= ' class="'.$attr['class'].'" ';
  228.                 if(!emptyempty($attr['alt']))
  229.                     $cover_attr .= ' alt="'.$attr['alt'].'" ';
  230.                 if(!emptyempty($attr['width']))
  231.                     $cover_attr .= ' width="'.$attr['width'].'" ';
  232.                 if(!emptyempty($attr['height']))
  233.                     $cover_attr .= ' height="'.$attr['height'].'" ';
  234.                 if(!emptyempty($attr['title']))
  235.                     $cover_attr .= ' title="'.$attr['title'].'" ';
  236.             }
  237.             $taxonomy_cover = '<img src="'.$taxonomy_cover_url.'" '.$cover_attr.'/>';
  238.         }
  239.     }
  240.     if ($echo)
  241.         echo $taxonomy_cover;
  242.     else
  243.         return $taxonomy_cover;
  244. }

然后：打开inc/options/begin-options.php文件，大约3712行的位置，找到代码

  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. );

在其下面（也可以在你喜欢的地方）添加

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

代码解释

  • 添加一个分类封面的选项，通过该选项控制分类目录和标签菜单下的分类封面设置功能显示与否
  • 默认情况下，该功能位于后台--外观--主题选项--基本设置中：

给begin主题添加分类封面模块和分类封面小工具

 

四、加载分类封面注册文件

打开inc/load.php文件，大约第10行的位置，找到代码

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

在其下面添加

  1. if (zm_get_option('cat_cover')) {require get_template_directory() . '/inc/cat-cover.php';}

代码解释

  • 当勾选分类封面选项时，加载上一步中的cat-cover.php注册文件

完成以上三个步骤后，就可以在后台左侧菜单中的分类目录和标签下看到新增的分类封面设置项了：

给begin主题添加分类封面模块和分类封面小工具

 

五、主题选项添加分类封面设置项

首先：打开inc/options/begin-options.php文件，大约256行的位置，找到代码

  1. $options[] = array(
  2.     'name' => '',
  3.     'desc' => '图片布局显示摘要',
  4.     'id' => 'hide_box',
  5.     'std' => '0',
  6.     'type' => 'checkbox'
  7. );

在其上面（也可以在你喜欢的位置）添加展开

  1. $options[] = array(
  2.     'name' => '首页分类封面',
  3.     'desc' => '显示',
  4.     'id' => 'cat_cover_home',
  5.     'class' => 'be_ico',
  6.     'std' => '0',
  7.     'type' => 'checkbox'
  8. );
  9. $options[] = array(
  10.     'name' => '',
  11.     'desc' => '首页杂志布局启用分类封面',
  12.     'id' => 'cat_cover_home_cms',
  13.     'class' => 'hidden',
  14.     'std' => '0',
  15.     'type' => 'checkbox'
  16. );
  17. $options[] = array(
  18.     'name' => '',
  19.     'desc' => '首页博客布局启用分类封面',
  20.     'id' => 'cat_cover_home_blog',
  21.     'class' => 'hidden',
  22.     'std' => '0',
  23.     'type' => 'checkbox'
  24. );
  25. $options[] = array(
  26.     'name' => '',
  27.     'desc' => '首页图片布局启用分类封面',
  28.     'id' => 'cat_cover_home_grid',
  29.     'class' => 'hidden',
  30.     'std' => '0',
  31.     'type' => 'checkbox'
  32. );
  33. $options[] = array(
  34.     'name' => '',
  35.     'desc' => '首页分类图片布局启用分类封面',
  36.     'id' => 'cat_cover_home_grid_cat',
  37.     'class' => 'hidden',
  38.     'std' => '0',
  39.     'type' => 'checkbox'
  40. );
  41. $options[] = array(
  42.     'name' => '',
  43.     'desc' => '杂志页面启用分类封面',
  44.     'id' => 'cat_cover_page_cms',
  45.     'class' => 'hidden',
  46.     'std' => '0',
  47.     'type' => 'checkbox'
  48. );
  49. $options[] = array(
  50.     'name' => '',
  51.     'desc' => '博客页面启用分类封面',
  52.     'id' => 'cat_cover_page_blog',
  53.     'class' => 'hidden',
  54.     'std' => '0',
  55.     'type' => 'checkbox'
  56. );
  57. $options[] = array(
  58.     'name' => '',
  59.     'desc' => '分类图片页面启用分类封面',
  60.     'id' => 'cat_cover_page_grid_cat',
  61.     'class' => 'hidden',
  62.     'std' => '0',
  63.     'type' => 'checkbox'
  64. );
  65. $options[] = array(
  66.     'name' => '',
  67.     'desc' => '调用标签',
  68.     'id' => 'cat_cover_tag',
  69.     'class' => 'hidden',
  70.     'std' => '0',
  71.     'type' => 'checkbox'
  72. );
  73. $options[] = array(
  74.     'name' => '',
  75.     'desc' => '排序：1',
  76.     'id' => 'cat_cover_s',
  77.     'class' => 'mini hidden',
  78.     'std' => '1',
  79.     'type' => 'text'
  80. );
  81. $options[] = array(
  82.     'name' => '',
  83.     'desc' => '输入分类或标签ID，多个ID用英文半角逗号","隔开',
  84.     'id' => 'cat_cover_id',
  85.     'class' => 'hidden',
  86.     'std' => '1,2',
  87.     'type' => 'text'
  88. );
  89. $options[] = array(
  90.     'name' => '分类ID对照',
  91.     'desc' => '<ul>'.$cats_id.'</ul>',
  92.     'id' => 'catid',
  93.     'class' => 'cat-cover-id hidden',
  94.     'type' => 'info'
  95. );
  96. $options[] = array(
  97.     'id' => 'clear'
  98. );

代码解释

  • 默认情况下，该选项为不启用状态，除显示选项外，其余选项均为隐藏状态。勾选显示选项后，显示其余选项
  • 默认情况下，该功能位于后台--外观--主题选项--首页设置中：

给begin主题添加分类封面模块和分类封面小工具

然后：打开inc/options/includes/themes-options.php文件，大约114行的位置，找到代码

  1. if (jQuery('#cms_top:checked').val() !== undefined) {
  2.     jQuery('#section-cms_top_s, #section-cms_top_n').show();
  3. }

在其下面（也可以在你喜欢的地方）添加

  1. jQuery('#cat_cover_home').click(function() {
  2.     jQuery('#section-cat_cover_home_cms, #section-cat_cover_home_blog, #section-cat_cover_home_grid, #section-cat_cover_home_grid_cat, #section-cat_cover_page_cms, #section-cat_cover_page_blog, #section-cat_cover_page_grid_cat, #section-cat_cover_tag, #section-cat_cover_s, #section-cat_cover_id, .cat-cover-id').fadeToggle(400);
  3. });
  5. if (jQuery('#cat_cover_home').val() !== undefined) {
  6.     jQuery('#section-cat_cover_home_cms, #section-cat_cover_home_blog, #section-cat_cover_home_grid, #section-cat_cover_home_grid_cat, #section-cat_cover_page_cms, #section-cat_cover_page_blog, #section-cat_cover_page_grid_cat, #section-cat_cover_tag, #section-cat_cover_s, #section-cat_cover_id, .cat-cover-id').show();
  7. }

代码解释

  • 用来控制主题选项--首页设置--首页分类封面模块中各设置项的显示与否

 

第三部分 前台添加分类封面模块文件、首页布局添加分类封面调用函数、页面添加分类封面调用函数

六、前台添加分类封面模块文件

在主题根目录下，新建一个名为cat-cover.php的文件，然后复制下面的代码到这个文件中展开

  1. <?php if ( (zm_get_option('cat_cover_home_cms') || zm_get_option('cat_cover_page_cms')) && zm_get_option('cat_cover_home_blog')=='' && zm_get_option('cat_cover_home_grid')=='' && zm_get_option('cat_cover_home_grid_cat')=='' && zm_get_option('cat_cover_page_blog')=='' && zm_get_option('cat_cover_page_grid_cat')=='' ) { ?>
  2.     <div class="cat-cover-box sort" name="<?php echo zm_get_option('cat_cover_s'); ?>">
  3. <?php } else { ?>
  4.     <div class="cat-cover-box">
  5. <?php } ?>
  6.     <?php if (zm_get_option('cat_cover_tag')) { ?>
  7.         <?php
  8.             $args=array( 'include' => zm_get_option('cat_cover_id') );
  9.             $tags = get_tags($args);
  10.             foreach ($tags as $tag) {
  11.                 $tagid = $tag->term_id;
  12.                 query_posts("tag_id=$tagid");
  13.         ?>
  14.         <div class="cover4x">
  15.             <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
  16.                 <div class="cat-cover-img">
  17.                     <figure class="cover-img">
  18.                         <a href="<?php echo get_tag_link($tagid);?>" rel="bookmark">
  19.                             <img src="<?php echo cat_cover_url(); ?>" alt="<?php echo $tag->name; ?>">
  20.                             <h4 class="cat-cover-title"><?php echo $tag->name; ?></h4>
  21.                         </a>
  22.                     </figure>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <?php } wp_reset_query(); ?>
  27.     <?php } else { ?>
  28.         <?php
  29.             $args=array( 'include' => zm_get_option('cat_cover_id') );
  30.             $cats = get_categories($args);
  31.             foreach ( $cats as $cat ) {
  32.                 query_posts( 'cat=' . $cat->cat_ID );
  33.         ?>
  34.         <div class="cover4x">
  35.             <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
  36.                 <div class="cat-cover-img">
  37.                     <figure class="cover-img">
  38.                         <a href="<?php echo get_category_link($cat->cat_ID);?>" rel="bookmark">
  39.                             <img src="<?php echo cat_cover_url(); ?>" alt="<?php single_cat_title(); ?>">
  40.                             <h4 class="cat-cover-title"><?php echo $cat->cat_name; ?></h4>
  41.                         </a>
  42.                     </figure>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <?php } wp_reset_query(); ?>
  47.     <?php } ?>
  48.     <div class="clear"></div>
  49. </div>

代码解释

  • 第1~5条语句：通过if语句判断是否调用自定义排序
  • 第6~47条语句：通过if语句判断调用标签ID还是分类ID

 

七、首页布局添加分类封面调用函数

截止目前，首页共有五种布局方式，除公司主页布局方式外，其余四种布局方式已集成分类封面功能。对应的操作分别如下：

  • 首页杂志布局

打开template/cms.php文件，大约第21行的位置，找到代码

  1. get_template_part( '/cms/cms-top' );

在其下面添加

  1. if ( zm_get_option('cat_cover') && zm_get_option('cat_cover_home') && zm_get_option('cat_cover_home_cms') && !is_paged() ) {
  2. require get_template_directory() . '/cat-cover.php';
  3. }
  • 首页博客布局

打开template/blog.php文件，大约第14行的位置，找到代码

  1. <?php if (zm_get_option('cms_top')) { ?>
  2. <?php
  3. if ( !is_paged() ) :
  4. get_template_part( 'template/b-top' );
  5. endif;
  6. ?>
  7. <?php } ?>

在其下面添加

  1. <?php
  2. if ( zm_get_option('cat_cover') && zm_get_option('cat_cover_home') && zm_get_option('cat_cover_home_blog') && !is_paged() ) {
  3. require get_template_directory() . '/cat-cover.php';
  4. }
  5. ?>
  • 首页图片布局

打开template/grid.php文件，大约第11行的位置，找到代码

  1. <?php if (zm_get_option('cms_top')) { ?>
  2. <?php
  3. if ( !is_paged() ) :
  4. get_template_part( 'template/img-top' );
  5. endif;
  6. ?>
  7. <?php } ?>

在其下面添加

  1. <?php
  2. if ( zm_get_option('cat_cover') && zm_get_option('cat_cover_home') && zm_get_option('cat_cover_home_grid') ) {
  3. require get_template_directory() . '/cat-cover.php';
  4. }
  5. ?>
  • 首页分类图片布局

打开template/grid-cat.php文件，大约第6行的位置，找到代码

  1. <?php if (zm_get_option('slider')) { ?>
  2. <?php
  3. if ( !is_paged() ) :
  4. get_template_part( 'template/slider' );
  5. endif;
  6. ?>
  7. <?php } ?>

在其下面添加

  1. <?php
  2. if ( zm_get_option('cat_cover') && zm_get_option('cat_cover_home') && zm_get_option('cat_cover_home_grid_cat') ) {
  3. require get_template_directory() . '/cat-cover.php';
  4. }
  5. ?>

 

八、页面添加分类封面调用函数

主要针对杂志页面、博客页面和分类图片页面添加分类封面调用函数，具体如下：

  • 杂志页面

打开pages/template-cms.php文件，大约20行的位置，找到代码

  1. // 置顶
  2. get_template_part( '/cms/cms-top' );

在其下面添加

  1. //分类封面
  2. if ( zm_get_option('cat_cover') && zm_get_option('cat_cover_home') && zm_get_option('cat_cover_page_cms') ) {
  3. require get_template_directory() . '/cat-cover.php';
  4. }
  • 博客页面

打开pages/template-blog.php文件，大约10行的位置，找到代码

  1. <?php if (zm_get_option('slider')) { ?>
  2. <?php
  3. if ( !is_paged() ) :
  4. get_template_part( 'template/slider' );
  5. endif;
  6. ?>
  7. <?php } ?>

在其下面添加

  1. <?php
  2. if ( zm_get_option('cat_cover') && zm_get_option('cat_cover_home') && zm_get_option('cat_cover_page_blog') ) {
  3. require get_template_directory() . '/cat-cover.php';
  4. }
  5. ?>
  • 分类图片页面

打开pages/template-grid-cat.php文件，大约第9行的位置，找到代码

  1. <?php if (zm_get_option('slider')) { ?>
  2. <?php
  3. if ( !is_paged() ) :
  4. get_template_part( 'template/slider' );
  5. endif;
  6. ?>
  7. <?php } ?>

在其下面添加

  1. <?php
  2. if ( zm_get_option('cat_cover') && zm_get_option('cat_cover_home') && zm_get_option('cat_cover_page_grid_cat') ) {
  3. require get_template_directory() . '/cat-cover.php';
  4. }
  5. ?>

 

第四部分 增加分类封面页面、侧边栏添加分类封面小工具、添加分类封面样式

九、增加分类封面页面

在pages/目录下新建一个名为template-cover.php的文件，然后复制下面的代码到这个文件中展开

  1. <?php
  2. /*
  3. Template Name: 分类封面
  4. */
  5. ?>
  6. <?php get_header(); ?>
  8. <section id="primary-cover" class="content-area">
  9. <main id="main" class="site-main" role="main">
  10. <?php if (zm_get_option('cat_cover')) { ?>
  11. <div class="cat-cover-box">
  12. <?php
  13. $cats = get_categories();
  14. foreach ( $cats as $cat ) {
  15. query_posts( '&cat=' . $cat->cat_ID );
  16. ?>
  17. <div class="cover4x">
  18. <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
  19. <div class="cat-cover-img">
  20. <figure class="cover-img">
  21. <a href="<?php echo get_category_link($cat->cat_ID);?>" rel="bookmark">
  22. <img src="<?php echo cat_cover_url(); ?>" alt="<?php single_cat_title(); ?>">
  23. <h4 class="cat-cover-title"><?php single_cat_title(); ?></h4>
  24. </a>
  25. </figure>
  26. </div>
  27. </div>
  28. </div>
  29. <?php } ?>
  30. <div class="clear"></div>
  31. </div>
  32. <?php } ?>
  33. </main>
  34. <div class="clear"></div>
  35. </section>
  37. <?php get_footer(); ?>

 

十、侧边栏添加分类封面小工具

打开inc/widgets.php文件，在文件的最后（也可以在适当位置）添加代码展开

  1. // 分类封面
  2. class widget_cover extends WP_Widget {
  3. public function __construct() {
  4. $widget_ops = array(
  5. 'classname' => 'widget_cover',
  6. 'description' => __( '以图片封面形式显示分类' ),
  7. 'customize_selective_refresh' => true,
  8. );
  9. parent::__construct('widget_cover', '分类封面', $widget_ops);
  10. }
  12. public function zm_defaults() {
  13. return array(
  14. 'show_tags' => 0,
  15. );
  16. }
  18. function widget($args, $instance) {
  19. extract($args);
  20. $defaults = $this -> zm_defaults();
  21. $instance = wp_parse_args( (array) $instance, $defaults );
  22. $title = apply_filters( 'widget_title', $instance['title'] );
  23. echo $before_widget;
  24. if ( ! emptyempty( $title ) )
  25. echo $before_title . $title . $after_title;
  26. $postid = $instance['cat_id'];
  27. ?>
  29. <div class="widget-cat-cover">
  30. <?php if($instance['show_tags']) { ?>
  31. <?php
  32. $args=array( 'include' => $instance['cat_id'] );
  33. $tags = get_tags($args);
  34. foreach ($tags as $tag) {
  35. $tagid = $tag->term_id;
  36. query_posts("tag_id=$tagid");
  37. ?>
  38. <div class="cover4x">
  39. <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
  40. <div class="cat-cover-img">
  41. <figure class="cover-img">
  42. <a href="<?php echo get_tag_link($tagid);?>" rel="bookmark">
  43. <img src="<?php echo cat_cover_url(); ?>" alt="<?php echo $tag->name; ?>">
  44. <h4 class="cat-cover-title"><?php echo $tag->name; ?></h4>
  45. </a>
  46. </figure>
  47. </div>
  48. </div>
  49. </div>
  50. <?php } wp_reset_query(); ?>
  51. <?php } else { ?>
  52. <?php
  53. $args=array( 'include' => $instance['cat_id'] );
  54. $cats = get_categories($args);
  55. foreach ( $cats as $cat ) {
  56. query_posts( 'cat=' . $cat->cat_ID );
  57. ?>
  58. <div class="cover4x">
  59. <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
  60. <div class="cat-cover-img">
  61. <figure class="cover-img">
  62. <a href="<?php echo get_category_link($cat->cat_ID);?>" rel="bookmark">
  63. <img src="<?php echo cat_cover_url(); ?>" alt="<?php echo $cat->cat_name; ?>">
  64. <h4 class="cat-cover-title"><?php echo $cat->cat_name; ?></h4>
  65. </a>
  66. </figure>
  67. </div>
  68. </div>
  69. </div>
  70. <?php } wp_reset_query(); ?>
  71. <?php } ?>
  72. </div>
  74. <?php
  75. echo $after_widget;
  76. }
  77. function update( $new_instance, $old_instance ) {
  78. if (!isset($new_instance['submit'])) {
  79. return false;
  80. }
  81. $instance = $old_instance;
  82. $instance = array();
  83. $instance['show_tags'] = $new_instance['show_tags']?1:0;
  84. $instance['title'] = strip_tags( $new_instance['title'] );
  85. $instance['cat_id'] = strip_tags($new_instance['cat_id']);
  86. return $instance;
  87. }
  88. function form($instance) {
  89. $defaults = $this -> zm_defaults();
  90. $instance = wp_parse_args( (array) $instance, $defaults );
  91. if ( isset( $instance[ 'title' ] ) ) {
  92. $title = $instance[ 'title' ];
  93. }
  94. else {
  95. $title = '分类封面';
  96. }
  97. global $wpdb;
  98. ?>
  99. <p>
  100. <label for="<?php echo $this->get_field_id( 'title' ); ?>">标题：</label>
  101. <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
  102. </p>
  103. <p>
  104. <input type="checkbox" class="checkbox" id="<?php echo esc_attr( $this->get_field_id('show_tags') ); ?>" name="<?php echo esc_attr( $this->get_field_name('show_tags') ); ?>" <?php checked( (bool) $instance["show_tags"], true ); ?>>
  105. <label for="<?php echo esc_attr( $this->get_field_id('show_tags') ); ?>">调用标签</label>
  106. </p>
  107. <p>
  108. <label for="<?php echo $this->get_field_id( 'cat_id' ); ?>">输入分类或标签ID：</label>
  109. <textarea style="height:80px;" class="widefat" id="<?php echo $this->get_field_id( 'cat_id' ); ?>" name="<?php echo $this->get_field_name( 'cat_id' ); ?>"><?php echo stripslashes(htmlspecialchars(( $instance['cat_id'] ), ENT_QUOTES)); ?></textarea>
  110. </p>
  111. <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
  112. <?php }
  113. }
  114. if (zm_get_option('cat_cover')) {
  115. add_action( 'widgets_init', create_function( '', 'register_widget( "widget_cover" );' ) );
  116. }

 

十一、添加分类封面样式

打开style.css文件，在文件的最后（建议，但也可以在适当位置）添加代码展开

  1. /*cat-cover*/
  2. .cat-cover-box, #cms-widget-one .widget-cat-cover {
  3.     margin: 0 -5px;
  4. }
  6. #cms-widget-one .widget_cover {
  7.     background: transparent;
  8.     margin: 0;
  9.     border: none;
  10.     box-shadow: none;;
  11. }
  13. #cms-widget-one .widget_cover .cat-cover-main {
  14.     border: 1px solid #ddd;
  15.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  16. }
  18. .cover4x {
  19.     position: relative;
  20.     float: left;
  21.     width: 25%;
  22.     padding: 0 5px;
  23.     transition-duration: .5s;
  24. }
  26. .widget-area .cover4x {
  27.     width: 50%;
  28.     margin: 0;
  29.     padding: 0;
  30. }
  32. .footer-widget .cover4x {
  33.     width: 25%;
  34.     padding: 0;
  35. }
  37. .cat-cover-main {
  38.     margin: 0 0 10px 0;
  39.     overflow: hidden;
  40.     border-radius: 2px;
  41. }
  43. .widget .cat-cover-main {
  44.     margin: 0;
  45.     border-radius: 0;
  46. }
  48. .cover-img img {
  49.     position: relative;
  50.     float: left;
  51.     max-width: 100%;
  52.     width: 100%;
  53.     height: auto;
  54.     z-index: 2;
  55. }
  57. .cat-cover-main h4 {
  58.     position: absolute;
  59.     bottombottom: 0;
  60.     left: 0;
  61.     width: 100%;
  62.     color: #fff;
  63.     text-align: center;
  64.     line-height: 35px;
  65.     background: rgba(0,0,0,.5);
  66.     z-index: 4;
  67.     display: none;
  68. }
  70. @media screen and (max-width: 800px) {
  71.     .cover4x {
  72.         width: 50%;
  73.     }
  75.     .cat-cover-box {
  76.         margin: 0 -4px;
  77.     }
  78. }
  80. @media screen and (max-width: 358px) {
  81.     .cover4x {
  82.         width: 100%;
  83.     }
  84. }
  86. .cat-cover-main h4 {
  87.     transition:All 0.8s ease-in-out;
  88. }
  90. .cat-cover-main:hover h4{
  91.     display: block;
  92. }

 

第五部分 分类封面功能的基本操作步骤、侧边栏分类封面小工具的使用方法、分类封面页面的使用方法

不管是首页布局、页面、侧边栏小工具还是分类封面页面中使用分类封面功能，必须先启用后台--外观--主题选项--基本设置中的分类封面选项。只有启用这个选项后，才能正常使用分类封面功能。

十二、分类封面功能的基本操作步骤

  1. 分类目录（或标签）下添加分类封面图片
  2. 后台--外观--主题选项--首页设置--首页分类封面中勾选显示选项
  3. 根据需要勾选要启用分类封面功能对应的布局或页面选项
  4. 根据需要启用（或不启用）调用标签选项
  5. 输入想要显示分类封面的分类ID或标签ID
  6. 保存主题选项

 

十三、侧边栏分类封面小工具的使用方法

  1. 进入后台--外观--小工具
  2. 在需要添加分类封面小工具的侧边栏中添加该小工具
  3. 根据需要设置小工具标题和调用标签选项
  4. 输入分类或标签ID中添加分类ID或标签ID
  5. 保存

 

十四、分类封面页面的使用方法

  1. 进入后台--页面菜单
  2. 新建一个页面，根据个人需要设置页面标题
  3. 页面属性--模板中选择分类封面
  4. 发布

 

第六部分 分类封面图片的制作技巧、其他说明

十五、分类封面图片的制作技巧

  • 图片尺寸不宜过大，各分类封面图片尺寸必须一致，建议图片尺寸与标准缩略图尺寸保持一致
  • 标准缩略图尺寸可在主题选项--基本设置--缩略图自动裁剪设置中查看
  • 若你想要的分类封面图片像效果预览中那样（背景和前景合成，非纯粹的图片），那么建议你先单独制作一张样片，在本地测试一下显示效果（背景与前景的比例是否协调），若合理再批量制作。同时，尽量保持前景图片尺寸一致，中心对称

 

十六、其他说明

  • 若要使用分类封面功能，必须首先启用主题选项--基本设置--分类封面选项，并在分类目录或标签下设置好分类封面图片
  • 主题选项--首页设置--首页分类封面中的各个布局/页面选项都是独立的，可根据需要单独启用或不启用某个布局/页面选项
  • 若勾选调用标签选项，则不会调用分类ID，即使你在输入分类ID中输入了分类ID（侧边栏小工具中同理）
  • 分类封面功能仅支持内置文章类型下的分类目录和标签调用，不支持自定义文章类型下的分类目录和标签的调用
  • 若彻底不需要某个布局或页面中的分类封面功能，可不添加对应的分类封面调用函数。同时，也可以注释或删除掉begin-options.php和themes-options.php中对应的代码和选项ID
  • 若想在其他页面使用分类封面功能，可按照上面的方法，先在begin-options.php和themes-options.php中添加启用选项代码和选项ID，然后在对应的页面文件中添加调用函数

 

以上就是本文的完整内容，感谢您的阅读！

发表评论

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