龙笑天龙笑天  2015-12-21 06:50 龙笑天下 隐藏边栏 |   3 条评论  582 
文章评分 11 次,平均分 5.0
导语: 使用知言 tinection 主题的朋友都知道,我们可以为不同的分类列表调用不同的分类列表模板样式!比如有些分类显示的是视频,有些显示的是图片缩略图,有些显示的是新闻公告等,此时给不同的分类调用不同的分类模板样式,可以使网站更加大气个性。下面我来给大家介绍“如何给知言 Tinection 主题增加分类模版输出样式并在后台调用”的具体步骤...

使用知言tinection主题的朋友都知道,我们可以为不同的分类列表调用不同的分类列表模板样式!比如有些分类显示的是视频,有些显示的是图片缩略图,有些显示的是新闻公告等,此时给不同的分类调用不同的分类模板样式,可以使网站更加大气个性。

1 Tinection 主题的 3 种分类页模板样式

1.1 默认布局样式

默认布局样式

1.2 等高块布局

等高块布局

1.3 瀑布流布局

瀑布流布局

下面我来给大家介绍“如何给知言 Tinection 主题增加分类模版输出样式并在后台调用”的具体步骤。比如:增加一个分类模板-“标题布局”。

2 实现过程

2.1 增加分类页样式判断参数

2.1.1 将 tinection\category.php 这个文件中的 16 行:

<?php $cat = get_queried_object_id(); $blocks_cats = ot_get_option('cat_blocks_ids',array()); $fluid_cats = ot_get_option('cat_fluid_ids',array()); ?>

修改为:

<?php $cat = get_queried_object_id(); $blocks_cats = ot_get_option('cat_blocks_ids',array()); $fluid_cats = ot_get_option('cat_fluid_ids',array());$titlelist_cats = ot_get_option('cat_titlelist_ids',array()); ?>

从上看出,就增加了这一句:$titlelist_cats = ot_get_option('cat_titlelist_ids',array());。注:titlelist_catscat_titlelist_ids中的titlelist自己可以改为其它小写英文字母。

2.1.2 相应的将 tinection\category.php 这个文件中的 17 行:

