人氣 3480°c

WP相關文章

WordPress 新增相關文章(Related Posts)不需要安裝外掛(插件),而且美觀適合任何的主題風格。

1. 請前往網站的主題風格,並打開"single.php"文件,放置以下的代碼,顯示相關文章的位置。

<div class="mc_related_posts">
<span class="mc_related_title">相關文章-Related Posts:</span>
<ul class="mc_rpt">
<?php $post_num = 3; $exclude_id = $post->ID;$posttags = get_the_tags(); $i = 0;if ( $posttags ) { $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->name . ',';$args = array('post_status' => 'publish','tag_slug__in' => explode(',', $tags), 'post__not_in' => explode(',', $exclude_id), 'caller_get_posts' => 1, 'orderby' => 'comment_date', 'posts_per_page' => $post_num);query_posts($args); while( have_posts() ) { the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
<span>Posted on
<?php the_time(''); ?>
</span></li>
<?php $exclude_id .= ',' . $post->ID; $i ++;} wp_reset_query();}if ( $i < $post_num ) { $cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';$args = array('category__in' => explode(',', $cats), 'post__not_in' => explode(',', $exclude_id),'caller_get_posts' => 1,'orderby' => 'comment_date','posts_per_page' => $post_num - $i);query_posts($args);while( have_posts() ) { the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
<span>Posted on
<?php the_time(''); ?>
</span></li>
<?php $i ++;} wp_reset_query();}if ( $i == 0 ) echo '<li>還沒有相關文章</li>';?>
</ul>
</div>

2. 請前往網站的主題風格,並打開"style.css"文件,放置以下的美化代碼。
/* Relate posts */
.mc_related_posts {
padding: 0;
margin-bottom: 55px;
}
.mc_related_posts ul {
margin: 0 0 15px 0;
}
.mc_related_posts li {
padding-left: 15px;
margin: 10px 20px 10px 0;
line-height: 24px;
border-left: 2px solid #d1d9db;
width: 202px;
float: left
}
.mc_related_posts li:hover {
border-left: 2px solid #7EC0EE;
}
.mc_related_posts li a {
width: 202px;
height: 22px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
display: block;
text-decoration: none;
}
.mc_related_posts li span {
color: #9D9D9D;
}
.mc_related_title {
color: #d1d9db;
font-size: 20px;
font-weight: bold;
}
.mc_rpt {
zoom: 1;
}

預覽效果Demo▼

標籤: