WordPress 文章上传多张缩略图(特色图像)功能的实现及前台调用

WordPress 的缩略图功能很好用,遗憾的是默认的缩略图只支持单张缩略图,当我们想要在前台显示相册或幻灯的时候,一张缩略图显然是不够用的,其实为 WordPress 添加多张缩略图(特色图像)是非常简单的。在本站的文章中,我介绍过 WordPress 的一个 CMS插件。接下来我将为大家介绍怎么通过 Piklist插件 为 WordPress 添加多张特色图像。

Piklist 使用起来非常简单,我们只需要把以下代码放到相应的位置,即可为文章或页面添加上传多张特色图像的字段。

  piklist('field', array(
    'type' => 'file'
    ,'field' => 'cases_images'
    ,'scope' => 'post_meta'
    ,'options' => array(
      'title' => '设置案例图像'
      ,'button' => '设置案例图像'
    )
  ));

效果如下图。

multi-

添加好了自定义的特色图像字段,下一步在前端把特色图像字段调出来,然后显示循环显示图像就可以了。

通过 Piklist 添加特色图像字段是一个图片附件id组成的数组,我们先把图片 ID 调出来,然后根据 ID 获取特色图像就可以了,我们来看一下代码。

<?php
$cases_images = get_post_meta( $post->ID, 'cases_images' ); //获取特色图像字段

if ( $cases_images ) {
    foreach ( $cases_images as $cases_image ) { ?>
    <?php $attachment = get_post( $cases_image ); ?>

    <div class="pure-u-1-2">
        <div class="cases_image">
            <?php echo wp_get_attachment_image( $cases_image, 'thumbnail' ) ?> //获取特色图像
            <?php echo $attachment->post_content; ?>
        </div>
    </div>

    <?php }
} ?>

多张图片调出来了,我们就可以结合 jQuery 插件实现各种相册或幻灯效果。当然,除了 Piklist 还又很多插件可以实现多张特色图像的效果,比如比较有名的 Advance Custom Field 和 Metabox 插件,甚至又很多付费主题自带的一些类库也可以实现这样的功能,非常方便。如果你又更好的方法,欢迎载留言中分享。

Related Posts

0 Comments

  1. 请教博主!怎么用的,那个相应位置是哪里!piklist插件又是怎么用的。英语不好,看不懂那插件的介绍,翻译工具翻译的翻译的四不像的。

    1. 直接把piklist 插件demo文件夹里面的piklist文件夹复制到主题文件夹里面,就可以了,出来的效果和插件的演示基本一样,然后试着修改一下就明白了。

  2. 你好,我是个wordpress菜鸟,看不懂你说的,但是我想实现这个功能,能说的详细一些吗?比如代码加到后台那个文件里面,非常感谢

Leave a Reply

Your email address will not be published. Required fields are marked *