当前位置：文武科技柜 / 教程系列 / WordPress教程01：好看的小工具，让你的博客提升一下格调

WordPress教程01：好看的小工具，让你的博客提升一下格调

斌仔分类：

教程系列

文章字数 440 字阅读时间 14 分钟

文章目录

预览地址
一言
实时时间
摸鱼人日历
情侣纪念日时间
信息统计

🤖 由 Gemini 生成的文章摘要

此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

折腾了这么长时间的 WordPress 博客，找到不少有趣的小工具，喜欢折腾的小伙伴可以直接用这些小工具来美化一下自己的博客。

预览地址

一言

<div class="textwidget custom-html-widget">
  <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.wiiuii.cn/rqyy-imgs/rqyy-bg-5.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">27</span> <span class="wiui-rqyy-month">07</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 src="./yiyan.js"></script>
</div>

yiyan.js

实时时间

<p><br/><canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>
<script src="./clock.js"></script></p>

clock.js

摸鱼人日历

<img src="https://api.vvhan.com/api/moyu" alt="摸鱼人日历" />

情侣纪念日时间

<div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
  <!-- 左边的头像 -->
  <img src="https://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=640" alt="love"
      style="width: 60px; border-radius: 50%;display:inline-block;">
  <!-- 中间的图片 -->
  <img src="https://tvax1.sinaimg.cn/large/006xxuvply1gqee8sgm9lg301k01kdfo.gif" alt="love"
      style="width: 60px; border-radius: 50%;display:inline-block;">
  <!-- 右边的头像 -->
  <img src="https://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=640" alt="love"
      style="width: 60px; border-radius: 50%;display:inline-block;">
</div>
<p style="font-size: 0.8rem;text-align:center;">我们相恋了</p>
<p id="lovexhjSitetime" style="font-size: 0.8rem;"></p>
<script src="./love-time.js"></script>

love-time.js

信息统计

记得引入 font-awesome-6 的 css 文件，以免图标不显示

在主题目录下创建widget-websitestat.php文件，然后把下面的php代码添加进去。

<?php
// WordPress统计信息小工具
// 名称: WWKJS 网站信息统计
// 由星语一人独立修改并美化
// 修改版-美化版V1.0

// 定义小工具的类 EfanWebsitestat
class EfanWebsitestat extends WP_Widget{

  function __construct(){
    // 定义小工具的构造函数
    $widget_ops = array('classname' => 'widget_Websitestat', 'description' => '显示网站的统计信息');
//     $this->WP_Widget(false, 'WIIUII 网站统计', $widget_ops);
    parent::__construct( false, 'WWKJS 网站统计', $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 wb-top"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa-solid fa-snowflake"></i> 文章总数：';
    $output .= $published_posts;
    $output .= ' 篇</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg2"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa-solid fa-paper-plane"></i> 评论数目：';
    $output .= $comments_count;
    $output .= ' 条</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg3"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa-solid fa-star"></i> 标签总数：';
    $output .= $count_tags;
    $output .= ' 个</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg4"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-pie-chart" aria-hidden="true"></i> 浏览次数：';
    $output .= $total_views;
    $output .= ' 次</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg5"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-link" aria-hidden="true"></i> 友链总数：';
    $output .= $link;
    $output .= ' 个</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg6"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa-solid fa-user"></i> 星友总数：';
    $output .= $users;
    $output .= ' 个</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg7"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa-solid fa-arrows-rotate"></i> 运行天数：';
    $output .= $time;
    $output .= ' 天</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg8"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-calendar" aria-hidden="true"></i> 建站时间：';
    $output .= $establish_time;
    $output .= '</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg9"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa-solid fa-clock"></i> 最后更新：';
    $output .= $last;
    $output .= '</li></div></div></div>';
    //   页面生成耗时+数据库查询  
    $output .= '<div class="widgest-bg widgest-bg10"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-podcast" aria-hidden="true"></i> 数据查询：';
    $output .= get_num_queries();
    $output .= ' 次 </li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg11 wb-bottom"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-hourglass-half" aria-hidden="true"></i> 生成耗时：';
    $output .= timer_stop(0,5);
    $output .= '秒</li></div></div></div>';
    echo $output;
  }
}

function EfanWebsitestat(){
  // 注册小工具
  register_widget('EfanWebsitestat');
}

add_action('widgets_init','EfanWebsitestat');

?>

在主题的 functions.php 引入小工具 php 文件

//添加站点统计小工具
include("widget-websitestat.php");

CSS 文件、背景照片

/*统计小模块*/
.wb-top{border-top-left-radius:8px;border-top-right-radius:8px;}.wb-bottom{border-bottom-right-radius:8px;border-bottom-left-radius:8px;}
.widget_Websitestat h3{font-weight:700;display: none;}.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('./1.jpg');}
.widgest-bg2{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./2.jpg');}
.widgest-bg3{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./3.jpg');}
.widgest-bg4{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./4.jpg');}
.widgest-bg5{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./5.jpg');}
.widgest-bg6{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./6.jpg');}
.widgest-bg7{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./7.jpg');}
.widgest-bg8{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./8.jpg');}
.widgest-bg9{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./9.jpg');}
.widgest-bg10{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./10.jpg');}
.widgest-bg11{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('./11.jpg');}

wordpress

打赏作者

非常感激每一位打赏的朋友！

支付宝

微信

扫一扫，请博主喝咖啡☕

文章作者: 斌仔

文章链接: https://www.wangdu.site/course/1077.html

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

WordPress教程01：好看的小工具，让你的博客提升一下格调

预览地址

一言

实时时间

摸鱼人日历

情侣纪念日时间

信息统计

星海浏览器 - 星辰大海、无界访问

电脑维修必备：驱动程序，解决你无驱动、驱动旧的问题

共有 0 条评论

点击这里取消回复。

📄 公告

📢 活动公告

归档

WordPress教程01：好看的小工具，让你的博客提升一下格调

预览地址

一言

实时时间

摸鱼人日历

情侣纪念日时间

信息统计

星海浏览器 - 星辰大海、无界访问

电脑维修必备：驱动程序，解决你无驱动、驱动旧的问题

相关推荐

共有 0 条评论

点击这里取消回复。

📄 公告

📢 活动公告

归档