WordPress网站&子比主题模板美化教程汇总篇 [26]-Baili Blog

11、底部添加蓝色波浪

在zibll主题目录下，footer.php文件中的“</footer>”（重要）下面添加下面的代码：其他主题 footer.php 文件同样适用，自己看着加就好了。

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

12、公告弹窗样式美化

代码：

其实就是一个简单的HTML代码（因为弹窗公告支持HTML代码），自己在弹窗内容里面添加代码即可。图片、信息啥的自己修改即可。

<html>
    <body>
<!--文本-->
<a href="https://soujiz.com/" target="_blank"  title="大雄搜集站">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;" src="https://img.wiiuii.cn/WP-TUTU/%E9%A6%96%E9%A1%B5%E5%85%AC%E5%91%8A%E5%9B%BE/ttvvg.gif">
</a>
        <div class="text_body" style="padding-bottom: 30px;">
            <div class="text" id="container" style="font-weight:bold;">
                欢迎光临寒舍！还在使用本站《子比主题添加底部统计信息模块小工具》文章中修改版的小伙伴，出现“用户总数”不显示的，请更新一下PHP代码，我已经更新PHP代码在文章中了。另外所有教程的图片链接，请自行下载上传到本地或者上传其他图床，谢谢啦。
            </div>
        </div>
<!--文本结束-->
<script type="text/javascript">
var text = $("#container").text().trim();
        $("#container").html("");
        for(var i = 0;i < text.length;i++){
            $("#container").append("<span>"+text[i]+"</span>")
        }
        var s = 0;
        var tim = setInterval(function(){
            $("#container span").eq(s++).css("color",getColor()).show();
            if(s == text.length){
                clearInterval(tim)
            }
        }, 100)
        function getColor(){
            return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
        }
        </script>
    </body>
</html>

13、WordPress网站子比主题添加文章评论常用语功能

WordPress网站子比主题添加文章评论常用语功能

8个月前

0767

14、侧边在线征稿小工具

使用方法：在后台—》外观—》小工具—》自定义 HTML

<style type="text/css">
    #update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
    </style>
    <div id="update_version">
    <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1431258805@qq.com" target="_blank" rel="noopener"><img title="大雄搜集站" src="https://soujiz.com/wp-content/uploads/2022/11/impicture_7c6a63ff247fc824fa97682adf6e67d9.jpg" alt="图片" style="border-radius:5px;" /></a>
    <a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2371305831@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)"  rel="noopener">发送邮件</a>
    <a class="cms_link" href="https://soujiz.com/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)"  rel="noopener">点击投稿</a>
    <a class="grid_link" href="https://soujiz.com/?random" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)"  rel="noopener">随机盲盒</a>
    </div>
    <div>
      <hr>
    <a href="https://soujiz.com/newposts" target="_blank" rel="noopener">点击在线投稿</a>
      <br>
    投稿邮箱：<b>2371305831@qq.com</b>
      <br>
    交流QQ：<b><a href="https://soujiz.com" target="_blank" rel="noopener">2371305831</a></b>
    </div>

15、复制版权透明框提示

在后台自定义js中，添加如下代码即可：

<!---复制透明提醒代码开始--->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【大雄搜集站SOUJIZ.COM】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};</script>

16、给网站添加统计信息模块小工具

子比主题网站添加底部统计信息模块小工具

8个月前

222715

17、为子比主题添加文章图片外边框

使用方法：后台子比主题设置—》自定义代码—》自定义CSS样式—》放置即可。

/*鼠标移动图片外发光*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}

18、主题 LOGO 扫光

使用方法：后台子比主题设置—》自定义代码—》自定义CSS样式—》放置即可。

/* logo 扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* logo 扫光结束 */

19、整站底部添加好看的蓝色波浪

在 zibll 主题目录下，themes/zibll/footer.php 文件中的“</footer>”（重要）下面添加下面的代码：

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

20、全站添加自适应樱花飘落的好看样式

1、 网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

2、也可在您的任意主题目录下的 foot.php 文件最后添加下面代码

3、刚添加可能要等一会会自动显示

<!--全站樱花飘落 start-->
<script src="//001.pipixiaozhan.cn/javascript/yinghua.js"></script>
<!--全站樱花飘落 END-->

文章版权声明 1、本网站名称：Baili Blog
2、本站永久网址：https://baili.tax
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END