子比美化教程合集美化只看这一篇文章就够了！！！

教程来源于某屋，其源站有防盗链（防盗链导致大量js、css、图片等资源失效）然而使美化无用！

因子比美化搬运的小鱼和傲天均已社会性死亡，所以本人扛起美化搬运的担子负重前行！！！

本人已将所有外链本地化到本博客内，无防盗链不会崩溃可安心使用！

下面开始美化教程

CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式

JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码

没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。

其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。

添加微语页面

在日常生活中，我们常常在自己博客网站发表自己的一些文章，但我们当想发表一句简短的话语时，用文章发布的话就显得大材小用了，这时我们就需要一个可以发表一句话的功能页面，微语页面在这时候就起到了一个很好的作用。微语页面简单地说就像我们微信的朋友圈那样，简单实用。很适合发一些说说、一句话的感言等。

美化教程

1、首先在子比主题目录的functions.php里面加入以下代码：

//微语

add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '微语', 'singular_name' => 'singularname', 'add_new' => '发表微语', 'add_new_item' => '发表微语', 'edit_item' => '编辑微语', 'new_item' => '新微语', 'view_item' => '查看微语', 'search_items' => '搜索微语', 'not_found' => '暂无微语', 'not_found_in_trash' => '没有已遗弃的微语', 'parent_item_colon' => '', 'menu_name' => '微语' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor','author') ); register_post_type('shuoshuo',$args); }

2、然后在子比主题pages目录下新建一个weiyu.php文件，然后把下面代码放入weiyu.php文件中即可。

<?php

/**

* Template name: 微语页面

* Description: weiyu

// 获取链接列表

get_header();

$header_style = zib_get_page_header_style();

<?php while (have_posts()) : the_post(); ?>

<?php if ($header_style != 1) {

echo zib_get_page_header();

} ?>

<?php endwhile; ?>

<?php if ($header_style == 1) {

echo zib_get_page_header();

} ?>

#shuoshuo_content{padding: 10px; /*min-height: 500px;*/} /* shuo */ body.theme-dark .cbp_tmtimeline::before{background: RGBA(255, 255, 255, 0.06);} ul.cbp_tmtimeline{padding: 0;} div class.cdp_tmlabel > li .cbp_tmlabel{margin-bottom: 0;} .cbp_tmtimeline{margin: 30px 0 0 0; padding: 0; list-style: none; position: relative;} /* The line */ .cbp_tmtimeline:before{/*content: '';*/ position: absolute; top: 0; bottom: 0; width: 4px; background: RGBA(0, 0, 0, 0.02); left: 80px; margin-left: 10px;} /* The date/time */ .cbp_tmtimeline > li .cbp_tmtime{display: block; /* width: 29%; */ /* padding-right: 110px; */ max-width: 70px; position: absolute;} .cbp_tmtimeline > li .cbp_tmtime span{display: block; text-align: right;} .cbp_tmtimeline > li .cbp_tmtime span:first-child{font-size: 0.9em; color: #bdd0db;} .cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size: 1.2em; color: #9BCD9B;} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child{color: RGBA(255, 125, 73, 0.75);} div.cbp_tmlabel > p{margin-bottom: 0;} /* Right content */ .cbp_tmtimeline > li .cbp_tmlabel{margin: 0 0 45px 65px; background: #9BCD9B; color: #fff; padding: .8em 1.2em .4em 1.2em; /* font-size: 1.2em; */ font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px; transition: all 0.3s ease 0s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor: pointer; display: block;} .cbp_tmlabel:hover{transform:scale(1.05); transform: translateY(-3px); z-index: 1; -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel{background: RGBA(255, 125, 73, 0.75);} /* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after{right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #9BCD9B; border-width: 10px; top: 4px;} .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after{border-right-color: RGBA(255, 125, 73, 0.75);} p.shuoshuo_time{margin-top: 10px; border-top: 1px dashed #fff; padding-top: 5px;} /* Media */ @media screen and (max-width: 65.375em){.cbp_tmtimeline > li .cbp_tmtime span:last-child{font-size: 1.2em;} } .shuoshuo_author_img img{border: 1px solid #ddd; padding: 2px; float: left; border-radius: 64px; transition: all 1.0s;} .avatar{-webkit-border-radius: 100% !important; -moz-border-radius: 100% !important; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out;} .zhuan{transform: rotateZ(720deg); -webkit-transform: rotateZ(720deg); -moz-transform: rotateZ(720deg);}

</style>

</head>

<body>

<?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>

<p></p>

<?php the_time('Y年n月j日G:i'); ?>

</p>

</a>

<?php endwhile;endif; ?>

</li>

</ul>

</div>

</main>

</div>

$(function () {

var oldClass = "";

var Obj = "";

$(".cbp_tmtimeline li").hover(function () {

Obj = $(this).children(".shuoshuo_author_img");

Obj = Obj.children("img");

oldClass = Obj.attr("class");

var newClass = oldClass + " zhuan";

Obj.attr("class", newClass);

}, function () {

Obj.attr("class", oldClass);

})

</script>

</div>

<?php comments_template('/template/comments.php', true); ?>

</div>

<?php get_sidebar(); ?>

</main>

<?php

get_footer();

注：微语头像只需把代码中”https://q1.qlogo.cn/g?b=qq&nk=86512&s=640″修改成自己QQ号头像或者自己图片链接即可。

3、最后在后台—>页面—>新建页面—>找到“页面属性”选择“微语页面”—>填写标题—>发布就可以啦！

发表微语

发表微语只需在后台—>微语—>发表微语，然后发表自己喜欢的微语即可。

说明：因为微语页面采用主题添加代码的方式生成的页面，主题更新后会失效，所以更新主题时请及时备份文件代码，或者关注收藏本站。好啦！子比主题添加微语页面的文章教程到这里就结束了！

图片[1]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

添加FPS帧率显示

我们经常打游戏时非常的关注游戏里的帧率的变化，游戏帧越低就越容易卡段，那么我们是否也可以给网站弄个FPS帧率显示呢？毋庸置疑当然可以啦，如果注意观察我网站的左上角，就会发现有xxFPS这几个字不断的发生变化，没错，它就是今天的主角FPS。其实非常的简单，只需一句js代码即可实现！今天就给大家分享一下WordPress添加帧率显示的教程！

美化教程

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

// FPS帧

$('body').before('');

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();

})();

图片[2]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

添加滚动播报小工具

滚动播报这是从网上找来的小工具，在本站一直使用到现在，很多网站也都在分享滚动播报小工具，所以一直没有写一篇文章分享滚动播报小工具，不过有小伙伴需要，所以今天就水一篇文章吧！我们不是小工具的创造者，我们只是小工具的搬运工。O(∩_∩)O哈哈~下面就分享滚动播报小工具教程给大家！

美化教程

其实很简单，就一段代码！只需在后台—>外观—>小工具—>自定义HTML添加下面的代码，把它放在合适的位置（本站放在侧边栏），然后就可以啦。

<aside id="php_text-8"

class="widget php_text wow fadeInUp" data-wow-delay="0.3s">

line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1

div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}

.flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes

show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1">

<div class="container-box-1-1">坚持每天来逛逛，会让你</div>

<div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了！</div>

</div><div><div class="flip-box-1-2">心情也舒畅了！</div></div>

<div><div class="flip-box-1-3">走路也有劲了！</div></div><div>

<div class="flip-box-1-4">腿也不痛了！</div></div>

<div><div class="flip-box-1-5">腰也不酸了！</div></div>

<div><div class="flip-box-1-6">工作也轻松了！</div></div>

</div><div class="container-box-1-2">你好我也好，不要忘记哦!</div></div></div>

</aside></div>

</section>

注：由于4个图标都采用图标阿里巴巴矢量图库，在贵站是无法显示的，所以我已进行删除。若需要请自行在合适的位置添加图标。

图片[3]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

侧边栏添加简单的小模块

可以用来做侧边栏的广告、领取福利等等。

美化教程

很久以前网上找来的，然后自己就进行了一些小小的修改，本来这个小工具模块是广告类型的，但觉得自己侧边栏东西很少就修改成了自己的在线工具跳转的模块工具了。这是一个非常简单的模块小工具，采用结合的HTML+CSS。只需在站点后台 >> 外观 >> 小工具 >> html代码然后把小工具添加到指定侧边栏中即可。

代码：

<h4>村少的小工具</h4>

<h5>村少推荐，安全有保障</h5>

<style>

.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}

</style>

说明：如果只是使用的话，CSS可无需修改，只需修改文本和跳转的网址即可。不需要圆边的话删除style=”border-radius:5px;”即可。

图片[4]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

添加VIP视频在线解析页面

电视剧、电影是我们生活中必不可少的，它们可以让我们放松一下心情，但大多数的电视剧或电影都是要VIP或者付费的，本来不怎么富裕的我们更加的雪上加霜，本来可以每炖吃好的，但为了追一个剧，只能吃馒头了！那么我们怎么能够免费看那些电视剧或电影呢？为了能够看免费的，大佬们弄出了VIP视频解析接口，只需在该接口输入电视剧或电影的网址就可以观看视频。
VIP视频在线解析页面采用的主要是HTML代码和一些js、css啥的，因为我的能力有限，所以只能搞这么多。如果有感兴趣的朋友，自己修改一下代码。同时本页面采用的是后台直接通过创建自定义HTML页面实现的，主要防止主题每次更新后就会消失，所以采用这种方式来实现。
本站采用的是子比主题，所以可能只适应子比主题，如果有其他主题的朋友，自己测试一下吧。

美化教程

进入后台—>页面—>新建页面—>自定义HTML（古登堡编辑器，我没用过经典编辑器不知道是不是这样）—>把下面的代码添加进去就可以啦！

初始版代码：

<head>

.wiui01{ width:100%; height:600px;}

@media screen and (max-width: 768px){.wiui01{width:100%; height:200px;}}}

.input-group-addon{padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; border-radius: 4px;border: #ccc;}

</style>

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('b a(){0 6=1.2("9").4;0 5=1.2("3");0 3=1.2("3").c;0 8=5.e[3].4;0 7=1.2("f");7.d=8+6}',16,16,'var|document|getElementById|jk|value|jkurl|diz|cljurl|jkv|url|dihejk|function|selectedIndex|src|options|player'.split('|'),0,{}))

function dihejk2() {

var diz = document.getElementById("url").value;

var jkurl = document.getElementById("jk");

var jk = document.getElementById("jk").selectedIndex;

var jkv = jkurl.options[jk].value;

var cljurl = document.getElementById("player");

window.open(jkv + diz,"_blank");

}

</script>

</head>

<body>

</div>

</div><script type="text/javascript">

if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){

document.getElementById("sdfdf").style.display = "block";

}

</script>

</div>

1️⃣ 思古解析

</option>

2️⃣ 8090解析

</option>

3️⃣ 1907解析

</option>

?默认接口(若默认接口无法解析请选择其他接口播放)

</option>

</select>

</div><br>

</div><br>

<div>

<button id="bf" type="button" class="btn btn-info btn-block" onclick="dihejk()">点击开始解析</button>

<button id="bf" type="button" class="btn btn-warning btn-block" onclick="dihejk2()">点击全屏播放解析</button>

</div>

