带图片的相关文章代码
相关文章的调用方法很多，可以直接上插件，也可以从其他博主那里找来代码修改之后贴上。我目前用的也是自己修改的代码，主要内容来自 willin 的相关文章，经过了 zww 大叔修正。不知道其中过程是怎样，对于懒得深究代码运行过程的我来说，改了改输出，看一下能用就行了。最近有几位朋友说希望分享出来，就拿出来共享一下了。
php部分（写在single.php或者其他需要的地方）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<ul class="relatedposts"> <?php $post_num = 5; // 數量設定. $exclude_id = $post->ID; // 單獨使用要開此行 //zww: edit $posttags = get_the_tags(); $i = 0; if ( $posttags ) { $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ','; //zww: edit $args = array( 'post_status' => 'publish', 'tag__in' => explode(',', $tags), // 只選 tags 的文章. //zww: edit 'post__not_in' => explode(',', $exclude_id), // 排除已出現過的文章. 'ignore_sticky_posts' => 1, 'orderby' => 'comment_date', // 依評論日期排序. 'posts_per_page' => $post_num ); query_posts($args); while( have_posts() ) { the_post(); ?> <?php $soContent = $post->post_content; //axiu: 获取文章第一个图片 $soImages = '~<img [^\>]*\ />~'; preg_match_all( $soImages, $soContent, $thePics ); $allPics = count($thePics[0]); if( $allPics > 0 ){ echo '<li><a href="'; echo the_permalink(); echo '" rel="nofollow">'; echo $thePics[0][0]; echo '</a>'.the_title().'</li>'; } else { echo '<li><a href="'; echo the_permalink(); echo '" rel="nofollow"><img src="'; echo bloginfo( 'template_url' ).'/images/default.jpg" alt="'.get_the_title().'" />'; echo '</a>'.the_title().'</li>'; }?> <?php $exclude_id .= ',' . $post->ID; $i ++; } wp_reset_query(); } if ( $i < $post_num ) { // 當 tags 文章數量不足, 再取 category 補足. $cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ','; $args = array( 'category__in' => explode(',', $cats), // 只選 category 的文章. 'post__not_in' => explode(',', $exclude_id), 'ignore_sticky_posts' => 1, 'orderby' => 'comment_date', 'posts_per_page' => $post_num - $i ); query_posts($args); while( have_posts() ) { the_post(); ?> <?php $soContent = $post->post_content; //axiu: 获取文章第一个图片 $soImages = '~<img [^\>]*\ />~'; preg_match_all( $soImages, $soContent, $thePics ); $allPics = count($thePics[0]); if( $allPics > 0 ){ echo '<li><a href="'; echo the_permalink(); echo '" rel="nofollow">'; echo $thePics[0][0]; echo '</a>.'.the_title().'</li>'; } else { echo '<li><a href="'; echo the_permalink(); echo '" rel="nofollow"><img src="'; echo bloginfo( 'template_url' ).'/images/default.jpg" alt="'.get_the_title().'" />'; echo '</a>'.the_title().'</li>'; }?> <?php $i++; } wp_reset_query(); } if ( $i == 0 ) echo '<li>没有相关文章!</li>'; ?> </ul> |
写完就剩下css定义了（参照无觅插件的显示效果制作），奉上我自己目前（截至本文发稿未知）用的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.relatedposts{ width:600px; _width:280px; margin:10px 0 5px 35px; overflow:hidden; padding:0 } .relatedposts a{ line-height:13px; font: 12px/15px arial; text-decoration:none; display:block; overflow:hidden } .relatedposts li{ float:left; width:98px; height:130px; list-style: none; padding:5px 5px 9px 5px; overflow: hidden; background:#fefefe; border-right:1px solid #dfdfdf } .relatedposts li:hover{ background:#f3f3f3 } .relatedposts li:hover a{ color:#333 } .relatedposts img{ height: 96px; border:0; padding:0 } |
PS：关于默认图片（我用的是麻美妹子的图）：新建一个default.jpg，然后放在主题的images文件夹下就可以了。
转载请注明转自：带图片的相关文章代码
不错。学习下。
这个好，赞一下，省的用插件了。做主题用得着，收藏之。
在这里，谢谢分享
有没有办法修改图片的标题为文章的标题，另外文章标题过长会显示不完。
@萌囧妹 自己在代码里添加title就可以了。标题显示不完用截取函数~~你搜搜吧。
@萌囧妹 继续吐槽笨笨的萌囧妹。
问一下怎么 带上当前文章评论数呢？谢谢！
@helsing 在文章的循环里，加上comments_number(0,1,%)就可以了啊
@axiu
谢谢哦
@axiu 怎么先获取特色图片的判断再去找第一张图片呢？谢谢
@helsinglee 写一个方法，先用has_post_thumbnail判断是否有特色图片，true的话获get_the_post_thumbnail，false的话获取第一张图片。然后需要的地方调用这个方法就行了