WP主题美化教程WP美化集合

在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可

<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>富哥运维</h3>
      <p>欢迎光临来到本站！</p>
    </div>
    <ul class="actions">
      <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=945049914&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="http://www.92fuge.com/links" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("92fuge").parentNode.parentNode.style.padding=0;
</script>

演示效果

相信大家也一定遇到过，当用户复制某个站点的内容后面会自动添加版权信息。这类功能可以给站点带来优化上面的帮助。

想必大家辛苦原创的东西都希望能够得到转作者的出处保留。

下面就分享使用 WordPress 建站给复制文章内容添加版权信息的两种方法，选其一即可!

<!--复制内容自动添加原文地址开始 by 富哥运维--> 
<script type="text/javascript">

  function addLink() {

  var selection = window.getSelection();

  pagelink = "</br></br>. 文章来源出自[ 富哥运维 ] 转载请保留原文链接: " + document.location.href;

  copytext = selection + pagelink;

  newdiv = document.createElement('div');

  newdiv.style.position = 'absolute';

  newdiv.style.left = '-99999px';

  document.body.appendChild(newdiv);

  newdiv.innerHTML = copytext;

  selection.selectAllChildren(newdiv);

  window.setTimeout(function () {

  document.body.removeChild(newdiv);

  }, 100);

  }

  document.oncopy = addLink;

</script>
<!--复制内容自动添加原文地址结束 by 富哥运维--> 

<script ="text/javascript">function addLink() {
 var body_element = document.body;
 var selection;
 selection = window.getSelection();
 if (window.clipboardData) { // Internet Explorer
 var pagelink ="\r\n\r\n 本文来自: 富哥运维---(www.92fuge.com),转载请保留原文链接: "+document.location.href+"";
 var copytext = selection + pagelink;
 window.clipboardData.setData ("Text", copytext);
 return false;
 } else {
 var pagelink = " 本文来自: 富哥运维---(www.92fuge.com),转载请保留原文链接: "+document.location.href+"";
 var copytext = selection + pagelink;
 var newdiv = document.createElement('div');
 newdiv.style.position='absolute';
 newdiv.style.left='-99999px';
 body_element.appendChild(newdiv);
 newdiv.innerHTML = copytext;
 selection.selectAllChildren(newdiv);
 window.setTimeout(function() {
 body_element.removeChild(newdiv);
 },0);
 }
}
document.oncopy = addLink;</script>

• 在主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
• 更新主题和修改前记得备份go.php。

演示效果

给网站添加一个可以播放VIP在线视频的解析页面

这个安装教程就不过多赘述了，也很简单，所有的 JS 和 css 代码都集成在本地，没有外链调用

至于如果需要自己改颜色的话，查看代码当中的注释效果即可

1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏

预览效果：

使用方法

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

// FPS 帧开始
// by：富哥运维---www.92fuge.com
$('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.92fuge.com
// FPS 帧结束

使用方法

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

自定义 CSS 代码：

/*文章随机彩色标签开始*/
/*by：富哥运维---www.92fuge.com*/
.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.92fuge.com*/
/*文章随机彩色标签结束*/

使用方法

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

彩色滚动条代码 CSS：

/**彩色滚动条样式开始*/
/*by：富哥运维---www.92fuge.com*/
::-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.92fuge.com*/
/**彩色滚动条样式结束*/

CSS 代码：

/* logo 扫光开始 */
/*by：富哥运维---www.92fuge.com*/
.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.92fuge.com*/
/* logo 扫光结束 */

自定义 CSS 代码：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：富哥运维---www.92fuge.com*/
.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.92fuge.com*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

//透明复制提示
// by：富哥运维---www.92fuge.com
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【富哥运维---(www.92fuge.com)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};
//透明复制提示

<!--透明复制提示开始--> 
<!--by：富哥运维---www.92fuge.com-->
<script src="https://cdn.92fuge.com/92fuge.com/2022/02/20220214094203layer985.js"></script>
<!--透明复制提示结束--> 

• 效果演示：
• 

• 虽然这个功能有些鸡肋，不过是可以避免大部分的快捷键打开网站控制台，要查看你网站的源码还是要费点劲的。
• 网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。
• 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：

<!--安全 1 开始-->
<script type="text/javascript">
        window.onload = function(){
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            document.oncontextmenu = function (){
                return false;
            }
        }
    </script>
<!--by：富哥运维   www.92fuge.com-->
<!--安全 1 结束-->

<!--安全 2 不要扒我了开始-->
<script type="text/javascript">
((function() {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return {
        addListener: function(fn) {
            callbacks.push(fn);
        },
        cancleListenr: function(fn) {
            callbacks = callbacks.filter(function(v) {
                return v !== fn;
            });
        }
    }
    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function(fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            alert('想要扒内容可以联系博主');
            window.location.reload();
        } else {
            open = false;
        }
    }
})()).addListener(function() {
    window.location.reload();
});
</script>
<!--by：富哥运维   www.92fuge.com-->
<!--安全 2 不要扒我了结束-->