$(function () {

function getNowFormatDate() {

var date = new Date();

var month = date.getMonth() + 1;

var strDate = date.getDate();

var currentdate = month + "月" + strDate + "日";

return currentdate;

}

var text = [

"如果你使用手机观看的话，推荐解析后使用全屏观看！",

"如果解析接口有广告，请选择更换接口解析！",

"星语视频解析接口：3个（状态：正常）",

"解析失效请及时联系站长更换！",

"星语解析是免费使用的，请勿被骗！",

], content = "";

for (var i = 0; i < text.length; i++) {

content += (i + 1) + ". " + text[i] + "\n";

}

setTimeout(function () {

swal(getNowFormatDate() + "通知", content, "success");

}, 1000)

})

</script>

</body>

</html>

修改版去边框代码：

<head>

.wiui01{ width:100%; height:645px;border-radius:5px;}

@media screen and (max-width: 768px){.wiui01{width:100%; height:200px;}}}

.input-group-addon{padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; border-radius: 4px;border: #ccc;}

</style>

function dihejk2() {

var diz = document.getElementById("url").value;

var jkurl = document.getElementById("jk");

var jk = document.getElementById("jk").selectedIndex;

var jkv = jkurl.options[jk].value;

var cljurl = document.getElementById("player");

window.open(jkv + diz,"_blank");

}

</script>

</head>

</div>

if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){

document.getElementById("sdfdf").style.display = "block";

}

</script>

</div><br>

1️⃣ 思古解析

</option>

2️⃣ 8090解析

</option>

3️⃣ 1907解析

</option>

?默认接口(若默认接口无法解析请选择其他接口播放)

</option>

</select>

</div><br>

</div><br>

<div>

<button id="bf" type="button" class="btn btn-info btn-block" onclick="dihejk()">点击开始解析</button>

<button id="bf" type="button" class="btn btn-warning btn-block" onclick="dihejk2()">点击全屏播放解析</button>

</div>

$(function () {

function getNowFormatDate() {

var date = new Date();

var month = date.getMonth() + 1;

var strDate = date.getDate();

var currentdate = month + "月" + strDate + "日";

return currentdate;

}

var text = [

"如果你使用手机观看的话，推荐解析后使用全屏观看！",

"如果解析接口有广告，请选择更换接口解析！",

"村少博客视频解析接口：3个（状态：正常）",

"解析失效请及时联系站长更换！",

"村少博客解析是免费使用的，请勿被骗！",

], content = "";

for (var i = 0; i < text.length; i++) {

content += (i + 1) + ". " + text[i] + "\n";

}

setTimeout(function () {

swal(getNowFormatDate() + "通知", content, "success");

}, 1000)

})

</script>

</body>

</html>

子比主题添加教程

方法一、（简单）也就是上面的食用教程，通过后台页面添加，无需担心主题更新后页面消失的问题。

方法二、（需要有点基础）为了能够更好的体验和适应子比主题，我对代码进行集成PHP文件（本站也采用这个方法），直接下载我准备好的PHP文件源码，然后上传到主题目录下的pages目录，最后在后台—>新建页面—>选择“视频在线解析页面”—>写标题保存即可。更新主题之后PHP文件消失即页面消失，更新主题时请备份PHP文件。

图片[5]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

添加热门标签页面

热门标签页面其实很早以前就想做了，但是没有正式学过前端相关的语言，自己写也写不出来，再加自己学业的原因一直没有时间去网上资料，所以就把这件事放到了脑后。昨天考完了试，终于把有时间把网站升了一下级，顺便把热门标签这个页面给弄了一下。自己写不出来，所以热门标签页面的样式借鉴了B2主题的标签聚合页样式进行了一些修改，尽量的适应子比主题，所以昨天一晚上都在弄热门标签页面适配手机端的问题。但还是有一些小小小的不足，熟悉前端的大佬提一下修改的建议。

美化教程

1、进入子比主题目录—>pages这个目录下创建PHP文件，然后把下面的代码添加进去。

代码作了隐藏，昨天弄了一晚上，饭都没吃上，嘿嘿，评论点赞一下！

尝鲜版代码：

<?php

/**

* Template name: 热门标签页面

* Description: Hot_Tags

// 获取链接列表

get_header();

$header_style = zib_get_page_header_style();

<?php while (have_posts()) : the_post(); ?>

<?php if ($header_style != 1) {

echo zib_get_page_header();

} ?>

<?php if ($header_style == 1) {

echo zib_get_page_header();

} ?>

<ul>

<?php

$tags_count = 60;

$tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);

foreach($tagslist as $tag) {

echo '<li style="list-style-type:none;"><a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'"><h2>'. $tag->name .'</h2><small></br><p>共'. $tag->count .'篇文章</p></a></li>';}

</ul>

</div>

<?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>

<?php endwhile; ?>

</div>

<?php comments_template('/template/comments.php', true); ?>

</div>

<?php get_sidebar(); ?>

body{padding: 0px; margin: 0px;} *, *::before, *::after{box-sizing: border-box;} a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, figure, font, form, h1, h2, h4, h5, h6, html, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var{border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; box-sizing: border-box;} a{cursor: pointer;} a{color: inherit; text-decoration: none; vertical-align: top;} ol, ul{list-style: none;}.wrapper{width: 1142px; max-width: 100%; margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 800; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}

</style>

</main>

<?php

get_footer();

修改版（最终版）本站推荐使用的版本，php文件暂时没时间上传，请复制粘贴即可，谢谢。

<?php

/**

* Template name: 热门标签页面

* Description: Hot_Tags

// 获取链接列表

get_header();

$header_style = zib_get_page_header_style();

<?php while (have_posts()) : the_post(); ?>

<?php if ($header_style != 1) {

echo zib_get_page_header();

} ?>

<?php if ($header_style == 1) {

echo zib_get_page_header();

} ?>

<ul>

<?php

$tags_count = 60;

$tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);

foreach($tagslist as $tag) {

echo '<li style="list-style-type:none;"><a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'"><h2>'. $tag->name .'</h2><small></br><p>共'. $tag->count .'篇文章</p></a></li>';}

</ul>

</div>

<?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>

<?php endwhile; ?>

</div>

<?php comments_template('/template/comments.php', true); ?>

</div>

<?php get_sidebar(); ?>

.wrapper{/*width: 1142px; max-width: 100%;*/ margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 700; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}.b2-radius:not(article){transition: all 0.3s;}.b2-radius:not(article):hover{transform: translateY(-10px);}

</style>

</main>

<?php

get_footer();

2、把上面的代码添加进行保存后，进入到后台—>页面—>新建页面—->选择热门标签页面即可使用。

3、如果懒得创建添加PHP文件的话，可以下载下面我创建好的PHP文件，上传到子比主题的pages这个目录下，然后按照第2点进行创建页面就好了。

温馨小提示：主题更新时记得备份哦！不然页面会消失的!

添加底部统计信息模块小工具

统计信息模块小工具主要采用前端HTML+CSS和后端函数，通过后端提供功能函数，然后前台获取到后台提供的数据来显示信息功能。有兴趣的大佬可以修改一下。

美化教程

1.在子比主题的主题目录下，header.php底部添加以下函数代码：

<?php

//用户总数

$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var tj_jstext="."'$users'";

</script>

<?php

* WordPress获取今日发布文章数量

*www.cunshao.com

function nd_get_24h_post_count(){

$today = getdate();

$query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);

$postsNumber = $query->found_posts;

return $postsNumber;

}

$post_24h = nd_get_24h_post_count();

echo "var tj_24h="."'$post_24h'";

</script>

<?php

* WordPress整站文章访问计数

*www.cunshao.com

function nd_get_all_view(){

global $wpdb;

$count=0;

$views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");

foreach($views as $key=>$value){

$meta_value=$value->meta_value;

if($meta_value!=' '){

$count+=(int)$meta_value;

}

}return $count;

}

$post_view = nd_get_all_view();

echo "var tj_view="."'$post_view'";

</script>

<?php

//日志总数

$count_posts = wp_count_posts();

$published_posts =$count_posts->publish;

echo "var tj_rzzs="."'$published_posts'";

</script>

<?php

//稳定运行

$wdyx_time = floor((time()-strtotime("2020-3-28"))/86400);

echo "var tj_wdyx="."'$wdyx_time'";

</script>

修改版PHP代码：

<?php

//用户总数

$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var tj_jstext="."'$users'";

</script>

<?php

* WordPress获取今日发布文章数量

function nd_get_24h_post_count(){

$today = getdate();

$query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);

$postsNumber = $query->found_posts;

return $postsNumber;

}

$post_24h = nd_get_24h_post_count();

echo "var tj_24h="."'$post_24h'";

</script>

<?php

* WordPress整站文章访问计数

function nd_get_all_view(){

global $wpdb;

$count=0;

$views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");

foreach($views as $key=>$value){

$meta_value=$value->meta_value;

if($meta_value!=' '){

$count+=(int)$meta_value;

}

}return $count;

}

$post_view = nd_get_all_view();

echo "var tj_view="."'$post_view'";

</script>

<?php

//日志总数

$count_posts = wp_count_posts();

$published_posts =$count_posts->publish;

echo "var tj_rzzs="."'$published_posts'";

</script>

<?php

//稳定运行

$wdyx_time = floor((time()-strtotime("2020-03-28"))/86400);

echo "var tj_wdyx="."'$wdyx_time'";

</script>

注：函数运行日期2020-03-28改为你自己网站运行的日期。

2.在后台–>外观–>小工具–>自定义HTML，把自定义HTML放到合适的版块里（子比主题放在首页-底部全宽度），然后把下面代码复制粘贴进去，即可在前台显示。

<ul>

<li>

<span>

document.write(tj_jstext);

</script>

</span>

</li>

<li>

document.write(tj_rzzs);

</script></span>

</li>

<li>

document.write(tj_view);

</script></span>

</li>

<li>

<span>

document.write(tj_24h);

</script>

</span>

</li>

<li>

document.write(tj_wdyx);

</script></span>

</li>

</ul>

<p>加入村少博客，快速获取优质IT资源！</p>

</div>

body{padding: 0px; margin: 0px;} *, *::before, *::after{box-sizing: border-box;} ol, ul{list-style: none;} a{color: inherit; text-decoration: none; vertical-align: top;}/*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: url(https://www.cunshao.com/666666/meihua/img/1.jpg) center center / cover no-repeat fixed;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0;}/*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 1400px; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;}/*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}#nuandao .siteCount ul li b{display: block; font-weight: normal; font-size: 14px;}/*按钮*/#nuandao .siteCount .join-vip{text-align: center; color: #fff; margin-top: 30px;}#nuandao .siteCount .join-vip a{display: inline-block; border: 0; border-radius: 5px; transition: all 0.3s; padding: 10px 30px; font-size: 15px; letter-spacing: 0.5px; background-color: var(--primary-color); background-image: -webkit-gradient( linear, left top, right top, from(#006eff), to(#13adff) ); background-image: -webkit-linear-gradient(left, #006eff, #13adff); background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%); background-image: linear-gradient(90deg, #006eff, #13adff); -webkit-box-shadow: 0 5px 10px 0 rgba(16, 110, 253, 0.3); box-shadow: 0 5px 10px 0 rgba(16, 110, 253, 0.3); color: #fff;}#nuandao .siteCount .join-vip p{margin-top: 15px; font-size: 14px; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.5px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}

