当前位置:首页 > wordpress > 正文内容

WordPress缩略图式相关文章教程[图文样式显示]

WordPress中文章页面“相关文章”或其它页面以缩略图形式显示在其位置中

 

首先自定义字段为 thumb 的图片>>>特色缩略图>>>文章第一张图片>>>随机图片“或”默认图片;
随机图片:精选10张图片,放在主题文件夹下的 images/pic/ 目录,图片为jpg格式,且使用数字 1-10命名,比如 2.jpg;如果不想用随机图片,请将 倒数第5行 前面的“//”去掉,然后给 倒数第7、9行 前面添加“//”注销,且在现主题的 /images/ 目录下添加一张名字为 default_thumb.jpg 的一张默认图片,如此会显示默认图片。在主题的 functions.php 的最后一个 " ?> "符号之前加入下面的代码:

//添加特色缩略图支持
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;
}



下面的代码添加到 single.php 或是要显示“相关文章”位置的php文件中,其第四行$post_num = 4; 表示调用4篇文章,请根据自己需要修改。

<h3>相关文章</h3>
<ul>
<?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  >
		<div>
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
		<img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" />
		</a>
		</div>
		<div><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  >
		<div>
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
		<img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" />
		</a>
		</div>
		<div><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>没有相关文章!</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}


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/wordpress/35.html

标签: wordpress

相关文章

wordpress 搬家固定链接404错误

wordpress 搬家固定链接404错误

wordpress 搬家后更改固定链接404错误的解决办法前些天把wordpress网站搬家后改了固定链接就出现访问不了,出现了404页面,综合网上的一些办法,整理出来,方法是要在apache2开启Rewrite模块。安装好apache2后...

WordPress 移除后台通知健康状态

WordPress 移除后台通知健康状态

WordPress 移除后台通知健康状态,在主题根目录下functions.php文件在底部加入:移除站点健康状态小工具,禁用站点健康邮件通知,移除WordPress移除后台左上角 WordPress Logo,屏蔽后台页脚版本信息,屏蔽后...

WordPress主题开发和调试debug模式应用说明

WordPress主题开发和调试debug模式应用说明

WordPress调式模式介绍WP_DEBUG是一个布尔常量,它在整个WordPress中触发“调试”模式。其位于WordPress安装根目录wp-config.php中。 一般来说,我们在开发WordPress 主题的时候,都会开启Wor...

wordpress移除地址栏url中的”Category”字符标签

wordpress移除地址栏url中的”Category”字符标签

今天点击网站上菜单中的分类菜单,发现浏览器地址栏中不同分类目录中总有个“ category”字样存在地址栏url中,上网查看有关资料,通过对比我发现最直接的办法是将 WP No category Base 插件的主体代码插入到 functi...

wordpress默认文富编辑器中增加字体大小颜色等编辑按钮

wordpress默认文富编辑器中增加字体大小颜色等编辑按钮

wordpress精典默认编辑器有些没有文章字体颜色 及背景颜色和特殊字符等一些按键选项,可添加如下代码到主题”functions.php"文件中即可:/* wordpress编辑器增加字体选择以及字体大小设置 ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。