WordPress美化教程锦囊【子比主题】「已更新至41期」

添加的地方有两处，function.php（主站链接/wp-content/themes/zibll/function.php）跟小工具(wp后台->外观->小工具->实时预览)。

自定义PHP（放到function.php里）

//实现侧边栏文本工具运行PHP代码
add_filter('widget_text', 'php_text', 99);
function php_text($text) {
if (strpos($text, '<' . '?') !== false) {
ob_start();
eval('?' . '>' . $text);
$text = ob_get_contents();
ob_end_clean();
}
return $text;
}
function zfunc_comments_users($postid=0,$which=0) {
  $comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论
  if ($comments) {
    $i=0; $j=0; $commentusers=array();
    foreach ($comments as $comment) {
      ++$i;
      if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; }
      if ( !in_array($comment->comment_author_email, $commentusers) ) {
        $commentusers[] = $comment->comment_author_email;
        ++$j;
      }
    }
    $output = array($j,$i);
    $which = ($which == 0) ? 0 : 1;
    return $output[$which]; //返回评论人数
  }
  return 0; //没有评论返回0
};

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

自定义HTML（小工具的文本里）

<ul class="list-group box-shadow-wrap-normal">
<li class="list-group-item text-second"><i class="xy-tab-icon fa fa-fw fa-map-o"></i> <span class="badge pull-right cursor" title="文章数目"><?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?>篇</span> 文章数目</li>
<li class="list-group-item text-second"><i class="xy-tab-icon fa fa-fw fa-user-o"></i> <span class="badge pull-right cursor" title="注册用户"><?php global $wpdb;$users = $wpdb->get_var("select count(id) from $wpdb->users");echo "$users" ?>位</span> 注册用户</li>
<li class="list-group-item text-second"><i class="xy-tab-icon fa fa-fw fa-calendar-check-o"></i> <span class="badge pull-right cursor" title="运行天数"><?php echo floor((time()-strtotime("2021-8-20"))/86400); ?>天</span> 运行天数</li>
<li class="list-group-item text-second"><i class="xy-tab-icon fa fa-fw fa-comments-o"></i> <span class="badge pull-right cursor" title="评论数目"><?php echo zfunc_comments_users($post->ID); ?>句</span> 评论数目</li>
<li class="list-group-item text-second"><i class="xy-tab-icon fa fa-street-view" title="总访问量"></i> <span class="badge pull-right cursor"><?php echo ''.nd_get_all_view().''; ?>次</span> 总访问量</li>
</ul>

配置演示：

测试了下，只对几个特定的按钮有效，比如QQ微信，还有就是必须清除自定义颜色才会生效哦。

/*右侧悬浮按钮美化*/
.float-right .service-qq{--this-color: #ffffff;--this-bg: linear-gradient(123deg, #2E99B0 0%, #2E99B0 40%, #FCD77F calc(40% + 1px), #FCD77F 60%, #FF2E4C calc(60% + 1px), #FF2E4C 75%, #1E1548 calc(75% + 1px), #1E1548 100%);}
.float-right .service-wechat{--this-color: #ffffff;--this-bg: linear-gradient(110deg, #FFD9E8 4%, #FFD9E8 40%, #DE95BA calc(40% + 1px), #DE95BA 50%, #7F4A88 calc(50% + 1px), #7F4A88 70%, #4A266A calc(70% + 1px), #4A266A 100%);}
.float-right .ontop{--this-color: #ffffff;--this-bg: linear-gradient(123deg, #461B93 0%, #461B93 40%, #6A3CBC calc(40% + 1px), #6A3CBC 60%, #8253D7 calc(60% + 1px), #8253D7 70%, #F78F1E calc(70% + 1px), #F78F1E 100%);}
.float-right .add-btn{--this-color: #fff;--this-bg: linear-gradient(123deg, #461B93 0%, #461B93 40%, #6A3CBC calc(40% + 1px), #6A3CBC 60%, #8253D7 calc(60% + 1px), #8253D7 70%, #F78F1E calc(70% + 1px), #F78F1E 100%);}
.float-right .toggle-theme{--this-color: #ffffff;--this-bg: linear-gradient(56deg, rgb(255, 180, 172) 0%, rgb(255, 180, 172) 40%, rgb(103, 145, 134) calc(40% + 1px), rgb(103, 145, 134) 50%, rgb(38, 78, 112) calc(50% + 1px), rgb(38, 78, 112) 70%, rgb(255, 235, 211) calc(70% + 1px), rgb(255, 235, 211) 100%);}
.float-right .admin-set-page{--this-color: #ffffff;--this-bg: linear-gradient(123deg, #2E99B0 0%, #2E99B0 40%, #FCD77F calc(40% + 1px), #FCD77F 60%, #FF2E4C calc(60% + 1px), #FF2E4C 75%, #1E1548 calc(75% + 1px), #1E1548 100%);}

在自定义CSS代码添加以下代码

/*自定义字体-start*/

@font-face

{

font-family: mmc;

src: url('https://img.wwwo.top/2021/zt.woff2');

}

body{font-family: mmc;}

/*自定义字体-end*/

如果引用不生效的话，估计就是防盗链问题，https://img.wwwo.top/2021/zt.woff2 ， 访问链接下载字体，上传到服务器或者云储存，把上面的字体链接替换掉就好了。

我们发现在知乎复制文章内容时，会自动带版权链接。分享这个是因为很多网站的作者，站里的文章有一些是自己辛苦手打原创的学习心得、实用教程等，很多人往往复制之后不带原文的版权，甚至冒充自己的原创。

方法一：添加以下代码到网站网站自定义头部HTML代码中即可。

方法二：请将以下代码添加至主题设置的自定义javascript代码中

有时候我们为了丰富网站的展示效果，将页面做成根据时间自动变换颜色或图片的样式，这样会使浏览者浏览网站不觉得疲倦，同时也会让我们的网站更加新颖。

本文通过 Date 对象的 getHours() 方法自动获得当前时间，然后自动根据不同的时间段来自动改变页面的背景颜色，当然也可以实现自动更改背景图片等操作，感兴趣的可以自行研究。直接将下面的代码放在页脚文件foot或者footer里面。

<script type="text/javascript">
function changeBg(){
  var date = new Date(),
  time = date.getHours();
  if(time > 6 && time < 18){
      document.body.style.backgroundColor="#fff222";}
  else{
      document.body.style.backgroundColor="#000";}
}
changeBg();
</script>

上面代码中time > 6 && time < 18为时间，指的是早上6点到晚上6点之间，可以自行修改时间。

#fff222和#000为颜色代码，可以自行改修颜色。

如果想换成图片的话就把上面的

document.body.style.backgroundColor="#fff222";
document.body.style.backgroundColor="#000";

替换成为

document.body.style.backgroundImage="url('背景图片地址')";

首先尺寸选择mini，背景选炫彩。

标题部分代码为

<div class="mt10 em12 padding-w10">
<p>悠悠小木屋</p>
<img style="width:50%;" alt="悠悠小木屋-让新鲜资源早知道" data-src="https://img.wwwo.top/2021/20211124064544655.gif" class=" lazyloaded" src="https://img.wwwo.top/2021/20211124064544655.gif" loading="lazy">
</div>

正文部分代码为

<html>
   <body>
      <div style="text-align: center;margin-bottom:15px;">
        <div style="padding-bottom:10px;">
             <img style="width:40%;margin-bottom:10px;
             border:2px solid #edc890;" data- 
             src="https://img.wwwo.top/2021/20211009012615687.png?imageView2/0/format/webp/q/85" 
            class=" lazyloaded" src="https://img.wwwo.top/2021/20211009012615687.png?imageView2/0/format/webp/q/85" 
            loading="lazy">
             <p style="color:#1f9c00;">
                  <i class="fa fa-qq"></i>
                  <span>QQ扫码进入悠悠小木屋用户群</span>
                  </p><p>
             </p>
             <p>您可以在用户群跟群友交流哦～</p>
        </div>
         <img style="width:75%;" alt="快来加入吧～" data- 
          src="https://img.wwwo.top/2021/20211114055944207.png" class=" lazyloaded" 
          src="https://img.wwwo.top/2021/20211114055944207.png" loading="lazy">
     </div>
   </body>
</html>

中间的信息自己改哦~下面是演示图