</style>

本站使用的修改版本:(图标是阿里巴巴矢量图库,自己弄图标,然后修改<svg>标签里面

<ul>

<li>

document.write(tj_jstext);

</script></span>

</li>

<li>

document.write(tj_rzzs);

</script></span>

</li>

<li>

document.write(tj_view);

</script></span>

</li>

<li>

document.write(tj_24h);

</script></span>

</li>

<li>

document.write(tj_wdyx);

</script></span>

</li>

</ul>

</div>

<p style="text-align:center">欢迎光临村少博客，快速获取优质IT资源吧！<br><br>By：www.cunshao.com</p>

</div>

/*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://www.cunshao.com/666666/meihua/img/024.jpg) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}

/*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;}

/*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;}

/*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;}

@media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}}

</style>

//document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent"

document.getElementById("nuandao").parentNode.parentNode.style.padding=0

</script>

注：背景图自己修改

默认版

文章标签美化

众所周知zibll子比主题是一个非常优秀的WordPress博客主题（本站也在采用本主题），但作者可能不怎么喜欢花里胡哨的文章标签，只优化了标签云显示彩色标签，文章标签没有进行彩色化（纯色）。而对于我这种喜欢花里胡哨的来说，只能自己动手，丰衣足食咯！O(∩_∩)O哈哈~
文章标签美化采用的是CSS覆盖原来的样式，达到彩色的效果！直接在后台主题自定义CSS样式粘贴CSS代码，这样升级主题时无需二次复制粘贴，简单、实用。

美化教程

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

CSS代码：

/*文章随机彩色标签*/

.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}

注：CSS代码已进行压缩，直接复制粘贴即可。

网站点击彩色效果

这一个很简单的网站点击彩色的效果，采用js来实现的，现在就分享给大家吧！

美化教程

首先创建JS文件，复制下面的代码，粘贴到文件中，然后用script标签调用：代码调用如：，就可以啦！Worderss主题一般都在后台主题设置里的自定义JS代码里添加，其他大同小异。

JS代码：

function clickEffect() {

let balls = [];

let longPressed = false;

let longPress;

let multiplier = 0;

let width, height;

let origin;

let normal;

let ctx;

const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];

const canvas = document.createElement("canvas");

document.body.appendChild(canvas);

canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");

const pointer = document.createElement("span");

pointer.classList.add("pointer");

document.body.appendChild(pointer);

if (canvas.getContext && window.addEventListener) {

ctx = canvas.getContext("2d");

updateSize();

window.addEventListener('resize', updateSize, false);

loop();

window.addEventListener("mousedown", function(e) {

pushBalls(randBetween(10, 20), e.clientX, e.clientY);

document.body.classList.add("is-pressed");

longPress = setTimeout(function() {

document.body.classList.add("is-longpress");

longPressed = true;

}, 500);

}, false);

window.addEventListener("mouseup", function(e) {

clearInterval(longPress);

if (longPressed == true) {

document.body.classList.remove("is-longpress");

pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);

longPressed = false;

}

document.body.classList.remove("is-pressed");

}, false);

window.addEventListener("mousemove", function(e) {

let x = e.clientX;

let y = e.clientY;

pointer.style.top = y + "px";

pointer.style.left = x + "px";

}, false);

} else {

console.log("canvas or addEventListener is unsupported!");

}

function updateSize() {

canvas.width = window.innerWidth * 2;

canvas.height = window.innerHeight * 2;

canvas.style.width = window.innerWidth + 'px';

canvas.style.height = window.innerHeight + 'px';

ctx.scale(2, 2);

width = (canvas.width = window.innerWidth);

height = (canvas.height = window.innerHeight);

origin = {

x: width / 2,

y: height / 2

};

normal = {

x: width / 2,

y: height / 2

};

}

class Ball {

constructor(x = origin.x, y = origin.y) {

this.x = x;

this.y = y;

this.angle = Math.PI * 2 * Math.random();

if (longPressed == true) {

this.multiplier = randBetween(14 + multiplier, 15 + multiplier);

} else {

this.multiplier = randBetween(6, 12);

}

this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);

this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);

this.r = randBetween(8, 12) + 3 * Math.random();

this.color = colours[Math.floor(Math.random() * colours.length)];

}

update() {

this.x += this.vx - normal.x;

this.y += this.vy - normal.y;

normal.x = -2 / window.innerWidth * Math.sin(this.angle);

normal.y = -2 / window.innerHeight * Math.cos(this.angle);

this.r -= 0.3;

this.vx *= 0.9;

this.vy *= 0.9;

}

function pushBalls(count = 1, x = origin.x, y = origin.y) {

for (let i = 0; i < count; i++) {

balls.push(new Ball(x, y));

}

function randBetween(min, max) {

return Math.floor(Math.random() * max) + min;

}

function loop() {

ctx.fillStyle = "rgba(255, 255, 255, 0)";

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < balls.length; i++) {

let b = balls[i];

if (b.r < 0) continue;

ctx.fillStyle = b.color;

ctx.beginPath();

ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);

ctx.fill();

b.update();

}

if (longPressed == true) {

multiplier += 0.2;

} else if (!longPressed && multiplier >= 0) {

multiplier -= 0.4;

}

removeBall();

requestAnimationFrame(loop);

}

function removeBall() {

for (let i = 0; i < balls.length; i++) {

let b = balls[i];

if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {

balls.splice(i, 1);

}

clickEffect();

温馨提示：建议压缩JS代码后再使用，这样或许能使网站加载更快吧！O(∩_∩)O哈哈~

添加侧边彩色滚动条

WordPress默认的浏览器侧边栏滚动条是非常丑陋的，当然，有些WordPress主题是自带美化的侧边滚动栏不需要我们自己去美化，有些WordPress主题是没有美化侧边滚动栏的，那么这时就需要我们去美化啦！村少今天就教大家如何自定义美化侧边滚动栏。其实非常简单，只需一句代码的事情就可以自定义美化WordPress侧边滚动栏，并且代码适用于绝大多数WordPress主题。

美化教程

一般主题都会自带自定义代码这样主题设置的，只需在主题设置自定义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;

}

引用阿里巴巴矢量图标库彩色图标

现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

美化教程

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

食用方法

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

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

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

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

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

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

第六步：引入JS代码

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

第七步：添加css样式

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

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

</style>

第八步：添加彩色图标

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

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

配合一行代码让你网站菜单图标旋转起来

在自己网站主题的CSS中加入以下代码：

.fa-spin {

animation: 2s linear 0s normal none infinite running fa-spin;

}

在WordPress后台，将“fa-spin”添加到菜单中要旋转的图标代码的“class”中。

注：本站采用的是“子比”主题，主题自带CSS代码了，如果你Wordpress也是采用“子比”主题那么只需添加 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;}

主题logo扫光

美化教程

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语句即可实现。请看下面的教程。

美化教程

（以子比主题最新版为例）在后台主题设置—>自定义代码—>自定义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代码的话，把下面的代码添加到里面也可实现。

或者在首页文件位于“”标签之前添加下面的代码也可以。

/* 动态标题*/

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://www.cunshao.com/666666/meihua/img/5ccab616ea9c8.cur), default;}

/** 链接指针样式**/

