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

2019年2月14日00:13:28 2 686 22032字阅读73分26秒
摘 要

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

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

一、效果预览

[mark_c]

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

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

[/mark_c]

 

二、功能介绍

定义

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

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

功能

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

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

 

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

三、注册分类封面设置项

首先：在【inc/】目录下，新建一个名为【cat-cover.php】的文件

然后：复制下面的代码到这个文件中展开

<?php
define('ZM_IMAGE_PLACEHOLDER', get_template_directory_uri()."/img/placeholder.png");
add_action('admin_init', 'cat_cover_init');
function cat_cover_init() {
    $cat_taxonomies = get_taxonomies();
    if (is_array($cat_taxonomies)) {
        foreach ($cat_taxonomies as $cat_taxonomy) {
            add_action($cat_taxonomy.'_add_form_fields', 'cat_add_texonomy_field');
            add_action($cat_taxonomy.'_edit_form_fields', 'cat_edit_texonomy_field');
            add_filter( 'manage_edit-' . $cat_taxonomy . '_columns', 'cat_taxonomy_columns' );
            add_filter( 'manage_' . $cat_taxonomy . '_custom_column', 'cat_taxonomy_column', 10, 3 );
        }
    }
}

function cat_cover_add_style() {
    echo '<style type="text/css" media="screen">
        th.column-thumb_cover {width:60px;}
        .form-field img.taxonomy-cover {border:1px solid #eee;max-width:150px;max-height:150px;}
        .inline-edit-row fieldset .thumb_cover label span.title {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
        .column-thumb_cover span {width:48px;height:48px;display:inline-block;}
        .inline-edit-row fieldset .thumb_cover img,.column-thumb_cover img {width:48px;height:48px;}
    </style>';
}

// 添加图片字段表单
function cat_add_texonomy_field() {
    if (get_bloginfo('version') >= 3.5)
        wp_enqueue_media();
    else {
        wp_enqueue_style('thickbox');
        wp_enqueue_script('thickbox');
    }
    echo '<div class="form-field">
        <label for="taxonomy_cover">' . __('分类封面', 'begin') . '</label>
        <input type="text" name="taxonomy_cover" id="taxonomy_cover" value="" />
        <br/>
        <button class="cat_upload_cover_button button">' . __('添加封面', 'begin') . '</button>
    </div>'.cat_script();
}

// 在分类编辑添加图片字段表单
function cat_edit_texonomy_field($taxonomy) {
    if (get_bloginfo('version') >= 3.5)
        wp_enqueue_media();
    else {
        wp_enqueue_style('thickbox');
        wp_enqueue_script('thickbox');
    }
    if (cat_cover_url( $taxonomy->term_id, NULL, TRUE ) == ZM_IMAGE_PLACEHOLDER)
        $cover_url = "";
    else
        $cover_url = cat_cover_url( $taxonomy->term_id, NULL, TRUE );
    echo '<tr class="form-field">
        <th scope="row" valign="top"><label for="taxonomy_cover">' . __('分类封面', 'begin') . '</label></th>
        <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 />
        <button class="cat_upload_cover_button button">' . __('添加封面', 'begin') . '</button>
        <button class="cat_remove_cover_button button">' . __('删除封面', 'begin') . '</button>
        </td>
    </tr>'.cat_script();
}

// 使用wordpress
function cat_script() {
    return '<script type="text/javascript">
        jQuery(document).ready(function($) {
            var wordpress_ver = "'.get_bloginfo("version").'", upload_button;
            $(".cat_upload_cover_button").click(function(event) {
                upload_button = $(this);
                var frame;
                if (wordpress_ver >= "3.5") {
                    event.preventDefault();
                    if (frame) {
                        frame.open();
                        return;
                    }
                    frame = wp.media();
                    frame.on( "select", function() {
                        // Grab the selected attachment.
                        var attachment = frame.state().get("selection").first();
                        frame.close();
                        if (upload_button.parent().prev().children().hasClass("tax_list")) {
                            upload_button.parent().prev().children().val(attachment.attributes.url);
                            upload_button.parent().prev().prev().children().attr("src", attachment.attributes.url);
                        }
                        else
                            $("#taxonomy_cover").val(attachment.attributes.url);
                    });
                    frame.open();
                }
                else {
                    tb_show("", "media-upload.php?type=cover&amp;TB_iframe=true");
                    return false;
                }
            });
            $(".cat_remove_cover_button").click(function() {
                $(".taxonomy-cover").attr("src", "'.ZM_IMAGE_PLACEHOLDER.'");
                $("#taxonomy_cover").val("");
                $(this).parent().siblings(".title").children("img").attr("src","' . ZM_IMAGE_PLACEHOLDER . '");
                $(".inline-edit-col :input[name=\'taxonomy_cover\']").val("");
                return false;
            });
            if (wordpress_ver < "3.5") {
                window.send_to_editor = function(html) {
                    imgurl = $("img",html).attr("src");
                    if (upload_button.parent().prev().children().hasClass("tax_list")) {
                        upload_button.parent().prev().children().val(imgurl);
                        upload_button.parent().prev().prev().children().attr("src", imgurl);
                    }
                    else
                        $("#taxonomy_cover").val(imgurl);
                    tb_remove();
                }
            }
            $(".editinline").click(function() {
                var tax_id = $(this).parents("tr").attr("id").substr(4);
                var thumb_cover = $("#tag-"+tax_id+" .thumb_cover img").attr("src");
                if (thumb_cover != "' . ZM_IMAGE_PLACEHOLDER . '") {
                    $(".inline-edit-col :input[name=\'taxonomy_cover\']").val(thumb_cover);
                } else {
                    $(".inline-edit-col :input[name=\'taxonomy_cover\']").val("");
                }
                $(".inline-edit-col .title img").attr("src",thumb_cover);
            });
        });
    </script>';
}

// 保存分类图像
add_action('edit_term','cat_save_taxonomy_cover');
add_action('create_term','cat_save_taxonomy_cover');
function cat_save_taxonomy_cover($term_id) {
    if(isset($_POST['taxonomy_cover']))
        update_option('cat_taxonomy_cover'.$term_id, $_POST['taxonomy_cover'], NULL);
}

// 获取图像网址
function cat_get_attachment_id_by_url($cover_src) {
    global $wpdb;
    $query = $wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid = %s", $cover_src);
    $id = $wpdb->get_var($query);
    return (!emptyempty($id)) ? $id : NULL;
}

// 获取指定term_id分类封面图片
function cat_cover_url($term_id = NULL, $size = 'full', $return_placeholder = FALSE) {
    if (!$term_id) {
        if (is_category())
            $term_id = get_query_var('cat');
        elseif (is_tag())
            $term_id = get_query_var('tag_id');
        elseif (is_tax()) {
            $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
            $term_id = $current_term->term_id;
        }
    }
    $taxonomy_cover_url = get_option('cat_taxonomy_cover'.$term_id);
    if(!emptyempty($taxonomy_cover_url)) {
        $attachment_id = cat_get_attachment_id_by_url($taxonomy_cover_url);
        if(!emptyempty($attachment_id)) {
        $taxonomy_cover_url = wp_get_attachment_image_src($attachment_id, $size);
        $taxonomy_cover_url = $taxonomy_cover_url[0];
        }
    }
    if ($return_placeholder)
        return ($taxonomy_cover_url != '') ? $taxonomy_cover_url : ZM_IMAGE_PLACEHOLDER;
    else
        return $taxonomy_cover_url;
}

// 分类快速编辑添加图片表单
function cat_quick_edit_custom_box($column_name, $screen, $name) {
    if ($column_name == 'thumb_cover')
        echo '<fieldset>
        <div class="thumb inline-edit-col">
            <label>
                <span class="title"><img src="" alt="Thumbnail"/></span>
                <span class="input-text-wrap"><input type="text" name="taxonomy_cover" value="" class="tax_list" /></span>
                <span class="input-text-wrap">
                    <button class="cat_upload_cover_button button">' . __('添加封面', 'begin') . '</button>
                    <button class="cat_remove_cover_button button">' . __('删除封面', 'begin') . '</button>
                </span>
            </label>
        </div>
    </fieldset>';
}

// 在分类列表管理添加缩略图
function cat_taxonomy_columns( $columns ) {
    $new_columns = array();
    $new_columns['cb'] = $columns['cb'];
    $new_columns['thumb_cover'] = __('分类封面', 'categories-covers');
    unset( $columns['cb'] );
    return array_merge( $new_columns, $columns );
}

// 缩略图列值添加到类别管理
function cat_taxonomy_column( $columns, $column, $id ) {
    if ( $column == 'thumb_cover' )
        $columns = '<span><img src="' . cat_cover_url($id, 'thumbnail', TRUE) . '" alt="' . __('Thumbnail', 'begin') . '" class="wp-post-cover" /></span>';
    return $columns;
}

// 更改“插入到”到“使用此图像”
function cat_change_insert_button_text($safe_text, $text) {
    return str_replace("Insert into Post", "Use this cover", $text);
}

// 列表中图像添加样式
if (strpos( $_SERVER['SCRIPT_NAME'], 'term.php' ) > 0 ) {
    add_action( 'admin_head', 'cat_cover_add_style' );
}

if ( strpos( $_SERVER['SCRIPT_NAME'], 'edit-tags.php' ) > 0 ) {
    add_action( 'admin_head', 'cat_cover_add_style' );
    // add_action('quick_edit_custom_box', 'cat_quick_edit_custom_box', 10, 3);
    add_filter("attribute_escape", "cat_change_insert_button_text", 10, 2);
}

// term_id显示分类图像
function cat_taxonomy_cover($term_id = NULL, $size = 'full', $attr = NULL, $echo = TRUE) {
    if (!$term_id) {
        if (is_category())
            $term_id = get_query_var('cat');
        elseif (is_tag())
            $term_id = get_query_var('tag_id');
        elseif (is_tax()) {
            $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
            $term_id = $current_term->term_id;
        }
    }
    $taxonomy_cover_url = get_option('cat_taxonomy_cover'.$term_id);
    if(!emptyempty($taxonomy_cover_url)) {
        $attachment_id = cat_get_attachment_id_by_url($taxonomy_cover_url);
        if(!emptyempty($attachment_id))
            $taxonomy_cover = wp_get_attachment_cover($attachment_id, $size, FALSE, $attr);
        else {
            $cover_attr = '';
            if(is_array($attr)) {
                if(!emptyempty($attr['class']))
                    $cover_attr .= ' class="'.$attr['class'].'" ';
                if(!emptyempty($attr['alt']))
                    $cover_attr .= ' alt="'.$attr['alt'].'" ';
                if(!emptyempty($attr['width']))
                    $cover_attr .= ' width="'.$attr['width'].'" ';
                if(!emptyempty($attr['height']))
                    $cover_attr .= ' height="'.$attr['height'].'" ';
                if(!emptyempty($attr['title']))
                    $cover_attr .= ' title="'.$attr['title'].'" ';
            }
            $taxonomy_cover = '<img src="'.$taxonomy_cover_url.'" '.$cover_attr.'/>';
        }
    }
    if ($echo)
        echo $taxonomy_cover;
    else
        return $taxonomy_cover;
}

最后：打开【inc/options/begin-options.php】文件，找到代码

$options[] = array(
    'name' => '',
    'desc' => '分类图标',
    'id' => 'cat_icon',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'id' => 'clear'
);

在其下面添加

$options[] = array(
    'name' => '',
    'desc' => '分类封面',
    'id' => 'cat_cover',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'id' => 'clear'
);

默认情况下，该功能位于【主题选项--基本设置】中。

 

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

打开【inc/load.php】文件，找到代码

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

在其下面添加

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

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

 

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

首先：打开【inc/options/begin-options.php】文件，找到代码

$options[] = array(
    'name' => '',
    'desc' => '图片布局显示摘要',
    'id' => 'hide_box',
    'std' => '0',
    'type' => 'checkbox'
);

在其上面添加展开

$options[] = array(
    'name' => '首页分类封面',
    'desc' => '显示',
    'id' => 'cat_cover_home',
    'class' => 'be_ico',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '首页杂志布局启用分类封面',
    'id' => 'cat_cover_home_cms',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '首页博客布局启用分类封面',
    'id' => 'cat_cover_home_blog',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '首页图片布局启用分类封面',
    'id' => 'cat_cover_home_grid',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '首页分类图片布局启用分类封面',
    'id' => 'cat_cover_home_grid_cat',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '杂志页面启用分类封面',
    'id' => 'cat_cover_page_cms',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '博客页面启用分类封面',
    'id' => 'cat_cover_page_blog',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '分类图片页面启用分类封面',
    'id' => 'cat_cover_page_grid_cat',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '调用标签',
    'id' => 'cat_cover_tag',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '排序：1',
    'id' => 'cat_cover_s',
    'class' => 'mini hidden',
    'std' => '1',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '输入分类或标签ID，多个ID用英文半角逗号","隔开',
    'id' => 'cat_cover_id',
    'class' => 'hidden',
    'std' => '1,2',
    'type' => 'text'
);

$options[] = array(
    'name' => '分类ID对照',
    'desc' => '<ul>'.$cats_id.'</ul>',
    'id' => 'catid',
    'class' => 'cat-cover-id hidden',
    'type' => 'info'
);

$options[] = array(
    'id' => 'clear'
);

默认情况下，该功能位于【主题选项--首页设置】中。

然后：打开【inc/options/includes/themes-options.php】文件，找到代码

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

在其下面添加

jQuery('#cat_cover_home').click(function() {
    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);
});

if (jQuery('#cat_cover_home').val() !== undefined) {
    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();
}

 

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

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

首先：在主题根目录下新建一个名为【cat-cover.php】的文件

然后：复制下面的代码到这个文件中展开

<?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')=='' ) { ?>
    <div class="cat-cover-box sort" name="<?php echo zm_get_option('cat_cover_s'); ?>">
<?php } else { ?>
    <div class="cat-cover-box">
<?php } ?>
        <?php if (zm_get_option('cat_cover_tag')) { ?>
            <?php
                $args=array( 'include' => zm_get_option('cat_cover_id') );
                $tags = get_tags($args);
                foreach ($tags as $tag) {
                    $tagid = $tag->term_id;
                    query_posts("tag_id=$tagid");
            ?>
            <div class="cover4x">
                <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
                    <div class="cat-cover-img">
                        <figure class="cover-img">
                            <a href="<?php echo get_tag_link($tagid);?>" rel="bookmark">
                                <img src="<?php echo cat_cover_url(); ?>" alt="<?php echo $tag->name; ?>">
                                <h4 class="cat-cover-title"><?php echo $tag->name; ?></h4>
                            </a>
                        </figure>
                    </div>
                </div>
            </div>
            <?php } wp_reset_query(); ?>
        <?php } else { ?>
            <?php
                $args=array( 'include' => zm_get_option('cat_cover_id') );
                $cats = get_categories($args);
                foreach ( $cats as $cat ) {
                    query_posts( 'cat=' . $cat->cat_ID );
            ?>
            <div class="cover4x">
                <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
                    <div class="cat-cover-img">
                        <figure class="cover-img">
                            <a href="<?php echo get_category_link($cat->cat_ID);?>" rel="bookmark">
                                <img src="<?php echo cat_cover_url(); ?>" alt="<?php single_cat_title(); ?>">
                                <h4 class="cat-cover-title"><?php echo $cat->cat_name; ?></h4>
                            </a>
                        </figure>
                    </div>
                </div>
            </div>
            <?php } wp_reset_query(); ?>
        <?php } ?>
        <div class="clear"></div>
    </div>

 

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

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

  • 首页杂志布局

