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

效果截图

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美化 ripro给文章右下角加上已测试角标{适用于子主题/美化包} https://www.mb2345.com/1868.html

常见问题

相关文章

评论
暂无评论