使用方法

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

自定义 CSS 代码：

/*文章随机彩色标签开始*/
/*by：零号资源网-www.0hao.cc*/
.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.0hao.cc*/
/*文章随机彩色标签结束*/

使用方法

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

彩色滚动条代码 CSS：

/**彩色滚动条样式开始*/
/*by：零号资源网-www.0hao.cc*/
::-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.0hao.cc*/
/**彩色滚动条样式结束*/

CSS代码：

/* logo 扫光开始 */
/*by：零号资源网-www.0hao.cc*/
.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.0hao.cc*/
/* logo 扫光结束 */

将代码放在自定义CSS代码中：

/*导航栏字体加粗开始*/
/*by：零号资源网-www.0hao.cc*/
ul.nav {font-weight: 700;}
/*by：零号资源网-www.0hao.cc*/
/*导航栏字体加粗结束*/

CSS代码：

/*首页文章列表悬停上浮开始*/
/*by：零号资源网-www.0hao.cc*/
@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.0hao.cc*/
/*首页文章列表悬停上浮结束*/

• 分为三个步骤

• 1.将下面的 PHP 代码加入到主题目录下：themes/zibll/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=1426239465&site=qq&menu=yes"><b>零号社长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示结束

• 说明：请自己修改上面有关于自己网站的信息，改成自己网站信息即可，图标可以用阿里矢量图。

2.在主题目录themes/zibll/inc/functions/zib-single.php 文件中，文章分页函数（我的是在 322 行，因为我的代码有改动，所有不确定行数，见下图）下面添加下方代码即可。

• PHP 代码：

article_time_update();//文章过期提示

3.CSS 代码：（在自定义 CSS 样式添加下面代码）

/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}

效果展示：

在 zibll 主题目录下，themes/zibll/footer.php 文件中的“</footer>”（重要）下面添加下面的代码：

<!--底部波浪开始-->
<!--by：零号资源网-www.0hao.cc-->
<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>
<!--by：零号资源网-www.0hao.cc-->
<!--底部波浪结束-->

效果预览：

1.子比主题设置—>自定义代码—>自定义javascript代码：,添加以下代码：

//透明复制提示
<!--by：零号资源网-www.0hao.cc-->
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【零号资源网(WWW.0HAO.CC)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

2.子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<!--透明复制提示开始--> 
<!--by：零号资源网-www.0hao.cc-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束--> 

效果预览：