一、效果演示
二、后台添加功能选项
打开【inc/options/begin-options.php】文件,找到代码
$options[] = array( 'name' => '', 'desc' => '图片布局(可单独设置缩略图大小)', 'id' => 'cat_layout_grid', 'std' => '', 'type' => 'text' );
在其上面添加
$options[] = array( 'name' => '', 'desc' => '图片布局,有侧边栏', 'id' => 'cat_layout_img_s', 'class' => 'be_ico', 'std' => '', 'type' => 'text' );
添加代码后,可在【主题选项--基本设置--选择不同分类布局】中找到该功能。
三、添加布局文件
在主题根目录下新建一个名为【category-img-s.php】的文件,并复制下面的代码到该文件中
<?php /** * 分类图片布局,使用标准缩略图尺寸,有侧边栏 */ get_header(); ?> <section id="primary" class="content-area"> <div id="picture" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ((zm_get_option('no_child')) && is_category() ) { ?> <?php $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; query_posts(array('category__in' => array(get_query_var('cat')), 'paged' => $paged,)); ?> <?php } ?> <?php while ( have_posts() ) : the_post(); ?> <article class="picture wow fadeInUp" data-wow-delay="0.3s"> <div class="picture-box"> <figure class="picture-img"> <?php if (zm_get_option('hide_box')) { ?> <a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><div class="hide-box"></div></a> <a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><div class="hide-excerpt"><?php if (has_excerpt('')){ echo wp_trim_words( get_the_excerpt(), 62, '...' ); } else { echo wp_trim_words( get_the_content(), 72, '...' ); } ?></div></a> <?php } ?> <?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?> <?php if ( has_post_format('video') ) { ?><a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><i class="be be-play"></i></a><?php } ?> <?php if ( has_post_format('quote') ) { ?><div class="img-ico"><a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><i class="be be-display"></i></a></div><?php } ?> <?php if ( has_post_format('image') ) { ?><div class="img-ico"><a rel="bookmark" href="<?php echo esc_url( get_permalink() ); ?>"><i class="be be-picture"></i></a></div><?php } ?> </figure> <?php the_title( sprintf( '<h2 class="grid-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?> <span class="grid-inf"> <span class="g-cat"><i class="be be-folder"></i> <?php zm_category(); ?></span> <span class="grid-inf-l"> <span class="date"><i class="be be-schedule"></i> <?php the_time( 'm/d' ); ?></span> <?php if( function_exists( 'the_views' ) ) { the_views( true, '<span class="views"><i class="be be-eye"></i> ','</span>' ); } ?> <?php if ( get_post_meta($post->ID, 'zm_like', true) ) : ?><span class="grid-like"><span class="be be-thumbs-up-o"> <?php zm_get_current_count(); ?></span></span><?php endif; ?> </span> </span> <div class="clear"></div> </div> </article> <?php endwhile;?> </main><!-- .site-main --> <?php begin_pagenav(); ?> </div> </section><!-- .content-area --> <?php get_sidebar(); ?> <?php get_footer(); ?>
四、加载布局文件
打开主题根目录下的【archive.php】文件,在
if ( is_category(explode(',',zm_get_option('cat_layout_img')))) { get_template_part( 'category-img' ); }
下面添加
elseif ( is_category(explode(',',zm_get_option('cat_layout_img_s')))) { get_template_part( 'category-img-s' ); }
五、添加布局样式
打开主题根目录下的【style.css】文件,找到代码
.picture-h-img .be-play { position: absolute; bottom: 44%; left: 44%; font-size: 30px !important; color: #fff; text-shadow: 0px 1px 1px #444; }
在其下面添加
.img-ico .be { position: absolute; bottom: 10px; right: 10px; font-size: 18px !important; color: #fff; }
六、功能使用
- 在【主题选项--基本设置--选择不同分类布局】中输入想要使用该布局的分类ID,保存即可
- 前台文章数量的多少可在【设置--阅读--博客页面至多显示】中控制
继续阅读
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!