在子比主题设置—自定义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子比美化教程](https://tfbk.jzpix.cn/wp-content/uploads/2023/11/1700718576202311230549368.jpg)
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代码
第一步:在“
![图片[2] - WordPress子比美化教程](https://tfbk.jzpix.cn/wp-content/uploads/2023/11/17007186482023112305504826.jpg)
// 常用语函数
if (_pz('comment_words', true)) {
echo zib_get_input_expand_but('wiui_words');
}第二步:在“../zibll/inc/functions/functions.php”子比主题的 template 目录下“functions.php”文件,搜索 smilie 在“表情”上方位置添加如下代码:
![图片[3] - WordPress子比美化教程](https://tfbk.jzpix.cn/wp-content/uploads/2023/11/17007186832023112305512328.jpg)
// 常用语函数
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子比美化教程](https://tfbk.jzpix.cn/wp-content/uploads/2023/11/17007187242023112305520496.jpg)
首先找到 /wp-content/themes/zibll/inc/functions 目录下的 zib-posts-list.php 打开后如下图
搜索:“免费资源”,凡是改动代码请先自行备份!备份!备份!
![图片[5] - WordPress子比美化教程](https://tfbk.jzpix.cn/wp-content/uploads/2023/11/1700718745202311230552259.jpg)
上图中改成你需要的颜色既可,下面奉上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子比美化教程](https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01f7C9iu1QbIhxLMmzK_!!2210123621994.jpg)
将下面代码放到子比主题-自定义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子比美化教程](https://img.alicdn.com/imgextra/i1/2210123621994/O1CN016wACdJ1QbIi2wHO1I_!!2210123621994.jpg)
将下面代码放到子比主题设置=>>文章列表=>>文章页面=>>在文章内容后-插入内容
<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子比美化教程](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01NFl7tj1QbIi3hJARM_!!2210123621994.jpg)
全局追悼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子比美化教程](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01pnR0ZJ1QbIi6oxhrD_!!2210123621994.gif)
<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子比美化教程](https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01V05Fn51QbIhxyMAQF_!!2210123621994.jpg)
如果要每个页面显示,将代码放入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子比美化教程](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN013Akgkc1QbIhyTecQF_!!2210123621994.jpg)
将下面代码放到自定义CSS即可
.pagenav, .pagenav .page-numbers, .pagenav a {
border-radius: 50%;
}第二款
![图片[12] - WordPress子比美化教程](https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01ko2K5g1QbIi6fwjTX_!!2210123621994.jpg)
将下面代码放到自定义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里面效果也是不错的
![图片[13] - WordPress子比美化教程](https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01ljQzg71QbIi3ELeCk_!!2210123621994.gif)






- 最新
- 最热
只看作者