效果截图
说明
这几天看到别人网站有一个已测试/独家什么的角标 觉得还不错,就扒了下来
做资源站怎么能少了这个功能呢,经过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颜色代码,文字等 对应文字就是对应显示角标