![图片[1]-WordPress和Zibll主题美化教程](http://i58.icu/wp-content/uploads/2024/02/d3d9446802a4.gif)
![图片[2]-WordPress和Zibll主题美化教程](https://i58-1251178265.cos.ap-nanjing.myqcloud.com/2024/02/20240225073849529.gif?imageMogr2/format/webp/interlace/1/quality/100)
![图片[3]-WordPress和Zibll主题美化教程](https://i58-1251178265.cos.ap-nanjing.myqcloud.com/2024/02/20240225073946979.gif?imageMogr2/format/webp/interlace/1/quality/100)
![图片[4]-WordPress和Zibll主题美化教程](https://i58-1251178265.cos.ap-nanjing.myqcloud.com/2024/02/20240225073915272.gif?imageMogr2/format/webp/interlace/1/quality/100)
教程
1、在主题目录下functions.php文件把下面的代码添加进去:
// 文章字数和阅读时间
function count_words_read_time () {
global $post;
$text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
$read_time = ceil($text_num/1800); // 修改数字1800调整时间
$output .= '共计' . $text_num . '字,阅读大约' . $read_time . '分钟';
return $output;
}
2、在主题目录zibll/inc/functions/zib-single.php,把下面代码添加到<div class="article-meta abs-right muted-color radius"></div>
之间
<!--文章字数和阅读时间--><i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?>
说明
最近觉得自己的版权说明不好看,可能是视觉疲劳吧,看多了就觉得不好看,就研究一下美化,现在共享出来!(放到后台的文章页->版权提示内容里保存就行了)
<div style="margin-top:20px;">
<legend align="center" style="width: 40%;margin: 0 auto -14px auto;border-radius: 999px;background: #777777;color: #fff;">版权声明</legend>
<div class="joe_div">
<div class="item">
<svg t="1626845917242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4434" width="16" height="16"><path d="M737.41824 413.42976c0-74.9312-54.784-135.68-122.368-135.68s-122.368 60.74368-122.368 135.68 54.784 135.68 122.368 135.68 122.368-60.75392 122.368-135.68z m205.44512 433.97632c0-59.5968-144.27136-121.78432-328.48896-121.78432s-333.55776 66.81088-333.55776 126.40768S430.15168 913.6896 614.4 913.6896s328.46336-6.69184 328.46336-66.28864z" fill="#F4CA1C" p-id="4435"></path><path d="M516.6592 606.08c-134.25664 0-243.47648-119.86432-243.47648-267.19744S382.40256 71.68 516.6592 71.68s243.47648 119.86432 243.47648 267.20256-109.22496 267.19744-243.47648 267.19744z m0-471.28064c-99.5328 0-180.51072 91.55072-180.51072 204.0832s80.97792 204.07808 180.51072 204.07808 180.51072-91.5456 180.51072-204.07808-80.97792-204.0832-180.51072-204.0832zM517.7088 957.44C278.3744 957.44 71.68 957.44 71.68 841.728c0-108.71808 208.42496-204.0832 446.0288-204.0832 111.75936 0 219.136 19.57888 302.32576 55.13216C908.64128 730.624 957.44 781.312 957.44 835.40992 957.44 948.4544 766.85824 957.44 517.7088 957.44z m0-256.68096c-233.88672 0-383.05792 92.55936-383.05792 140.96384 0 17.57696 34.42176 32.65024 94.4384 41.344 71.79776 10.40896 173.18912 11.264 288.62464 11.264 104.09472 0 210.6368-1.73056 284.72832-14.28992 58.49088-9.91744 92.032-26.17856 92.032-44.6208-0.01024-47.48288-143.04768-134.66112-376.76544-134.66112z" fill="#595BB3" p-id="4436"></path></svg>
<span>本站网络名称:</span>
<span style="color: #3333ff"><span style="color: #FF6666; font-size: 18px"><strong style="color: #777777;">使者云</strong></span></span>
</div>
<div class="item">
<svg t="1626845985384" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4698" width="16" height="16"><path d="M493.12768 371.93216a158.45376 158.45376 0 1 0-158.45376 157.79328 158.12096 158.12096 0 0 0 158.45376-157.79328z m419.8656 345.97376a158.45376 158.45376 0 1 0-158.45376 157.79328 158.12096 158.12096 0 0 0 158.45376-157.79328z" fill="#F4CA1C" p-id="4699"></path><path d="M757.87776 447.93344V205.89568l157.33248 151.552a36.90496 36.90496 0 1 0 51.4048-52.96128l-193.98144-186.88a79.41632 79.41632 0 0 0-110.80192 1.09056l-131.02592 131.33312a246.272 246.272 0 1 0-273.96096 329.33376v79.46752H83.05664a36.864 36.864 0 1 0 0 73.6768h173.78816v160.256a36.97664 36.97664 0 0 0 73.95328 0v-160.256h152.064a246.40512 246.40512 0 1 0 275.01568-284.57472zM128.04608 337.73056a172.544 172.544 0 1 1 172.544 171.91424 172.42624 172.42624 0 0 1-172.544-171.91424z m353.5104 321.1008H330.79808v-77.42464a246.2208 246.2208 0 0 0 216.30464-243.2l136.82176-137.11872v248.32a246.48704 246.48704 0 0 0-202.368 209.42336z m244.2752 204.45184a171.90912 171.90912 0 1 1 172.544-171.90912 172.42624 172.42624 0 0 1-172.544 171.90912z" fill="#595BB3" p-id="4700"></path></svg>
<span>本站永久网址:</span>
<font color="#FF6666" style="color: #777777;font-weight: 600;">https://i58.icu</font>
</div>
<div class="item">
<svg t="1626845999833" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4830" width="16" height="16"><path d="M964.30592 749.2352a215.07072 215.07072 0 1 0-215.07072 215.07072 215.07072 215.07072 0 0 0 215.07072-215.07072z" fill="#F4CA1C" p-id="4831"></path><path d="M488.40192 655.24736a77.96224 77.96224 0 0 1-50.53952-18.432l-104.27904-88.35584A35.328 35.328 0 0 1 379.22816 494.592l104.27392 88.3456a7.74144 7.74144 0 0 0 10.80832-0.81408l179.93216-206.21312a35.328 35.328 0 0 1 53.20704 46.41792l-179.92192 206.208a78.25408 78.25408 0 0 1-59.12576 26.71104zM514.56 952.32a437.76 437.76 0 1 1 437.76-437.76 438.272 438.272 0 0 1-437.76 437.76z m0-804.91008a367.1552 367.1552 0 1 0 367.1552 367.15008 367.56992 367.56992 0 0 0-367.1552-367.15008z" fill="#595BB3" p-id="4832"></path></svg>
<span>网站侵权说明:</span>
<span class="text" style="">本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长29523472@qq.com 删除处理。<br>
<span class="btn-info btn-xs pink">1</span> 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。<br>
<span class="btn-info btn-xs pink">2</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报<br>
<span class="btn-info btn-xs pink">3</span> 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
</span>
</div>
</div>
</div>
我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接通过css+js实现html的右键菜单!
![图片[5]-WordPress和Zibll主题美化教程](http://i58.icu/wp-content/uploads/2024/02/4-1.png)
代码中的一些文案跟链接需要你们自行修改,代码可以放到后台的自定义HTML代码中
<!--右击列表-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><style type="text/css">a{text-decoration:none}div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba(0,0,0,.3);box-shadow:0px 0px 15px#333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius:8px}div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}div.usercm ul li{margin:0px;padding:0px;line-height:35px}div.usercm ul li a{color:#666;padding:0 15px;display:block}div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}div.usercm ul li a i{margin-right:10px}a.disabled{color:#c8c8c8!important;cursor:not-allowed}a.disabled:hover{background-color:rgba(255,11,11,0)!important}div.usercm{background:#fff!important}</style><div class="usercm"style="left: 199px; top: 5px; display: none;"><ul><li><a href="https://21lhz.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li><li><a href="javascript:void(0);"onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li><li><a href="javascript:void(0);"onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li><li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li><li><a href="https://21lhz.cn/friendship-links"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li><li><a href="https://21lhz.cn/message"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li></ul></div><script type="text/javascript">(function(a){a.extend({mouseMoveShow:function(b){var d=0,c=0,h=0,k=0,e=0,f=0;a(window).mousemove(function(g){d=a(window).width();c=a(window).height();h=g.clientX;k=g.clientY;e=g.pageX;f=g.pageY;h+a(b).width()>=d&&(e=e-a(b).width()-5);k+a(b).height()>=c&&(f=f-a(b).height()-5);a("html").on({contextmenu:function(c){3==c.which&&a(b).css({left:e,top:f}).show()},click:function(){a(b).hide()}})})},disabledContextMenu:function(){window.oncontextmenu=function(){return!1}}})})(jQuery);function getSelect(){""==(window.getSelection?window.getSelection():document.selection.createRange().text)?layer.msg("啊噢...你没还没选择文字呢!"):document.execCommand("Copy")}function baiduSearch(){var a=window.getSelection?window.getSelection():document.selection.createRange().text;""==a?layer.msg("啊噢...你没还没选择文字呢!"):window.open("https://www.baidu.com/s?wd="+a)}$(function(){for(var a=navigator.userAgent,b="Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"),d=!0,c=0;c<b.length;c++)if(0<a.indexOf(b[c])){d=!1;break}d&&($.mouseMoveShow(".usercm"),$.disabledContextMenu())});</script>
自定义代码CSS:
/*首页文章列表悬停上浮开始*/
.tab-content .posts-item:not(article):hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 3px 20px rgba(0, 0, 0, .25);animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;}
@keyframes index-link-active {
0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}
16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}
100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}
}
/*首页文章列表悬停上浮结束*/
![图片[6]-WordPress和Zibll主题美化教程](https://i58.icu/wp-content/uploads/2024/02/image-14.webp)
![图片[7]-WordPress和Zibll主题美化教程](https://i58.icu/wp-content/uploads/2024/02/202402071707308987414857.webp)
首页底部的联系图标可根据自己的喜好进行修改,在wp-content的zib-footer.php里面搜qq就行了,然后修改对应代码。
图标地址:https://fontawesome.com.cn/v4/
注意:这个地址打开是v5版本,我们子比只有v4可以直接使用,我们需求去回到旧版v4,再选图标,也就是fa打头的才可以。如:
![图片[8]-WordPress和Zibll主题美化教程](https://i58.icu/wp-content/uploads/2024/02/202401260823.webp)
自定义底部HTML代码
<!-- 网站节日灯笼开始 -->
<!-- 灯笼1 -->
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 灯笼2 -->
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">喜迎</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 网站节日灯笼结束 -->
自定义CSS样式
/* 灯笼 -网站节日灯笼开始*/
.deng-box {
position: fixed;
top: -40px;
left: -20px;
z-index: 999;
}
.deng-box1 {
position: fixed;
top: -30px;
left: 10px;
z-index: 999;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-size: 2.5rem;
color: #dc8f03;
font-weight: bold;
line-height: 30px;
text-align: center;
padding-top: 10px;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
/* 灯笼 -网站节日灯笼结束*/
以上CSS代码设置灯笼在左边
如果想改为右边,就把这部分替换一下
.deng-box {
position: fixed;
top: -40px;
right: -20px;
z-index: 999;
}
.deng-box1 {
position: fixed;
top: -30px;
right: 10px;
z-index: 999;
}
如果你要是问这个替换的位置是哪里,请看CSS代码,最开始的位置,前两段~
![图片[9]-WordPress和Zibll主题美化教程](https://i58-1251178265.cos.ap-nanjing.myqcloud.com/2024/02/20240225070607785.webp?imageMogr2/format/webp/interlace/1/quality/100)
修改文件:
子比主题: zib-comments-list.php (inc/functions/zib-comments-list.php)
找到大概27行的
$user_id = $comment–>user_id; 下面添加
大概在第52行找到
替换为:
![图片[10]-WordPress和Zibll主题美化教程](https://i58-1251178265.cos.ap-nanjing.myqcloud.com/2024/02/20240225072000961.png?imageMogr2/format/webp/interlace/1/quality/100)
1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://i58-1251178265.cos.ap-nanjing.myqcloud.com/2024/02/20240226103045918.gif)
- 最新
- 最热
只看作者