RIPRO缩略图添加演示小图标+小tips
今天无聊看到ceo主题的ui很漂亮，所以把一些功能尝试模仿下，主要修改三步
<?php
$sidebar = cao_sidebar();
$column_classes = cao_column_classes( $sidebar );
global $post;
$post_id = $post->ID;
$user_id = is_user_logged_in() ? wp_get_current_user()->ID : 0;
// 判断是否资源文章 cao_status
if (!_get_post_shop_status() || _get_post_shop_hide()) {
return false;
}
// if (!$instance[‘is_absrate’]) {
// echo ‘<div class=”rateinfo-abs”></div>’;
// }
// 内容区域
$cao_price = get_post_meta($post_id, ‘cao_price’, true);
$cao_vip_rate = get_post_meta($post_id, ‘cao_vip_rate’, true);
$cao_downurl = get_post_meta($post_id, ‘cao_downurl’, true);
$cao_pwd = get_post_meta($post_id, ‘cao_pwd’, true);
$cao_demourl = get_post_meta($post_id, ‘cao_demourl’, true);
$cao_paynum = get_post_meta($post_id, ‘cao_paynum’, true);
$cao_info = get_post_meta($post_id, ‘cao_info’, true);
$cao_ver = get_post_meta($post_id, ‘cao_ver’, true);
$cao_is_boosvip = get_post_meta($post_id, ‘cao_is_boosvip’, true);
$cao_qqhao = get_post_meta($post_id, ‘ac_qqhao’, true);
$cao_close_novip_pay = get_post_meta($post_id, ‘cao_close_novip_pay’, true);
$site_vip_name=_cao(‘site_vip_name’);
$site_money_ua=_cao(‘site_money_ua’);
$site_no_vip_name=_cao(‘site_no_vip_name’);
// 优惠信息
switch ($cao_vip_rate) {
case 1:
$rate_text = ‘暂无优惠’;
break;
case 0:
$rate_text = $site_vip_name . ‘免费’;
break;
default:
$rate_text = $site_vip_name . ‘ ‘ . ($cao_vip_rate * 10) . ‘ 折’;
}
//VIP优惠突出 如果有优惠显示折扣信息 style=” text-decoration: line-through; ”
$CaoUser = new CaoUser($user_id);
$PostPay = new PostPay($user_id, $post_id);
$cao_this_am = $cao_price . $site_money_ua;
$pric_style = ”;
$min_price = ($cao_price * $cao_vip_rate==0 || $cao_is_boosvip) ? 0 : $cao_price * $cao_vip_rate ;
?>
然后搜索下面这段代码
<div class=”entry-wrapper”>
在它后面添加以下代码
<div class=”freepath_keshi”>
<?php if ($cao_demourl) { ?>
<a href=”<?php echo $cao_demourl ?>” target=”_blank” rel=”nofollow” ><i class=”fa fa-television”></i></a>
<span class=”diybtn3″>查看演示</span>
<?php }else{ ?>
<span target=”_blank” href=”#”><i class=”fa fa-low-vision”></i></span>
<span class=”diybtn4″>暂无演示</span>
<?php }; ?>
</div>
CSS部分【diy.css或者后台自定义代码添加】
.freepath_keshi {
float: right;
color: #999;
margin-top: 3px;
}
@media (max-width: 768px) {
.freepath_keshi {
display: none;
}
}
.freepath_keshi a {
color: #999;
margin-right: -4px;
font-size: 16px;
transform: translateY(-10%);
display: inline-block;
}
/*演示/暂无演示*/
.diybtn3 {
position: absolute;
right: 2px;
top: 180px;
background: rgba(52, 73, 94, 0.3);
border-radius: 50px;
padding: 0 10px;
color: #fff;
font-size: 12px;
display:none;
}
.diybtn4 {
position: absolute;
right: 2px;
top: 180px;
background: rgba(52, 73, 94, 0.3);
border-radius: 50px;
padding: 0 10px;
color: #fff;
font-size: 12px;
display:none;
}
JS部分【任意你已经调用的全局js文件中，不懂的请在assets/js/app.js最后一行添加】
$(“.freepath_keshi”).hover(function () {
$(this).children(“.diybtn3”).show()
},function() {
$(this).children(“.diybtn3”).hide()
});
$(“.freepath_keshi”).hover(function () {
$(this).children(“.diybtn4”).show()
},function() {
$(this).children(“.diybtn4”).hide()
});
最后ctrl+f5刷新下，有cdn的先关闭下没问题再开启
