ripro美化教程:纯文字标题模块CMS美化修改三栏并排

ripro美化教程:纯文字标题模块CMS美化修改三栏并排

效果:

 

开始:

一般美化后的ripro主题文字标题模块默认是双栏(两栏显示)强迫i正有木有

修改美化三栏显示后更加规范美观有木有!! 好了教程开始

[vipay]1.在主题目录: ripro/parts/home-mode/ulist.php

把原代码全部清除 替换成下面代码  ctrl+s保存文件

<!–ripro纯标题改成三栏教程–>
<div class=”section” style=” padding-bottom: 20px; “>
<div class=”container”>
<div class=”row”>

<?php
// ripro纯标题改成三栏教程
$mode_ulistpost = _cao(‘mode_ulistpost’);

foreach ($mode_ulistpost[‘catulist’] as $key => $cms) {

$args = array(
‘cat’ => $cms[‘category’],
‘ignore_sticky_posts’ => true,
‘post_status’ => ‘publish’,
‘posts_per_page’ => $cms[‘count’],
‘orderby’ => $cms[‘orderby’],
);

///////////S CACHE ////////////////
if (CaoCache::is()) {
$_the_cache_key = ‘ripro_home_ulist_posts_’.$args[‘cat’];
$_the_cache_data = CaoCache::get($_the_cache_key);
if(false === $_the_cache_data ){
$_the_cache_data = new WP_Query($args); //缓存数据
CaoCache::set($_the_cache_key,$_the_cache_data);
}
$data = $_the_cache_data;
}else{
$data = new WP_Query($args); //原始输出
}
///////////S CACHE ////////////////

$category = get_category( $cms[‘category’] );
$this_i = 0; ?>
<div class=”col-12 col-sm-4″>
<div class=”uposts”>
<div class=”codesign-list lazyload visible” data-bg=”<?php echo esc_url( $cms[‘bgimg’] ); ?>”>
<h4 class=”codeisgn-h4″><i class=”fa fa-circle-o”></i> <a<?php echo _target_blank();?> href=”<?php echo esc_url( get_category_link( $category->cat_ID ) ); ?>”><?php echo $category->cat_name; ?> ></a></h4>
<span class=”codesign-esc”><p><?php echo $cms[‘desc’];?></p></span>
<div class=”codesign-cover”></div>
</div>
<?php while ( $data->have_posts() ) : $data->the_post();
$this_i++;
echo ‘<div class=”hentry”><h2 class=”title”><span class=”post-num num-‘.$this_i.'”>’.$this_i.'</span><a’._target_blank().’ href=”‘.get_permalink().'” title=”‘.get_the_title().'”>’.get_the_title().'</a></h2>’;
echo ‘<div class=”meta”><span>热度(‘._get_post_views().’)</span></div></div>’;
endwhile; ?>
</div>
</div>
<?php
wp_reset_postdata();
}
?>

</div>
</div>

</div>

 

2.修改模块底色代码在wordpress后台自定义CSS中添加修改:(颜色代码自行修改成自己喜欢的底色即可!!)

/* 
* ripro纯标题改成三栏教程(CSS美化类)
* 
* 
*/
.uposts .codesign-cover {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #00000000;
    border-radius: 4px 4px 0 0;
    z-index: 0;
}
.post-list .cao-cover img{
	display: none;
}
/* 
* ripro纯标题改成三栏教程(CSS美化类)
* 
* 
*/[/vipay]

 

 

 

© 版权声明
THE END
喜欢就支持以下吧
点赞1
分享
评论 抢沙发

请登录后发表评论