本文最后更新于2022年7月10日,已超过 1 年没有更新,如果文章内容失效,请 反馈 给我们,谢谢!
wordpress随机调用带缩略图的相关文章的方法,话不多说开始吧。
第一步:在wordpress主题文件“functions.php”的最后?>前面加以下代码:
//添加特色缩略图支持 if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //输出缩略图地址 From wpdaxue.com 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; }
第二步:在需要显示的相关文章的地方加入以下代码:
<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' => 'rand', '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' => 'rand', '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 echo mb_strimwidth(get_the_title(), 0, 20, '...'); ?></a></div> </li> <?php $i++; } wp_reset_query(); } if ( $i == 0 ) echo '<div class="r_title">没有相关文章!</div>'; ?> </ul>
第三步:在主题的CSS最后加入以下代码:
.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}
注释:
此教程是在wordpress大学网站做了随机文章的小小修改而得到的最新版。
第一步主要是调用文章第一张图片作为缩略图并显示如果文章中没有图片就调用主题目录下的“images”-“pic”文件夹中的10张图片之中的随机一张作为缩略图,所以要在此文件夹自行建立10张.jpg的图片。
第二步就是调用当前栏目下的随机文章进行显示,这里需要说明一下网上大多数都是直接调用的当前栏目的文章按日期排序这样的话,所有文章下面的的“相关文章”都会是一模一样的,所以第二步这里我做了“rand”更改。还有一处修改的地方就是调用的相关文章如果标题特别长就会导致非常不美观,这里我做了限制10个中文字符,如果要修改在第二步的代码处查找以下代码进行修改:
<?php echo mb_strimwidth(get_the_title(), 0, 20, '...'); ?>
第三步:就是随机的“相关文章”的样式了,可以根据自己的主题进行优化。