WordPress无插件实现带缩略图相关内容调用

老蒋在"WordPress无插件实现相关内容调用功能"文章中分享到相关文章调用，但是如果有需要调用图片的得需要找到其他方法。这里在WP大学看到有调用相关文章的时候可以带有图片，这个就比较适合有需要图片相关文章的调用功能。如果我们有需要的可以参考，同样是无插件实现的。

第一、脚本部分

A - 定义内容

//添加特色缩略图支持
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');
//输出缩略图地址
function post_thumbnail_src(){
global $post;
if( $values = get_post_custom_values("thumb") ) { //输出自定义域图片地址
$values = get_post_custom_values("thumb");
$post_thumbnail_src = $values [0];
} elseif( has_post_thumbnail() ){ //如果有特色缩略图，则输出缩略图地址
$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post-> ID),'full');
$post_thumbnail_src = $thumbnail_src [0];
} else {
$post_thumbnail_src = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/img.+src=[\'"]([^\'"]+)[\'"].*> /i', $post-> post_content, $matches);
$post_thumbnail_src = $matches [1] [0]; //获取该图片 src
if(empty($post_thumbnail_src)){ //如果日志中没有图片，则显示随机图片
$random = mt_rand(1, 10);
echo get_bloginfo('template_url');
echo '/images/pic/'.$random.'.jpg';
//如果日志中没有图片，则显示默认图片
//echo '/images/default_thumb.jpg';
}
} ;
echo $post_thumbnail_src;
}

将脚本添加到当前主题Functions.php文件中。默认是从缩略图、文章第一张图片调用的图片。如果没有图片我们也可以自定义到/images/default_thumb.jpg设置默认图片。

B - 调出部分

h3> 您可能还喜欢这些内容：/h3>
ul class="related_img">
?php
$post_num = 4;
$exclude_id = $post-> ID;
$posttags = get_the_tags(); $i = 0;
if ( $posttags ) {
$tags = ''; foreach ( $posttags as $tag ) $tags .= $tag-> term_id . ',';
$args = array(
'post_status' => 'publish',
'tag__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 class="related_box" >
div class="r_pic">
a href="?php the_permalink(); ?> " title="?php the_title(); ?> " target="_blank">
img src="?php echo post_thumbnail_src(); ?> " alt="?php the_title(); ?> " class="thumbnail" />
/a>
/div>
div class="r_title"> a href="?php the_permalink(); ?> " title="?php the_title(); ?> " target="_blank" rel="bookmark"> ?php the_title(); ?> /a> /div>
/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 class="related_box" >
div class="r_pic">
a href="?php the_permalink(); ?> " title="?php the_title(); ?> " target="_blank">
img src="?php echo post_thumbnail_src(); ?> " alt="?php the_title(); ?> " class="thumbnail" />
/a>
/div>
div class="r_title"> a href="?php the_permalink(); ?> " title="?php the_title(); ?> " target="_blank" rel="bookmark"> ?php the_title(); ?> /a> /div>
/li>
?php $i++;
} wp_reset_query();
}
if ( $i == 0 ) echo 'div class="r_title"> 没有相关文章!/div> ';
?>
/ul>

将代码添加到模板需要调出的位置，post_num设置调用数量。

第二、设置样式

.related_posts{ margin-top:5px; }
.related_img{ width:600px; height:210px; }
.related_box{ float:left; overflow:hidden; margin-top:5px; width:148px; border-right:1px #eee solid}
.related_box:hover{ background:#f9f9f9}
.related_box .r_title{ width:auto; height:72px; font-weight:400; font-size:14px; margin:0 10px; overflow:hidden; }
.related_box .r_pic{ margin:6px}
.related_box .r_pic img{ width:130px; height:100px; border:1px solid #e1e1e1; background:#fff; padding:2px}

根据实际调出情况设置样式。

文章参考自WP大学：https://www.wpdaxue.com/wordpress-related-posts.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！