给主题添加格子标题分类布局

一、效果预览

• PC端效果预览：点击这里
• 移动端效果预览：点击这里

Ps：为了效果预览，所以临时随意设置了某个分类为格子布局，可能感觉不是特别好看。实际运用中，通过对分类的合理选择，相信这也会是一道亮丽的风景。

 

二、后台功能添加

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

	$options[] = array(
		'name' => '',
		'desc' => '标题列表',
		'id' => 'cat_layout_list',
		'std' => '',
		'type' => 'text'
	);

在其下面添加

	$options[] = array(
		'name' => '',
		'desc' => '格子标题',
		'id' => 'cat_layout_title',
		'std' => '',
		'type' => 'text'
	);

添加后，可在【主题选项--基本设置--选择不同分类布局】中看到该选项。

 

三、添加前台分类格子布局文件

在主题根目录下新建一个名为【category-title.php】的文件，并复制下面的代码到该文件

<?php 
/**
 * 倒序标题分类
 */

get_header(); ?>

	<section id="novel" class="content-area">
		<main id="main" class="site-main" role="main">
			<?php
				global $query_string;
				query_posts( $query_string . '&order=ASC&showposts=1000' );
			?>
			<?php while ( have_posts() ) : the_post(); ?>
			<article class="novel-main wow fadeInUp" data-wow-delay="0.3s">
				<div class="novel-box">
					<?php the_title( sprintf( '<h2 class="novel-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
		 			<div class="clear"></div>
				</div>
			</article>
			<?php endwhile;?>
		</main><!-- .site-main -->
		<?php wp_reset_query(); ?>
		<div class="clear"></div>
	</section><!-- .content-area -->
	<!-- <?php begin_pagenav(); ?> -->
<?php get_footer(); ?>

 

四、添加分类格子布局调用判断

打开【archive.php】文件，找到代码

elseif ( is_category(explode(',',zm_get_option('cat_layout_list')))) {
	get_template_part( 'category-list' );
}

在其下面添加

elseif ( is_category(explode(',',zm_get_option('cat_layout_title')))) {
	get_template_part( 'category-title' );
}

 

五、添加分类格子布局样式

打开【style.css】文件，搜索

/** 瀑布流 **/

在其上面添加

/** 格子标题 **/
#novel {
    margin: 0 0 10px 0;
}

.novel-main {
    position: relative;
    float: left;
    width: 20%;
    min-height: 1px;
    margin: 0;
    transition-duration: .5s;
}

.novel-box {
    position: relative;
    background: #fff;
    margin: 0 -1px -1px 0;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.novel-title a {
    width: 99%;
    line-height: 45px;
    font-weight: normal;
    display: block;
    padding: 0 10px;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}

.novel-title a:hover {
    color: #000;
}

.novel-box:hover {
    background: #f1f1f1;
}

@media screen and (max-width:900px) {
    .novel-main {
        width: 25%;
    }
}

@media screen and (max-width:769px) {
    .novel-main {
        width: 33.33333333333333333333%;
    }
}

@media screen and (max-width:620px) {
    .novel-main {
        width: 50%;
    }
}

如果你的主题没有瀑布流，搜索不到这段注释的话，也可以搜索

/** 商品 **/

然后在其上面添加即可。

 

六、其他

完成以上步骤后，在【主题选项--基本设置--选择不同分类布局】中输入想要使用该分类布局的分类ID，保存后前台就可以看到效果了。