a:hover{cursor:url(https://www.cunshao.com/666666/meihua/img/5ccab63d8fc80.cur), pointer;}

/** 鼠标样式结束**/

网友投稿的鼠标样式：

/*鼠标指针样式*/

body{cursor:url(https://www.cunshao.com/666666/meihua/img/normal1.png), default;}

a:hover{cursor:url(https://www.cunshao.com/666666/meihua/img/link1.png), 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>

<b id="nr">欢迎来到村少博客 - 网络IT科技魅力博客。</b> </marquee>

</div>

首页文章列表浮出

美化教程

CSS代码：

/*列表依次进入*/

posts{display: none}.fadeIn{display: block; animation: fadeIn 3s;}@keyframes fadeIn{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}

javascript代码：

// 列表依次进入

let lis = $('posts');

Array.from(lis).forEach((item, index) => {

setTimeout(() => {

$(item).addClass('fadeIn');

}, 150 * index);

});

两个都要添加

添加复制提示框

美化教程

javascript代码：

//复制提示

document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

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

顶部添加彩色进度条

美化教程

CSS代码：

/*进度条加载显示*/

#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

javascript代码：

//进度条加载显示

$(window).scroll(function() {

var a = $(window).scrollTop(),

c = $(document).height(),

b = $(window).height();

scrollPercent = a / (c - b) * 100;

scrollPercent = scrollPercent.toFixed(1);

$("#percentageCounter").css({

width: scrollPercent + "%"

});

}).trigger("scroll");

在主题目录header.php中，添加以下代码，放在body标签下（最后一行）

文章添加版权声明

美化教程

在子比主题设置—>文章&列表—>文章页—>版权提示内容处添加以下代码：

<div>

<div>

<fieldset

style="

border: 1px dashed #008cff;

padding: 10px;

border-radius: 5px;

line-height: 2em;

color: #6d6d6d;

<legend

align="center"

style="

width: 30%;

text-align: center;

background-color: #008cff;

border-radius: 5px;

background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;"

</legend>

1、本网站名称：<span style="color: #3333ff"

><span style="color: #FF6666; font-size: 18px"

><strong>村少博客</strong></span

></span

><br />

2、本站永久网址：<font color="#FF6666">https://www.cunshao.com</font

><br />

3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ86512进行删除处理。<br />

4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />

5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />

6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />

</fieldset>

</div>

<br />

</div>

注：自行修改代码中的文字内容。

底部可爱底线提示

美化教程

在主题目录—>footer.php的“<footer class….>”上方加入以下代码：

<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://www.cunshao.com/666666/meihua/img/lan.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text" style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>

CSS代码：

/*底部可爱底线提示*/

.lastpagenotice_noticewrap{color:hsla(0, 2.1%, 18.8%, 0.6);}.lastpagenotice_noticewrap img{height:73px; width:88px; margin:0 auto}.lastpagenotice_noticewrap .lastpagenotice_text{display:block; position:absolute; font-size:15px; line-height:20px; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:-webkit-calc(50% + 60px); left:calc(50% + 60px)}.lastpagenotice_noticewrap .lastpagenotice_line{width:100%; height:1px; background-color:hsla(0,0%,100%,.05); position:absolute; bottom:0}.app_normal{text-align:center; position:relative}

文章页面添加文章字数和阅读时间

美化教程

1、在主题目录下functions.php文件把下面的代码添加进去：

// 文章字数和阅读时间

function count_words_read_time () {

global $post;

$text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');

$read_time = ceil($text_num/300); // 修改数字300调整时间

$output .= '共计' . $text_num . '字，阅读大约' . $read_time . '分钟。';

return $output;

}

2、在主题目录zibll/inc/functions/zib-single.php,把下面代码添加到132行处（如下图）

<i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?>

说明：（必看）文章字数和阅读时间都不是很准，同时用处也不是很大…喜欢的话自己拿去试试吧！

顶部导航栏添加背景图片

美化教程

CSS代码：

/*导航栏图片背景*/

.header-layout-1{position:relative;background-image:url(https://www.cunshao.com/666666/meihua/img/huacao.png);background-position:center right;background-size:auto 100%;}

说明：图片背景是透明的，然后我自己乱搞的花花，你可以自己弄更好看的图片，图片大小是180080、200080（后这者感觉可能优于前者，O(∩_∩)O哈哈~）

网友提供背景图样式1：https://www.cunshao.com/666666/meihua/img/3623b1f841e3-1024×41.jpg

网友提供背景图样式2：https://www.cunshao.com/666666/meihua/img/e8af1549ecdd-1024×41.png

底部添加蓝色波浪

美化教程

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

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>

</svg>

</div>

.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>

回到顶部悬挂猫咪

回到顶部悬挂猫咪是今天我从网上看到觉得很不错，然后就弄到了本站，确实很棒。话不多说，下面分享教程！

美化教程

回到顶部悬挂猫咪只能电脑端显示，需要手机端显示，自己修改CSS代码。

本教程以本站使用的子比主题为例，大部分主题大同小异。

回到顶部悬挂猫咪采用js+css+Jquery,但大多数的WordPress主题都已经使用Jquery，所以无需担心Jquery问题（当然啦，如果主题没有Jquery，那么去百度找Jquery好用的CDN进行调用。）

1、首先，下载回到顶部悬挂猫咪的JS+CSS（在本文章末）。

2、两种方式：

在网站后台—>主题设置—>自定义代码—>自定义头部HTML代码，把下面的代码添加进去；

如果没有自定义头部HTML代码那么的主题，请在主题目录下header.php末尾添加下面的代码。

代码：

注（非常重要）：自己把得到CSS、JS文件放在喜欢的目录里面，或者在自己网站根目录下创建新的目录把文件放进去（嘿嘿嘿，实在实在是不会的自己花钱弄），然后在href=”文件路径”和src=”文件路径”填写自己的文件路径。悬挂猫咪是一张图片，还需要在CSS里面修改图片的路径（图片路径在CSS最后面，见下图）。

3、前两步如果都完成了，那么在网站首页拉到底部就可以看到了悬挂猫咪，那么这时候就会出现“主题自带的回到顶部”和悬挂猫咪，那么需要我们到网站后台—>主题设置里面关闭主题自带的回到顶部，其他主题的主题设置不知道有没有关闭这一项。

子比主题只需在网站后台—>主题设置—>全局&功能—>常用功能—>返回顶部按钮—>关闭电脑端的回到顶部。

添加说说页面（清新版）

WordPress添加说说页面百度上有很多这样的页面教程，有些大佬制作的说说页面非常好，这也使我制作清新版说说页面受益良多。本来我也不想制作这样页面，毕竟百度上一大堆教程，而且用处也不是很大。但是我在使用那些大佬制作好的说说页面，有些存在一些小BUG（可能不适配本站主题的原因）,所以我自己制作了一个清新版说说页面（当然啦，大部分代码都是借鉴和使用大佬的），花了2天的时间制作完成（主要花很多时间修改很多种的样式）。自己对于PHP、HTML和CSS不是很了解（萌新一枚），所以在制作的过程中出现很多的问题，比如：在制作完成后突然发现不能分页，这是恐怖的事，不过被我解决了，同时也优化了说说页面，使说说页面可以发布很多的东西，比如视频等等啥的…
本来想加评论但是我对WordPress和本站的子比主题的函数，不是很了解（也不怎么会加），所以弄不了，这是很遗憾的，如果有大佬知道弄的话，请告知一下我。教程代码不是太美观，请勿喷，谢谢。O(∩_∩)O哈哈~好啦！下面给出教程。

美化教程

虽然说说页面我只制作适配本站主题，但是主体的代码还是能用的，其他主题只需复制主题下的页面默认模板文件，然后在合适的位置添加本说说页面的核心代码，即可使用。

由于通过本站文章微语页面的函数代码进行修改，使用如果使用微语页面的朋友，请先删除functions.php中的函数，在进行以下步骤。

更新主题是记得备份代码，以免无法使用。

有一些CSS样式是直接采用子比主题的CSS，所以其他主题使用过程中出现样式的问题请自行修改一些CSS样式。

说说页面的点赞不是主题的代码，所以会存在一个Bug，如果介意请自己删除相关代码。

1、在主题目录下functions.php文件末尾把下面代码添加进去即可。

//说说

add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '说说', 'singular_name' => 'singularname', 'add_new' => '发表说说', 'add_new_item' => '发表说说', 'edit_item' => '编辑说说', 'new_item' => '新说说', 'view_item' => '查看说说', 'search_items' => '搜索说说', 'not_found' => '暂无说说', 'not_found_in_trash' => '没有已遗弃的说说', 'parent_item_colon' => '', 'menu_name' => '说说' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor','author','custom-fields','comments') ); register_post_type('shuoshuo',$args); }

//指定说说文章模板

add_filter( 'template_include', 'include_template_function', 1 );

function include_template_function( $template_path ) {

if ( get_post_type() == 'shuoshuo' ) {

if ( is_single() ) {

if ( $theme_file = locate_template( array ( 'shuoshuo.php' ) ) ) {

$template_path = $theme_file;

} else {

$template_path = plugin_dir_path( __FILE__ ) . '/pages/shuoshuo.php';//自己修改文件路径

}

return $template_path;

}

/*说说点赞功能*/

add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');

add_action('wp_ajax_bigfa_like', 'bigfa_like');

function bigfa_like(){

global $wpdb,$post;

$id = $_POST["um_id"];

$action = $_POST["um_action"];

if ( $action == 'ding'){

$bigfa_raters = get_post_meta($id,'bigfa_ding',true);

$expire = time() + 99999999;

$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost

setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);

if (!$bigfa_raters || !is_numeric($bigfa_raters)) {

update_post_meta($id, 'bigfa_ding', 1);

}

else {

update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));

}

echo get_post_meta($id,'bigfa_ding',true);

}

die;

}

子比主题的朋友，在主题目录zibll/pages目录下创建shuoshuo.php文件,然后把下面的代码复制进去即可。

如果懒得创建文件，可以下载使用本站已经创建好PHP文件，文件下载在文章末尾。

子比主题说说页面代码↓

版本一：

<?php

/**

* Template name: 说说页面

* Description: shuoshuo

// 获取链接列表

get_header();

$header_style = zib_get_page_header_style();

<?php while (have_posts()) : the_post(); ?>

<?php if ($header_style != 1) {

echo zib_get_page_header();

} ?>

<?php endwhile; ?>

<?php if ($header_style == 1) {

echo zib_get_page_header();

} ?>

#wiiuii-bt h1,#wiiuii-bt h2,#wiiuii-bt h3,#wiiuii-bt h4,#wiiuii-bt h5 #wiiuii-bt h1{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid red;padding: 5px 12px;border-left: 5px solid red;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h2{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FF1493;padding: 5px 12px;border-left: 5px solid #FF1493;border-radius: 0.4rem;margin: 12px 0px;}#wiiuii-bt h3{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #4169E1;padding: 5px 12px;border-left: 5px solid #4169E1;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h4{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #3CB371;padding: 5px 12px;border-left: 5px solid #3CB371;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h5{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FFC0CB;padding: 5px 12px;border-left: 5px solid #FFC0CB;margin: 12px 0px;border-radius: 0.4rem;}/*www.cunshao.com*/#article{color: #444; font-family: microsoft yahei;}#article ul{padding-left:0px!important;}#article li{padding:5px!important;color: var(--main-color);}#article img{border-radius: 5px;} #article p{color:var(--main-color);}#article video{border-radius: 5px;}.typebox{box-shadow:0px 1px 6px 0.01px #9999993d;padding:10px;margin-bottom:20px;border-radius:8px;}.typeafter{margin-right:-15px;margin-left:-15px;margin-top:-20px;}.wiiuii-avatar img{border-radius: 50%;width:50px;height:50px;}.wiiuii-avatar{float:left;position:relative;min-height:1px;padding: 0px 15px 10px 15px;}.wiiuii-hr{border-top: 2px dashed rgba(255,78,106,.85);margin: 0 0 0;}.wiiuii-content{positiON: relative;}.wiiuii-content .shuoshuo-icon{position: absolute;right: 1px;display: block;width: 40px;height: 40px;line-height: 20px;background-image: url(https://www.cunshao.com/666666/meihua/img/%E8%AF%B4.svg);transform-origin: 0% 0%;}/*www.cunshao.com*/#wiiuii-content{background-color: rgba(255,78,106,.15); color: #ff4e6a; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }#wiiuii-content1{background-color: rgb(41, 151, 247, .15); color: #2997f7; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }/*www.cunshao.com*/.gd{font-weight:700;margin: 30px 0 10px 10px;}.wiiuii-fenye{box-shadow: 0px 1px 6px 0.01px #9999993d;border-radius: 8px;}.wiiuii-h2 h2{display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}.wiiuii-h2 h2::before{content:"# ";color:#f04494;font-weight:bold;}.button{padding: 5px 25px; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; border-radius: 10px!important;} .button1{background-color: var(--main-bg-color); color:#2997f7; border: 2px solid #2997f7;} .button1:hover{background-color: #2997f7; color: white;}.aligncenter {clear: both;display: block;margin: 0 auto;}.alignright{display: block;margin-left: auto;}.wiiuii_frame{padding: 0 10px 0 10px;}

/*图片背景*//*.wiiuii_bj{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://www.cunshao.com/666666/meihua/img/%E7%8C%9B%E7%94%B7%E7%B2%89.jpg);background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 5px; cursor: pointer;}*/

.post-like{text-align:center;padding:10px} .post-like a{background-color: #2997f7; border-radius: 10px; color: #FFFFFF; font-size: 15px; padding: 8px 10px; text-decoration: none; outline: none;}.post-like a.done, .post-like a:hover{background-color: #F44336; color: #ffffff;} .post-like a.done{cursor:not-allowed}

</style>

$.fn.postLike=function(){if($(this).hasClass('done')){return false}else{$(this).addClass('done');var id=$(this).data("id"),action=$(this).data('action'),rateHolder=$(this).children('.count');var ajax_data={action:"bigfa_like",um_id:id,um_action:action};$.post("/wp-admin/admin-ajax.php",ajax_data,function(data){$(rateHolder).html(data)});return false}};$(document).on("click",".favorite",function(){$(this).postLike()});

</script>

</head>

<body>

<h1 class="wp-block-zibllblock-biaoti title-theme"><strong>目前总计发表 <span style="color: #ff0000;"><?php $count_posts = wp_count_posts('shuoshuo'); echo $published_posts = $count_posts->publish;?></span> 个说说，更新于 <span style="color: #ff0000;"><?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'shuoshuo')");$last = date('Y年n月j日', strtotime($last[0]->MAX_m));echo $last; ?></span>。<strong></h1>

</br>

<ul>

<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=6 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>

<li>

</div>

</div>

</div>

<?php the_content(); ?>

</div>

<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>"><i class="fa fa-heart" aria-hidden="true"></i> 喜欢(<span class="count"><?php if( get_post_meta($post->ID,'bigfa_ding',true) ){ echo get_post_meta($post->ID,'bigfa_ding',true);} else { echo '0';}?></span>)

</a>

</div>

<?php endwhile;endif; ?>

</li>

</ul>

<?php if (function_exists('wp_pagenavi')) wp_pagenavi();else { ?><div style="padding: 8px;"><?php previous_posts_link('<button class="button button1"><i class="fa fa-caret-left" aria-hidden="true"></i> 上一页</button>') ?> <?php next_posts_link('<button class="button button1">下一页 <i class="fa fa-caret-right" aria-hidden="true"></i></button>') ?></div><?php } ?>

</div>

</div>

<?php comments_template('/template/comments.php', true); ?>

</div>

<?php get_sidebar(); ?>

</main>

<?php

get_footer();

版本二：

<?php

/**

* Template name: 说说页面

* Description: shuoshuo

// 获取链接列表

get_header();

$header_style = zib_get_page_header_style();

<?php while (have_posts()) : the_post(); ?>

<?php if ($header_style != 1) {

echo zib_get_page_header();

} ?>

<?php endwhile; ?>

<?php if ($header_style == 1) {

echo zib_get_page_header();

} ?>

#wiiuii-bt h1,#wiiuii-bt h2,#wiiuii-bt h3,#wiiuii-bt h4,#wiiuii-bt h5 #wiiuii-bt h1{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid red;padding: 5px 12px;border-left: 5px solid red;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h2{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FF1493;padding: 5px 12px;border-left: 5px solid #FF1493;border-radius: 0.4rem;margin: 12px 0px;}#wiiuii-bt h3{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #4169E1;padding: 5px 12px;border-left: 5px solid #4169E1;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h4{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #3CB371;padding: 5px 12px;border-left: 5px solid #3CB371;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h5{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FFC0CB;padding: 5px 12px;border-left: 5px solid #FFC0CB;margin: 12px 0px;border-radius: 0.4rem;}/*www.cunshao.com*/#article{color: #444; font-family: microsoft yahei;}#article ul{padding-left:0px!important;}#article li{padding:5px!important;color: var(--main-color);}#article img{border-radius: 5px;} #article p{color:var(--main-color);}#article video{border-radius: 5px;}.typebox{box-shadow:0px 1px 6px 0.01px #9999993d;padding:10px;margin-bottom:20px;border-radius:8px;}.typeafter{margin-right:-15px;margin-left:-15px;margin-top:-20px;}.wiiuii-avatar img{border-radius: 10px;width:58px;height:58px;}.wiiuii-avatar{float:left;position:relative;min-height:1px;padding: 0px 10px 10px 25px;}.wiiuii-hr{border-top: 2px dashed rgba(255,78,106,.85);margin: 0 0 0;}.wiiuii-content{positiON: relative;}.wiiuii-content .shuoshuo-icon{position: absolute;right: 1px;display: block;width: 40px;height: 40px;line-height: 20px;background-image: url(https://www.cunshao.com/666666/meihua/img/%E5%BF%83.svg);transform-origin: 0% 0%;}/*www.cunshao.com*/#wiiuii-content{background-color: rgba(255,78,106,.15); color: #ff4e6a; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }#wiiuii-content1{background-color: rgb(41, 151, 247, .15); color: #2997f7; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }/*www.cunshao.com*/.gd{font-weight:700;margin: 30px 0 0 10px;}.wiiuii-fenye{box-shadow: 0px 1px 6px 0.01px #9999993d;border-radius: 999px;}.wiiuii-h2 h2{display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}.wiiuii-h2 h2::before{content:"# ";color:#f04494;font-weight:bold;}.button{padding: 5px 25px; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; border-radius: 10px!important;} .button1{background-color: var(--main-bg-color); color:#2997f7; border: 2px solid #2997f7;} .button1:hover{background-color: #2997f7; color: white;}.aligncenter {clear: both;display: block;margin: 0 auto;}.alignright{display: block;margin-left: auto;}.wiiuii_frame{padding: 0 10px 0 10px;}

.post-like{text-align:right;padding:10px} .post-like a{/*background-color: #2997f7;*/ border-radius: 10px; color: #2997f7; font-size: 15px; padding: 8px 10px; text-decoration: none; outline: none;}.post-like a.done, .post-like a:hover{/*background-color: #F44336;*/ color: #ff4e6a;} .post-like a.done{cursor:not-allowed}

</style>

</script>

</head>

<body>

</br>

<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=6 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>

<li>

</div>

</div>

</div>

<?php the_content(); ?>

</div>

<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>"><i class="fa fa-heart" aria-hidden="true"></i> 喜欢[<span class="count"><?php if( get_post_meta($post->ID,'bigfa_ding',true)){ echo get_post_meta($post->ID,'bigfa_ding',true);} else { echo '0';}?></span>]

</a>

</div>

<?php endwhile;endif; ?>

</li>

</ul>

<?php if (function_exists('wp_pagenavi')) wp_pagenavi();else { ?><div style="padding: 5px;"><?php previous_posts_link('<button class="button button1"><i class="fa fa-caret-left" aria-hidden="true"></i> 上一页</button>') ?> <?php next_posts_link('<button class="button button1">下一页 <i class="fa fa-caret-right" aria-hidden="true"></i></button>') ?></div><?php } ?>

</div>

</div>

<?php comments_template('/template/comments.php', true); ?>

</div>

<?php get_sidebar(); ?>

</main>

<?php

get_footer();

说说页面主体代码↓

版本一：

</style>

</script>

</head>

<body>

</br>

<ul>

<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=6 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>

<li>

</div>

</div>

</div>

<?php the_content(); ?>

</div>

</a>

</div>

<?php endwhile;endif; ?>

</li>

</ul>

</div>

版本二：

#wiiuii-bt h1,#wiiuii-bt h2,#wiiuii-bt h3,#wiiuii-bt h4,#wiiuii-bt h5 #wiiuii-bt h1{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid red;padding: 5px 12px;border-left: 5px solid red;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h2{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FF1493;padding: 5px 12px;border-left: 5px solid #FF1493;border-radius: 0.4rem;margin: 12px 0px;}#wiiuii-bt h3{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #4169E1;padding: 5px 12px;border-left: 5px solid #4169E1;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h4{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #3CB371;padding: 5px 12px;border-left: 5px solid #3CB371;margin: 12px 0px;border-radius: 0.4rem;}#wiiuii-bt h5{font-weight: bold;background-color: #f6f6f6;margin: 20px 0;border-bottom: 0px solid #FFC0CB;padding: 5px 12px;border-left: 5px solid #FFC0CB;margin: 12px 0px;border-radius: 0.4rem;}/*www.cunshao.com*/#article{color: #444; font-family: microsoft yahei;}#article ul{padding-left:0px!important;}#article li{padding:5px!important;color: var(--main-color);}#article img{border-radius: 5px;} #article p{color:var(--main-color);}#article video{border-radius: 5px;}.typebox{box-shadow:0px 1px 6px 0.01px #9999993d;padding:10px;margin-bottom:20px;border-radius:8px;}.typeafter{margin-right:-15px;margin-left:-15px;margin-top:-20px;}.wiiuii-avatar img{border-radius: 10px;width:58px;height:58px;}.wiiuii-avatar{float:left;position:relative;min-height:1px;padding: 0px 10px 10px 25px;}.wiiuii-hr{border-top: 2px dashed rgba(255,78,106,.85);margin: 0 0 0;}.wiiuii-content{positiON: relative;}.wiiuii-content .shuoshuo-icon{position: absolute;right: 1px;display: block;width: 40px;height: 40px;line-height: 20px;background-image: url(https://www.cunshao.com/666666/meihua/img/%E5%BF%83.svg);transform-origin: 0% 0%;}/*www.cunshao.com*/#wiiuii-content{background-color: rgba(255,78,106,.15); color: #ff4e6a; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }#wiiuii-content1{background-color: rgb(41, 151, 247, .15); color: #2997f7; border-radius: 5px!important;padding: 2px 5px;display: inline-block; }/*www.cunshao.com*/.gd{font-weight:700;margin: 30px 0 0 10px;}.wiiuii-fenye{box-shadow: 0px 1px 6px 0.01px #9999993d;border-radius: 999px;}.wiiuii-h2 h2{display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}.wiiuii-h2 h2::before{content:"# ";color:#f04494;font-weight:bold;}.button{padding: 5px 25px; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; border-radius: 10px!important;} .button1{background-color: var(--main-bg-color); color:#2997f7; border: 2px solid #2997f7;} .button1:hover{background-color: #2997f7; color: white;}.aligncenter {clear: both;display: block;margin: 0 auto;}.alignright{display: block;margin-left: auto;}.wiiuii_frame{padding: 0 10px 0 10px;}

</style>

</script>

</head>

<body>

</br>

<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=6 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>

<li>

</div>

</div>

</div>

<?php the_content(); ?>

</div>

<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>"><i class="fa fa-heart" aria-hidden="true"></i> 喜欢[<span class="count"><?php if( get_post_meta($post->ID,'bigfa_ding',true)){ echo get_post_meta($post->ID,'bigfa_ding',true);} else { echo '0';}?></span>]

</a>

</div>

<?php endwhile;endif; ?>

</li>

</ul>

</div>

3、在网站后台—>页面—>新建页面—>页面属性–模板–WIIUII说说页面（古腾堡编辑器是这样的，不知道经典编辑器是不是一样），然后发布页面即可。

版本一

修改go外链跳转页面

美化教程

在主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。

更新主题和修改前记得备份go.php。

样式一、

<?php

* @Author : Qinver

* @Url : zibll.com

* @Date : 2020-09-29 13:18:36

* @LastEditTime : 2020-10-08 17:42:52

* @Email : 770349780@qq.com

* @Project : Zibll子比主题

* @Description : 一款极其优雅的Wordpress主题

* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。

* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！

if(strlen($_SERVER['REQUEST_URI']) > 384 ||

strpos($_SERVER['REQUEST_URI'], "eval(") ||

strpos($_SERVER['REQUEST_URI'], "base64")) {

@header("HTTP/1.1 414 Request-URI Too Long");

@header("Status: 414 Request-URI Too Long");

@header("Connection: Close");

@exit;

}

//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好

$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);

//数据处理

if(!empty($t_url)) {

//判断取值是否加密

if ($t_url == base64_encode(base64_decode($t_url))) {

$t_url = base64_decode($t_url);

}

//对取值进行网址校验和判断

if($matches){

$url=$t_url;

$title='页面加载中,请稍候...';

} else {

preg_match('/\./i',$t_url,$matche);

if($matche){

$url='http://'.$t_url;

$title='页面加载中,请稍候...';

} else {

$url = 'http://'.$_SERVER['HTTP_HOST'];

$title='参数错误，正在返回首页...';

}

} else {

$title = '参数缺失，正在返回首页...';

$url = 'http://'.$_SERVER['HTTP_HOST'];

}

<html>

<head>

function link_jump()

{

//禁止其他网站使用我们的跳转页面

var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");

if (!MyHOST.test(document.referrer)) {

location.href="http://" + MyHOST;

}

location.href="<?php echo $url;?>";

}

//延时1S跳转，可自行修改延时时间

setTimeout(link_jump, 1500);

//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题

setTimeout(function(){window.opener=null;window.close();}, 50000);

</script>

</head>

<body>

<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">加载中...

</text>

<path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203

C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20

C34.797,11.841,28.159,5.203,20,5.203z">

</path>

<path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20

S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922

S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">

</path>

<path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20

c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">

</path>

<path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20

c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203

C12.875,32.922,7.078,27.125,7.078,20z">

</path>

</svg>

</div>

</body>

</html>

样式二、

<?php

* @Author : Qinver

* @Url : zibll.com

* @Date : 2020-09-29 13:18:36

* @LastEditTime : 2020-10-08 17:42:52

* @Email : 770349780@qq.com

* @Project : Zibll子比主题

* @Description : 一款极其优雅的Wordpress主题

* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。

* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！

if(strlen($_SERVER['REQUEST_URI']) > 384 ||

strpos($_SERVER['REQUEST_URI'], "eval(") ||

strpos($_SERVER['REQUEST_URI'], "base64")) {

@header("HTTP/1.1 414 Request-URI Too Long");

@header("Status: 414 Request-URI Too Long");

@header("Connection: Close");

@exit;

}

//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好

$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);

//数据处理

if(!empty($t_url)) {

//判断取值是否加密

if ($t_url == base64_encode(base64_decode($t_url))) {

$t_url = base64_decode($t_url);

}

//对取值进行网址校验和判断

if($matches){

$url=$t_url;

$title='页面加载中,请稍候...';

} else {

preg_match('/\./i',$t_url,$matche);

if($matche){

$url='http://'.$t_url;

$title='页面加载中,请稍候...';

} else {

$url = 'http://'.$_SERVER['HTTP_HOST'];

$title='参数错误，正在返回首页...';

}

} else {

$title = '参数缺失，正在返回首页...';

$url = 'http://'.$_SERVER['HTTP_HOST'];

}

<html>

<head>

function link_jump()

{

//禁止其他网站使用我们的跳转页面

var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");

if (!MyHOST.test(document.referrer)) {

location.href="http://" + MyHOST;

}

location.href="<?php echo $url;?>";

}

//延时1S跳转，可自行修改延时时间

setTimeout(link_jump, 2250);

//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题

setTimeout(function(){window.opener=null;window.close();}, 50000);

</script>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:#3498db;}#loader-container{width:188px;height:188px;color:white;margin:0 auto;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);border:5px solid #3498db;border-radius:50%;-webkit-animation:borderScale 1s infinite ease-in-out;animation:borderScale 1s infinite ease-in-out;}#loadingText{font-family:'Raleway',sans-serif;font-size:1.4em;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);}@-webkit-keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}@keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}

</style>

<body>

<div id="loader-container"><p id="loadingText">页面加载中...</p></div>

</body>

</html>

样式三、最最最好看的go跳转：

<?php

* @Author : Qinver

* @Url : zibll.com

* @Date : 2020-09-29 13:18:36

* @LastEditTime : 2020-10-08 17:42:52

* @Email : 770349780@qq.com

* @Project : Zibll子比主题

* @Description : 一款极其优雅的Wordpress主题

* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。

* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！

if(strlen($_SERVER['REQUEST_URI']) > 384 ||

strpos($_SERVER['REQUEST_URI'], "eval(") ||

strpos($_SERVER['REQUEST_URI'], "base64")) {

@header("HTTP/1.1 414 Request-URI Too Long");

@header("Status: 414 Request-URI Too Long");

@header("Connection: Close");

@exit;

}

//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好

$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);

//数据处理

if(!empty($t_url)) {

//判断取值是否加密

if ($t_url == base64_encode(base64_decode($t_url))) {

$t_url = base64_decode($t_url);

}

//对取值进行网址校验和判断

if($matches){

$url=$t_url;

$title='页面加载中,请稍候...';

} else {

preg_match('/\./i',$t_url,$matche);

if($matche){

$url='http://'.$t_url;

$title='页面加载中,请稍候...';

} else {

$url = 'http://'.$_SERVER['HTTP_HOST'];

$title='参数错误，正在返回首页...';

}

} else {

$title = '参数缺失，正在返回首页...';

$url = 'http://'.$_SERVER['HTTP_HOST'];

}

<html>

<head>

function link_jump()

{

//禁止其他网站使用我们的跳转页面

var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");

if (!MyHOST.test(document.referrer)) {

location.href="http://" + MyHOST;

}

location.href="<?php echo $url;?>";

}

//延时1S跳转，可自行修改延时时间

setTimeout(link_jump, 2250);

//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题

setTimeout(function(){window.opener=null;window.close();}, 50000);

</script>

<body>

<css-doodle use="var(--rule)"></css-doodle>

</body>

</html>

说明：上方js文件是调用我自己网站的，你自己下载或者打开复制到自己网站目录下使用。

样式一

给网站挂个灯笼

美化教程

一、子比后台—自定义代码—自定义底部代码。

</div>

</div>

</div>

</div>

二、WP后台— 外观 —自定义—额外CSS。

默认是灯笼都在右上角位置，比照原文主要是调整了位置，避免遮挡顶部导航菜单。

/**过年灯笼*/

.deng-box {

position: fixed;

top: 40px;

right: -50px;

z-index: 999;

}

.deng-box1 {

position: fixed;

top: 40px;

z-index: 999;

right: -20px;

}

.deng-box1 .deng {

position: relative;

width: 120px;

height: 90px;

margin: 50px;

background: #d8000f;

background: rgba(216, 0, 15, 0.8);

border-radius: 50% 50%;

-webkit-transform-origin: 50% -100px;

-webkit-animation: swing 5s infinite ease-in-out;

box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);

}

.deng {

position: relative;

width: 120px;

height: 90px;

margin: 50px;

background: #d8000f;

background: rgba(216, 0, 15, 0.8);

border-radius: 50% 50%;

-webkit-transform-origin: 50% -100px;

-webkit-animation: swing 3s infinite ease-in-out;

box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);

}

.deng-a {

width: 100px;

height: 90px;

background: #d8000f;

background: rgba(216, 0, 15, 0.1);

margin: 12px 8px 8px 10px;

border-radius: 50% 50%;

border: 2px solid #dc8f03;

}

.deng-b {

width: 45px;

height: 90px;

background: #d8000f;

background: rgba(216, 0, 15, 0.1);

margin: -4px 8px 8px 26px;

border-radius: 50% 50%;

border: 2px solid #dc8f03;

}

.xian {

position: absolute;

top: -20px;

left: 60px;

width: 2px;

height: 20px;

background: #dc8f03;

}

.shui-a {

position: relative;

width: 5px;

height: 20px;

margin: -5px 0 0 59px;

-webkit-animation: swing 4s infinite ease-in-out;

-webkit-transform-origin: 50% -45px;

background: #ffa500;

border-radius: 0 0 5px 5px;

}

.shui-b {

position: absolute;

top: 14px;

left: -2px;

width: 10px;

height: 10px;

background: #dc8f03;

border-radius: 50%;

}

.shui-c {

position: absolute;

top: 18px;

left: -2px;

width: 10px;

height: 35px;

background: #ffa500;

border-radius: 0 0 0 5px;

}

.deng:before {

position: absolute;

top: -7px;

left: 29px;

height: 12px;

width: 60px;

content: " ";

display: block;

z-index: 999;

border-radius: 5px 5px 0 0;

border: solid 1px #dc8f03;

background: #ffa500;

background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);

}

.deng:after {

position: absolute;

bottom: -7px;

left: 10px;

height: 12px;

width: 60px;

content: " ";

display: block;

margin-left: 20px;

border-radius: 0 0 5px 5px;

border: solid 1px #dc8f03;

background: #ffa500;

background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);

}

.deng-t {

font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;

font-size: 3.2rem;

color: #dc8f03;

font-weight: bold;

line-height: 85px;

text-align: center;

}

.night .deng-t,

.night .deng-box,

.night .deng-box1 {

background: transparent !important;

}

@-moz-keyframes swing {

0% {

-moz-transform: rotate(-10deg)

}

50% {

-moz-transform: rotate(10deg)

}

100% {

-moz-transform: rotate(-10deg)

}

@-webkit-keyframes swing {

0% {

-webkit-transform: rotate(-10deg)

}

50% {

-webkit-transform: rotate(10deg)

}

100% {

-webkit-transform: rotate(-10deg)

}

}@media screen and (max-width: 768px){.deng-box{position: fixed; top: 23px; right: -50px; z-index: 999;}.deng-box1 { position: fixed; top: 23px; z-index: 999; right: -20px; }}<br>

如果是一边一个，上面代码开头的.deng-box和.deng-box1修改为下面代码即可。

.deng-box {

position: fixed;

top: 40px;

right: -20px;

z-index: 999;

}

.deng-box1 {

position: fixed;

top: 40px;

z-index: 999;

}@media screen and (max-width: 768px){.deng-box{position: fixed; top: 23px; right: 0; z-index: 999;}.deng-box1 { position: fixed; top: 23px; z-index: 999; right: auto; }}<br>

简单的修改，应该已适配电脑-手机

侧边栏添加信息统计小工具

WordPress信息统计小工具是前几天逛别的网站看到挺可以的，然后就到百度搜索一下，果然有很多这样的教程，但是那些小工具都只显示文字，不怎么美化，特别的简洁。作为喜欢花里胡哨和爱捣鼓的我，当然要进行一些修改啦！O(∩_∩)O哈哈~，然后我自己就弄出了看上去比较可以的信息统计小工具（算是图片版吧<del>~），代码基本都是借鉴大佬的（没那个能力写代码啊</del>~苦逼的三无青年）。本来有9个信息统计（删除一些没用的，就剩下9个），但是我又新加了2个页面数据库查询和生成耗时，顿时就感觉这个信息统计小工具变长了，都是又不知道删除啥好，所以如果你觉得太长的话，自己删除或者注释掉一些没用的信息统计，再或者修改大小…好啦，话不多说，下面分享教程。

美化教程

有两种方式：

（方式一）在主题目录下创建widget-websitestat.php文件，然后把下面的php代码添加进去。

代码：

<?php

// WordPress统计信息小工具

// 名称: 网站信息统计

// 定义小工具的类 EfanWebsitestat

class EfanWebsitestat extends WP_Widget{

function __construct(){

// 定义小工具的构造函数

$widget_ops = array('classname' => 'widget_Websitestat', 'description' => '显示网站的统计信息');

parent::__construct(false, 'WIIUII 网站统计', $widget_ops);

}

function form($instance){

// 表单函数,控制后台显示

// $instance 为之前保存过的数据

// 如果之前没有数据的话,设置默认量

$instance = wp_parse_args(

(array)$instance,

array(

'title' => '网站信息统计',

'establish_time' => '2021-01-01'

)

);

$title = htmlspecialchars($instance['title']);

$establish_time = htmlspecialchars($instance['establish_time']);

// 表格布局输出表单

$output = '<table>';

$output .= '<tr><td>标题</td><td>';

$output .= '<input id="'.$this->get_field_id('title') .'" name="'.$this->get_field_name('title').'" type="text" value="'.$instance['title'].'" />';

$output .= '</td></tr><tr><td>建站时间：</td><td>';

$output .= '<input id="'.$this->get_field_id('establish_time') .'" name="'.$this->get_field_name('establish_time').'" type="text" value="'.$instance['establish_time'].'" />';

$output .= '</td></tr></table>';

echo $output;

}

function update($new_instance, $old_instance){

// 更新数据的函数

$instance = $old_instance;

// 数据处理

$instance['title'] = strip_tags(stripslashes($new_instance['title']));

$instance['establish_time'] = strip_tags(stripslashes($new_instance['establish_time']));

return $instance;

}

function widget($args, $instance){

extract($args); //展开数组

$title = apply_filters('widget_title',empty($instance['title']) ? ' ' : $instance['title']);

$establish_time = empty($instance['establish_time']) ? '2021-01-01' : $instance['establish_time'];

echo $before_widget;

echo $before_title . $title . $after_title;

echo '<div class="widgest-boys"><ul>';

$this->efan_get_websitestat($establish_time);

echo '</ul></div>';

echo $after_widget;

}

function efan_get_websitestat($establish_time){

// 相关数据的获取

global $wpdb;

$count_posts = wp_count_posts();

$published_posts = $count_posts->publish;

$comments_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");

$time = floor((time()-strtotime($establish_time))/86400);

$count_tags = wp_count_terms('post_tag');

$count_pages = wp_count_posts('page');

$link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'");

$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");

$last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");

$last = date('Y-m-d', strtotime($last[0]->MAX_m));

$total_views = $wpdb->get_var("SELECT SUM(meta_value+0) FROM $wpdb->postmeta WHERE meta_key = 'views'");

// 显示数据

$output = '<div class="widgest-bg widgest-bg1"><div class="widgest-main"><div class="widgest-meat"><li>文章总数：';

$output .= $published_posts;

$output .= ' 篇</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg2"><div class="widgest-main"><div class="widgest-meat"><li>评论数目：';

$output .= $comments_count;

$output .= ' 条</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg3"><div class="widgest-main"><div class="widgest-meat"><li>标签总数：';

$output .= $count_tags;

$output .= ' 个</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg4"><div class="widgest-main"><div class="widgest-meat"><li>浏览次数：';

$output .= $total_views;

$output .= ' 次</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg5"><div class="widgest-main"><div class="widgest-meat"><li>友链总数：';

$output .= $link;

$output .= ' 个</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg6"><div class="widgest-main"><div class="widgest-meat"><li>用户总数：';

$output .= $users;

$output .= ' 个</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg7"><div class="widgest-main"><div class="widgest-meat"><li>运行天数：';

$output .= $time;

$output .= ' 天</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg8"><div class="widgest-main"><div class="widgest-meat"><li>建站时间：';

$output .= $establish_time;

$output .= '</li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg9"><div class="widgest-main"><div class="widgest-meat"><li>最后更新：';

$output .= $last;

$output .= '</li></div></div></div>';

// 页面生成耗时+数据库查询

$output .= '<div class="widgest-bg widgest-bg10"><div class="widgest-main"><div class="widgest-meat"><li>数据查询：';

$output .= get_num_queries();

$output .= ' 次 </li></div></div></div>';

$output .= '<div class="widgest-bg widgest-bg11"><div class="widgest-main"><div class="widgest-meat"><li>生成耗时：';

$output .= timer_stop(0,5);

$output .= '秒</li></div></div></div>';

echo $output;

}

function EfanWebsitestat(){

// 注册小工具

register_widget('EfanWebsitestat');

}

add_action('widgets_init','EfanWebsitestat');

（方式二）本站已经创建好文件，免去了你自己创建文件，在文章末尾处“资源下载”下载文件，然后上传到主题目录下即可。

2、在主题目录下functions.php文件，添加下面的函数代码即可。

//添加站点统计小工具

include("widget-websitestat.php");

3、在网站后台—》主题设置—》自定义代码—》自定义CSS样式，添加下面的CSS代码，主题没有自定义CSS样式的，在主题目录下style.css添加即可。

/*统计小模块*/

.widget_Websitestat h3{font-weight:700;}.widgest-boys{overflow:hidden;}.widgest-boys .widgest-bg{margin: 4px; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; border-radius: 8px;}.widgest-boys .widgest-main{align-items: center; place-content: flex-start space-around; display: flex;}.widgest-boys .widgest-meat{display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; color: rgb(255, 255, 255); font-weight: 700 !important; line-height: 1.5 !important;}.widgest-bg:not(article){transition: all 0.3s;}.widgest-bg:not(article):hover{transform: translateX(-10px);}

/*图片路径设置*/

.widgest-bg1{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_1.jpeg);}

.widgest-bg2{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_2.jpeg);}

.widgest-bg3{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_3.jpeg);}

.widgest-bg4{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_4.jpeg);}

.widgest-bg5{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_5.jpeg);}

.widgest-bg6{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_6.jpeg);}

