给主题增加一个带侧边栏的图片布局

摘 要

主题已集成了几种不同的图片布局，但可惜的是这些图片布局都是不显示侧边栏的。有时候，因为展示的需要，想在图片布局的基础上添加侧边栏，如果单纯的修改原来的图片布局文件，就会影响到所有使用该图片布局的分类。为了与其他使用图片布局的分类互不影响，单独制作带侧边栏的图片布局。

一、效果演示

 

二、后台添加功能选项

打开【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">&nbsp;<?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，保存即可
• 前台文章数量的多少可在【设置--阅读--博客页面至多显示】中控制