给NANA博客主题添加留言板功能

2018-12-22 阅读: 68 次 评论 0 条 百度已收录
知其雄,守其雌;知其白,守其黑;知其荣,守其辱。——老子
本文共510个字,预计阅读时间需要2分钟。

这几天,博客启用了懿古今博主的NANA主题,但是里面没有留言板功能,就想着把之前主题的留言板直接复制过来用,结果是用不成。这不,这几天就把留言板针对NANA主题做了修改适配。
下面我就介绍下方法:
第一步、复制下列代码,并保存为guestbook.php。

  1. <?php 
  2. /* Template Name: GuestBook */
  3. get_header(); 
  4. ?>
  5. <div id="content" class="site-content"> 
  6.  <div class="clear"></div>
  7.  <div id="primary" class="content-area">
  8.  <main id="main" class="site-main" role="main">
  9.  <?php while ( have_posts() ) : the_post(); ?>
  10.  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  11.  <header class="entry-header">
  12.  <h1 class="entry-title"><?php the_title(); ?></h1>
  13.  <div class="single_info">
  14.  <span class="date"><?php the_time( 'Y-m-d H:i' ) ?></span>
  15.  <span class="views"><?php if( function_exists( 'the_views' ) ) { the_views(); print '人阅读 '; } ?></span> 
  16.  <span class="edit"><?php edit_post_link('编辑', ' ', ' '); ?></span>
  17.  </div> 
  18.  </header><!-- .entry-header --> 
  19.  <div class="entry-content">
  20.  <?php the_content(); ?>
  21.  <?php wp_reset_query();endwhile; ?></br>
  22.  <div id="dzq">
  23.  <?php
  24.  $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_post_ID ='118' AND comment_author_email != '330601425@qq.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 20";
  25.  $wall = $wpdb->get_results($query);
  26.  $maxNum = $wall[0]->cnt;
  27.  foreach ($wall as $comment){
  28.  $width = round(40/($maxNum / $comment->cnt),2);
  29.  if( $comment->comment_author_url )
  30.  $url = $comment->comment_author_url;
  31.  else $url="#";
  32.  $avatar = get_avatar( $comment->comment_author_email, $size = '36');
  33.  $tmp = "<li><a target=\"_blank\" href=\"".$comment->comment_author_url."\" title=\"".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <span>+".$comment->cnt."</span></br></a></li>";
  34.  $output .= $tmp;
  35.  }
  36.  $output = "<ul class=\"readers-list\">".$output."</ul>";
  37.  echo $output ;
  38.  ?>
  39.  </div></br>
  40.  <div id="comments">
  41.  <?php comments_template('/guestcomments.php');?>
  42.  </div> 
  43.  </div><!-- .entry-content -->
  44.  </article><!-- #post -->
  45.  </main><!-- .site-main -->
  46.  </div><!-- .content-area -->
  47.  <?php get_sidebar();?>
  48.  <div class="clear"></div>
  49. </div><!-- .site-content -->
  50. <?php get_footer();?>

其中,comment_post_ID ='118'中的“118”为你留言板页面的ID,comment_author_email != '330601425@qq.com',邮箱地址为自己的邮箱,作用是排除自己的留言的显示统计。
第二步、复制Nana\inc\functions\comment-template.php的全部代码,并另存为guestcomments.php。
第三步、将下列css代码复制到主题下的style.css,样式可以自行修改美化。

  1. #dzq{padding:10px 20px 15px 25px;margin-top: 0px;}
  2. .readers-list{line-height:20px;text-align:left;overflow:hidden;_zoom:1}
  3. .readers-list li{width:180px;float:left;margin-right:5px;list-style:none}
  4. .readers-list a{background:#fb2929;}
  5. .readers-list a{position:relative;display:block;height:50px;margin:4px;padding:4px 4px 4px 44px;overflow:hidden;border:#fb2929 1px solid;border-radius:5px;box-shadow:#eee 0 0 2px}
  6. .readers-list img,.readers-list em,.readers-list span{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}
  7. .readers-list img{width:38px;height:38px;float:left;margin:2px 8px 0px -35px;border-radius:19px;border:#fff 2px solid;}
  8. .readers-list em{font-style:normal;margin-right:10px;line-height:40px;color:#fff}.readers-list span{width:40px;text-align:right;position:absolute;right:6px;top:0px;color:#fff}
  9. .readers-list a:hover{border-color:#fb2929;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none}
  10. .readers-list a:hover img{opacity:.7;margin-left:10px;border:#fb2929 2px solid;}
  11. .readers-list a:hover em{color:#FF5E52;margin-right:0}
  12. .readers-list a:hover span{display:block;color:#Fff;right:130px;top:0;text-align:center;border-right:#fb2929 1px solid;height:50px;line-height:47px;background:#fb2929}

最后,在后台新建一页面,名称改为留言板,模版选择GuestBook,保存即可。


效果如下图

上面的统计排行的留言功能,理论上也适用其他的Wordpress主题,至于如何修改,还需自行琢磨,在此,我不做介绍。

本文地址:https://www.chyiyang.cn/33.html
本文标题:给NANA博客主题添加留言板功能
版权声明:本文为原创文章,版权归 伊阳 所有,欢迎分享本文,转载请保留出处!
所属分类:WP相关

发表评论


表情