美化教程开场白

本篇WP主题美化内容是光子博主在建站时一个一个测试过无任何bug错误的记录合集经验，使用之前先参考本站，若觉得实用就拿去用吧，不定时分享更新。

美化教程说明

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

美化教程

一些老教程随机顺序，新教程排在最后，越往后越新。
CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式
JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码
没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。

1、WP主题文章标签美化

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

自定义CSS代码：

/*文章随机彩色标签开始*/
.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}
/*文章随机彩色标签结束*/

2、添加logo扫光

/* 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扫光结束 */

3、添加帧率显示

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

// 帧率显示
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;background-image: linear-gradient( 120deg, #f093fb 0%, #f5576c 100%);-webkit-background-clip: text;color: transparent;"></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){ 
        $('#fps').html(fps+'FPS');
    };
    step();
})();

4、给博客换个好看的字体

以下代码是本站在用的字体，直接放在子比主题自定义css中就可以

/*全站字体美化*/
@font-face{
font-family: 'pq';
src:  url('http://ali.ieus.cn/stmd.woff');
}
body{
font-family:'pq';
}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }
/*全站字体美化结束*/

5、给昵称添加彩色流光特效

效果可以参考本站

以下代码直接放在自定义css就可以

/*昵称彩色流动样式*/
.display-name{
background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 600%;
animation: wzw 10s linear infinite;
}
@keyframes wzw {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -300%;
}
}
/*彩色昵称 结束*/

在WP主题设置—>文章&列表—>文章页—>版权提示内容处添加以下代码：

<div>
  <!--网站声明代码start-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
      1、本网站名称：<span style="color: #3333ff"
        ><span style="color: #FF6666; font-size: 18px"
          ><strong>光子博客</strong></span
        ></span
      ><br />
      2、本站永久网址：<font color="#FF6666">https://yuanma.yt3166.com</font
      ><br />
      3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长ahonker999进行删除处理。<br />
      4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码end--><br />
</div>

文章版权声明 1、本网站名称：光子博客
2、本站永久网址：https://yuanma.yt3166.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长ahonker999进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

前端笔记网站运维

WP主题美化教程（持续更新）

美化教程开场白

美化教程说明

美化教程

天气预报

白茶清欢无别事，我在等风也等你