打开【template/cms.php】文件，找到代码

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

在其下面添加

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

打开【template/blog.php】文件，找到代码

<?php if (zm_get_option('cms_top')) { ?>
    <?php
        if ( !is_paged() ) :
            get_template_part( 'template/b-top' );
        endif;
    ?>
<?php } ?>

在其下面添加

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

打开【template/grid.php】文件，找到代码

<?php if (zm_get_option('cms_top')) { ?>
    <?php
        if ( !is_paged() ) :
            get_template_part( 'template/img-top' );
        endif;
    ?>
<?php } ?>

在其下面添加

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

打开【template/grid-cat.php】文件，找到代码

<?php if (zm_get_option('slider')) { ?>
    <?php
        if ( !is_paged() ) :
            get_template_part( 'template/slider' );
        endif;
    ?>
<?php } ?>

在其下面添加

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

 

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

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

  • 杂志页面

打开【pages/template-cms.php】文件，找到代码

// 置顶
get_template_part( '/cms/cms-top' );

在其下面添加

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

打开【pages/template-blog.php】文件，找到代码

<?php if (zm_get_option('slider')) { ?>
    <?php
        if ( !is_paged() ) :
            get_template_part( 'template/slider' );
        endif;
    ?>
<?php } ?>

在其下面添加

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

