子比主题 – 文章页添加本站历史上的今天(主题更新需要重新设置)

如果你用的是子比主题(Zibll)给子比主题文章内版权上方加一个本站历史上的今天,也就是上一年的今天发的文章,喜欢的自行部署一下吧!

效果图

效果图

实现代码:

跟着我的步骤走不会有问题,一共三个地方的代码,两个PHP代码和一个CSS样式代码
func代码

最新的子比主题建议在子比目录下创建一个 func.php 文件,这样更新子比的话不会消失,将下面的代码放到 func.php 文件里面即可!

//历史上的今天
 function today_in_history() {

  // $title = "历史上的今天"; 
  ?>
<?php
  $limit = 5;
  global $wpdb;
  $post_year = get_the_time('Y');
  $post_month = get_the_time('m');
  $post_day = get_the_time('j');
  $sql = "select ID, year(post_date_gmt) as h_year, post_title, comment_count FROM 
    $wpdb->posts WHERE post_password = '' AND post_type = 'post' AND post_status = 'publish' 
        AND year(post_date_gmt)!='$post_year' AND month(post_date_gmt)='$post_month' AND day(post_date_gmt)='$post_day' 
        order by post_date_gmt DESC limit $limit";
  $histtory_post = $wpdb->get_results($sql);
  if( $histtory_post ) {
    foreach( $histtory_post as $post ) {
      $h_year = $post->h_year;
      $h_post_title = $post->post_title;
      $h_permalink = get_permalink( $post->ID );
      $h_comments = $post->comment_count;
      $h_post .= "<li><lable>$h_year</lable>:<a href='".$h_permalink."' style='color:blue' title='Permanent Link to ".$h_post_title."'>$h_post_title <span>($h_comments)</span></a></li>";
    }
  }
  $arr_month = array( 1=>"一月",2=>"二月",3=>"三月",4=>"四月",5=>"五月",6=>"六月",7=>"七月",8=>"八月",9=>"九月",10=>"十月",11=>"十一",12=>"十二" );
  foreach($arr_month as $key => $value) {
    if($post_month == $key) {
      $month_l = $value;
    }
  }
  if ( $h_post ) {
    $result = ' 
        <section class="today-in-history">
            <fieldset> 
                <legend> 
                   <div class="today-date">
                        <span class="month">'.$month_l.'</span> 
                        <span class="day">'.$post_day.'</span>
                    </div> <h3>本站历史上的今天</h3> 
                </legend>
                <ul>'.$h_post.'</ul> 
            </fieldset>
        </section>';
  } else {
    $result = '<section class="today-in-history"> 
        <fieldset> 
            <legend>
                 <div class="today-date">
                    <span class="month">'.$month_l.'</span>
                    <span class="day">'.$post_day.'</span>
                 </div> 
                 <h3>本站历史上的今天</h3> 
            </legend>
            <ul>"吼吼~~~,往年的今天站长不知道跑哪里偷懒去了~~~"</ul>
         </fieldset> 
        </section>';
  }
  echo $result;
}
zib-single代码

文件路径: /wp-content/themes/zibll/inc/functions/zib-single.php 打开文件然后在里面然后搜索 版权声明 ,如下图
搜索

版权声明 这段代码下方添加以下代码

此处内容需要评论回复后方可阅读

注意:子比主题更新的话,zib-single代码需要重新添加

CSS代码
  1. 复制代码:将下面的完整 CSS 代码复制下来
  2. 添加到子主题:进入 WordPress 后台 → 子比主题设置全局功能自定义代码自定义CSS样式 ,将代码粘贴到输入框中
  3. 保存生效:点击 “发布” 按钮,刷新文章页面即可看到效果。
    .today-in-history {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        border: 0;
        padding: 0;
    }
    
    .today-in-history fieldset {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
        border: 1px dashed #999;
        padding: 0;
    }
    
    .today-in-history fieldset legend {
        display: block;
        width: auto;
        height: 36px;
        margin: 0 50px;
        border: 0;
        padding: 0;
    }
    
    .today-in-history fieldset legend .today-date {
        float: left;
        display: block;
        width: 36px;
        height: 100%;
        margin: 0 auto;
        border: 0;
        padding: 0;
        line-height: 18px;
        border-radius: 5px;
        overflow: hidden;
    }
    
    .today-in-history fieldset legend .today-date .month {
        display: block;
        width: 100%;
        height: 50%;
        margin: 0;
        border: 0;
        padding: 0;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #c10e0e;
    }
    
    .today-in-history fieldset legend .today-date .day {
        display: block;
        width: 100%;
        height: 50%;
        margin: 0;
        border: 0;
        padding: 0;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        color: #000;
        background: #eee;
    }
    
    .today-in-history fieldset legend h3 {
        display: inline-block;
        width: auto;
        height: 40px;
        margin: 0;
        border: 0;
    padding: 0 10px;
        line-height: 40px;
        font-size: 18px;
        color:#cccc00;
        background: none;
    }
    
    .today-in-history fieldset ul {
        width: auto;
        height: auto;
        margin: 15px 20px;
        border: 0;
        padding: 0;
    }
    
    .today-in-history fieldset ul li label {
        margin: 0 5px;
        border: 0;
        padding: 0;
    }
工具样式与交互细节

从代码能看出,这个工具在设计上很注重细节:

  • 月份底色: CSS 代码里 .today-in-history fieldset legend .today-date .month { 里的 ackground: #c10e0e ; 参数 改成你想要的颜色 如 #FF0000 (红色)
  • 标题颜色: CSS 代码里 .today-in-history fieldset legend h3 { 里的 color: #f47920 ;参数改成你想要的颜色。如 #FF0000 (红色)
结语

如果你的网站美化爱好者,这个站历史上的今天小工具能提升用户体验,让访客不用离开你的页面就能快速找到资源。样式和子比主题适配度高,也不用额外配置,粘贴即用,推荐您试试!

评论区
头像