再谈WordPress获取文章图片——制作文章图片集

有一次接到一个项目，客户要求：如果一篇文章中存在多幅图片，要能把这些图片在当前文章页面制作成一个图片集。

仔细分析这个要求，前端设计无悬念，无非就是如何获取当前文章中所有图片的 src 值的问题。

联想到几乎每个网站都必备的获取文章首张图片的那个函数: function catch_that_image()   （前文已有相关描述：也谈WordPress获取文章中首张图片），在这个函数中，仅仅使用了首张图片，而那里获得的 $matches 是一个二维数组啊。

先将该变量dump出来看一下，插入：

var_dump($matches);

输出如下（图片url前面部分已为保护隐私作者已删除）：

array(2) {
  [0]=>
  array(3) {
    [0]=>
    string(171) "<img src="...2015101200004.jpg"/>
    [1]=>
    string(192) "<img src="...2912928349248.jpg"/>
    [2]=>
    string(201) "<img src="...awief98aw7faw.jpg"/>
  }
  [1]=>
  array(3) {
    [0]=>
    string(64) "...2015101200004.jpg"
    [1]=>
    string(124) "...2912928349248.jpg"
    [2]=>
    string(133) "...awief98aw7faw.jpg"
  }
}

可见，我们需要的正是 $matches[1]，不是它的第一个，而是全部！

由于已经有了function catch_that_image()函数，因此不必再写一个新函数了。将这个函数改一改，增加一个参数调用并针对调用参数判断进行返回即可：

 1 function catch_that_image($picnum=0) {
 2   global $post, $posts;
 3   $first_img = ‘‘;
 4   ob_start();
 5   ob_end_clean();
 6   $output = preg_match_all(‘/<img.+src=[\‘"]([^\‘"]+)[\‘"].*>/i‘, $post->post_content, $matches);
 7
 8   $first_img = ‘‘;
 9   if(empty($matches[1])) $first_img = "/default.jpg";
10   else $first_img = $matches [1][0];
11   if ($picnum>0) return $matches[1];
12   else return $first_img;
13 }

前端调用时采用如：<?php $all_pic=catch_that_image(2);?>即可将包含所有图片的数组赋给数组变量 $all_pic，如果只需要调用首张图片时仍如原来<?php echo catch_that_image();?>。

前端处理逻辑复制如下（在 single.php中合适的位置）：

<?php /*本过程处理本文章图片集*/
    $all_pic=catch_that_image(2);//用参数2调用函数，返回值存入数组
    if (count($all_pic)>1) {    //文章图片数大于1才显示图片集
        echo ‘<div class="single_pic">‘;
        echo ‘<div class="pic_header">本文精彩图集</div>‘;
        echo ‘<div class="focusBox_single" style="margin:0 auto">‘;
        echo ‘<ul class="pic">‘;
        foreach ($all_pic as $pics=>$pic) {
            echo ‘<li><img src="‘.$pic.‘"></li>‘;
        }
        echo ‘</ul>‘;
        echo ‘<a class="prev" href="javascript:void(0)"></a>‘;
        echo ‘<a class="next" href="javascript:void(0)"></a>‘;
        echo ‘<ul class="hd_single">‘;
        for ($picnum=1;$picnum<=count($all_pic);$picnum++){
            echo ‘<li></li>‘;
        }
        echo ‘</ul>‘;
        echo ‘</div></div>‘;
        echo ‘<script type="text/javascript">‘;
        /*鼠标移过，左右按钮显示*/
        echo ‘jQuery(".focusBox_single").hover(function(){ jQuery(this).find(".prev,.next").stop(true,true).fadeTo("show",0.2) },function(){ jQuery(this).find(".prev,.next").fadeOut() });‘;
        /*SuperSlide图片切换*/
        echo ‘jQuery(".focusBox_single").slide({ mainCell:".pic",effect:"fold", autoPlay:false, delayTime:3000, trigger:"click"});‘;
        echo ‘</script>‘;
    }
?>