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

懿古今Unite主题缩略图调用

wordpress 8年前 (2016-01-02) 1527次浏览 0个评论 扫描二维码
本文最后更新于2022年7月9日,已超过 1 年没有更新,如果文章内容失效,请 反馈 给我们,谢谢!


Unite主题是一款WordPress免费响应式主题,因杂志面板和小巧的程序以及美化的界面让人非常喜爱,唯一的美中不足之处就是她的缩略图调用的是文章中的原图,可能人家是以杂志版面为主本来页面就不大大图片也装不下可能就无所谓了,我是拿来做图片站的,每一张图片都是大几百K大小这样未免就有些卡顿了。

那么问题来了,怎么让wordpress主题中的缩略图调用的是裁剪过后的小尺寸图片呢?下面说说详细步骤:

第一步:下载timthumb.php文件

http://pan.baidu.com/s/1qY78G8G (密码:kyhx)

第二步:把timthumb.php文件上传到当前主题文件夹下,并在该主题文件夹中创建一个命名为cache的文件夹,设置cache文件夹的权限为755或777

第三步:关闭wordpress缩略图功能(为什么要关闭因为不关每一传一张图片都生成那么多张,这里不需要)

第四步:在主题目录中的“functions.php”文件添加以下代码:

//输出缩略图地址
function post_thumbnail_src(){
	global $post;
	if( $values = get_post_custom_values("thumbnail") ) { //输出自定义域图片地址
		$values = get_post_custom_values("thumbnail");
		$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)){
			$post_thumbnail_src = get_bloginfo('template_url')."/images/no-image.jpg"; //如果日志中没有图片,则显示默认图片
		}
	};
	echo $post_thumbnail_src;
}
代码运行流程:先获取自定义域的图片,如果没有设置自定义域图片则获取特色图像,如果没有设置特色图像获取内容首张图片,如果内容也没有图片,则显示默认图像no-image.jpg。

第五步:在需要显示缩略图的地方添加调用代码:

<img src="<?php bloginfo('template_url');?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=150&w=200&zc=1" alt="<?php the_title(); ?>" class="thumbnail"/>
上面代码中的“h”表示缩略图的高度,“w”表示缩略图的宽度,zc有两个属性值,1表示裁剪,0表示按设置的高宽压缩,不裁剪。

Unite主题的使用示例如下把第五步的代码放在下面这个位置:

<figure class="thumbnail"> <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_url');?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=200&w=300&zc=1" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"class="thumbnail" /></a> 
 </figure>

主要有两个位置:一个主页、一个列表页其它页面自己再加代码都是一个样的。

示例:这里是以Unite主题制作的一个大图片展示型网站

好了至此懿古今的一款免费响应式的Unite精美主题缩略图就修改完成了~举一反三不止这一类主题决大多数都是可以用的。

提示:演示站点用的是懿古今miniUnite主题同样适用于Unite,使用这套博客模版的朋友还请去懿古今官网多多关注毕竟人家才是大神,我这小功能也只能弥补一下这款主题的小小的不足,我用它所以我推荐它!


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

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

  • 昵称 (必填)
  • 邮箱 (必填)
    仅用来给您发送回复提醒。不会公开!
  • 网址