WordPress子比主题美化教程

1、后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 ：我是添加在首页侧边栏

标题文本：☀当前时间

<canvas id="canvas" style="width:100%;" width="820" height="2"></canvas>
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js"></script>

演示效果

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

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

<!--好看的鼠标点击爆炸效果 start-->
<!--by：乐乐资源 - www.llsns.com-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/meme.js"></script>

<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/anime.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/fireworks.js"></script>
<!--好看的鼠标点击爆炸效果 END-->

效果图：

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

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

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

<!--全站樱花飘落 start-->
<!--by：乐乐资源 - www.llsns.com-->
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/yinghua/yinghua.js"></script>
<!--全站樱花飘落 END-->

没有效果动态图

1、网站管理后台->主题设置->文章&列表->文章页 -> 文章页 在文章内容后-插入内容 ，把下面的 php 代码复制粘贴到里面即可。

2、此代码理论上适用所有主题，只需要在合适的地方添加上代码就行

3、代码中的图片我托管在 jsdelivr+github，可直接引用，部分的文字可修改成自己的

<center><span style="color: #ef0c7e;; font-size: 15px"><strong>------本页内容已结束，喜欢请分享------</strong></span></span><br /></center>
<br />
<h3 class="wp-block-zibllblock-biaoti title-theme"><strong>感谢您的来访，获取更多精彩文章请收藏本站。</strong></h3>
<a href="https://98dou.cn" target="_blank"  title="更多精彩文章，请关注“乐乐博客”">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 9px;  -webkit-border-radius: 9px; -moz-border-radius: 9px;" src="https://cdn.jsdelivr.net/gh/1426239465/98tc@d0774e08f0a0463dcd0fc072406c38534c269d00/2021/08/31/88dbbdacf7bc69c8813ebfdb22c7f7b3.png">
</a>  

效果演示

1、很多时候网页背景也是白的,图片整体也是白色的,有的时候用户不好区分，这是图片还是网页,图片弄个外边框就好区分了,当然图片是鼠标移动到图片上才会显示边框

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

里面的 8px 大小可自行调节，颜色代码#63B8FF 也可自行设置

/*鼠标移动图片外发光*/
/*by：乐乐资源 - www.llsns.com*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}

效果图：

1. 虽然这个功能有些鸡肋，不过是可以避免大部分的快捷键打开网站控制台，要查看你网站的源码还是要费点劲的。
2. 网站管理后台->子比主题设置->自定义代码->自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。
3. 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：

自定义 HTML 代码

<!--安全 1 开始-->
<script type="text/javascript">
        window.onload = function(){
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            document.oncontextmenu = function (){
                return false;
            }
        }
    </script>
<!--by：乐乐资源 - www.llsns.com-->
<!--安全 1 结束-->

方法 二：不要扒我了

网站管理后台->子比主题设置->自定义代码->自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码

<!--安全 2 不要扒我了开始-->
<script type="text/javascript">
((function() {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return {
        addListener: function(fn) {
            callbacks.push(fn);
        },
        cancleListenr: function(fn) {
            callbacks = callbacks.filter(function(v) {
                return v !== fn;
            });
        }
    }
    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function(fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            alert('不要扒我了');
            window.location.reload();
        } else {
            open = false;
        }
    }
})()).addListener(function() {
    window.location.reload();
});
</script>
<!--by：乐乐资源 - www.llsns.com-->
<!--安全 2 不要扒我了结束-->

1. wordpress自带的分页按钮是比较丑的很突兀，经过社长一段下面的 CSS 代码优化之后会变得更加美观
2. 子比主题添加路径：
   网站管理后台->子比主题设置->自定义代码->自定义 CSS 样式，把下面的 css 代码复制粘贴到里面即可。

自定义 CSS 代码

/*文章分页按钮美化*/
.post-page-numbers{padding: 4px 10px;text-align:center;display: inline; }.post-nav-links{background:0;margin-left: -50px;}

效果演示：

这个是一个小功能，也是为了留个备忘录，担心下次搬家这个给忘了

添加方法： 后台设置->外观->小工具->添加 Zibll 链接列表(新版),加到标题右侧按钮即可

<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链

效果图