.widgest-bg7{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_7.jpeg);}

.widgest-bg8{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_8.jpeg);}

.widgest-bg9{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_9.jpeg);}

.widgest-bg10{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_10.jpeg);}

.widgest-bg11{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://www.cunshao.com/666666/meihua/img/202265214415536a8ec8a13632762d0e984c674694de6f2533dc6e9_11.jpeg);}

说明（非常重要）：图片我是通过一张图片剪切成11张图片（有11个信息统计），然后通过CSS添加进去的。你可以自己剪切11张图片，然后按顺序添加进去，css中”widgest-bg1-widgest-bg11″都是按顺序好的，在url(图片链接路径)里面加，不懂的找留言或者联系我。

我用的剪切工具是在百度乱找的，呐！http://www.zuohaotu.com/cut-image.aspx就是这个。

剪切教程：

图片[36]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题 — 4、最后一步，在网站后台—》外观—》小工具—》WIIUII 网站统计，添加到侧边栏即可完成。
标题和建站时间自己填写。

图片[37]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-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="https://www.cunshao.com"><b>QQ86512</b></a>。</div >';

}

echo $custom_content;

}

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

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

图片[39]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

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);}

评论框添加背景图片

美化教程

在主题设置—》自定义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.cunshao.com/666666/meihua/img/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图片）,自己添加喜欢的背景图片。

