WordPress子比美化教程(持续更新中)

在子比主题设置—自定义CSS样式,添加下面的CSS代码:

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.tfblog.cn/wp-content/uploads/2023/05/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}

图片自己保存到本地,图片大小(162 X 75,建议透明的png图片),自己添加喜欢的背景图片。

效果

图片[1] - WordPress子比美化教程

CSS代码

在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式,添加如下CSS代码:

 /*常用语样式*/
.wiiuii-words-li{margin:5px auto;padding:5px;background:var(--body-bg-color);border-radius:var(--main-radius)}
.wiiuii-words-li:hover{background:var(--float-btn-bg)}

javascript代码

在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义javascript代码,添加如下jQuery代码:

 // 评论常用语
$('.wiiuii-words-li').on('click', function() {
   var $wiiuii_comment = $('#comment');
    var wiiuii_com_text = $(this).find('span').text();
    var wiiuii_com_original = $wiiuii_comment.val();
    $wiiuii_comment.val(wiiuii_com_original ? wiiuii_com_original + '  ' + wiiuii_com_text : wiiuii_com_text);
    $('.wiui_words').removeClass('open');
});

PHP代码

第一步:在“../zibll/template/comments.php”子比主题的 template 目录下“comments.php”文件,搜索 smilie 在上方位置添加如下代码:

图片[2] - WordPress子比美化教程
// 常用语函数
if (_pz('comment_words', true)) {
echo zib_get_input_expand_but('wiui_words');
}

第二步:在“../zibll/inc/functions/functions.php”子比主题的 template 目录下“functions.php”文件,搜索 smilie 在“表情”上方位置添加如下代码:

图片[3] - WordPress子比美化教程
    // 常用语函数
    if ('wiui_words' == $type) {
        $but = '<a class="but btn-input-expand mr6" href="javascript:;"><i class="fa fa-fw fa-comment-o"></i><span class="hide-sm">常用语</span></a>';
        // 下面是自定义常用语,自己自定义喜欢常用语,最好不超过10条
        $wiiuii_words_args = array('谢谢博主分享!', '博主NB,666', '感谢楼主分享!', '感谢大佬分享!', '教程很好用,谢谢!');
        foreach ($wiiuii_words_args as $wiiuii_word) {
            $wiui_word_index++;
            $wiui_words .= '<li class="wiiuii-words-li"><b>' . $wiui_word_index . '、</b><span>' .$wiiuii_word . '</span>' . '</li>';
        }
        $dropdown = '<div class="dropdown-code">';
        $dropdown .= '<span>请选择评论常用语:</span>';
        $dropdown .= '<ul>';
        $dropdown .= $wiui_words;
        $dropdown .= '</ul>';
        $dropdown .= '</div>';
    }

演示图

图片[4] - WordPress子比美化教程

首先找到 /wp-content/themes/zibll/inc/functions 目录下的 zib-posts-list.php 打开后如下图
搜索:“免费资源”,凡是改动代码请先自行备份!备份!备份!

图片[5] - WordPress子比美化教程

上图中改成你需要的颜色既可,下面奉上class列表供大家参考。

class列表

class样式class样式class样式
c-red红色文字b-theme主题背景色jb-red渐变红色背景
c-yellow橙色文字b-red红色背景jb-yellow渐变橙色背景
c-blue蓝色文字b-yellow橙色背景jb-blue渐变蓝色背景
c-blue-2深蓝色文字b-blue蓝色背景jb-green渐变绿色背景
c-green绿色文字b-green深蓝色背景jb-purple渐变紫色背景
c-purple紫色文字b-purple紫色背景jb-vip1渐变金色背景
jb-vip2渐变黑色背景

代码说明

图片[6] - WordPress子比美化教程

将下面代码放到子比主题-自定义CSS样式里面即可

/*文章随机彩色标签*/
.widget-tag-cloud.fixed-width .but:hover{opacity: 1;}.widget-tag-cloud.fixed-width .but{opacity: 0.6;line-height: 20px !important;padding: 4px 10px !important;font-size: 12px !important;}.widget-tag-cloud.fixed-width .but:nth-child(5n){background-color: #4A4A4A;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+3){background-color: #1ac756;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+4){background-color: #19B5FE;color: #FFF}
图片[7] - WordPress子比美化教程

将下面代码放到子比主题设置=>>文章列表=>>文章页面=>>在文章内容后-插入内容

<div class="shangye">本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!</div>

将下面的代码放到自定义CSS即可实现

.shangye {
    color: #fff;
    background: #5282f7 url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01BCJh7X1QbIi6fiBx8_!!2210123621994.png) 3px 7px no-repeat;
    border: 1px solid #5282f7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 50px;
    border-radius: 4px;
}

将代码放到自定义CSS样式即可

图片[8] - WordPress子比美化教程

全局追悼CSS代码

body > .header,
body > .container,
body > .footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

首页追悼CSS代码

html .home>.header,
html .home>.container,
html .home>.footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具,效果展示是一样的我是添加在小工具的
2、添加路径:在后台—>>外观—>>小工具—>>自定义 HTML—>> 选择你需要放的位置
3、我是添加在文章侧边栏
4、修改代码中的链接以及文字改为自己的

图片[9] - WordPress子比美化教程
<div class="textwidget"><div class="attentionus"><span class="zhan-widget-link zhan-link-z1"> <span class="zhan-widget-link-count">腾飞博客小工具1</span> <a href="/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">视频</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z2"> <span class="zhan-widget-link-count">腾飞博客小工具2</span> <a href="/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">视频解析</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z3"> <span class="zhan-widget-link-count">腾飞博客小工具3</span> <a href="/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">电脑壁纸</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z4"> <span class="zhan-widget-link-count">腾飞博客小工具4</span> <a href="/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">抖音去水印</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z5"> <span class="zhan-widget-link-count">腾飞博客小工具5</span> <a href="/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">在线音乐搜索</span> </a></span></div>
<style type="text/css">
.zhan-widget-link{position:relative;margin-bottom:-10px !important;position:relative;display:block;font-size:13px;background:#fff;color:#525252;line-height:40px;margin-left:-10px;padding:0 14px;border:1px solid #DDD;border-radius:2px;width:auto}span.zhan-widget-link.zhan-link-z1 {margin-top: -10px;}.zhan-widget-link-count i{margin-right:9px;font-size:17px;vertical-align:middle}.zhan-widget-link-title{position:absolute;top:-1px;right:-14px !important;bottom:-1px;width:100px;text-align:center;background:rgba(255,255,255,.08);transition:width .3s;border-radius:0 3px 3px 0}.zhan-widget-link:hover .zhan-widget-link-title{width:116px}.zhan-widget-link a{position:absolute;top:0;left:0;right:0;bottom:0}.zhan-link-z1{border-color:rgba(236,61,81,.39)}.zhan-link-z1 i{color:#FFF;margin-right:3px}.zhan-link-z1 .zhan-widget-link-title{background-color:#ec3d51;color:#fff}.zhan-link-z2{border-color:rgba(18,170,232,.39)}.zhan-link-z2 i{color:#FFF;margin-right:3px}.zhan-link-z2 .zhan-widget-link-title{background-color:#12aae8;color:#fff}.zhan-link-z3{border-color:rgba(221,7,208,.39)}.zhan-link-z3 i{color:#FFF;margin-right:3px}.zhan-link-z3 .zhan-widget-link-title{background-color:#dd07d0;color:#fff}.zhan-link-z4{border-color:rgba(249,82,16,.39)}.zhan-link-z4 i{color:#FFF;margin-right:3px}.zhan-link-z4 .zhan-widget-link-title{background-color:#f95210;color:#fff}.zhan-link-z5{border-color:rgba(25,152,114,.39)}.zhan-link-z5 i{color:#FFF;margin-right:3px}.zhan-link-z5 .zhan-widget-link-title{background-color:#199872;color:#fff}</style>
</div>
图片[10] - WordPress子比美化教程

如果要每个页面显示,将代码放入footer.php文件即可

<style> @keyframes shangxa { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-10px,0); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-6px,0); } 90% { transform: translate3d(0,-3px,0); } } .leke { display: flex; position: fixed; left: 0; top: calc(50% - 103px); flex-direction: column; -webkit-box-align: center; align-items: center; color: rgb(255, 255, 255); font-size: 16px; font-weight: 500; line-height: 20px; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(13, 206, 158, .37) 0px 6px 10px; z-index: 10; overflow: hidden; background: #0dce9e; padding: 12px 8px 12px 5px; border-radius: 0 14px 14px 0; transition: height 0.2s ease 0s, top 0.2s ease 0s; } .leke:hover { opacity: .8; } .leke .upload-icon { flex-shrink: 0; width: 28px; height: auto; display: block; margin-bottom: 2px; -webkit-animation: shangxa 2s infinite; animation: shangxa 2s infinite; } @media screen
AND (max-width: 768px) { .leke { display: none; } } #qidiana { cursor: pointer; } .class_qidian_wpa { border-radius: 6px !important; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); } </style> <a href="http://wpa.qq.com/msgrd?v=3&uin=2296945504&site=qq&menu=yes" target="_blank"><div id="qidiana" class="leke"> <svg t="1599210542874" class="upload-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16321" width="30" height="30"><path d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z" fill="#FFDA33" p-id="16322"></path><path d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z" fill="#515151" p-id="16323" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path></svg> <span>联</span><span>系</span><span>站</span><span>长</span> </div></a>

第一款

图片[11] - WordPress子比美化教程

将下面代码放到自定义CSS即可

.pagenav, .pagenav .page-numbers, .pagenav a {
    border-radius: 50%;
}

第二款

图片[12] - WordPress子比美化教程

将下面代码放到自定义CSS即可

.pagenav .current, .pagenav .page-numbers, .pagenav a {
    border: 0;
    padding: 8px 14px;
    background: linear-gradient(148deg, hsla(0, 0%, 100%, 0), var(--main-bg-color));
    -webkit-box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    border-radius: 6px;
}

注:当然两个代码都放在自定义CSS里面效果也是不错的

1 2 3 4 5

THE END
点赞17 分享
评论 共34条

请登录后发表评论