ripro给文章右下角加上已测试角标{适用于子主题/美化包}

2020-04-16 0 4,642

效果截图

ripro给文章右下角加上已测试角标{适用于子主题/美化包}

说明

这几天看到别人网站有一个已测试/独家什么的角标  觉得还不错,就扒了下来

做资源站怎么能少了这个功能呢,经过5分多钟的努力  终于把他搞定了,

下边是教程,好好看下   主要适用于子主题/美化包,不用美化的朋友找相应的位置自行研究

设置教程

找到子主题路径:/wp-content/themes/srcdict-ripro/parts/template-parts/metabox.theme.php

复制以下代码到第十行,美化包不同位置不同,自己好好找下位置

  	<!--文章右下角角标-->
  	<?php 
    $ymetaValue = get_post_meta(get_the_ID(), "post_style_art", true);
    if (($ymetaValue=="yuanc"))
    {
    echo '<div class="jing-theme-tag">独家</div>';
    }elseif (($ymetaValue=="noceshi"))
    {
    echo '<div class="free-theme-tag">待测试</div>';	
    }elseif (($ymetaValue=="ceshi"))
    {
    echo '<div class="free-theme-tag">已测试</div>';	
    }				
    ?>
  	<!--文章右下角角标-->

 

找到主题路径 /wp-content/themes/ripro/inc/codestar-framework/options/metabox.theme.php

大约55行左右 添加以下代码:

            //mb2345.com 文章右下角角标
            array(
                'id'      => 'post_style_art',
                'type'    => 'radio',
                'title'   => '文章角标',
                'inline'  => true,
                'options' => array(
                    'yuanc'  => '独家',
                    'noceshi' => '待测试',
					'ceshi' => '已测试',
                ),
                'desc'    => '文章标题前显示相关角标',
            ),
           //mb2345.com 文章右下角角标

 

代码加好以后  添加css到主题或子主题css

路径:/wp-content/themes/xxx(使用的主题不一样文件夹也不一样 自己找下)-ripro/div.css

代码:

[rihide]/***文章右下角角标***/
.free-theme-tag{position:absolute;background:#ee2720;background-image:none;bottom:150px;right:5px; z-index:10;color:#fff;padding:1px 10px;text-transform:uppercase;font-weight:700;font-size:14px;border-radius:5px;background-image:linear-gradient(90deg,#ed1c24 0,#fb8f02 100%)}
.jing-theme-tag{position:absolute;background:#0057ff;bottom:150px;right:0px; z-index:10;color:#fffcfc;border-radius:35px 2px 0 2px;padding:5px 18px;text-transform:uppercase;font-weight:700;font-size:14px;text-shadow:-1px -1px 0 rgba(0,0,0,.3)}
.jbvip { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold;}
.new { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
    color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold;}
 /***文章右下角角标***/[/rihide]

如有其它需要,自己改变css颜色代码,文字等  对应文字就是对应显示角标

收藏 (0) 打赏

更新不易,还请可观稍稍打赏一下!

打开微信、支付宝扫一扫,输入打赏金额进行打赏,感激不尽!
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!mb2345@qq.com 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有MB奖励和额外收入!

模板2345源码网 技术文档 ripro给文章右下角加上已测试角标{适用于子主题/美化包} https://www.mb2345.com/1868.html

模板2345源码网,汇聚全网优秀的资源分享给各位站长!

常见问题
  • 本站大部分资源来自互联网,只有带“已测试”标签的资源经过测试,如下载未测试资源,或自己记住不到位未搭建成功的,本站不退款。
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用360、QQ浏览器下载,如有解压密码未标注的,请自行破解。
查看详情

相关资源

模板2345客服团队

为您解决烦忧 - 24小时在线 专业服务

小程序
小程序开发

小程序商城/点餐/外卖/分销/等小程序开发

我要制作小程序
400
400电话申请

400电话开通/代理/快速办理上线

我要申请400
营业执照
资质代办

办理营业执照/ICP许可证/软著/商标

我要办理
修复
故障排查

排查服务器故障/解决网站400.500.404等错误代码

我要处理
  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

注册账号即送5MB,开通VIP全站资源任你下载。