打开【pages/template-grid-cat.php】文件，找到代码

<?php if (zm_get_option('slider')) { ?>
    <?php
        if ( !is_paged() ) :
            get_template_part( 'template/slider' );
        endif;
    ?>
<?php } ?>

在其下面添加

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

 

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

九、增加分类封面页面

首先：在【pages/】目录下新建一个名为【template-cover.php】的文件

然后：复制下面的代码到这个文件中展开

<?php
/*
Template Name: 分类封面
*/
?>
<?php get_header(); ?>
<section id="primary-cover" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php if (zm_get_option('cat_cover')) { ?>
            <div class="cat-cover-box">
                <?php
                    $cats = get_categories();
                    foreach ( $cats as $cat ) {
                        query_posts( '&cat=' . $cat->cat_ID );
                ?>
                <div class="cover4x">
                    <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
                        <div class="cat-cover-img">
                            <figure class="cover-img">
                                <a href="<?php echo get_category_link($cat->cat_ID);?>" rel="bookmark">
                                    <img src="<?php echo cat_cover_url(); ?>" alt="<?php single_cat_title(); ?>">
                                    <h4 class="cat-cover-title"><?php single_cat_title(); ?></h4>
                                </a>
                            </figure>
                        </div>
                    </div>
                </div>
                <?php } ?>
                <div class="clear"></div>
            </div>
        <?php } ?>
    </main>
    <div class="clear"></div>
