WP主题美化教程集锦[笔记]

食用方法

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

单色滚动条代码：

/*滚动条显示样式*/  
::-webkit-scrollbar-thumb{
   background-color:#FF6666;  /*更改喜欢的十六进制颜色*/
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*滚动条大小*/ 
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*滚动框背景样式*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

彩色滚动条代码：

/**彩色滚动条样式*/
::-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;
}

阿里巴巴矢量图标库网址：https://www.iconfont.cn/

食用方法

第一步：阿里巴巴矢量图标库官网 —> Github或者新浪微博登录

第二步：然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目

第三步：跳转到我的项目 页面（没有跳转的点击–>资源管理–>我的项目）//我的项目自己创建名字

第四步：在 我的项目 页面有一下按钮—>一般选 Symbol

Unicode Font class Symbol

第五步：点击 –> 查看在线链接（没有的的话可以点击生成链接） —>点此复制代码（代码例如下面）

//at.alicdn.com/t/font_2101442_j448m0ggtp.js

第六步：引入JS代码

在当前主题设置—>自定义JS代码 添加下面代码:(下面src=”这里是上面的JS代码，自行替换”)

<script src="//at.alicdn.com/t/font_2101442_j448m0ggtp.js"></script>

第七步：添加css样式

在当前主题设置 –> 自定义CSS代码 或者目录下的 header.php 文件中适当位置添加以下代码:（不适用的，自行调整宽度）

<style type="text/css">
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

第八步：添加彩色图标

一、在WordPress后台—> 外观 —> 菜单 —> 导航标签 添加以下代码:

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

二、上面的 iconziyuan 对应图标代码 //就是图库下面的图标名称

注：如果你WP采用“子比”主题那么只需添加 JS代码 和 导航标签 即可！！！

 

CSS代码：

/点击更多/
.theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 0; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}

CSS代码：

/* 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;}}

CSS代码：

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

• CSS代码：

/*头像呼吸光环和鼠标悬停旋转放大*/
.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;}}

CSS代码：

/*首页文章列表悬停上浮*/
@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);}}

食用教程

• （以子比主题最新版为例）在后台主题设置—>自定义代码—>自定义javascript代码把下面的代码添加到里面即可实现。

//动态标题 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)来呀，来玩啦！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

注：代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)来呀，来玩啦！”可自行修改成自己喜欢的标题文字。

• 如果你的网站主题设置没有自定义javascript代码这个框的话，若有自定义头部HTML代码的话，把下面的代码添加到里面也可实现。
• 或者在首页文件位于“</hesd>”标签之前添加下面的代码也可以。

<script type="text/javascript">
      /*  动态标题*/
     var OriginTitile = document.title,
      titleTime;
     document.addEventListener("visibilitychange",
     function() {
      if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)来呀，来玩啦！" ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
    });
    </script>

注：代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)来呀，来玩啦！”可自行修改成自己喜欢的标题文字。

效果截图

CSS代码：（自行感受）

 /** 鼠标样式 开始**/
/** 普通指针样式**/
body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;}
/** 链接指针样式**/
a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;}
/** 鼠标样式 结束**/

• 网站后台—>外观—>小工具—>自定义HTML，然后添加到合适位置集合即可。
• 代码：

<!--跑马灯公告-->
<style>
  #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} }
</style>
    <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;">
        <marquee>
        <b id="nr">欢迎来到楊仙森万事屋 - 网络资源大整合。</b> </marquee>
    </div>