前言
本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等
每个人的审美观念不一样，所以请先参考本站或测试在用 - 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，
请一定要测试后再进行美化 - 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失
- 子比主题美化都是我自己鼓捣、测试后才分布的，完全免费，开放
- 嗯…暂时想到这些，以后想到在加
美化教程（合集）
- 一些老教程随机顺序，新教程排在最后，越往后越新
↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓ （最新版） css代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式 （最新版） JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码 （最新版） 没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可 ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑ - 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我
可能 不重复告知了，请注意看上面的方法 - 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面
1.WordPress添加FPS帧率显示
使用方法
只需在
// 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();
})();2.WordPress添加侧边彩色滚动条
3.炫酷的网站小工具-倒计时
2年前4.网站点击彩色效果
2年前5.用户头像呼吸光环+鼠标悬停旋转放大
自定义CSS代码
/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：销魂博客-www.xhybk.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.xhybk.com*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/6.子比主题设置网站背景为图片
/***日间主题模式***/
body {
background-image: url("/**这里改为你自己的图片地址**/");
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url("/**这里改为你自己的图片地址**/");
background-size: cover;
}7.WordPress给文章关键词标签自动添加内链
8.修改网站右键菜单
我们在网页中很多都有右键菜单的功能，一般点击右键显示的是浏览器默认的菜单选项，那么我们直接通过css+js实现html的右键菜单！
使用效果
![图片[1]-WordPress子比主题美化教程【更新中】-销魂博客](https://www.xhybk.com/wp-content/uploads/2022/10/20211204171037576.png)
html代码
代码中的一些文案跟链接需要你们自行修改，代码可以放到后台的自定义HTML代码中
<!--右击列表-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><style type="text/css">a{text-decoration:none}div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba(0,0,0,.3);box-shadow:0px 0px 15px#333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius:8px}div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}div.usercm ul li{margin:0px;padding:0px;line-height:35px}div.usercm ul li a{color:#666;padding:0 15px;display:block}div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}div.usercm ul li a i{margin-right:10px}a.disabled{color:#c8c8c8!important;cursor:not-allowed}a.disabled:hover{background-color:rgba(255,11,11,0)!important}div.usercm{background:#fff!important}</style><div class="usercm"style="left: 199px; top: 5px; display: none;"><ul><li><a href="https://www.xhybk.com/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li><li><a href="javascript:void(0);"onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li><li><a href="javascript:void(0);"onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li><li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li><li><a href="https://www.xhybk.com/yqlj"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li><li><a href="https://www.xhybk.com/message"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li></ul></div><script type="text/javascript">(function(a){a.extend({mouseMoveShow:function(b){var d=0,c=0,h=0,k=0,e=0,f=0;a(window).mousemove(function(g){d=a(window).width();c=a(window).height();h=g.clientX;k=g.clientY;e=g.pageX;f=g.pageY;h+a(b).width()>=d&&(e=e-a(b).width()-5);k+a(b).height()>=c&&(f=f-a(b).height()-5);a("html").on({contextmenu:function(c){3==c.which&&a(b).css({left:e,top:f}).show()},click:function(){a(b).hide()}})})},disabledContextMenu:function(){window.oncontextmenu=function(){return!1}}})})(jQuery);function getSelect(){""==(window.getSelection?window.getSelection():document.selection.createRange().text)?layer.msg("啊噢...你没还没选择文字呢！"):document.execCommand("Copy")}function baiduSearch(){var a=window.getSelection?window.getSelection():document.selection.createRange().text;""==a?layer.msg("啊噢...你没还没选择文字呢！"):window.open("https://www.baidu.com/s?wd="+a)}$(function(){for(var a=navigator.userAgent,b="Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"),d=!0,c=0;c<b.length;c++)if(0<a.indexOf(b[c])){d=!1;break}d&&($.mouseMoveShow(".usercm"),$.disabledContextMenu())});</script>感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容