</section>
<?php get_footer(); ?>

 

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

打开【inc/widgets.php】文件，在文件最后添加代码展开

// 分类封面
class widget_cover extends WP_Widget {
    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_cover',
            'description' => __( '以图片封面形式显示分类' ),
            'customize_selective_refresh' => true,
        );
        parent::__construct('widget_cover', '分类封面', $widget_ops);
    }
    public function zm_defaults() {
        return array(
            'show_tags' => 0,
        );
    }
    function widget($args, $instance) {
        extract($args);
        $defaults = $this -> zm_defaults();
        $instance = wp_parse_args( (array) $instance, $defaults );
        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $before_widget;
        if ( ! emptyempty( $title ) )
            echo $before_title . $title . $after_title;
        $postid = $instance['cat_id'];
    ?>

<div class="widget-cat-cover">
    <?php if($instance['show_tags']) { ?>
        <?php
            $args=array( 'include' => $instance['cat_id'] );
            $tags = get_tags($args);
            foreach ($tags as $tag) {
                $tagid = $tag->term_id;
            query_posts("tag_id=$tagid");
        ?>
        <div class="cover4x">
            <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
                <div class="cat-cover-img">
                    <figure class="cover-img">
                        <a href="<?php echo get_tag_link($tagid);?>" rel="bookmark">
                            <img src="<?php echo cat_cover_url(); ?>" alt="<?php echo $tag->name; ?>">
                            <h4 class="cat-cover-title"><?php echo $tag->name; ?></h4>
                        </a>
                    </figure>
                </div>
            </div>
        </div>
        <?php } wp_reset_query(); ?>
    <?php } else { ?>
        <?php
            $args=array( 'include' => $instance['cat_id'] );
            $cats = get_categories($args);
            foreach ( $cats as $cat ) {
                query_posts( 'cat=' . $cat->cat_ID );
        ?>
        <div class="cover4x">
            <div class="cat-cover-main wow fadeInUp" data-wow-delay="0.3s">
                <div class="cat-cover-img">
                    <figure class="cover-img">
                        <a href="<?php echo get_category_link($cat->cat_ID);?>" rel="bookmark">
                            <img src="<?php echo cat_cover_url(); ?>" alt="<?php echo $cat->cat_name; ?>">
                            <h4 class="cat-cover-title"><?php echo $cat->cat_name; ?></h4>
                        </a>
                    </figure>
                </div>
            </div>
        </div>
    <?php } wp_reset_query(); ?>
    <?php } ?>
</div>

<?php
    echo $after_widget;
    }
    function update( $new_instance, $old_instance ) {
        if (!isset($new_instance['submit'])) {
            return false;
        }
        $instance = $old_instance;
        $instance = array();
        $instance['show_tags'] = $new_instance['show_tags']?1:0;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['cat_id'] = strip_tags($new_instance['cat_id']);
        return $instance;
    }
    function form($instance) {
        $defaults = $this -> zm_defaults();
        $instance = wp_parse_args( (array) $instance, $defaults );
        if ( isset( $instance[ 'title' ] ) ) {
            $title = $instance[ 'title' ];
        } else {
            $title = '分类封面';
        }
    global $wpdb;
?>

    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>">标题：</label>
        <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; ?>" />
    </p>
    <p>
        <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 ); ?>>
        <label for="<?php echo esc_attr( $this->get_field_id('show_tags') ); ?>">调用标签</label>
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'cat_id' ); ?>">输入分类或标签ID：</label>
        <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>
    </p>
    <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />

