WordPress和子比主题模板美化方法教程<span>-已更新到:21-9-22</span>

WordPress和子比主题模板美化方法教程-已更新到:21-9-22

573868501

前言

  • 本页主题美化内容是觅知社长在建站时一个一个测试过无任何错误的记录合集,使用之前先参考本站,若觉得实用就拿去用吧,我会持续的更新。

美化说明:

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

必要说明:(核心重点)

  • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
  • 最新版子比主题)CSS代码添加到后台:子比主题设置—>自定义代码—>自定义CSS样式
  • 最新版子比主题)JS即javascript代码添加到:后台子比主题设置—>自定义代码—>自定义javascript代码
  • 最新版子比主题)没有特殊说明的小工具,自定义HTML小工具:添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去,保存即可。
  • ↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
  • 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我可能不重复告知了,请注意看上面的方法。
  • 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。

使用方法

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

自定义javascript代码:

// FPS帧开始
// by:觅知博客-www.98dou.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.98dou.cn
// FPS帧结束

效果图

WordPress和子比主题模板美化方法教程-觅知博客

使用方法

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

自定义CSS代码:

/*文章随机彩色标签开始*/
/*by:觅知博客-www.98dou.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.98dou.cn*/
/*文章随机彩色标签结束*/

使用方法

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

彩色滚动条代码CSS:

/**彩色滚动条样式开始*/
/*by:觅知博客-www.98dou.cn*/
::-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.98dou.cn*/
/**彩色滚动条样式结束*/

CSS代码:

/* logo扫光开始 */
/*by:觅知博客-www.98dou.cn*/
.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.98dou.cn*/
/* logo扫光结束 */

添加到自定CSS代码:

/*导航栏字体加粗开始*/
/*by:觅知博客-www.98dou.cn*/
ul.nav {font-weight: 700;}
/*by:觅知博客-www.98dou.cn*/
/*导航栏字体加粗结束*/

自定义CSS代码:

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by:觅知博客-www.98dou.cn*/
.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.98dou.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

自定义CSS代码:

/*首页文章列表悬停上浮开始*/
/*by:觅知博客-www.98dou.cn*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*by:觅知博客-www.98dou.cn*/
/*首页文章列表悬停上浮结束*/

—- 本页内容已结束,请看第2页内容—-

1 2 3 4

温馨提示:本文最后更新于2021-07-08 15:00:55,某些文章具有时效性,若有错误或已失效,请在下方留言或联系觅知社长
------本页内容已结束,喜欢请分享------

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

© 版权声明
THE END
喜欢就支持一下吧
点赞501
分享
精彩评论 共57条
    • 98douadai的头像-觅知博客
    • tangtang0
      谢谢分享,很实用。
      9天前回复
    • 98douadai的头像-觅知博客
    • ⁢南央0
      非常好的教程
      9天前回复
    • 98douadai的头像-觅知博客
    • 用户220789790
      6啊 我觉得可以
      9天前回复
    • 98douadai的头像-觅知博客
    • Eveah0
      非常好的教程
      10天前回复
    • 98douadai的头像-觅知博客
    • xxx0
      挺详细的美化教程
      12天前回复
    • 98douadai的头像-觅知博客
    • 曾小华0
      子比主题超喜欢 但是这种黑色的背景感觉不太舒适,不知道可以改成平常的那种灰白色的吗?
      14天前回复
    • 98douadai的头像-觅知博客
    • 桃太郎0
      kankan hzichi
      19天前回复
    • 98douadai的头像-觅知博客
    • 用户160871180
      看看66666
      20天前回复
    • 98douadai的头像-觅知博客
    • 用户615195210
      拿来吧你-----------
      20天前回复
    • 98douadai的头像-觅知博客
    • linxiaolin0
      拿来吧你-----------
      20天前回复
    • 98douadai的头像-觅知博客
    • 启航联盟-网络项目对接0
      拿来吧你-----------
      21天前回复
    • 98douadai的头像-觅知博客
    • 用户173739570
      66666666
      23天前回复
    • 98douadai的头像-觅知博客
    • 啊实打实大师0
      asdasd
      23天前回复
    • 98douadai的头像-觅知博客
    • 66666666660
      asdasdasdasd
      23天前回复
    • 98douadai的头像-觅知博客
    • 南港旧人0
      888888888888888888888888888
      25天前回复
    • 98douadai的头像-觅知博客
    • 南港旧人0
      666666667
      25天前回复
    • 98douadai的头像-觅知博客
    • 辰宇0
      可以的66666666
      25天前回复
    • 98douadai的头像-觅知博客
    • 完美主题曲0
      拿来吧你拿来吧你拿来吧你
      26天前回复
    • 98douadai的头像-觅知博客
    • linxiaolin0
      看看效果666666
      26天前回复
    • 98douadai的头像-觅知博客
    • 橙子🍊0
      66我的宝贝
      27天前回复
    • 98douadai的头像-觅知博客
    • 东楼0
      楼主辛苦了,爱你爱你
      27天前回复
    • 98douadai的头像-觅知博客
    • 咪嘟0
      水电费水电费水电费
      27天前回复
    • 98douadai的头像-觅知博客
    • 逐梦0
      好,太好这些代码
      31天前回复
    • 98douadai的头像-觅知博客
    • Serene0
      谢谢楼主,太有用了!
      31天前回复
    • 98douadai的头像-觅知博客
    • 爱是形容词0
      谢谢楼主,太有用了!
      32天前回复
    • 98douadai的头像-觅知博客
    • 顾凌0
      谢谢楼主,太有用了!
      32天前回复
    • 98douadai的头像-觅知博客
    • tangtang0
      谢谢楼主,太有用了!
      33天前回复
    • 98douadai的头像-觅知博客
    • 用户648345450
      太喜欢了啊,爱了爱了
      34天前回复
    • 98douadai的头像-觅知博客
    • chujianta0
      太喜欢了啊,爱了爱了
      35天前回复
    • 98douadai的头像-觅知博客
    • 用户376880610
      看看表情[haqian]-觅知博客
      35天前回复
    • 98douadai的头像-觅知博客
    • 用户210849510
      博主,第32个教程有问题,我也是子比主题,添加了显示直接错误,无法访问站点
      36天前回复
      • 感谢反馈,我刚看了一下,安装位置我写错了,正确的应该是: 1.将下面的PHP代码加入到主题目录下:themes/zibll/footer.php文件中。 主题的底部文件footer.php中,
    • 98douadai的头像-觅知博客
    • 1210
      来看看钱钱钱
      38天前回复
    • 98douadai的头像-觅知博客
    • 用户263478490
      看看表情[tu]-觅知博客
      38天前回复
    • 98douadai的头像-觅知博客
    • 用户210849510
      时间四核四hi
      39天前回复
    • 98douadai的头像-觅知博客
    • 用户920364370
      6666666
      39天前回复
    • 98douadai的头像-觅知博客
    • 用户592056000
      66666666哦
      40天前回复
    • 98douadai的头像-觅知博客
    • 用户771065340
      看看表情[se]-觅知博客
      42天前回复
    • 98douadai的头像-觅知博客
    • 简简单单0
      好用谢谢博主
      43天前回复
    • 98douadai的头像-觅知博客
    • xiaohao0
      文章最下面,我也是有底线的,旁边的那个人物怎么设置?
      1月前回复
    • 98douadai的头像-觅知博客
    • 博皇帝0
      博主这个在哪里设置评论图片-觅知博客
      1月前回复
      • 在你的主题,文章页--文章内容后-插入内容 代码: ------本页内容已结束,喜欢请分享------