一月
04

WordPress自动获取+调用页面主循环日志中的图片

在做新主页时由于在首页放了一个slideshow循环展示最新日志中的图片。如何让它自动添加图片成了一个问题。要添加图片首先就要从日志中获取图片,这一点上网搜了一下,发现还真不少,不过介绍的都是如何获取图片作为缩略图之类。不过我们可以将代码稍微改造一下。

不得不说,网上资源很丰富,但是很多人都是抄来抄去。我找的这段代码是从一个我之前以为应该说技术很硬的人那里淘来的,但是我发现此人也只是照抄这段代码,根本就没试验,因为这段代码根本就是错误的。正则表达式的书写就不正确,而且好多无关变量。可能我太相信这人了,我一直以为是我自己的错误,后来仔细看了代码,才发现原来正则表达式错误了。这个先放下,我们看代码。

首先是获取日志循环中的图片,我习惯写函数,然后再调用,当然,也可以直接调用这段代码,看自己喜好。

function get_post_excerpt_img() {
        global $post;
        $the_img = '';
        preg_match_all('/<img.+src=/<img.+src=[^>]+>/i', $post->post_excerpt, $matches);
        $the_img = $matches [0] [0];
        if(empty($the_img)){
        return    $the_img=1;
        }else{
        return '<a href="'.get_permalink().'" title="'.$post->post_title.'">'.$the_img.'</a>';
        }
}

这里我定义了一个get_post_excerpt_img()函数,然后定义全局变量$post,这个其实是WP内置的一个对象了。通过匹配正则表达式来匹配所需图片。这里注意,我用$post->post_excerpt是匹配摘要,因为我摘要里一般都有图片,文章内容却不一定会有。你不习惯写摘要,可以用$post->post_content。匹配结果是存入数组的,所以我们只需取第一张图片即可。然后是条件判断,如果没有获取到图片,变量$the_img=1。这里$the_img只需随便赋个值即可,是为了方便后面调用时判断,当然,不赋值也是可以的。如果成功取得图片,返回结果,包括这篇日志的url,title,你可以根据自己情况自定义格式,比如只输出图片。

既然已经取得了图片,然后就是输出了,在模板的循环部分,找到这段代码

<?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

在它上方添加:

<?php $num=1; ?>

在它下方添加:

   1: <?php $img[$num++]=get_post_excerpt_img(); ?>

即我们是将循环获取的图片存入一组数组$img中。

然后就是调用了,只需用

<?php echo $img[1]; ?>

即可调用第一张图片。同理 <?php echo $img[2]; ?>即调用第二张图片。

当然,以上情况限于你的日志中一定有图片,一定可以获取到图片。如果你某一篇日志中没有配图,就会无法输出。这时,我们就可以用条件判断,因为在函数中我们定义了没有获取到图片时,就传递给返回变量一个值$the_img=1;所以我们可以用

<?php $num=1;if ($img[$num] !== 1) {echo $img[$num];$num++;}else{$num++;if()...}?>

将这个条件判断循环使用就OK了。如果你真的图片是隔三差五的日志中才有一篇,还是用while条件判断吧。这个意思就是如果函数返回值为不为1,即取得了图片,就输出,然后将$num变量加1;如果函数返回值是1,则先加1,再次判断。依次。。。

注意,因为调用函数是写在页面循环中的,所以数组中存入的图片数量跟你设置的页面显示文章数量有关。如果你设置首页显示10篇文章,就会从10篇文章中获取图片,并存入一个长度为10的数组中。设置显示五篇就是得到长度为5的数组。

OK了,有问题可留言讨论。

本文标签: , , ,

分享

本文短网址: http://qiqi.boy.im/2l

这篇文章已经有 26 条评论

Comments (26) Trackbacks (0)
You can leave a response or Trackback this entry .
  1. iop -#21

    op

  1. No trackbacks yet.

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: