WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 数码解说
    • 生活趣事
    • 生活日记
  • 全球科技
    • 新浪博客
    • A5资讯
    • 环球网新闻
  • 编程教学
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
  • 专题
  • 基友
  • 隐私
  • 云优化
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君

ripro美化 - 纯标题改成三栏

夏柔8月 13, 2020

站库网下午找我说要和 SEO站长网 的纯标题一样,原先是双栏,他找百度没有教程要三栏,给他弄好后,这里就把代码公开下吧。

效果图:

ripro美化 - 纯标题改成三栏-WordPress极简博客
SEO站长网

教程开始

首先来到目录: ripro/parts/home-mode

将以下代码全部替换:

<!--ripro纯标题改成三栏教程-->
<!--WordPress独家首发-->
<!--教程地址:https://www.wpon.cn/12779.html-->
<div class="section" style=" padding-bottom: 20px; ">
	  	<div class="container">
			<div class="row">
			
<?php
// ripro纯标题改成三栏教程
// WordPress独家首发
// 教程地址:https://www.wpon.cn/12779.html
$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; ?> &gt;</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>

然后就可以了!

看下效果

ripro美化 - 纯标题改成三栏-WordPress极简博客
站库网

如果你觉得 背景图颜色很暗,将以下CSS代码加到后台 - 外观 - 自定义CSS即可

/* 
* ripro纯标题改成三栏教程(CSS美化类)
* WordPress独家首发
* 教程地址:https://www.wpon.cn/12779.html
*/
.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美化类)
* WordPress独家首发
* 教程地址:https://www.wpon.cn/12779.html
*/
ripro美化 - 纯标题改成三栏-WordPress极简博客
站库网

是不是很好看了呢?这样给想给首页加上纯标题但觉得两栏很丑的站长不少帮助呢?

好了,希望夏柔会给大家带来更多的优质教程!

#RIPRO#ripro纯标题改成三栏#wordpress美化
3
等 3 人赞过
分享
夏柔 站长
文章 712评论 23
赞赏
夏柔
相关文章
  • WordPress美化-抖动图片
  • WordPress是mvc架构吗
  • 小八RiPRO子主题全网独家发布
  • 原创首发RIPRO美化-编写退款申诉教程
  • RIPRO主题美化-列表页面右上角3个彩色圆点效果
  • Ripro子主题-jizhi-chlid极致主题站壳原创首发1.1版本,无加密无需授权不限域名!
  • RIPRO主题美化-首页VIP介绍引导美化,样式+文件+教程
  • RIPRO美化-新年/高考/节日倒计时代码(小工具)
  • RIPRO美化-搜索框动态特效
  • RIPRO主题美化-会员中心全宽梦幻动态美化
08 12月, 2019
多用途商业WordPress主题Capital v1.5.1
夏柔
站长
夏山如碧 - 怀柔天下
712文章
23评论
58144K获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门30
WordPress技术教程265
前沿技术情报所7
城市创新——新消费8
最近有哪些不可错过的热文5
程序员的养生之道0
疫情实况
31省区市新增11例境外输入病例
3月 2, 2021
世卫称年底前结束疫情不现实
3月 2, 2021
31省区市本土零新增
2月 27, 2021
更多
每日快讯
31省区市新增11例境外输入病例
3月 2, 2021
郭树清:房地产核心问题还是泡沫大
3月 2, 2021
中国教师在英国遭4人围殴
3月 2, 2021
2021胡润全球富豪榜
3月 2, 2021
世卫称年底前结束疫情不现实
3月 2, 2021
复出首日罗志祥买200箱凤梨
3月 1, 2021
金球奖获奖名单出炉
3月 1, 2021
海关查获新型毒品伪装成软糖
3月 1, 2021
更多
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2021 WordPress极简博客. Designed by 骚老板. 辽公网安备21010502000474号