WordPress 子比主题美化教程(更新中)

说明:(重要)WordPress子比主题是很多人喜欢的一款主题,该主题美化程度还是比较好的,但还是有很多人喜欢能更自由话,能做更多的美化效果,今天给大家分享一下网络收集的一些美...

jaysun 09-16 91阅读 1评论
商品售价(¥):0 积分

说明:(重要)

WordPress子比主题是很多人喜欢的一款主题,该主题美化程度还是比较好的,但还是有很多人喜欢能更自由话,能做更多的美化效果,今天给大家分享一下网络收集的一些美化教程。


↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓

(最新版)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文件:

隐藏内容
评论可见
前往评论



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();
})();



您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
评论列表 (有 1 条评论,91人围观)
网友昵称:nwego121btcy@163.com
nwego121btcy@163.com V 普通用户 Google Chrome 86.0.4240.198 Windows 10 x64 沙发
09-20 来自广东 回复

目录[+]

取消
微信二维码
微信二维码
支付宝二维码