获取文章里面的相册简码中的图片地址,然后优化相册显示效果

文 / @WordPress主题

优化WordPress相册显示效果的方法

您好,我是一名涉猎于web开发、用户体验设计等领域的小本本。在此向大家推荐一个WordPress相册的优化方法。

获取相册中图片的缩略图

以往相册内的图片会默认显示缩略图,必须点击才能查看大图。但在文章内,我们可以通过获取相册中的图片地址,再循环输出显示这些图片,从而增强显示效果。具体操作方法为利用WordPress的get_post_gallery_images函数, 获取文章中的相册图片的地址列表,再将其循环输出即可。代码如下:

$gallery=get_post_gallery_images($post);//获取文章里面的相册
foreach($gallery as $link){
	echo'<a href="'.$link.'">';
	echo	'<img src="'.$link.'" alt=""/>';
	echo'</a>';
}

获取相册内的图片后,你可以通过CSS或者JavaScript来优化WordPress相册的显示效果。

获取相册中图片的原始图

虽然上面的方法已经展示了相册内的缩略图,但要实现Lightbox效果查看完整图片,还需要获取相册内的原始图片。遗憾的是get_post_gallery_images没有为我们提供图片大小的参数,此时我们就需要使用另一个函数:get_post_gallery来获取图片的原始图。

$gallery=get_post_gallery($post,false);//获取相册中图片的id
$ids=explode(",",$gallery['ids']);//转化为数组

foreach($ids as $id){
	$link=wp_get_attachment_url($id);//根据图片id获取原始图片
	echo'<a href="'.$link.'">';
	echo	'<img src="'.$link.'" alt=""/>';
	echo'</a>';
}

上述代码中$gallery获取文章相册中的id,使用explode函数将其转化为数组,再依次循环输出。

通过这两种方法,我们可以优化文章内的WordPress相册显示效果,增强用户体验。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。