WP主题美化教程集锦[笔记]-楊仙森万事坞

给网站挂个灯笼

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

<!-- 灯笼1 -->
<div class="deng-box">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b"><div class="deng-t">节</div></div>
    </div>
    <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  </div>
</div>
 
<!-- 灯笼2 -->
<div class="deng-box1">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b"><div class="deng-t">春</div></div>
    </div>
    <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></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统计信息小工具
// 名称: WIIUII 网站信息统计
// 由星语一人独立修改并美化
// 修改版-美化版V1.0

// 定义小工具的类 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]-子比主题美化教程-村少博客 — 4、最后一步，在网站后台—》外观—》小工具—》WIIUII 网站统计，添加到侧边栏即可完成。
标题和建站时间自己填写。

添加文章更新或过期失效提示

美化教程

将下面的函数代码加入到主题目录下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://leohi.top/about"><b>楊掌柜</b></a>。</div >';
    }
        echo $custom_content;
    }

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

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

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://pic.imgdb.cn/item/62f37d5416f2c2beb188d933.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://gitee.com/xun7788/my-imagination/raw/master/cdn/background.png) top fixed;}

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

新年背景图：https://leohi.top/meili/img/newyear.jpg

底部炫酷引导卡片小工具

美化教程

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

<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
	<div class="buy-box">
		<div class="slogan">
			<h3>楊仙森的万事屋</h3>
			<p>欢迎光临万事不干屋！</p>
		</div>
		<ul class="actions">
			<li>
				<a href=http://wpa.qq.com/msgrd?v=3&uin=4223335&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系掌柜</a>
			</li>
			<li>
				<a href="https://leohi.top/links" target="_blank" class="demo-button" rel="noopener noreferrer">友链之门</a>
			</li>
		</ul>
	</div>
	<span class="tips"><div id="go-fav">掌握更多精彩，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
	</section>
	</div>
<style type="text/css">
.buy-container{color:#ccc;padding:60px 40px 50px 40px;margin:0 auto;/*background:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);*/background: linear-gradient(180deg, #FFB7B7 0%, #727272 100%), radial-gradient(60.91% 100% at 50% 0%, #FFD1D1 0%, #260000 100%), linear-gradient(238.72deg, #FFDDDD 0%, #720066 100%), linear-gradient(127.43deg, #00FFFF 0%, #FF4444 100%), radial-gradient(100.22% 100% at 70.57% 0%, #FF0000 0%, #00FFE0 100%), linear-gradient(127.43deg, #B7D500 0%, #3300FF 100%);
background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;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:700;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:700;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:#fff}
#go-fav span{padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>

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

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

美化教程

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

第一步：页面代码

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

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

<?php

/**
 * Template name: WIIUII-聚合解析页面
 * Description:   WIUII - aggregation_analysis
 */

// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                    <!---->
                    <html>
                        <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <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>
                        <!--<div id="wrapper">-->
                            <!--<form method="post">-->
                              <div id="myDiv1">
                                <p>
                                  目前支持:抖音/皮皮虾/火山/微视/微博/绿洲/最右/轻视频/instagram/哔哩哔哩/快手/全民小视频/皮皮搞笑
                                  <br>
                                  温馨提示:粘贴视频地址时无需删除文案 但如果视频链接正确但解析失败请删掉文案后重试
                                </p>
                              </div>
                              <div class="inputUrl">
                              <input class="textUrl" type="text" placeholder="请粘贴视频链接" id="input1" class="longurl">
                              <input class="btn sendBtn" type="button" onclick="setValue()" value="解析">
                              </div>
                            </form>
                            <div class="down"></div>
                              <div id="myDiv"></div>
                        </div>
                        <script>
                        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>
    </div>
    <?php get_sidebar(); ?>
</main>
<?php
get_footer();

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

第二步：新建页面

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

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

美化教程

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

 /*字体*/
@font-face{font-family:"wiiuii";src:url(https://uploader.shimo.im/f/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这是字体文件的地址（自己修改），*这是全局显示。

侧边在线征稿小工具

美化教程

代码：

<style type="text/css">
#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 id="update_version">
<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]" target="_blank" rel="noopener"><img title="楊仙森万事屋" src="https://xx.xxx.top/meili/img/xxxx.gif" alt="图片" style="border-radius:5px;" /></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)"  rel="noopener">发送邮件</a>
<a class="cms_link" href="https://leohi.top/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)"  rel="noopener">点击投稿</a>
<a class="grid_link" href="leohi.top/about" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)"  rel="noopener">关于我们</a>
</div>
<div>
  <hr>
<a href="https://leohi.top/posts-edit" target="_blank" rel="noopener">点击在线投稿</a>
  <br>
投稿邮箱：<b>[email protected]</b>
  <br>
交流 QQ：<b><a href="https://leohi.top" target="_blank" rel="noopener">4223335</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 class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.万事屋所提供的压缩包若无特别说明，解压密码均为<em>leohi.top</em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便掌柜的及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>掌柜声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->

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

——本页内容已结束，点击以下按钮翻页——

温馨提示：本文最新于2023-07-10 18:23:41进行了更新，某些文章内容具有时效性，若失效或有错误，请在下方留言。

掌柜声明

本站网络名称： 楊仙森万事坞

本站永久网址： https://leohi.top

网站权益说明：文章部分源于网络，仅供大家学习与参考，并无商业用途，如有侵权，可联系本站管理员予以处理。
① 本站一切资源不代表本站立场，并不代表本坞赞同其观点和对其真实性负责。
② 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客若发现请通知坞长。
③ 本站资源来源于网络，如发现失效，可留言告知并第一时间更新。