WordPress 子比主题美化模板操作教程(更新中)-织音

织音在此提醒您：子比主题受国家版权保护，著作权登记号： 2021SR0401471
使用盗版主题对您的网站及财产安全将会带来无数的未知风险！同时，开发不易，我们一直在努力让子比主题变得更加美好，为了您的权益及作者的不易，真诚的呼吁每一位用户：支持正版，从我做起！

说明：（重要）

• ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
• （最新版）CSS代码添加到后台子比主题设置--->自定义代码--->自定义CSS样式
• （最新版）JS即javascript代码添加到后台子比主题设置--->自定义代码--->自定义javascript代码
• （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台--->外观-->小工具-->点击【自定义HTML】选择放置的位置--->把代码复制进去，保存即可。
• ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑
• 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。

1WordPress 好看的动态时钟小工具

使用教程
下载JS文件上传至服务器根目录（注意JS文件路径）
将下面代码复制至外观→小工具→自定义HTML文本中

代码：

<div class="card-content">
<canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>
<script src="/clock.js"></script>
</div>

js文件：https://zhiyinz.lanzouo.com/io85Mymqsqb

2网站添加“富强·民主·爱国”鼠标点击特效美化

部署到自己的网站非常的简单，几乎是支持所有的站点，一般情况下只要将复制好的代码粘贴到</body>之前就行了。如果是WordPress网站直接添加到footer.php文件的</body>之前就OK了。代码中的字体以及属性均可以自定义设置，因为上面附上另种不同效果的代码，大家选一个喜欢的给自己的网站装饰下看看效果吧！如果添加后未生效请尝试清理CDN缓存或者浏览器缓存就可以了。

<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

3WordPress添加FPS帧率显示

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

// FPS帧
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
 
 
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();

更多教程：WordPress 子比主题美化模板操作教程(更新中)[已更新到:4-30]