WordPress 添加相册功能【ACF PRO自定义字段插件系列教程】

如何使用Advanced Custom Fields WordPress(自定义字段插件)快添加相册管理功能呢?今天给大家实例讲解一下,在企业网站开发中添加相册展示的功能。当然可以举一反三,例如:产品图片详情,会员相册等

自己开发好处是什么?

易于管理,扩展性强。不依赖复杂的插件,acf一个插件全部搞定。

如果你是新手建议从安装acf学起:WordPress网站添加广告位功能【Advanced Custom Fields自定义字段插件系列教程】

准备工作

建议使用Advanced Custom Fields PRO版本,WordPress后台上传插件安装启用即可。

1.添加自定义字段

(点击图片放大对照设置)

2.调用字段

以下代码添加到主题根目录下的:single.php,你想展示的任何位置(通常在content或者container标签内插入)

<?php 
$images = get_field('photos');
if( $images ): ?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
                <a href="<?php echo esc_url($image['url']); ?>">
                     <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                </a>
                <p><?php echo esc_html($image['caption']); ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

3.图片调用说明

缩略图

<?php echo esc_url($image['sizes']['thumbnail']); ?>

中等大小

<?php echo esc_url($image['sizes']['medium']); ?>

大图片

<?php echo esc_url($image['sizes']['large']); ?>

原尺寸图片

<?php echo esc_url($image['sizes']['full']); ?>

4.相册标签说明

图片说明:

<?php echo esc_html($image['caption']); ?>

图片描述:

<?php echo esc_html($image['description']); ?>

图片alt信息:

注解:alt标签实际上是网站上图片的文字提示。在alt标签中加入关键词是很好的提升关键词排名的方法,但需要注意的是并不能提高关键词密度。

<?php echo esc_html($image['alt']); ?>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

上一篇

WordPress 如何删除重复的文章插件-Delete Duplicate Posts

下一篇
Discy

Discy – 问答社交类似知乎的 WordPress 主题

相关文章