一、效果预览
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,保存后前台就可以看到效果了。
继续阅读
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!