优雅简约之信息统计模块美化

优雅简约之信息统计模块美化第5张插图

前言

总觉得我以前写的《底部信息统计》的样式有点不怎么好看，所以一直想更换一下，但奈何一直没有灵感，搁置了好久。正好最近接触到CSS Grid 网格样式布局，所以就顺便拿来的改一下样式。

效果图

优雅简约之信息统计模块美化第6张插图

代码简简单单的使用HTML+jQuery+CSS，感觉CSS Grid 网格样式布局特别好用，但不知道浏览器兼不兼容。好啦，下面就分享教程。

食用教程

一、PHP代码：

```  <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-04-29"))/86400); echo "var tj_wdyx="."'$wdyx_time'"; ?> </script> ```

二、HTML+JS代码

下面是HTML+js代码，至于放在哪，【外观】【小工具】【自定义HTML】【首页底部全宽度】

```<div id="wiiuii-info-wg-mian"> <div class="wiiuii-info-item"> <div class="wiiuii-yxsj-item"> <svg class="icon fa-2x" aria-hidden="true"> <use xlink:href="#iconxiuxiyixia"></use> </svg> <span class="wiiuii-i-num" ><script type="text/javascript"> document.write(tj_wdyx); </script></span > <p>运行时间</p> </div> <div class="wiiuii-yhzs-item"> <svg class="icon fa-2x" aria-hidden="true"> <use xlink:href="#iconzhanghuguanli"></use> </svg> <span class="wiiuii-i-num" ><script type="text/javascript"> document.write(tj_jstext); </script></span > <p>用户总数</p> </div> <div class="wiiuii-llzs-item"> <svg class="icon fa-2x" aria-hidden="true"> <use xlink:href="#iconyanjing"></use> </svg> <span class="wiiuii-i-num" ><script type="text/javascript"> document.write(tj_view); </script></span > <p>浏览总数</p> </div> <div class="wiiuii-wz-item"> <div class="wiiuii-wz-sty wiiuii-wzzs-item"> <svg class="icon fa-2x" aria-hidden="true"> <use xlink:href="#iconxiezuoye"></use> </svg> <span class="wiiuii-i-num" ><script type="text/javascript"> document.write(tj_rzzs); </script></span > <p>文章总数</p> </div> <div class="wiiuii-wz-sty wiiuii-jrfb-item"> <svg class="icon fa-2x" aria-hidden="true"> <use xlink:href="#iconaixin"></use> </svg> <span class="wiiuii-i-num" ><script type="text/javascript"> document.write(tj_24h); </script></span > <p>今日发布</p> </div> </div> <div class="wiiuii-sjcs-item"> <div class="wiiuii-sjcj-m"> <span style="font-size: 30px">今日</span> <div id="wiiuii-date-text"></div> <div id="wiiuii-week-text"></div> <div class="wiiuii-meo-item"> <img id="wiiuii-meos" src="https://img.wiiuii.cn/emo/expression-1.png" alt="emo" /> </div> <div class="wiiuii-sjcj-content"> <span id="wiiuii-fatalism"></span> </div> </div> </div> </div> </div> <script> $(function () { var myDate = new Date(); var year = myDate.getFullYear(); //获取当前年 var mon = myDate.getMonth() + 1; //获取当前月 var date = myDate.getDate(); //获取当前日 var week = myDate.getDay(); var weeks = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ]; $("#wiiuii-date-text").html(year + "年" + mon + "月" + date + "日"); $("#wiiuii-week-text").html(weeks[week]); if (week > 0 && week < 5) { $("#wiiuii-fatalism").html("再坚持" + (5 - week) + "天就到周末啦！"); } else if (week === 5) { $("#wiiuii-fatalism").html("啊啊啊，明天就是周末啦！"); } else { $("#wiiuii-fatalism").html("今天是周末，好好休息一下吧！"); } $("#wiiuii-meos").attr( "src","https://xxx.com/expression-" + week + ".png" ); }); $("#wiiuii-info-wg-mian").parents(".zib-widget").css({ padding: "0", background: "none" }); </script>```

图标无法显示，是因为我用《阿里巴巴矢量库》，自己把下面的代码更改为其他icon的：

```<svg class="icon fa-2x" aria-hidden="true"> <use xlink:href="#iconaixin"></use> </svg>```

【推荐】用http://www.fontawesome.com.cn/faicons/的话，用下面的代码应该就可以了，图标自己更改！！！

```<i class="fa fa-free-code-camp" aria-hidden="true"></i>```