<?php }
}
if (zm_get_option('cat_cover')) {
    add_action( 'widgets_init', create_function( '', 'register_widget( "widget_cover" );' ) );
}

 

十一、添加分类封面样式

打开【style.css】文件，在文件最后添加展开

/*cat-cover*/
.cat-cover-box, #cms-widget-one .widget-cat-cover {
    margin: 0 -5px;
}

#cms-widget-one .widget_cover {
    background: transparent;
    margin: 0;
    border: none;
    box-shadow: none;;
}

#cms-widget-one .widget_cover .cat-cover-main {
    border: 1px solid #ddd;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.cover4x {
    position: relative;
    float: left;
    width: 25%;
    padding: 0 5px;
    transition-duration: .5s;
}

.widget-area .cover4x {
    width: 50%;
    margin: 0;
    padding: 0;
}

.footer-widget .cover4x {
    width: 25%;
    padding: 0;
}

.cat-cover-main {
    margin: 0 0 10px 0;
    overflow: hidden;
    border-radius: 2px;
}

.widget .cat-cover-main {
    margin: 0;
    border-radius: 0;
}

.cover-img img {
    position: relative;
    float: left;
    max-width: 100%;
    width: 100%;
    height: auto;
    z-index: 2;
}

.cat-cover-main h4 {
    position: absolute;
    bottombottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    line-height: 35px;
    background: rgba(0,0,0,.5);
    z-index: 4;
    display: none;
}

@media screen and (max-width: 800px) {
    .cover4x {
        width: 50%;
    }
    .cat-cover-box {
        margin: 0 -4px;
    }
}

@media screen and (max-width: 358px) {
    .cover4x {
        width: 100%;
    }
}

.cat-cover-main h4 {
    transition:All 0.8s ease-in-out;
}

.cat-cover-main:hover h4{
    display: block;
}

 

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

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

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

  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:

目前评论：2   其中：访客  2   博主  0
    • avatar 风继续吹 6
      2020年9月20日 16:16 1F
      回复

      C:\Users\Administrator\Desktop/qqq.png打勾前 C:\Users\Administrator\Desktop/eee.png打勾后反而隐藏了