WordPress、子比主题&网站美化方法教程-已更新到:24-08-10

前言

网站美化需要从主题模板、布局设计、色彩搭配、字体选择、图片与多媒体、图标与按钮、用户体验、交互性设计以及SEO优化等多个方面综合考虑和实施。通过这些措施，可以显著提升网站的视觉吸引力和用户体验，从而达到提升网站转化率和用户留存率的目的。

使用之前先参考本站，若觉得实用就拿去用吧，我会持续的更新~

主题美化说明：

• • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题，请一定要测试后在进行美化。

• • 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。

必要说明：（核心重点）

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

• • （最新版子比主题）CSS 代码添加到后台：子比主题设置—>自定义代码—>自定义 CSS 样式

• • （最新版子比主题）JS 即 javascript 代码添加到：后台子比主题设置—>自定义代码—>自定义 javascript 代码

• • （最新版子比主题）没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可。

• • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看上面↓↓↓↓↓↓↓↓↓

• • 其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。

• • 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。

// FPS 帧开始
// by：老会博客-www.lhbk.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.lhbk.cn
// FPS 帧结束

/*文章随机彩色标签开始*/
/*by：老会博客-www.lhbk.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.lhbk.cn*/
/*文章随机彩色标签结束*/

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