WordPress和子比主题模板美化方法教程-已更新到:21-9-6

前言

  • 本页主题美化内容是觅知社长在建站时一个一个测试过无任何错误的记录合集,使用之前先参考本站,若觉得实用就拿去用吧,我会持续的更新。

美化说明:

  • 每个人的审美观念不一样,所以请先参考本站或测试在用。
  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后在进行美化。
  • 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。
  • 子比主题美化都是社长自己鼓捣、测试后才分布的,完全免费,开放。

必要说明:(核心重点)

  • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
  • 最新版子比主题)CSS代码添加到后台:子比主题设置—>自定义代码—>自定义CSS样式
  • 最新版子比主题)JS即javascript代码添加到:后台子比主题设置—>自定义代码—>自定义javascript代码
  • 最新版子比主题)没有特殊说明的小工具,自定义HTML小工具:添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去,保存即可。
  • ↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
  • 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我可能不重复告知了,请注意看上面的方法。
  • 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。
1、网站左上角添加FPS帧率显示

使用方法

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

自定义javascript代码:

// 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();
})();
// FPS帧结束
2、主题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扫光结束 */

 

全网热点精选

一款简约WordPress Qui-Pure博客主题,自媒体模板

2021-9-7 9:27:58

全网热点精选

无极影院TV版是一款播影视盒子,解除一切限制看片巨爽

2021-9-7 15:55:35

重要说明

本站资源大多来自网络,如有侵犯你的权益请联系管理员 邮箱:baiddiz221@gmail.com  或给邮箱发送邮件welnn@outlook.com 我们会第一时间进行审核删除。 站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果你遇到支付完成,找不到下载链接,或者不能下载,或者解压失败,先不要忙,提交工单,我们会尽快处理 (博主有可能有事情或者在睡觉不能及时的回复您,邮箱留言后,请耐心等待即可!)

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索