【WP建站记录】zibll子比主题美化汇总（持续更新）

很多时候网页背景是白色的，图片整体也是白色的，有时候不好区分这是图片还是网页，这里给图片添加一个悬浮展示边框的效果，方便区分。

网站管理后台—》子比主题设置—》自定义代码—》自定 CSS 代码，把下面的 css 代码复制粘贴到里面即可。

里面的 8px 大小可自行调节，颜色代码#63B8FF 也可自行设置

/*鼠标移动图片外发光*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}

在子比主题设置—>文章&列表—>文章页—>版权提示内容处添加以下代码：（建议在zibi主题下zibll/inc/functions/zib-single.php页面下搜索:posts-copyright 进行修改）

1、网站管理后台—》主题设置—》文章&列表—》文章页 —》 文章页 在文章内容后-插入内容 ，把下面的 php 代码复制粘贴到里面即可。

在主题目录下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;
}

在主题目录zibll/inc/functions/zib-single.php,把下面代码添加到文章页文章头部部分（图标可以使用阿里巴巴矢量图标库）

<!--文章字数和阅读时间--><i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?>

将下面的函数代码加入到主题目录下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.lvye.com"><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);}

主题后台添加自定义样式代码或者在主题的header或者footer引用代码即可，这里提供三种样式

第一种样式

<style type="text/css">
/*网站整体灰白样式开始一*/
html{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}
/*网站整体灰白开始样式一结束*/
</style>

第二种样式

<style type="text/css">
/*网站整体灰白样式开始二*/
          :root {
            --BG_COLOR: #121212;
            --FONT_COLOR: rgba(255, 255, 255, .87);
            --TAB_TITLES_COLOR: rgba(255, 255, 255, .6);
            --SUB_TITLE_COLOR: rgba(255, 255, 255, .38);
            --TAB_TITLES_HOVER_COLOR: #fff;
            --TITLE_HOVER_COLOR: #0D9BFF;
            --RIGHT_CONTENT_TEXT_COLOR: rgba(255, 255, 255, .5);
            --FOCUS_BG_COLOR: #222222;
            --TAB_SUBTITLES_BG_COLOR: rgba(50, 51, 53, .7);
            --IMG_DEFAULT_COLOR: #333333;
          }
          html {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
          }
          body{
            filter:gray;
          }
/*网站整体灰白样式开始二*/
</style>


第三种样式

<style type="text/css">
/*网站整体灰白样式开始三*/
body {
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
}
/*网站整体灰白样式三结束*/
</style>

找到主题目录下的这个文件：inc/functions/zib-footer.php

搜索zib_footer_con_2，新增如下代码：

$html .= '<div class="footer-muted em09">本页数据库'.get_num_queries().'次查询 | 页面耗时'.timer_stop(0,5).'秒 | 占用内存'.round(memory_get_peak_usage()/1024/1024,2).'MB</div>';

1.在子比主题的主题目录下，header.php底部添加以下函数代码：注：函数运行日期2020-03-28改为你自己网站运行的日期。

<!--调用信息代码-->
<!--底部统计用的代码-->
<script type="text/javascript" >
<?php
//用户总数
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var tj_jstext="."'$users'";
?>
</script>
<script type="text/javascript" >
<?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>
<script type="text/javascript" >
<?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>
<script type="text/javascript" >
<?php
//日志总数
$count_posts = wp_count_posts(); 
$published_posts =$count_posts->publish;
echo "var tj_rzzs="."'$published_posts'";
?>
</script>
<script type="text/javascript" >
<?php
//稳定运行
$wdyx_time = floor((time()-strtotime("2020-03-28"))/86400);
echo "var tj_wdyx="."'$wdyx_time'";
?>
</script>
<!--调用信息代码结束-->

在zib-footer中添加如下代码：

$html .= '<div class="footer-muted em09">本站现注册<script type="text/javascript" >document.write(tj_jstext);</script>名用户 | 已发布<script type="text/javascript" >
document.write(tj_rzzs);</script>篇文章 | 浏览<script type="text/javascript" >document.write(tj_view);</script>次 | 今日发布<script type="text/javascript" >document.write(tj_24h);</script>篇文章</div>';