<?php if(in_array($cat,$blocks_cats)){get_template_part('includes/category-block');}elseif(in_array($cat,$fluid_cats)){get_template_part('includes/category-fluid');}else{ ?>

修改为:

<?php if(in_array($cat,$blocks_cats)){get_template_part('includes/category-block');}elseif(in_array($cat,$fluid_cats)){get_template_part('includes/category-fluid');}elseif(in_array($cat,$titlelist_cats)){get_template_part('includes/category-titlelist');}else{ ?>

从上看出,相应的就增加了这一句:elseif(in_array($cat,$titlelist_cats)){get_template_part('includes/category-titlelist');}。其中的titlelist_cats命名要与 16 行中的一致,并注意category-titlelist这个名字。

2.2 增加分类模板样式

复制主题自带的分类模板一份,比如复制一份 tinection\includes\category-block.php 这个模板并命名为上面一步的名字:category-titlelist.php 。

修改里面的一小段内容,比如将其中的 30-52 行:

<div id="main-wrap-left">
<div class="bloglist-container clr">
<?php while (have_posts()) : the_post();?>
<span class="col span_1_of_3">
<article class="home-blog-entry clr">
	<?php  if(!get_post_format()) { $format = 'standard'; } else { $format = get_post_format(); }?>
	<?php get_template_part('includes/thumbnail',esc_attr( $format )); ?>
	<div class="home-blog-entry-text contentcms-entry-text">
		<h3><a href="https://www.ilxtx.com/redirect/6a207PBYjba9DywywRBRkRUoTysoT9NPku64k4E4Nyk8BYhPN9EYsPjWsxhRNq6oUYHqT9QoUyhbCzhYDPBoNYHnUYCoC8DbBzBRjzBRT4DRCWDuURUosYHbC8Uu6P6yCxUqNxQysRwyB8D8BxhW6Raq6YQ" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
		<p>
			<?php $contents = get_the_excerpt(); $excerpt = wp_trim_words($contents,120,ot_get_option('readmore')); echo $excerpt;?>
		</p>
		<div class="line"></div>
		<!-- Post meta -->
		<?php tin_post_meta(1); ?>
		<!-- /.Post meta -->
	</div>
	<div class="clear"></div>
</article>
</span>
<?php endwhile;?>
</div>
<!-- pagination -->

修改为:

<div id="main-wrap-left">
<div class="bloglists-container1 clr">
	<?php while (have_posts()) : the_post();?>
		<article class="home-blog-entry col span_11 clr">
            <div class="home-blog-entry-text clr">
				<ul class="postlist">
					<li><a href="https://www.ilxtx.com/redirect/6a207PBYjba9DywywRBRkRUoTysoT9NPku64k4E4Nyk8BYhPN9EYsPjWsxhRNq6oUYHqT9QoUyhbCzhYDPBoNYHnUYCoC8DbBzBRjzBRT4DRCWDuURUosYHbC8Uu6P6yCxUqNxQysRwyB8D8BxhW6Raq6YQ" title="<?php the_title(); ?>"><?php the_title(); ?></a><span class="postlist-meta-time"><?php echo date(__('Y-m-j','tinection'),get_the_time('U'));?></span></li>
				</ul>
			</div>
			<div class="clear"></div>
		</article>
    <?php endwhile;?>
</div>
<!-- pagination -->

2.3 后台主题设置“主题选项->样式”里中添加选择按钮开关

在 tinection\admin\theme-options.php 这个文件中的:

// Style: 分类页模板-瀑布流布局
        array(
            'id'        => 'cat_fluid_ids',
            'label'     => __('分类页模板-采用瀑布流布局的分类','tinection'),
            'desc'      => __('分类页-采用瀑布流布局的分类','tinection'),
            'type'      => 'category_checkbox',
            'std'       => '',
            'section'   => 'style'
        ),

后面中增加一栏改为:

// Style: 分类页模板-瀑布流布局
        array(
            'id'        => 'cat_fluid_ids',
            'label'     => __('分类页模板-采用瀑布流布局的分类','tinection'),
            'desc'      => __('分类页-采用瀑布流布局的分类','tinection'),
            'type'      => 'category_checkbox',
            'std'       => '',
            'section'   => 'style'
        ),
		// Style: 分类页模板-标题布局
        array(
            'id'        => 'cat_titlelist_ids',
            'label'     => __('分类页模板-采用标题布局的分类','tinection'),
            'desc'      => __('分类页-采用标题布局的分类','tinection'),
            'type'      => 'category_checkbox',
            'std'       => '',
            'section'   => 'style'
        ),

注意里面的名称要与上文中的相呼应。

2.4 增加相应的样式

比如:

/* 分类页标题样式 */
.bloglists-container1{margin: 0 0 10px;background: #fff;padding: 10px 10px 0;border: 1px solid #eaeaea;border-radius:2px;}
.bloglists-container1 .postlist li { height: 40px; line-height: 40px; overflow: hidden; }
.bloglists-container1 .postlist li a { float: left; font-size: 14px; overflow: hidden; color: #555;}
.bloglists-container1 .postlist li span { float: right; color: #ccc; }
.bloglists-container1 .postlist li:before{content:"\f105" ;font-family: FontAwesome;color: #ccc;margin-right: 10px;font-size: 1px;float: left;}
.bloglists-container1 .span_11{width:100%;webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;transition: all 0.3s ease-out;background-color: #fff;overflow: hidden;border-bottom: 1px dashed #f2f2f2;}

各个元素名称也要与上文相呼应。

3 最终效果图

3.1 后台设置“主题选项->样式”里

后台主题选项 - 最终效果图

3.2 前台样式

前台样式 - 最终效果图

4 延伸及感谢

我在这里是只增加了一个分类模板-“标题布局”,大家可以类推增加其他的分类模板布局,我在这里就不赘述了。希望大家受用!

最后,在这里特别感谢 @久正 DJ 提供的方法,我只是代写而已~~!

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:32    粉丝:36 最后编辑于:2017-04-26
互助分享,互联网本该如此!

发表评论

表情 贴图 链接 私密 格式 签到
  1. riven
    riven 来自天朝的朋友 谷歌浏览器 73.0.3683.75 Windows 7 浙江省杭州市 电信

    签到成功!签到时间:2019-11-20 22:40:26,每日打卡,生活更精彩~

    地板 2019-11-20 22:40
    0 0 回复
  2. 很萌
    很萌 来自天朝的朋友 谷歌浏览器 55.0.2883.87 Windows 8.1 广西梧州市 电信

    样式不错,谢谢分享

    板凳 2018-08-16 16:29
    0 0 回复
  3. 永林 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows XP 河北省沧州市 联通

    签到成功!签到时间:2016-12-04 20:25:27,每日打卡,生活更精彩~

    沙发 2016-12-04 20:26
    0 0 回复
扫一扫二维码分享