WordPress和子比主题模板&网站美化方法教程[已更新到:23-04-08]

WordPress和子比主题模板&网站美化方法教程[已更新到:23-04-08]

76408

前言

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

主题美化说明：

  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题，请一定要测试后在进行美化。
  • 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。

必要说明：（核心重点）

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

使用方法

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

自定义 javascript 代码：

// FPS 帧开始
// by：百谷资源网-www.bigon.cn
$('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();
})();
// by：百谷资源网-www.bigon.cn
// FPS 帧结束
// FPS 帧开始
// by：百谷资源网-www.bigon.cn
$('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();
})();
// by：百谷资源网-www.bigon.cn
// FPS 帧结束
// FPS 帧开始
// by：百谷资源网-www.bigon.cn
$('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();
})();
// by：百谷资源网-www.bigon.cn
// FPS 帧结束

效果图

WordPress和子比主题模板&网站美化方法教程-百谷资源网

使用方法

复制 CSS 代码到后台子比主题设置—》自定义 CSS 样式—》将 CSS 代码粘贴框里，即可大功告成。

自定义 CSS 代码：

/*文章随机彩色标签开始*/
/*by：百谷资源网-www.bigon.cn*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*by：百谷资源网-www.bigon.cn*/
/*文章随机彩色标签结束*/
/*文章随机彩色标签开始*/
/*by：百谷资源网-www.bigon.cn*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*by：百谷资源网-www.bigon.cn*/
/*文章随机彩色标签结束*/
/*文章随机彩色标签开始*/
/*by：百谷资源网-www.bigon.cn*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*by：百谷资源网-www.bigon.cn*/
/*文章随机彩色标签结束*/

使用方法

一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义 CSS 代码里面添加美化的 css 代码就即可美化啦！
如果主题没有 自定义代码 那么在 WordPress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美！

彩色滚动条代码 CSS：

/**彩色滚动条样式开始*/
/*by：百谷资源网-www.bigon.cn*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/*by：百谷资源网-www.bigon.cn*/
/**彩色滚动条样式结束*/
/**彩色滚动条样式开始*/
/*by：百谷资源网-www.bigon.cn*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/*by：百谷资源网-www.bigon.cn*/
/**彩色滚动条样式结束*/
/**彩色滚动条样式开始*/
/*by：百谷资源网-www.bigon.cn*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/*by：百谷资源网-www.bigon.cn*/
/**彩色滚动条样式结束*/

CSS 代码：

/* logo 扫光开始 */
/*by：百谷资源网-www.bigon.cn*/
.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;}}
/* by：百谷资源网-www.bigon.cn*/
/* logo 扫光结束 */
/* logo 扫光开始 */
/*by：百谷资源网-www.bigon.cn*/
.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;}}
/* by：百谷资源网-www.bigon.cn*/
/* logo 扫光结束 */
/* logo 扫光开始 */
/*by：百谷资源网-www.bigon.cn*/
.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;}}
/* by：百谷资源网-www.bigon.cn*/
/* logo 扫光结束 */

添加到自定 CSS 代码：

/*导航栏字体加粗开始*/
/*by：百谷资源网-www.bigon.cn*/
ul.nav {font-weight: 700;}
/*by：百谷资源网-www.bigon.cn*/
/*导航栏字体加粗结束*/
/*导航栏字体加粗开始*/
/*by：百谷资源网-www.bigon.cn*/
ul.nav {font-weight: 700;}
/*by：百谷资源网-www.bigon.cn*/
/*导航栏字体加粗结束*/
/*导航栏字体加粗开始*/
/*by：百谷资源网-www.bigon.cn*/
ul.nav {font-weight: 700;}
/*by：百谷资源网-www.bigon.cn*/
/*导航栏字体加粗结束*/

自定义 CSS 代码：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：百谷资源网-www.bigon.cn*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*by：百谷资源网-www.bigon.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/
/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：百谷资源网-www.bigon.cn*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*by：百谷资源网-www.bigon.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/
/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：百谷资源网-www.bigon.cn*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*by：百谷资源网-www.bigon.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

自定义 CSS 代码：

/*首页文章列表悬停上浮开始*/
/*by：百谷资源网-www.bigon.cn*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*by：百谷资源网-www.bigon.cn*/
/*首页文章列表悬停上浮结束*/
/*首页文章列表悬停上浮开始*/
/*by：百谷资源网-www.bigon.cn*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*by：百谷资源网-www.bigon.cn*/
/*首页文章列表悬停上浮结束*/
/*首页文章列表悬停上浮开始*/
/*by：百谷资源网-www.bigon.cn*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*by：百谷资源网-www.bigon.cn*/
/*首页文章列表悬停上浮结束*/
WordPress设置网站动态标题-百谷资源网
WordPress设置网站动态标题-百谷资源网
WordPress设置网站动态标题
百谷资源网的头像-百谷资源网2年前
0685
WordPress侧边栏添加滚动播报小工具两种样式-百谷资源网
WordPress侧边栏添加滚动播报小工具两种样式-百谷资源网
WordPress侧边栏添加滚动播报小工具两种样式
百谷资源网的头像-百谷资源网2年前
411513
WordPress全站左侧边栏添加联系站长按钮-百谷资源网
WordPress全站左侧边栏添加联系站长按钮-百谷资源网
WordPress全站左侧边栏添加联系站长按钮
百谷资源网的头像-百谷资源网2年前
06410

1 2 3 4 5 6 7 8

温馨提示：若内容/图片/下载链接失效，请在下方留言或登录后私信站长。
------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
WP主题美化WordPress教程
# WP教程# WP美化# WP主题美化# 美化主题# 子比主题美化# 美化教程
喜欢就支持一下吧
点赞8 分享
百谷资源网的头像-百谷资源网
相关推荐
评论 共7条

请登录后发表评论

    只看作者
    • jiuan333的头像-百谷资源网jiuan333等级-LV1-百谷资源网0
      终于找到这篇文章了，感谢百谷的分享！
      1年前
默认头像
超清无广告视频 极速视频
在线视频解析 视频解析
搜索
开启精彩搜索
2025最新去水印小程序源码，免服务器，附带流量主-百谷资源网
37人已阅读
2025最新去水印小程序源码，免服务器，附带流量主
TOP1
JetBrain 全家桶激活-百谷资源网
JetBrain 全家桶激活
5天前47人已阅读
TOP2
博客小程序资源站小程序源码(自定义接口版）-百谷资源网
博客小程序资源站小程序源码(自定义接口版）
5天前73人已阅读
TOP3
全网首发全开源带后台版本资源站去插播源码-百谷资源网
全网首发全开源带后台版本资源站去插播源码
1个月前217人已阅读
TOP4
天涯m3u8切片资源去广告json解析接口源码-百谷资源网
天涯m3u8切片资源去广告json解析接口源码2025.06.09-持续更新中
5个月前535人已阅读
TOP5
如意m3u8切片资源去广告json解析接口源码-百谷资源网
如意m3u8切片资源去广告json解析接口源码2025.06.23-持续更新中
8个月前913人已阅读
TOP6
魔都去插播广告飞刀资源去插播源码随机图片api量子非凡去广告轮询php源码跨域解决.跨域解决豆瓣信息api评论api解析算法解析加密美化教程美化主题美化网页播放器网站加速统计模块索尼m3u8去广告站长工具矢量图标