• 原森林之家(foresthouse.cn)改为走私范(zousifan.com),只是改个名内容不变。
  • 网站图片自建立开始到19年全部丢失,血的教训时刻备份,多点备份!

wordpress随机调用带缩略图的相关文章

wordpress 9年前 (2016-05-25) 2206次浏览 4个评论 扫描二维码
本文最后更新于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, '...'); ?>


第三步:就是随机的“相关文章”的样式了,可以根据自己的主题进行优化。


版权所有丨如未注明 , 均为原创丨本网站采用 BY-NC-SA 协议进行授权 , 转载请注明 出处!
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
    仅用来给您发送回复提醒。不会公开!
  • 网址
(4)个小伙伴在吐槽
  1. 好文章,内容龙飞凤舞.禁止此消息:[email protected]
    边坡防护网2016-06-11 00:08 回复来自天朝的朋友 火狐浏览器5.0 Windows 7
  2. 不错的文章,内容气吞山河.禁止此消息:[email protected]
    边坡防护网2016-06-10 01:19 回复来自天朝的朋友 火狐浏览器5.0 Windows 7
  3. 好文章,内容雷霆万钧.禁止此消息:[email protected]
    石笼网2016-06-08 03:46 回复来自天朝的朋友 火狐浏览器5.0 Windows 7
  4. 常来看看,受益匪浅。
    三五美女网2016-05-26 10:21 回复来自天朝的朋友 搜狗浏览器 Windows 7