WEBサイト作成時に発生するエラーやトラブル対応の備忘録を中心に、いろいろと書いております。

『WORDPRESSをIPHONEやスマートフォンに対応させる3つの方法』

を参考にしました。

「WPtouch」や「WPtap」などのプラグインを入れればすぐですが、デザインはオリジナルでしたいので、この中の「3. スマートフォン専用のテーマを自作する」を選択しました。

（ちなみにプラグインの比較は、『WordPressのスマートフォン対応プラグイン４種を比較』の記事がとっても素敵でした）

『ようやくブログ用にスマートフォン用テンプレートを作成しました。』の記事を参考にいたしました。
上記の記事では、テンプレートの切り替えに「iPhone theme switcher」をご利用のようでしたが、私は「Mobile Theme Switcher」を使用しました。（※WPtap Mobile Detectorというのもあるそうです）

さて、ここまではテンプレートさえ作れば、スムーズにいくことだと思います。

一つだけ気になっていることがありました。
画像サイズです。

CSSに

img {
     max-width: 100%;
     height: auto;
     }

と書けば一発なのですが、引き出している画像は同じだよね？重くない？

と思い、PHPのリサイズするファイルを探しました。
「Smart Image Resizer」を使用することにします。（参考記事『URLにちょこっと細工することで簡単に画像のリサイズができるPHPスクリプト『Smart Image Resizer』』）

記事から画像のスクリプトを取り出し、サイズを取得し、一定のサイズ以上の画像をSmart Image Resizerを通して表示させることにします。

記事から画像のスクリプトを取り出して、置き換えるのは『WordPressでスマートフォン表示時の投稿記事内画像をテキストリンクに置き換える方法』を参考にしました。

スマフォ用テーマのfunctions.phpに以下を追加しました。

<?php
function image_to_link($html) {
	preg_match_all("/<img(.+?)>/", $html, $match);
	//match[0]に連想配列で全てのimgタグが格納されているので、
	//ループしながらURLを抽出する
	for($i=0;$i<count($match[0]);$i++){
	    //imgタグの中からURL部分のみ抽出
	    preg_match("/http:\/\/[a-z0-9\/\-_\.]+/i",$match[0][$i],$url_match);
	    
	    if(!empty($match[0])){
	    //widthとheightを取り出し
	    $widthheight = widthheight($match[0][$i]);
	    //$url_match[0]を相対パスにする
	    $imgurl = str_replace("http://www.terastella.com","",$url_match);

	    //widthが320以上の場合だけリサイズする
	    if($widthheight[0] > 320){
	    	$height = $widthheight[1]*$widthheight[0]/320;
	    	$url_link = "<img src=\"/image.php?".$imgurl[0]."&width=320&height=".$height."&image=".$imgurl[0]."\" />";
	    }else{
	    	$url_link = "<img src=\"".$url_match[0]."\" width=\"".$widthheight[0]."\" />";
	    }
	    //置き換える
	    $html= str_replace($match[0][$i],$url_link,$html);
		}
	}
	return $html;
}



/*
	imageの高さと幅を返す
----------------------------------------------------------------- */

function widthheight($url) {
    $output = preg_match_all('/(width=\"([0-9]*)\").*(height=\"([0-9]*)\") /', $url, $matches);

	if($output){
    $matche = $matches[0];

    $width = $matches[2] [0];
    $height = $matches[4] [0];

    $widthheight[0]=$width;
    $widthheight[1]=$height;

	}else{
		$widthheight = 0;
	}

	return $widthheight;
}

add_filter('the_content', 'image_to_link');
?>

「http://www.terastella.com」は、ご自分のサイトアドレスを入れてください。とにかく、image.phpに入れるパスが、相対パスでなければならないので、そうなるように書き換えていただければと思います。

Tweet