给主题添加子分类图片布局

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

一、效果预览

 

二、后台添加功能选项

打开【inc/options/begin-options.php】文件,搜索代码

	$options[] = array(
		'name' => '',
		'desc' => '子分类',
		'id' => 'cat_layout_child',
		'std' => '',
		'type' => 'text'
	);

在其下面添加

	$options[] = array(
		'name' => '',
		'desc' => '子分类图片',
		'id' => 'cat_layout_child_img',
		'std' => '',
		'type' => 'text'
	);

添加后,就可以在【主题选项--基本设置--选择不同分类布局】中看到这个布局选项了。

 

三、添加选项调用判断

打开主题根目录下的【archive.php】文件,在适当位置添加

elseif ( is_category(explode(',',zm_get_option('cat_layout_child_img')))) {
	get_template_part( 'category-child-img' );
}

 

四、添加布局文件

在主题根目录下新建一个名为【category-child-img.php】的文件,并添加下面的代码到文件中

<?php
/**
 * 子分类图片模板
 */

get_header(); ?>

<style type="text/css">
#primary {
	width: 100%;
}

.child-box {
	margin: 0 -5px;
}

.child-cat {
	display: none;
}

.child-img-4 {
	position: relative;
	float: left;
	padding: 5px;
	width: 25%;
}

.child-img {
	background: #fff;
	margin: 0 0 10px 0;
	border-radius: 2px;
	border: 1px solid #ddd;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.child-img-4 img {
	float: left;
	width: auto;
	height: auto;
	max-width: 100%;
}

@media screen and (max-width:600px) {
	.child-box {
		margin: 0;
	}

	.child-img-4 {
		width: 50%;
	}
}
</style>
<section id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<article class="child-box">
			<?php
				global $cat;
				$cats = get_categories(array(
					'child_of' => $cat,
					'parent' => $cat,
					'hide_empty' => 0
				 ));
				foreach($cats as $the_cat){
					$posts = get_posts(array(
						'category' => $the_cat->cat_ID,
						'numberposts' => 8,
					));
					if(!empty($posts)){
						echo '<h3 class="grid-cat-title">
							<span class="title-i"><span></span><span></span><span></span><span></span></span>
							<a href="'.get_category_link($the_cat).'">'.$the_cat->name.'<span class="more-i"><span></span><span></span><span></span></span></a>
						</h3>';
						foreach($posts as $post){
							echo '<div class="child-img-4"><div class="child-img">';
								if ( get_post_meta($post->ID, 'thumbnail', true) ) {
									$thumbnail  = get_post_meta(get_the_ID(),'thumbnail',true);
									$thumb_img =  '<img src="'.$thumbnail.'">';
								} else {
									$content = $post->post_content;
									preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
									$thumb_img = '<img src="'.get_template_directory_uri().'/thumbnail.php?src='.$strResult[1][0].'&w='.zm_get_option('img_w').'&h='.zm_get_option('img_h').'&a='.zm_get_option('crop_top').'&zc=1" alt="'.$post->post_title .'" /><div class="clear"></div>';
								}
							echo '<figure class="picture-img"><a href="'.get_permalink($post->ID).'">'.$thumb_img.'</a></figure>';
							echo '<h2 class="grid-title"><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></h2></div></div>';
						}
					}
				}
				echo '<div class="clear"></div></div>';
			?>
		</article>
	</main><!-- .site-main -->
</section><!-- .content-area -->

<?php get_footer(); ?>

 

五、其他说明

以上操作完成后就可以在【主题选项--基本设置--选择不同分类布局】中输入分类ID了,保存后前台就会应用该布局。

添加的分类ID应为某个子分类的父分类ID,也就是说添加的这个分类下面应该还有子分类,不然前台不会应用该布局。

若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

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