WordPress縮略圖上的七牛裁剪代碼去重

編輯：狂族晨曦來源：WordPress技巧日期：2016-03-17 閱讀： 3,276 次 1 條評論 » 百度已收錄

最后更新時間：2016-04-06

近期先森對WordPress和七牛研究的比較勤，折騰了很多，其中很多都是和七牛有關的。七牛的裁剪功能確實好用，但是先森為縮略圖（文章下面相關文章的圖片）和文章中的圖片都加上七牛裁剪代碼后，就發生了沖突。關于為縮略圖和文章圖片添加七牛裁剪代碼，大家可以先看看這些文章：

1.七牛代碼如何使用：WordPress調整Tag標簽頁文章列表縮略圖優化小記
2.已發布的文章添加代碼：將WordPress歷史文章中所有圖片加上七牛裁剪水印代碼

其實，發生沖突是必然的事情。首先，縮略圖調用的圖片，是從文章中調用圖片鏈接。圖片鏈接獲取的優先順序是：自定義字段為 thumb 的圖片>特色縮略圖>文章第一張圖片>隨機圖片/默認圖片。

也就是只有文章中沒有圖片時，才會調用你設置的隨機圖片。而文章中的圖片，先森已經全部加上了七牛裁剪代碼。調用這些圖片鏈接的時候，鏈接里面實際上已經有一段七牛裁剪代碼了。

這將導致，縮略圖調用的時候在后面增加的裁剪代碼會重復加在后面，而七牛的規則是只生效前面的一段，也就是縮略圖的裁剪失效了，你調用縮略的時候還是更大的圖片，沒有達到裁剪縮小圖片體積的目的。

加上了兩段七牛裁剪代碼 -1

加上了兩段七牛裁剪代碼

前期準備

這種情況，整理了一下思路，總結了下解決方案。增加判斷，如果圖片鏈接中含有裁剪代碼，則替換成新的裁剪代碼；如果不包含，則直接在鏈接后面添加裁剪代碼。

要用兩種函數，查找和替換。先森在w3school里找到了這兩種適合的函數，要了解的可以看看：

查找函數：PHP strpos() 函數
替換函數：PHP str_replace() 函數

除了準備這兩個函數，如果是使用WordPress大學中的縮略圖調用代碼的同學，還要修改下代碼。

縮略圖調用：WORDPRESS添加相關文章功能（標題/縮略圖樣式）

WordPress大學提供的代碼，是加在functions.php中的，調用的時候可以直接輸出圖片鏈接：

//添加特色縮略圖支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //輸出縮略圖地址 From wpdaxue.comfunction post_thumbnail_src(){
    global $post;
	if( $values = get_post_custom_values("thumb") ) {	//輸出自定義域圖片地址
		$values = get_post_custom_values("thumb");
		$post_thumbnail_src = $values [0];
	} elseif( has_post_thumbnail() ){    //如果有特色縮略圖，則輸出縮略圖地址
        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
		$post_thumbnail_src = $thumbnail_src [0];
    } else {
		$post_thumbnail_src = '';
		ob_start();
		ob_end_clean();
		$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
		$post_thumbnail_src = $matches [1] [0];   //獲取該圖片 src
		if(empty($post_thumbnail_src)){	//如果日志中沒有圖片，則顯示隨機圖片
			$random = mt_rand(1, 10);
			echo get_bloginfo('template_url');
			echo '/images/pic/'.$random.'.jpg';
			//如果日志中沒有圖片，則顯示默認圖片
			//echo '/images/default_thumb.jpg';
		}
	};
	echo $post_thumbnail_src;}

因為要對圖片鏈接增加查找，所以上面代碼中，最后幾行的輸出可不能要，這樣是判斷不了的。需要將上面的最后五行的"echo"換成"return"，即：

			return get_bloginfo('template_url').'/images/pic/'.$random.'.jpg';
			//如果日志中沒有圖片，則顯示默認圖片
			//echo '/images/default_thumb.jpg';
		}
	};
	return $post_thumbnail_src;}

解決方法

準備齊全之后，就可以解決問題了。

之前，先森是這樣調用相關文章的圖片的：

 <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />

那么，現在為了解決重復代碼的問題，需要將上面的代碼換成下面的內容：

<?php 
    $imgsrc = post_thumbnail_src();
    $qiniu_dengxiang='imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMi5wbmc=/dissolve/80/gravity/SouthEast/dx/5/dy/4';
    $qiniu_xiangguan='imageView2/1/w/130/h/100/q/100';
	if(strpos($imgsrc,$qiniu_dengxiang)){?>
            <img src="<?php echo str_replace($qiniu_dengxiang,$qiniu_xiangguan,$imgsrc);?>" alt="<?php the_title(); ?>" class="thumbnail" />
           <?php }
        else{?>
            <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />
        <?php }?>

修改保存之后，檢查一番，發現問題確實得到了解決：

問題解決 -2