非插件实现WordPress侧边栏热门日志功能

  • A+
所属分类:wordpress

很多博客网站都会在首页加上排行榜,比如点击最多的、评论最多的等等。这篇文章介绍WordPress不用插件实现侧边栏热门日志的功能,这里说的热门日志是按照评论数量多少来调用的。页面上加入一些相关日志、热门日志等功能可以让访客更方便的找到自己感兴趣的内容,同时增加用户在网站上的停留时间,给您的网站带来更多的流量!

非插件实现WordPress侧边栏热门日志功能

相信对WordPress比较熟悉的人都知道太多的插件会影响到网站的性能,所以尽量保持网站简单很有必要,尽量只用一些必需的插件,比如屏蔽垃圾评论插件等。

使用下面的教程不需要安装任何插件,不过,在这个教程里提到了文章缩略图,所以,首页要保证你的主题支持缩略图功能,也就是说用WordPress 3.0+版本,否则可能会出错。

添加代码的方法如下:

1. 首页定义$popular_posts,用WP_Query函数定义调用评论数最多的10篇日志。

  1. <ul id="popular-posts">
  2. <?php
  3. $popular_posts = new WP_Query('orderby=comment_count&posts_per_page=10'); ?>

2. 然后创建最多评论数日志的循环列表,检查该日志是否存在缩略图,如果有的话则显示缩略图,否则不显示缩略图。

  1. <?php while ($popular_posts->have_posts()) : $popular_posts->the_post(); ?>
  2. <li>
  3. <?php
  4. if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  5. ?>
  6. <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumb', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a>
  7. <a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  8. <?php } else {?> <a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  9.  <?php } ?>

3. 基本上搞定了,最后如果需要显示日子对应的分类目录的话就加上下面的代码。

  1. <p>in <span class="popular-categ"><?php $category = get_the_category(); $categLink = get_category_link($category[0]->cat_ID); ?> <a href="<?php echo $categLink; ?>" title="<?php $category[0]->cat_name; ?>"><?php echo $category[0]->cat_name; ?></a></span></p>
  2. </li>
  3. <?php endwhile; ?>
  4. </ul>

4. 下面是完整的代码,复制到主题目录的sidebar.php里相应位置,就可以实现在侧边栏显示热门日志的列表了。

  1. <ul id="popular-posts">
  2. <?php
  3. $popular_posts = new WP_Query('orderby=comment_count&posts_per_page=10'); ?>
  4. <?php while ($popular_posts->have_posts()) : $popular_posts->the_post(); ?>
  5. <li>
  6. <?php
  7. if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  8. ?>
  9. <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumb', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a>
  10. <a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  11. <?php } else {?> <a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  12. <?php } ?>
  13. <p>in <span class="popular-categ"><?php $category = get_the_category(); $categLink = get_category_link($category[0]->cat_ID); ?> <a href="<?php echo $categLink; ?>" title="<?php $category[0]->cat_name; ?>"><?php echo $category[0]->cat_name; ?></a></span></p>
  14. </li>
  15. <?php endwhile; ?>
  16. </ul>

CSS代码:

把下面的样式代码复制到主题目录的style.css,就OK了,刷新页面看下效果吧。样式可根据自己需要来调整。

  1. #popular-posts li { overflow:auto; margin:20px 0px;}
  2. #popular-posts li img { float:left; margin-right:10px; border:3px solid #798295;}
  3. .popular-post-title { text-decoration:none; font-weight:bold; color:#798295;}
  4. .popular-post-title:hover{color:#6eaebe;}
  5. #popular-posts li p { margin-top:10px; }
  6. .popular-categ{padding:5px;background:#6eaebe;}
  7. .popular-categ a{ font-weight:normal;color:#464b56;}
  8. .popular-categ a:hover{color:#545b68;}

文章来源于:站长之家

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: