第一部分 效果预览、功能介绍
一、效果预览
[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&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]
十二、分类封面功能的基本操作步骤
- 【分类目录】(或【标签】)下添加分类封面图片
- 【主题选项--首页设置--首页分类封面】中勾选【显示】选项
- 根据需要勾选要启用分类封面功能对应的布局或页面选项
- 根据需要启用【调用标签】选项
- 输入想要显示分类封面的分类ID或标签ID
- 保存主题选项
十三、侧边栏分类封面小工具的使用方法
- 进入【外观--小工具】
- 在需要添加分类封面小工具的侧边栏中添加该小工具
- 根据需要设置小工具标题和【调用标签】选项
- 【输入分类或标签ID】中添加分类ID或标签ID
- 保存
十四、分类封面页面的使用方法
- 进入【后台--页面】]菜单
- 新建一个页面,根据个人需要设置页面标题
- 【页面属性--模板】中选择【分类封面】
- 发布
第六部分 分类封面图片的制作技巧、其他说明
十五、分类封面图片的制作技巧
- 图片尺寸不宜过大,各分类封面图片尺寸必须一致,建议图片尺寸与标准缩略图尺寸保持一致
- 标准缩略图尺寸可在【主题选项--基本设置--缩略图自动裁剪设置】中查看
- 若你想要的分类封面图片像【效果预览】中那样,那么建议你先单独制作一张样片,在本地测试一下显示效果,若合理再批量制作。同时,尽量保持前景图片尺寸一致,中心对称
十六、其他说明
- 若要使用分类封面功能,必须首先启用【主题选项--基本设置--分类封面】选项,并在【分类目录】或【标签】下设置好分类封面图片
- 【主题选项--首页设置--首页分类封面】中的各个布局/页面选项都是独立的,可根据需要单独启用或不启用某个布局/页面选项
- 若勾选【调用标签】选项,则不会调用分类ID,即使你在【输入分类ID】中输入了分类ID(侧边栏小工具中同理)
- 分类封面功能仅支持内置文章类型下的分类目录和标签调用,不支持自定义文章类型下的分类目录和标签的调用
- 若彻底不需要某个布局或页面中的分类封面功能,可不添加对应的分类封面调用函数。同时,也可以注释或删除掉【begin-options.php】和【themes-options.php】中对应的代码和选项ID
- 若想在其他页面使用分类封面功能,可按照上面的方法,先在【begin-options.php】和【themes-options.php】中添加启用选项代码和选项ID,然后在对应的页面文件中添加调用函数
以上就是本文的完整内容,感谢您的阅读!