更改文章列表样式

美化教程

CSS代码：

/*文章列表样式*/

@media screen and (min-width: 768px){.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: calc(100% - 20px - 20px);}}

上面该样式只有电脑、平板显示（即>768px的显示），若需要手机或者全部显示，请用下面代码：

/*文章列表样式*/

.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: calc(100% - 20px - 20px);}

本站正在使用的CSS样式：

/*文章列表样式*/

@media screen and (min-width: 768px){.posts-item{padding: 10px;}/*.posts-item .item-heading{font-size: 22px;}*/.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: 15px; width: 100%;margin-left: 0px;}}

添加背景图片

美化教程

CSS代码

/*背景图*/

body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://www.cunshao.com/666666/meihua/img/background(1).png) top fixed;}

说明：图片自己换，夜间无背景，全黑。

新年背景图：https://www.cunshao.com/666666/meihua/img/newyear.jpg

添加B站追番页面

本来是准备把另一个追剧页面弄好后在一起发教程的，但一直还没有时间去弄追剧页面的样式美化（暂时没有了样式设计的想法），有星友需要这个页面，所以今天就先发布WordPressB站追番页面吧（后期会发布追剧的页面，敬请期待…）！O(∩_∩)O哈哈~。
WordPress追番页面是我在百度翻找了好久，无意间在GitHub找到的，是由Mario（蘑菇君）大佬二开的（大佬就大佬，我永远滴神…），然后我就是偷偷的拿来进行样式美化，虽然我只针对子比主题进行样式的美化，不过理论上应该所有WordPress主题皆可用，其他主题若不适用，自行修改CSS样式即可。

美化教程

零、说明

（其他WordPress主题需看）每个主题的页面模板的头和尾调用的方式和代码都不同，所以你需要自己在主题目录找到默认模板页面PHP文件（一般都叫“page.php”,然后创建新的PHP文件，复制默认页面代码进去，在合适的位置添加下面的核心代码即可[核心代码B站追番页面php文件我有注释]，同时还是得跟教程走滴），需要一点基础。

B站追番页面需要在B站添加自己追番的剧，不然页面无法显示的哦！如何添加自己的追番自己百度一下。

下面的教程主要以子比主题为例进行…

壹、上传文件和目录

在文章末尾资源下载处下载文件，解压后把json目录上传到网站的根目录下，json目录中有两个文件是追剧页面的，我还没弄样式，后期我会发，如果介意请自行删除。

把bilibili-bangumi.php文件上传到子比主题目录zibll/pages目录下。

上传后文件中出现中文的乱码，可能ZIP对中文兼容性不是太好，请自行创建文件，然后复制代码进去即可。

贰、修改文件

1、bilibiliAcconut.php文件

登陆B站，进入个人空间，获取UID（如下图）

F12进入控制台（进入后需要刷新一遍）获取B站Cookie（如下图）

在bilibiliAcconut.php文件中添加获取来的UID和Cookie（如下图）。

叁、创建页面

在网站后台—>页面—>新建页面—>页面属性–模板–B站追番页面（古腾堡编辑器是这样的，不知道经典编辑器是不是一样），然后发布页面即可。

资源下载地址：https://pan.cunshao.com/pan/202207/04/bilibili-master.zip

项目地址：https://github.com/Fog-Forest/bilibili

底部炫酷引导卡片小工具

美化教程

在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可。

<p>欢迎光临寒舍！</p>

</div>

<li>

</li>

<li>

</li>

</ul>

</div>

<span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>

</section>

</div>

.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/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>

document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;

</script>

添加短视频聚合无水印解析页面

短视频聚合无水印解析页面是我很久之前就弄了，但弄好之后就不怎么管了，采用了非常简洁的样式，非常的简单。说是聚合无水印解析，其实我也没怎么测试过（只测试了抖音、快手、最右这几个短视频软件），解析的API采用大佬的接口。好啦！废话少说，下面安排教程！

美化教程

（其他的WP主题要注意看哦！）页面的头尾代码我只采用符合本站主题（子比主题）的头部和尾部代码，WP其他主题使用可能会出现样式错乱。若其他WP主题使用请自行添加和复制自己主题目录下的默认页面模板（一般都是默认模板的文件都是page.php文件），然后在合适的位置添加下方教程的核心代码即可啦！需要有点基础哦！

第一步：页面代码

使用子比主题的朋友请看过来！

使用子比的朋友，直接在子比主题目录/zibll/pages/下创建一个PHP文件，然后复制下面的代码添加进去即可完成第一步！

<?php

/**

* Template name: 聚合解析页面

* Description: aggregation_analysis

// 获取链接列表

get_header();

$header_style = zib_get_page_header_style();

<?php while (have_posts()) : the_post(); ?>

<?php if ($header_style != 1) {

echo zib_get_page_header();

} ?>

<?php if ($header_style == 1) {

echo zib_get_page_header();

} ?>

<html>

<head>

<style>

.inputUrl{width: 100%; display: flex; justify-content: flex-end; align-items: center; flex-direction: column;} .textUrl{width: 90%; height: 45px; outline: none; padding: 4px 8px; border-radius: 8px; border: 1.5px solid #c0c0c0; outline: none; background: #00000000; font-weight: 700; box-shadow: 0px 0px 2px #eeeeee;} .sendBtn{width: 90%; height: 40px; margin: 15px; border-radius: 8px; box-shadow: 0px 0px 2px #555; font-weight: 700;} .sendBtn:hover{background-color: #FFF;} .down{text-align: center;} .down a{display: inline-block; padding: 0 1em; margin: 0.5em; height: 2.75em; border: solid 1px #c8cccf; border-radius: 4px; background-color: transparent; color: #414f57!important; text-align: center; text-decoration: none; white-space: nowrap; line-height: 2.75em; font-weight: 700;} #myDiv{color: #0089fff0; overflow-y: hidden; background-color: #f0f1f1fa; margin: 10px; border-radius: 8px; word-wrap: break-word;} #myDiv1{text-align: center;font-weight: 700;padding: 10px;}

</style>

</head>

<p>

目前支持:抖音/皮皮虾/火山/微视/微博/绿洲/最右/轻视频/instagram/哔哩哔哩/快手/全民小视频/皮皮搞笑

<br>

温馨提示:粘贴视频地址时无需删除文案但如果视频链接正确但解析失败请删掉文案后重试

</p>

</div>

</div>

</form>

</div>

function setValue(){

var v = document.getElementById("input1").value;

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp=new XMLHttpRequest();

}

else{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

xmlhttp.open("GET","https://tenapi.cn/video?url="+v,false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

　 var jsonObj = JSON.parse(xmlhttp.responseText);

$(".down").html('<h4 id="form-title" style="font-weight: 700;">'+jsonObj.title+'</h4><a id="form-cover" href="'+jsonObj.cover+'" target="_blank" download="video">下载封面</a><a id="form-video" href="'+jsonObj.url+'" target="_blank" download="video">下载视频</a><a id="form-music" href="'+jsonObj.music+'" target="_blank" download="video">下载音乐</a>');

}

</script>

</html>

<?php endwhile; ?>

</div>

<?php comments_template('/template/comments.php', true); ?>

</div>

<?php get_sidebar(); ?>

</main>

<?php

get_footer();

说明：代码中相关的文字，可以自行修改。

第二步：新建页面

在WP网站后台—》页面—》新建页面—-》页面属性—》模板—》选择“WIIUII-聚合解析页面”，填写标题、固定连接（非必须），最后发布即可。

公告弹窗样式美化

美化教程

代码：

其实就是一个简单的HTML代码（因为弹窗公告支持HTML代码），自己在弹窗内容里面添加代码即可。图片、信息啥的自己修改即可。

<html>

<body>

</a>

欢迎光临寒舍！还在使用本站《子比主题添加底部统计信息模块小工具》文章中修改版的小伙伴，出现“用户总数”不显示的，请更新一下PHP代码，我已经更新PHP代码在文章中了。另外所有教程的图片链接，请自行下载上传到本地或者上传其他图床，谢谢啦。

</div>

var text = $("#container").text().trim();

$("#container").html("");

for(var i = 0;i < text.length;i++){

$("#container").append("<span>"+text[i]+"</span>")

}

var s = 0;

var tim = setInterval(function(){

$("#container span").eq(s++).css("color",getColor()).show();

if(s == text.length){

clearInterval(tim)

}

}, 100)

function getColor(){

return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";

}

</script>

</body>

</html>

修改主题字体（网站字体美化）

美化教程

CSS代码：（字体样式一：）

/*字体*/

@font-face{font-family:"wiiuii";src:url(https://www.cunshao.com/666666/meihua/adjzRQKK4rMhqM7T.ttf);}

*{font-family:"wiiuii"}

CSS代码（字体样式二）：

/*全站字体美化*/

@font-face{

font-family: 'moe';

src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf');

src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf');

src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont');

src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot');

src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg');

src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff');

src: url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2');

}

body{

font-family:'moe';

}

.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {

.meta-right .meta-view{

display: unset !important;

}

注：（非常重要）font-family是自定义字体名称（自己修改），url这是字体文件的地址（自己修改），*这是全局显示。

好看的侧边ip标签小工具

美化教程

代码：

<img src="https://www.cunshao.com/666666/meihua/ipqianmingdang" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.cunshao.com/666666/meihua/ipqianmingdang" 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>

ip签名档源码：https://www.cunshao.com/4586.html

侧边在线征稿小工具

美化教程

代码：

#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}

</style>

</div>

<div>

<hr>

<a href="https://www.cunshao.com/posts-edit" target="_blank" rel="noopener">点击在线投稿</a>

<br>

投稿邮箱：<b>86512@qq.com</b>

<br>

交流 QQ：<b><a href="https://www.cunshao.com" target="_blank" rel="noopener">86512</a></b>

</div>

下载页面添加声明或说明

美化教程

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>

<li>1.村少博客所提供的压缩包若无特别说明，解压密码均为<em>www.cunshao.com</em>;</li>

<li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>

<li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>

<li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便村少博客及时进行更新;</li>

<li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>

</ul>

</div>

</div>

<span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>

</div>

添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，不知道新版有没有变化）。

左侧菜单添加背景图片（手机才能看）

美化教程

代码：

/*手机侧边栏背景图片*/

@media (max-width: 767px){

.mobile-navbar.show,.mobile-navbar.left{

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

cursor: pointer;

background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://www.cunshao.com/666666/meihua/20200829145305_5a9ac.jpg);}

.mobile-nav-widget .box-body {

background: var(--muted-border-color) !important;}

}

注意:

这是一个简单的CSS代码，若要更换图片请把‘‘url(https://www.cunshao.com/666666/meihua/20200829145305_5a9ac.jpg)’’更换成“url(自己的图片链接)”即可。

图片[54]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

子比主题下载页面美化（简单的美化）

这是简单的改动一下代码，添加了几个类，如果作者更新主题时下载页面没改动代码的话，更新主题后【复制粘贴代码】进去就能用！（更新前记得备份！记得备份！记得备份！不然就被刷新代码了）

美化教程

代码:（一些说明请仔细看）

CSS代码：（放在哪，这里就不在说了，自己可以压缩一下CSS代码）

/*下载样式*/

.download-article{

padding: 0 10px;

}

.download-demo{

margin: 10px 0;

border: 1px dashed red;

border-radius: 5px;

}

.download-wiui{

padding: 5px;

display: flex;

justify-content: center;

align-items: center;

}

.download-sty{

text-align: center;

height: 100%;

}

.download-sty p{

font-size: 15px !important;

text-align: center;

margin: 0;

}

.download-sty img{

width: 140px;

height: 100%;

}

.download-theme-box{

margin-bottom: 20px;

display: inline-flex;

flex-direction: row;

align-items: center;

}

.download-right{

margin-left: 20px;

}

.download-file-name{

font-size: 20px;

}

PHP代码：（这是整个文件的代码，粘贴时记得把那个PHP文件里面的代码【清空！清空！清空！】）

<?php

/**

* Template name: Zibll-资源下载

* Description: download page

if (empty($_GET['post'])) {

get_header();

get_template_part('template/content-404');

get_footer();

exit;

}

get_header();

$post_id = $_GET['post'];

function zibpay_get_down_html($post_id)

{

$pay_mate = get_post_meta($post_id, 'posts_zibpay', true);

$html = '';

if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') {

return get_template_part('template/content-404');

};

// 查询是否已经购买

$paid_obj = zibpay_is_paid($post_id);

$posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true);

$pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title;

$pay_doc = $pay_mate['pay_doc'];

$pay_details = $pay_mate['pay_details'];

if ($paid_obj) {

//已经购买直接显示下载盒子

$paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']);

$paid_name = '<b class="badg jb-red mr6" style="margin-left: 5px; font-size: 12px; padding: 2px 10px; line-height: 1.4; "><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</b>';

$pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : '';

$dowmbox = '<div style="/*margin-bottom:3em;*/">' . zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id) . '</div>';

if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) {

$dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免费资源，请登录后下载</b></div>';

$pay_extra_hide = '<div class="text-center pay-extra-hide">';

$pay_extra_hide .= '<p class="box-body muted-2-color">请先登录！</p>';

$pay_extra_hide .= '<p>';

$pay_extra_hide .= '<a href="javascript:;" class="signin-loader but jb-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i>登录</a>';

$pay_extra_hide .= '<a href="javascript:;" class="signup-loader ml10 but jb-yellow padding-lg"><i data-class="icon mr10" data-viewbox="0 0 1024 1024" data-svg="signup" aria-hidden="true"></i>注册</a>';

$pay_extra_hide .= '</p>';

$pay_extra_hide .= zib_social_login(false);

$pay_extra_hide .= '</div>';

}

$html = '<div class="download-demo"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 文件下载</h3></div>';

$html .= '<div class="download-wiui">';

/*微信公众号图片在下面的<img>里面，自己放自己的图片链接文字自己修改*/

$html .= '<div class="download-sty"><img src="https://www.cunshao.com/666666/meihua/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B71.png" /><p>关注村少博客公众号不迷路</p></div>';

$html .= '<div class="download-right"><div class="article-header download-theme-box"><div class="article-title" style="margin-top: 0;"><span class="download-file-name">[文件名] </span><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div>' . $paid_name . '</div>';

$html .= '<div>' . $pay_doc . '</div>';

$html .= '<div class="muted-2-color em09">' . $pay_details . '</div>';

$html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>';

$html .= '</div></div>';

} else {

//未购买

$html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>';

$html .= '<div>' . $pay_doc . '</div>';

$html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>';

$html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暂无下载权限</b></div>';

$html .= '<a style="margin-bottom: 2em;" href="' . get_permalink($post_id) . '#posts-pay" class="but jb-yellow padding-lg"><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span class="ml10">返回文章</span></a>';

}

return $html;

}

<style>

</style>

<?php while (have_posts()) : the_post(); ?>

<?php echo zib_get_page_header(); ?>

<?php

echo zibpay_get_down_html($post_id);

$page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true);

if ($page_links_content_s) {

the_content();

wp_link_pages(

array(

'before' => '<p class="text-center post-nav-links radius8 padding-6">',

'after' => '</p>',

)

);

echo '</div>';

}

<style>

.panel:hover,.download-demo:hover{border: 1px dashed #FF6666;}/*框颜色背景色*/

.panel:hover h3,.download-demo:hover h3{color:#fff;}

.panel{margin-bottom: 10px; background-color: #fff; border: 1px dashed #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>

<li>1.村少博客所提供的压缩包若无特别说明，解压密码均为<em>www.cunshao.com</em>;</li>

<li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>

<li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>

<li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便村少博客及时进行更新;</li>

<li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>

</ul>

</div>

</div>

</div>

<?php ?>

<?php endwhile; ?>

</div>

<?php comments_template('/template/comments.php', true); ?>

</div>

<?php get_sidebar(); ?>

</main>

<?php

get_footer();

注意:

PHP文件路径：主题文件夹/zibll/pages/download.php

有一些文字说明比如：站长声明、下载说明，自己在代码中修改一下。

微信公众号的图片+文字，代码里面有注释提示的，自己改一下就好。

图片[55]-子比美化教程合集美化只看这一篇文章就够了！！！-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

子比主题首页轮播图按钮样式美化

这个应该好好吐槽一下，主题作者应该更新美化轮播图按钮样式，太矩形了（边角弄圆一点也好呀!）,自己动手丰衣足食，喜欢我这个样式的小伙伴，拿去吧！点赞一波就好啦！

美化教程

CSS代码：（压缩过了）

/*幻灯片上一张、下一张按钮样式*/

.swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-button-prev{border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.swiper-button-next{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}