集思博客

以前博客刚刚开始，整理博客的插件以及相关功能的代码的时候，对没有经过美化作一列显示的相关日志极为不顺眼。

难得这几天有心情，总算是把它收拾一下了。

我一直是用代码实现相关日志这个功能的，没有装累赘的插件。

相关日志的代码：

<div class="post related_post">

<div class="meta"><h3>相关日志 &raquo;</h3></div>

<ul class="single_related">

<?php

$tags = wp_get_post_tags($post->ID);

if ($tags) {

$first_tag = $tags[0]->term_id;

$args=array(

'tag__in' => array($first_tag),

'post__not_in' => array($post->ID),

'showposts'=>10,

'caller_get_posts'=>1

);

$my_query = new WP_Query($args);

if( $my_query->have_posts() ) {

while ($my_query->have_posts()) : $my_query->the_post(); ?>

<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">

<?php the_title();?>

<?php comments_number(' ','(1)','(%)'); ?>

</a></li>

<?php

endwhile;

}

}

wp_reset_query();

?>

</ul>

</div>

从代码可以看出来相关日志是用<ul><li></li><ul>布局的，所以只要让<li></li>标签左浮动，在加上继承源主题的样式即可实现相关日志的两列显示。

具体的样式：

//相关日志开始//

.related_post h3{

float:left;

margin:0;

padding:0;

padding-right:10px;

text-align:right;

width:75px;

font-size:14px;

}

.related_post ul{

margin-left:90px;

}

.related_post ul li{

float:left;

display:block;

width:300px;

line-height:20px;

}

//相关日志结束//

样式仅供参考，这些样式代码仅适合在Prower主题下使用，并不通用。

原创文章转载请注明出处，转载自：[集思博客]：http://www.giisi.com

本文链接:[WP相关日志两列显示]：http://www.giisi.com/design/wpxiangguanrizhiliangliexianshi.html

集思博客订阅地址:[http://rss.giisi.com]