子比主题美化教程

博主：阿七
发布时间：2022 年 07 月 08 日
70 次浏览
暂无评论
15133字数
分类： WordPress 网站开发

## 子比主题幻灯片加入搜索框

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7eccce958a97797fcac338307a903bd069" aria-expanded="true"><div class="accordion-toggle"><span>幻灯片搜索框</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7eccce958a97797fcac338307a903bd069" class="collapse collapse-content"><p></p>

###**效果图：**

![幻灯片搜索框](https://pic.rmb.bdstatic.com/bjh/8603e734d5a612969e2ac5ea43fec7a6.png)

**幻灯片：**

**1.在 `自定义小工具` → `首页-主内容上面` 新增一个 `Zibll 幻灯片(新)` 小工具**

**2. 显示规则建议 `仅在PC端显示`，移动端效果不太理想**

**3. 删除 `幻灯片链接`与 `叠加图层`**

**4. 叠加文案设置：**

* 幻灯片文案（幻灯片标题）：
  ```html
  <h3><b>搜索本站精品资源</b></h3>
  <h5><b>开通会员，本站所有高质量资源随心下载</b></h5>
  ```
* 幻灯片简介：
  ```html
          <form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>">
            
            <div class="container">
              <div id="searchs">
                <input type="text" placeholder="输入关键词搜索..." name="s" id="s" class="searchInput" autocomplete="off" />
                <input class="n-button" type="submit"
                  onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';"
                  value="搜索" />
              </div>
            </div>
          </form>
  ```
* `显示位置` 设置为 `居中显示`
* `文案视差滚动：0%`

**幻灯片设置：**

**1. `幻灯片方向` 设置为 `上下切换`**

**2. 关闭 `循环切换`、`显示翻页按钮`、`显示指示器`、`自动播放`**

**3. `切换动画`设置为 `3D方块`**

**4.`电脑端高度：266px`**

**自定义css样式：**

```css
/*幻灯片搜索css样式*/
/*搜索按钮样式*/
.n-button {
  top: 1px;
  right: -6px;
  width: 120px;
  height: 42px;
  border: 1px solid #ffffff14;
  border-radius: 5px;
  background: #504bcc;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
/*搜索框样式*/
#searchs input[type="text"] {
  overflow: hidden;
  margin: 0 auto;
  padding-left: 19px;
  width: 600px;
  height: 42px;
  border: 1px solid #ffffff14;
  border-radius: 4px;
  background: rgb(255 255 255 / 62%);
  box-shadow: none;
  color: #757575;
  font-size: 14px;
  line-height: 32px;
  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
/*幻灯片3D方块切换动画阴影透明*/
.swiper-container-cube .swiper-cube-shadow {
    background: #fff0 !important;
}
```

## 卡片模式一排显示5篇文章

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9c73660076b1c99757d26f41c61f5dd040" aria-expanded="true"><div class="accordion-toggle"><span>卡片模式一排显示5篇文章</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9c73660076b1c99757d26f41c61f5dd040" class="collapse collapse-content"><p></p>

**1. 先将首页侧边栏关闭，并将布局宽度设置为1200px**

* **`子比主题设置` → `显示&布局` → `侧边栏设置` → `首页显示侧边栏` → `关闭` → `布局宽度：1200px`**

**2. 将文章默认列表样式设置为卡片模式：**

* **`子比主题设置` → `文章&列表` → `文章列表` → `默认列表模式` → `卡片模式`**

**3. 自定义css样式：**

```css
/*卡片模式一排显示5篇文章*/
@media (min-width: 992px){
.fluid-widget .card, .site-layout-1 .card {
    width: calc(20% - 16px);
}
}
```

## 首页布局宽度1500px

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3b5e92e81e7c0fdd830f338570f07e8184" aria-expanded="true"><div class="accordion-toggle"><span>首页布局宽度1500px</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3b5e92e81e7c0fdd830f338570f07e8184" class="collapse collapse-content"><p></p>

自定义javascript代码：

```javascript
//首页布局宽度1500px
$('body').append(location.pathname === '/' ? '<style>@media (min-width: 1500px) { main.container { width: 1500px;  max-width: none; } }<style>': '')
```

## 主题 LOGO 扫光

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8e57630b72fceece90428a81c265b1df75" aria-expanded="true"><div class="accordion-toggle"><span>主题LOGO扫光</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8e57630b72fceece90428a81c265b1df75" class="collapse collapse-content"><p></p>

**自定义css样式：**

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

## 导航栏标题字体加粗

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-024ad55399e55c0e2bb8f5a3d90c02ed62" aria-expanded="true"><div class="accordion-toggle"><span>导航栏字体加粗</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-024ad55399e55c0e2bb8f5a3d90c02ed62" class="collapse collapse-content"><p></p>

自定义css样式：

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

## 用户头像呼吸光环+鼠标悬停旋转放大

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-aa19c4ef750035f9242126ee0e720a9910" aria-expanded="true"><div class="accordion-toggle"><span>用户头像呼吸光环+鼠标悬停旋转放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-aa19c4ef750035f9242126ee0e720a9910" class="collapse collapse-content"><p></p>

自定义css样式：

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

## 首页文章列表悬停上浮开始

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-300e4fabbc3d33300c4966d85c43dce528" aria-expanded="true"><div class="accordion-toggle"><span>首页文章列表悬浮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-300e4fabbc3d33300c4966d85c43dce528" class="collapse collapse-content"><p></p>

自定义css样式：

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

## 主题支付模块加背景

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-df719bca4056872bc6adb172e9631d2746" aria-expanded="true"><div class="accordion-toggle"><span>主题支付模块加背景</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-df719bca4056872bc6adb172e9631d2746" class="collapse collapse-content"><p></p>

`zibll\zibpay\functions\zibpay-post.php`文件第741行

```php
$html             = '<div class="zib-widget pay-box  ' . $order_type_class . '" id="posts-pay">';
```

改为

```php
$html             = '<div class="zib-widget pay-box  ' . $order_type_class . '" id="posts-pay" style="background: linear-gradient(#f5f8fa00, #f5f8fa61), url('.zib_post_thumbnail('', 'fit-cover', true, null).');background-size: cover;background-position-y: center;">';
```

夜间模式默认原黑色背景：（自定义css样式）

```css
/*支付模块夜间模式原背景*/
.dark-theme #posts-pay {
    background: none !important;
}
```

## 网站添加图片背景

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0d96efa5226e58c84c86f6646b25f4d726" aria-expanded="true"><div class="accordion-toggle"><span>网站添加图片背景</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0d96efa5226e58c84c86f6646b25f4d726" class="collapse collapse-content"><p></p>

自定义css样式：

```css
/*网站日间主题模式图片背景*/
body {
    background-image: url(http://2.5ciyuan.cn/wp-content/uploads/2022/08/indexbg.png);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
}
/*网站夜间主题模式图片背景*/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("/**图片背景地址**/");
    background-size: cover;
}
```

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-172f3cf9769fd62a9ef3c255cf7f63d911" aria-expanded="true"><div class="accordion-toggle"><span>添加文章更新或过期失效提示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-172f3cf9769fd62a9ef3c255cf7f63d911" class="collapse collapse-content"><p></p>

将下面的函数代码加入到主题目录下 `functions.php`文件中

```php
//文章过期提示
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或下载链接失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="站长" href="http://2.5ciyuan.cn/"><b>QQ757604673</b></a>。</div >';
    }
        echo $custom_content;
    }
```

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

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

![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/08/23/image.png)

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

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

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

## 侧边栏HTML卡片小工具

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-19698db78388bcf0fba5056e0773774157" aria-expanded="true"><div class="accordion-toggle"><span>侧边栏HTML卡片小工具</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-19698db78388bcf0fba5056e0773774157" class="collapse collapse-content"><p></p>

网站后台 → 外观 → 小工具 → 添加一个 `自定义HTML` 的小工具

样式一：

![image(1)](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/08/23/image(1).png)

HTML代码：

```html
<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="http://2.5ciyuan.cn/newposts" target="_blank" rel="noopener"><img title="2.5次元" src="http://2.5ciyuan.cn/wp-content/uploads/2022/08/1435033980773.jpg" alt="图片" style="border-radius:5px;" style=""></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=757604673@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)"  rel="noopener">发送邮件</a>
<a class="cms_link" href="http://2.5ciyuan.cn/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)"  rel="noopener">点击投稿</a>
<a class="grid_link" href="http://2.5ciyuan.cn/gywm" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)"  rel="noopener">关于我们</a>
</div>
<div>
<hr>
</div>
```

样式二：

![image(2)](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/08/23/image(2).png)

HTML代码：

```html
<a class="ads" href="https://a7a7.net/" target="阿七工具"  style="border-radius:5px;">
  <h4>阿七的小工具</h4>
  <h5>阿七推荐，安全有保障</h5>
  <span class="ads-btn ads-btn-outline">立即进入</span></a>
<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>
```

样式三：（滚动播报）

![image(3)](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/08/23/image(3).png)

HTML代码：

```html
<section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b">
  <meta charset="utf-8">
  
  <div class="textwidget custom-html-widget">
  <aside id="php_text-8" 
  class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
  <div class="textwidget widget-text">
    <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;
    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>
<div class="clear"></div>
</aside></div>
</section>
```

样式四：（日期+一言）

![image(4).png](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/08/23/image(4).png)

HTML代码：

```html
<style>
  .wiui-rqyy-demo {
    width: 100%;
    height: 180px;
    position: relative;
  }

.wiui-rqyy-item {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    background-image: url(https://img.lizll.com/img/202206111947797.png);
  }

.wiui-rqyy-date {
    font-family: Arial, Helvetica, sans-serif;
  }

.wiui-rqyy-day {
    font-size: 2.5rem;
    font-weight: 700;
  }

.wiui-rqyy-month {
    font-weight: 700;
    font-size: 2rem;
  }

.wiui-rqyy-month::before {
    content: "/";
    padding-right: 2px;
  }

.wiui-rqyy-text {
    position: absolute;
    width: 90%;
    height: auto;
    line-height: 30px;
    font-family: "宋体";
    font-size: 1.5rem;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.wiiui-rqyy-yy::after {
    display: inline-block;
    content: "_";
    animation: fadeInHX 1s;
    animation-iteration-count: infinite;
  }

@keyframes fadeInHX {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

.wiui-rqyy-btn {
    display: inline-block;
    font-family: "新宋体";
    font-weight: 700;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 10px;
  }

#wiui-yybtn {
    width: 100%;
    position: relative;
  }

#wiui-yybtn:hover {
    color: #e99896;
  }

#wiui-yybtn:hover > .wiui-rqyy-msg {
    visibility: unset;
  }

.wiui-rqyy-icon {
    font-size: 18px;
  }

.wiui-rqyy-msg {
    visibility: hidden;
    font-size: 10px;
    color: #9784a0;
    position: absolute;
    padding: 5px;
    top: -5px;
    left: -60px;
    border-radius: 2px;
    background: white;
    transition: all 0.2s;
  }

.wiui-rqyy-msg::after {
    content: " ";
    display: inline-block;
    width: 9px;
    height: 9px;
    background: white;
    position: absolute;
    top: 10px;
    transform: rotate(45deg);
    border-radius: 2px;
  }
</style>
<div class="wiui-rqyy-demo">
  <div class="wiui-rqyy-item">
    <div class="wiui-rqyy-date">
      <span class="wiui-rqyy-day">-</span>
      <span class="wiui-rqyy-month">-</span>
    </div>
    <div class="wiui-rqyy-text">
      <span class="wiiui-rqyy-yy">加载中...</span>
    </div>
    <div class="wiui-rqyy-btn">
      <div id="wiui-yybtn">
        <span class="wiui-rqyy-msg">换一句</span>
        <i class="fa fa-dot-circle-o wiui-rqyy-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    var myDate = new Date();
    var mon = myDate.getMonth() + 1;
    var day = myDate.getDate();
    var newMon = mon < 10 ? "0" + mon : mon;
    var newDay = day < 10 ? "0" + day : day;
    var rqyyLock = true;
    var randRYY = parseInt(Math.random() * 10);
    $(".wiui-rqyy-item").css(
      "background-image",
      "url(https://img.lizll.com/rqyy-imgs/rqyy-bg-" + randRYY + ".png)"
    );
    $(".wiui-rqyy-day").html(newDay);
    $(".wiui-rqyy-month").html(newMon);
    $.extend({
      yyAjax: function () {
        $.ajax({
          // 链接
          url: "https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json",
          // 请求方法
          type: "GET",
          // 成功返回
          dataType: "json",
          success: function (e) {
            rqyyLock = false;
            var yiyanList = e.text.split("");
            var newYY = "";
            var yyIndex = 0;
            var timer = setInterval(function () {
              newYY += yiyanList[yyIndex];
              yyIndex++;
              if (yyIndex >= yiyanList.length) {
                clearInterval(timer);
                rqyyLock = true;
              }
              $(".wiiui-rqyy-yy").html(newYY);
            }, 150);
          }
        });
      }
    });
    $.yyAjax();
    $("#wiui-yybtn").click(function () {
      if (!rqyyLock) return;
      $.yyAjax();
    });
  });
  $(".wiui-rqyy-demo").parent().parent().css({
    padding: "0",
    overflow: "hidden"
  });
</script>
```

## ****FPS帧率显示****

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a2a93fac34d7937da64efb96fcbfe5f440" aria-expanded="true"><div class="accordion-toggle"><span>FPS帧率显示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a2a93fac34d7937da64efb96fcbfe5f440" class="collapse collapse-content"><p></p>

自定义javascript代码：

```js
// FPS帧
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
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();
})();
```

## 网站左侧联系站长按钮

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f06a05394df65c52f2a2aead162455154" aria-expanded="true"><div class="accordion-toggle"><span>网站左侧联系站长按钮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f06a05394df65c52f2a2aead162455154" class="collapse collapse-content"><p></p>

自定义头部HTML代码：

```html
<a href="//wpa.qq.com/msgrd?v=3&uin=757604673&site=qq&menu=yes" target="_blank" class="contact-help main-shadow"  style="font-weight:700;" />联系站长</a><style>.contact-help{position: fixed; z-index: 101; left: 0; top: calc(50% - 30px); margin-top: -36px; width: 28px; height: 72px; transition: all .3s; font-size: 12px;background: var(--main-bg-color);border-radius: 0 5px 5px 0; padding: 8px 7px; line-height: 14px;}@media screen and (max-width: 768px){.contact-help{display:none;}}</style>
```

最后修改：2022 年 08 月 28 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

子比主题美化教程

阿七 • 2022 年 07 月 08 日

## 子比主题幻灯片加入搜索框

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1ac6d08fcc66d6672164121de6b02c7831" aria-expanded="true"><div class="accordion-toggle"><span>幻灯片搜索框</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1ac6d08fcc66d6672164121de6b02c7831" class="collapse collapse-content"><p></p>

###**效果图：**

![幻灯片搜索框](https://pic.rmb.bdstatic.com/bjh/8603e734d5a612969e2ac5ea43fec7a6.png)

**幻灯片：**

**1.在 `自定义小工具` → `首页-主内容上面` 新增一个 `Zibll 幻灯片(新)` 小工具**

**2. 显示规则建议 `仅在PC端显示`，移动端效果不太理想**

**3. 删除 `幻灯片链接`与 `叠加图层`**

**4. 叠加文案设置：**

**幻灯片设置：**

**1. `幻灯片方向` 设置为 `上下切换`**

**2. 关闭 `循环切换`、`显示翻页按钮`、`显示指示器`、`自动播放`**

**3. `切换动画`设置为 `3D方块`**

**4.`电脑端高度：266px`**

**自定义css样式：**

## 卡片模式一排显示5篇文章

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-21031a2be385ce8f2731722b1a83c3cc7" aria-expanded="true"><div class="accordion-toggle"><span>卡片模式一排显示5篇文章</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-21031a2be385ce8f2731722b1a83c3cc7" class="collapse collapse-content"><p></p>

**1. 先将首页侧边栏关闭，并将布局宽度设置为1200px**

* **`子比主题设置` → `显示&布局` → `侧边栏设置` → `首页显示侧边栏` → `关闭` → `布局宽度：1200px`**

**2. 将文章默认列表样式设置为卡片模式：**

* **`子比主题设置` → `文章&列表` → `文章列表` → `默认列表模式` → `卡片模式`**

**3. 自定义css样式：**

```css
/*卡片模式一排显示5篇文章*/
@media (min-width: 992px){
.fluid-widget .card, .site-layout-1 .card {
    width: calc(20% - 16px);
}
}
```

## 首页布局宽度1500px

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-035c5232343fe0e323fa372345bb1f8586" aria-expanded="true"><div class="accordion-toggle"><span>首页布局宽度1500px</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-035c5232343fe0e323fa372345bb1f8586" class="collapse collapse-content"><p></p>

自定义javascript代码：

```javascript
//首页布局宽度1500px
$('body').append(location.pathname === '/' ? '<style>@media (min-width: 1500px) { main.container { width: 1500px;  max-width: none; } }<style>': '')
```

## 主题 LOGO 扫光

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d828f1f691f1f8cd7666317ad1919e4628" aria-expanded="true"><div class="accordion-toggle"><span>主题LOGO扫光</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d828f1f691f1f8cd7666317ad1919e4628" class="collapse collapse-content"><p></p>

**自定义css样式：**

## 导航栏标题字体加粗

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-42f0f18708125070f18a124f47ec99ea17" aria-expanded="true"><div class="accordion-toggle"><span>导航栏字体加粗</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-42f0f18708125070f18a124f47ec99ea17" class="collapse collapse-content"><p></p>

自定义css样式：

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

## 用户头像呼吸光环+鼠标悬停旋转放大

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-59bf798e732cec64ca0a11ccfbb546ba10" aria-expanded="true"><div class="accordion-toggle"><span>用户头像呼吸光环+鼠标悬停旋转放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-59bf798e732cec64ca0a11ccfbb546ba10" class="collapse collapse-content"><p></p>

自定义css样式：

## 首页文章列表悬停上浮开始

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-13b9a106c4fe9170ee396a075f87cc0016" aria-expanded="true"><div class="accordion-toggle"><span>首页文章列表悬浮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-13b9a106c4fe9170ee396a075f87cc0016" class="collapse collapse-content"><p></p>

自定义css样式：

## 主题支付模块加背景

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-adaf44b6e83e49bec1184bdb9460a7bc2" aria-expanded="true"><div class="accordion-toggle"><span>主题支付模块加背景</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-adaf44b6e83e49bec1184bdb9460a7bc2" class="collapse collapse-content"><p></p>

`zibll\zibpay\functions\zibpay-post.php`文件第741行

```php
$html             = '<div class="zib-widget pay-box  ' . $order_type_class . '" id="posts-pay">';
```

改为

夜间模式默认原黑色背景：（自定义css样式）

```css
/*支付模块夜间模式原背景*/
.dark-theme #posts-pay {
    background: none !important;
}
```

## 网站添加图片背景

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-dad2539d50bb33a74f255f2e6148322941" aria-expanded="true"><div class="accordion-toggle"><span>网站添加图片背景</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-dad2539d50bb33a74f255f2e6148322941" class="collapse collapse-content"><p></p>

自定义css样式：

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2cfa2306d53fedd50a4034484cfb06e342" aria-expanded="true"><div class="accordion-toggle"><span>添加文章更新或过期失效提示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2cfa2306d53fedd50a4034484cfb06e342" class="collapse collapse-content"><p></p>

将下面的函数代码加入到主题目录下 `functions.php`文件中

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

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

![](https://a7a7.oss-cn-beijing.aliyuncs.com/blog/2022/08/23/image.png)

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

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

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

## 侧边栏HTML卡片小工具

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-397fe436010f7cfeb030b9ba7b91844e52" aria-expanded="true"><div class="accordion-toggle"><span>侧边栏HTML卡片小工具</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-397fe436010f7cfeb030b9ba7b91844e52" class="collapse collapse-content"><p></p>