子比主题美化教程WP美化集合轩逸4个月前更新关注私信17510.6W+1702 文章最后更新时间:2024-05-06 16:48:08 本文章只是个人无聊时的对子比主题美化记录集合,同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧,我会不定期(主要是想不到好的美化了)更新一些美化教程、好玩的小工具、页面等等。 美化说明: 1.每个人的审美观念不一样,所以请先参考本站或测试在用。2.主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后在进行美化。3.主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。4.子比主题美化都是我自己鼓捣、测试后才分布的,完全免费,开放。5.嗯。就这样了下面开始教程............. 美化教程(集合) 一些老教程随机顺序,新教程排在最后,越往后越新。 ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓ (最新版)CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式 (最新版)JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码 (最新版)没有特殊说明的小工具,自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去,保存即可。 ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑ 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我可能不重复告知了,请注意看上面的方法。 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。 首页文章点击更多按钮样式美化 CSS代码: /点击更多/ .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 150px; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;} 截图 主题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处。 底部添加蓝色波浪 在zibll主题目录下,footer.php文件中的“</footer>”(重要)下面添加下面的代码: <!--底部波浪开始--> <div class="wiiuii_layout"> <svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/> <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/> <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/> </g> </svg> </div> <style type='text/css'> .parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;} </style> <!--底部波浪结束--> 效果 添加文章更新或过期失效提示 将下面的函数代码加入到主题目录下functions.php文件中。 //文章过期提示 function article_time_update() { date_default_timezone_set('PRC'); $newdate=time(); $updated_date = get_the_modified_time('Y-m-d H:i:s'); $updatetime=strtotime($updated_date); $custom_content = ''; if ( $newdate > $updatetime+86400) { $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示:</strong>本文最后更新于<code>'. $updated_date . '</code>,某些文章具有时效性,若有错误或已失效,请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="轩逸博客" href="http://wpa.qq.com/msgrd?v=3&uin=1649825180&site=qq&menu=yes"><b>轩逸站长</b></a>。</div >'; } echo $custom_content; } 说明:请自己修改上面有关于本站的信息,改成自己网站信息即可,图标可以用阿里矢量图。 在主题目录zibll/inc/functions/zib-single.php文件中,文章分页函数(子比主题V6.1版本(主题更新有可能会有变动)大概是296回车一行代码放在297行,见下图)下面添加下方代码即可。 article_time_update();//文章过期提示 CSS代码:(在自定义CSS样式添加下面代码) /*过期文章提示样式*/ .article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);} 效果图: 底部炫酷引导卡片小工具 在后台—》外观—》小工具—》首页-底部全宽度,自定义HTML添加下面代码即可。 <div id="ijinse" 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="https://img.buerds.com" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a> </li> <li> <a href="https:/xuanyiidc.cn/youqing/j" 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: linear-gradient(to right, rgb(103,58,183) 0%, rgb(233,30,99) 100%);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("ijinse").parentNode.parentNode.style.padding=0; </script> 效果截图: 好看的侧边ip标签小工具 代码: <div id="wiiuii1"> <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div> 效果: 评论框添加背景图片 在主题设置—》自定义CSS样式,添加下面的CSS代码: /*评论背景图*/ textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.atbkw.cn/wp-content/uploads/aotian/qita/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;} textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;} 说明:图片自己保存到本地,图片大小(162 X 75,建议透明的png图片),自己添加喜欢的背景图片。 效果: 下载页面添加声明或说明 HTML代码 <!--开始--> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;} .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/ .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);} .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/ .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;} .panel-body .help li{line-height:25px;font-size:14px;color: #000;} .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;} .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;} </style> <div class="panel"> <div class="panel-heading"> <h3>下载说明</h3> </div> <div class="panel-body"> <ul class="help"> <li>1.轩逸博客网所提供的压缩包若无特别说明,解压密码均为<em>改自己的</em></em>;</li> <li>2.下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;</li> <li>3.文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;</li> <li>4.资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便傲天博客网及时进行更新;</li> <li>5.其他下载问题请自行搜索教程,这里不一一讲解。</li> </ul> </div> </div> <div class="panel"> <div class="panel-heading"> <h3>站长声明</h3> </div> <div class="panel-body"> <span class="shengming">本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!</span> </div> </div> <!--结束--> 添加说明(注意):主题目录zibll/pages/download.php,在合适的位置添加上面的即可,大概是在115行位置添加(我的在115行添加,不知道新版有没有变化)。 效果: 看本站下载页面 改网站背景图+改网站背景色 把下面背景图代码放到主题下的css里面,我是子比主题就放到后台的css里面就可以了,把下面代码的图片链接改成你需要的背景图就行了。 如果不想用背景图,改背景色也可以,下面的背景色代码放入css里面颜色代码我就不多说了。 /*背景图*/ body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;} /*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;} 效果看本站首页就好了 网站底部—灵动的鱼群跳跃 如果用的子比主题:把代码复制粘贴到主题后台–>自定义代码–>自定义底部HTML代码 其它主题:把代码放到主题footer.php文件的在 <footer></footer> 之间添加两行代码 <div id="jsi-flying-fish-container"></div> <script src="https://www.atbkw.cn/aotian/js/script.js"></script> 1 2 3 4------本页内容已结束,喜欢请分享------ 感谢您的来访,获取更多精彩文章请收藏本站。 供学习和研究使用,请在下载后24小时内删除 购买前可以联系作者确认资源信息,防止交易矛盾 © 版权声明 版权声明 本站网络名称: 轩逸博客 本站永久网址: www.xyi66.cn 网站侵权说明: 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ1747004788删除处理。 1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 一月 14 本站历史上的今天 2023:ZIBB子比小黑屋 (7)2023:1月14日,星期六,在这里每天60秒读懂世界! (0) THE END子比美化技术分享教程网站建设# 子比美化# 教程# WordPress美化# wp美化# WordPress# 免费# 子比主题# wordpress主题# WordPress教程# ico# 美化教程# 悬浮按钮栏美化# 评论区# 夸夸功能# 新通知# 弹窗样式# 发布ICON图标# 已更新 喜欢就支持一下吧点赞1702发电 分享QQ空间微博QQ好友海报分享复制链接收藏