小左闲谈

WordPress无插件相关文章代码,附带通用CSS

当前位置:首页 » 学习 » 本页
In 学习  @2012-07-24

  相关文章比随机文章针对性更强,与浏览者正在浏览的文章有很好相关性的文章往往能大幅降低网页的跳出率,这就好比各大联盟的广告,也很讲究相关性,用户才有兴趣点击广告,那广告就变得真的有价值了。我们在文章结尾加上相关文章也是对网页用户体验的一个小小改进,哈哈。
  相关文章功能可以由插件实现,这个网上介绍的一大把,我就不在这里赘述了,但插件毕竟是插件,用起来虽然方便,但心里总感觉不踏实,比如说那个无觅,好端端的非要用个跳转,那不是吃饱了撑的,还要在网页中加入他们的链接,不爽不爽,况且插件的使用无疑会增加服务器负担,所以我还是捣鼓一下代码吧,反正也不复杂,下面就是本站正在使用的代码。
在文章页模版相应位置插入以下代码:

<div class="post-relate">
<h3>你可能喜欢:</h3>   
 <ul>   
     <?php   
     $post_tags = wp_get_post_tags($post->ID);   
     if ($post_tags) {   
         foreach ($post_tags as $tag){   
         // 获取标签列表   
             $tag_list[] .= $tag->term_id;   
         }   
         // 随机获取标签列表中的一个标签   
         $post_tag = $tag_list[ mt_rand(0, count($tag_list) - 1) ];   
         // 该方法使用 query_posts() 函数来调用相关文章,以下是参数列表   
         $args = array(   
             'tag__in' => array($post_tag),   
             'category__not_in' => array(NULL),      // 不包括的分类ID   
             'post__not_in' => array($post->ID),   
             'showposts' => 6,               // 显示相关文章数量   
             'caller_get_posts' => 1   
             );   
         query_posts($args);//按条件查询文章   
         if (have_posts()) : while (have_posts()) : the_post(); update_post_caches($posts); ?>   
         <li>   
             <!--如果有相关文章就输出标题-->   
             <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>   
         </li>   
         <?php endwhile; else : //如果按标签没有找到文章?>   
         <?php $ashu_cats = wp_get_post_categories($post->ID); //根据ID获取该文章所属分类信息   
         if( $ashu_cats ){   
             $args = array(   
                 'category__in' => array( $ashu_cats[0] ),   
                 'post__not_in' => array( $post->ID ),   
                 'showposts' => 6,   
                 'caller_get_posts' => 1   
                 );   
             query_posts($args); //按条件查询文章   
             if( have_posts()):while(have_posts()):the_post();update_post_caches($posts);?>   
             <li>   
                 <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>   
             </li>   
             <?php endwhile; endif; wp_reset_query(); } ?>   
             <?php endif; wp_reset_query(); } ?>   
 </ul> 
    <div class="clear"></div>
    </div>

  这段代码很清晰明了,注释很清楚里面选择相关文章的原理从文章标签(Tag)中随机选择一个,找到有同样标签的文章,如果没有就用从同一个文章分类下文章来显示,这样选出来的文章相关度应该是很不错的,里面有一些参数可以根据你的需要去修改,简单明了。
  那么这段代码的CSS应该怎么去写呢?由于我是一个菜鸟,只能自己一点点试着去研究,我用的CSS是这样的:

/* post-relate */
section .post-relate{padding:10px 5px;color:#888;}
section .post-relate h3{margin:0;line-height:26px;font-family:'Lucida Sans Unicode','Lucida Grande',Verdana;font-size:14pt;font-weight:400;text-shadow:1px 1px 2px #aaa;}
section .post-relate ul{margin:5px 15px;padding:0px 5px;}
section .post-relate li{margin:0px 0px;padding:2px 0px 2px;}

  section就是上一级div容器的class值,每个主题都不一样的,所以你需要把这个改成你的主题里面那个,其实也就是把用到的H3,ul和li标签重新定义一边CSS,达到你要的效果,我这个效果见文章结尾。
  以上相关文章php代码是很早之前从某博客上COPY下来的,如今找不到原始地址了,见谅。

若无特殊声明,表示本文由:小左闲谈.原创
链接地址: http://blog.m1910.com/archives/221.html
版权所有 © 转载时请以链接形式注明作者和原始出处!
标签: , ,   评论: 抢沙发  被围观 3,019 次

发表一下你的看法

您将是第一位评论人!

avatar
wpDiscuz