WordPress网站&子比主题模板美化教程汇总篇[已更43]

WordPress网站&子比主题模板美化教程汇总篇[已更43]

前言

本篇主题美化的各种内容教程,是在大雄搜集站测试过实际使用无误后的记录合集,使用之前可以先参考本站,若觉得实用好看的就拿去用吧,本文会持续的整理更新。

更新说明:

本篇可能更新不及时,可前往主题美化栏目来查看本站所有的美化效果!

主题美化说明:

  • 对网站的主题美化、小工具可能会有一定程度,致使网站加载缓慢、CSS 全局污染等等一系列的问题,请一定要测试无误后在进行美化。
  • 随着主题美化不多增多,可能会对主题的相关文件进行修改,因此在更新主题前,请及时备份主题美化的文件,或者收藏本站,在本站可以及时找回,以免一些主题页面或美化效果丢失。

必要代码使用说明:(重点)

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

主题美化清单

使用方法:

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

自定义 CSS 代码:

/*文章随机彩色标签开始*//*by:大雄搜集站-soujiz.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:大雄搜集站-soujiz.com*//*文章随机彩色标签结束*/

使用方法:

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

/*导航栏字体加粗开始*//*by:大雄搜集站-soujiz.com*/ul.nav {font-weight: 700;}/*by:大雄搜集站-soujiz.com*//*导航栏字体加粗结束*/

使用方法:

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

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by:大雄搜集站-soujiz.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:大雄搜集站-soujiz.com*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

详细教程:

/*首页文章列表悬停上浮开始*/
/*by:大雄搜集站-soujiz.com*/
@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:大雄搜集站-soujiz.com*/
/*首页文章列表悬停上浮结束*/

1 2 3 4 5 6

© 版权声明
THE END
喜欢点个赞支持一下吧
点赞1赏币 分享
评论交流 共18条

请登录后发表评论