子比主题 – 文章封面角标美化
这篇文章就是我给大家搭建了一个新网站测试的，然后就是我给里面加了几个角标的样式，直接丢的颜色代码美化，我发现很多站一堆人发我这个美化，我想知道版权不留就说自己写的吗？真的懒得搭理，某些站长真的是恶心，直接免费，喜欢的自行部署！我这里修复了一下，之前搬运我这个文章的，忘了告诉你了，那些去拿去卖钱的人，用了之前的这个样式会卡顿，所以我这次就是免费分享一下，再搬运不留版权我真的要心里问候你家人怎么样了！正好记录一下！
代码部署
一共三个代码，两个PHP代码和一个CSS代码，我会讲的很仔细，跟着教程操作不会有问题
定位：/wp-content/themes/zibll/inc/options/metabox-options.php文件，然后我们进入文件里面就去搜“文章、页面、帖子的独立seo”因为这个是子比主题更新后的注释，如下图和代码
if (class_exists('CSF')) {
CSF::createMetabox('tf', array(
'title' => '文章封面自定义标识',
'post_type' => array('post', 'page', 'plate', 'forum_post'),
'context' => 'advanced',
'data_type' => 'unserialize',
));
CSF::createSection('tf', array(
'fields' => array(
array(
'title' => __('封面标识'),
'id' => 'mh_text',
'type' => 'switcher',
'label' => '',
'default' => false
),
// 左上角标样式
array(
'dependency' => array('mh_text', '!=', ''),
'id' => 'left_style',
'title' => '左上角标样式',
'subtitle' => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
'default' => 'jb-purple',
'type' => 'palette',
'options' => array(
'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
'jb-blue' => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
'jb-red' => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
'jb-green'=> array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
'jb-black' => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),
),
'attributes' => array(
'class' => 'custom-palette'
),
),
array(
'dependency' => array('mh_text|left_style', '!=|==', '|jb-purple'),
'title' => __(' '),
'subtitle' => '左上角标内容',
'id' => 'left_purple',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|left_style', '!=|==', '|jb-blue'),
'title' => __(' '),
'subtitle' => '左上角标内容',
'id' => 'left_blue',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|left_style', '!=|==', '|jb-red'),
'title' => __(' '),
'subtitle' => '左上红色角标',
'id' => 'left_red',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|left_style', '!=|==', '|jb-green'),
'title' => __(' '),
'subtitle' => '左上绿色角标',
'id' => 'left_green',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|left_style', '!=|==', '|jb-yellow'),
'title' => __(' '),
'subtitle' => '左上黄色角标',
'id' => 'left_yellow',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|left_style', '!=|==', '|jb-black'),
'title' => __(' '),
'subtitle' => '左上黑色角标',
'id' => 'left_black',
'type' => 'text',
'default' => '',
),
// 右上角标样式
array(
'dependency' => array('mh_text', '!=', ''),
'id' => 'right_style',
'title' => '右上角标样式',
'subtitle' => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
'default' => 'jb-purple',
'type' => 'palette',
'options' => array(
'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
'jb-blue' => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
'jb-red' => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
'jb-green'=> array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
'jb-black' => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),
),
'attributes' => array(
'class' => 'custom-palette'
),
),
array(
'dependency' => array('mh_text|right_style', '!=|==', '|jb-purple'),
'title' => __(' '),
'subtitle' => '右上角标内容',
'id' => 'right_purple',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|right_style', '!=|==', '|jb-blue'),
'title' => __(' '),
'subtitle' => '右上角标内容',
'id' => 'right_blue',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|right_style', '!=|==', '|jb-red'),
'title' => __(' '),
'subtitle' => '右上角标内容',
'id' => 'right_red',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|right_style', '!=|==', '|jb-green'),
'title' => __(' '),
'subtitle' => '右上角标内容',
'id' => 'right_green',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|right_style', '!=|==', '|jb-yellow'),
'title' => __(' '),
'subtitle' => '右上角标内容',
'id' => 'right_yellow',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|right_style', '!=|==', '|jb-black'),
'title' => __(' '),
'subtitle' => '左上黑色角标',
'id' => 'right_black',
'type' => 'text',
'default' => '',
),
// 底部角标样式
array(
'dependency' => array('mh_text', '!=', ''),
'id' => 'bottom_style',
'title' => '底部角标样式',
'subtitle' => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
'default' => 'jb-purple',
'type' => 'palette',
'options' => array(
'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
'jb-blue' => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
'jb-red' => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
'jb-green'=> array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
'jb-black' => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),
),
'attributes' => array(
'class' => 'custom-palette'
),
),
array(
'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-purple'),
'title' => __(' '),
'subtitle' => '底部角标内容',
'id' => 'bottom_purple',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-blue'),
'title' => __(' '),
'subtitle' => '底部角标内容',
'id' => 'bottom_blue',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-red'),
'title' => __(' '),
'subtitle' => '底部角标内容',
'id' => 'bottom_red',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-green'),
'title' => __(' '),
'subtitle' => '底部角标内容',
'id' => 'bottom_green',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-yellow'),
'title' => __(' '),
'subtitle' => '右上角标内容',
'id' => 'bottom_yellow',
'type' => 'text',
'default' => '',
),
array(
'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-black'),
'title' => __(' '),
'subtitle' => '左上黑色角标',
'id' => 'bottom_black',
'type' => 'text',
'default' => '',
),
),
));
}
定位：/wp-content/themes/zibll/inc/functions/zib-posts-list.php文件里面，然后我们到了文件里面去搜“置顶”，因为我们要放到他的下面，如下图如下代码
//文章封面角标开始
if (get_post_meta($post->ID, 'mh_text', true)){
$left1 = get_post_meta($post->ID, 'left_purple', true);
$left2 = get_post_meta($post->ID, 'left_blue', true);
$left3 = get_post_meta($post->ID, 'left_red', true);
$left4 = get_post_meta($post->ID, 'left_green', true);
$left5 = get_post_meta($post->ID, 'left_yellow', true);
$left6 = get_post_meta($post->ID, 'left_black', true);
$right1 = get_post_meta($post->ID, 'right_purple', true);
$right2 = get_post_meta($post->ID, 'right_blue', true);
$right3 = get_post_meta($post->ID, 'right_red', true);
$right4 = get_post_meta($post->ID, 'right_green', true);
$right5 = get_post_meta($post->ID, 'right_yellow', true);
$right6 = get_post_meta($post->ID, 'right_black', true);
$bottom1 = get_post_meta($post->ID, 'bottom_purple', true);
$bottom2 = get_post_meta($post->ID, 'bottom_blue', true);
$bottom3 = get_post_meta($post->ID, 'bottom_red', true);
$bottom4 = get_post_meta($post->ID, 'bottom_green', true);
$bottom5 = get_post_meta($post->ID, 'bottom_yellow', true);
$bottom6 = get_post_meta($post->ID, 'bottom_black', true);
// 左侧上角封面
if ($left1){
$sticky .= '<a class="item-left-category bg-color-purple">'.$left1.'</a>';
}
if ($left2){
$sticky .= '<a class="item-left-category bg-color-blue">'.$left2.'</a>';
}
if ($left3){
$sticky .= '<a class="item-left-category bg-color-red">'.$left3.'</a>';
}
if ($left4){
$sticky .= '<a class="item-left-category bg-color-green">'.$left4.'</a>';
}
if ($left5){
$sticky .= '<a class="item-left-category bg-color-yellow">'.$left5.'</a>';
}
if ($left6){
$sticky .= '<a class="item-left-category bg-color-black">'.$left6.'</a>';
}
// 右上角封面
if ($right1){
$sticky .= '<span class="bg-color-purple tag-license">'.$right1.'</span>';
}
if ($right2){
$sticky .= '<span class="bg-color-blue tag-license">'.$right2.'</span>';
}
if ($right3){
$sticky .= '<span class="bg-color-red tag-license">'.$right3.'</span>';
}
if ($right4){
$sticky .= '<span class="bg-color-green tag-license">'.$right4.'</span>';
}
if ($right5){
$sticky .= '<span class="bg-color-yellow tag-license">'.$right5.'</span>';
}
if ($right6){
$sticky .= '<span class="bg-color-black tag-license">'.$right6.'</span>';
}
// bottom底部封面
if ($bottom1){
$sticky .= '<div class="n-collect-item-bottom bg-color-purple"><span class="bottom-l">'.$bottom1.'</span></div>';
}
if ($bottom2){
$sticky .= '<div class="n-collect-item-bottom bg-color-blue"><span class="bottom-l">'.$bottom2.'</span></div>';
}
if ($bottom3){
$sticky .= '<div class="n-collect-item-bottom bg-color-red"><span class="bottom-l">'.$bottom3.'</span></div>';
}
if ($bottom4){
$sticky .= '<div class="n-collect-item-bottom bg-color-green"><span class="bottom-l">'.$bottom4.'</span></div>';
}
if ($bottom5){
$sticky .= '<div class="n-collect-item-bottom bg-color-yellow"><span class="bottom-l">'.$bottom5.'</span></div>';
}
if ($bottom6){
$sticky .= '<div class="n-collect-item-bottom bg-color-black"><span class="bottom-l">'.$bottom6.'</span></div>';
}
}
直接丢到：子比主题–>>自定义CSS样式即可，我的css最下面可以看到是颜色代码，你可以去颜色代码去调整自己喜欢的颜色，如果你还是喜欢图片，那么可以将下面的css颜色换成图片链接，记住，换成图片你网站会卡的哦！
/**文章封面美化开始*/
.tag-license {
position: absolute;
top: 11px;
right: -17px;
-webkit-transform: rotate(45deg);
z-index: 1;
width: 75px;
height: 18px;
color: #fff;
line-height: 18px;
text-align: center;
font-size: 12px;
/*font-style: normal;*/
}
a.item-left-category {
position: absolute;
left: 5px;
top: 10px;
padding: 5px 6px;
font-size: 1rem;
line-height: 1;
color: #fff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 6px;
z-index: 1;
}
a.item-category {
position: absolute;
right: 7px;
top: 10px;
padding: 5px 6px;
font-size: 1rem;
line-height: 1;
color: #fff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 6px;
z-index: 1;
}
/**文章封面美化结束*/
/** 壁纸标题毛玻璃 **/
span.bottom-l {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.n-collect-item-bottom {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 25px;
border-radius: 0 0 4px 4px;
-webkit-backdrop-filter: saturate(180%) blur(20px);
font-size: 13px;
color: #fff;
text-shadow: 0 2px 2px rgba(0,0,0,.16);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: center;
padding: 0 18px;
z-index: 1;
}
.bg-color-purple {
background: linear-gradient(45deg, #9370DB, #DA70D6);
}
.bg-color-red {
background: linear-gradient(135deg, #FF6347, #FFA07A);
}
.bg-color-blue {
background: linear-gradient(60deg, #1E90FF, #87CEFA);
}
.bg-color-green {
background: linear-gradient(225deg, #32CD32, #98FB98);
}
.bg-color-yellow {
background: linear-gradient(315deg, #FFBC52, #FFE68F);
}
.bg-color-black {
background: linear-gradient(180deg, #121212, #4b4b4b);
}
页:
[1]