WordPressの投稿を携帯表示させるのに、一番メジャーなプラグイン『KtaiStyle』があります。
ものすごく簡単で便利なので、愛用させてもらっていますが、親切設計な故に起こる問題もあります。
その例として、KtaiStyleで他のサイトの画像を貼って表示させると、リンクの文字列に自動変換されてしまいます。
おそらく携帯ページ特有のサイズやパケ代を考えてくださった上での親切設計なんですが、やはり画像を表示させた状態で見せたいという事も多々あります。
Amazonの画像が表示されないとの事で、良くある質問にありました。
Amazon の画像をそのまま表示したい
ktai_image_to_linkにフックして、amazonからの画像の場合は、変換処理をスルーさせる様にしています。
これで楽天なども、URLに追加してやればいいのですが、例外サイトを追加していくやり方は汎用性に掛けます。
という事で、一気に外部サイトでもリンクへの変換処理を抜けさせるためには以下の様なコードをテーマのfunction.php(無ければ作成)に記述します。
[php]
function ks_keep_link_image($replace, $orig, $src) {
//何もせずそのまま出力
$replace = $orig;
return $replace;
}
add_filter('ktai_image_to_link', 'ks_keep_link_image', 10,3);
[/php]
こうすると、このまま出力させます。
ただし、このまま出してしまうとなると、横幅の大きいサイズの画像がそのまま表示されてしまうため、携帯の小さい画面で見せるためには考慮が必要となります。
そこで、次は画像の横幅の最大サイズを決めておいて、それに合わせて強制的にimgタグのwidth要素を変えてしまおうという方法です。
（あくまで表示サイズを変えるので、元画像のサイズ変更ではありません。もちろん外部画像の編集はできませんので...。）
[php]
function ks_keep_link_image($replace, $orig, $src) {
//imgタグ分解
preg_match('/]*src="([^"]+)[^>]*>/', $orig, $res); // img タグ部分の src 属性部の抽出
preg_match('/]*alt="([^"]+)[^>]*>/', $orig, $alt); // img タグ部分の alt 属性部の抽出
preg_match('/]*width="([^"]+)[^>]*>/', $orig, $wid); // img タグ部分の width 属性部の抽出
preg_match('/]*height="([^"]+)[^>]*>/', $orig, $hig); // img タグ部分の height 属性部の抽出
//サイズ取得
if(is_numeric($wid[1]) && is_numeric($hig[1])){
$size[0] = $wid[1];
$size[1] = $hig[1];
}else{
$size = getimagesize($res[1]);
}
//サイズが規定より大きい場合、縮小する
$max_width = 96;
$zoom = 0;
$new_width = 0;
$new_height = 0;
$new_img = "";
if($size[0] > $max_width){
//比率取得
$zoom = ($max_width/$size[0]);
//縮小サイズ設定
$new_width = 96;
$new_height = $size[1] * $zoom;
//新しいimgタグ作成
$new_img = '';
$orig = $new_img;
}
return $replace;
}
add_filter('ktai_image_to_link', 'ks_keep_link_image', 10,3);
[/php]
やっていることはimgタグのサイズを取得して、最大幅(この場合96px)を超えたら、96pxに横幅を変更。
横幅の変更倍率から、縦幅も同倍率で補正して、imgタグを作り直して出力しています。
変換前のimgタグ内にwidthやheight要素が入っていないともちろんダメですけどね。
結構、適当に作っているので問題が出るかもしれませんが、指摘する個所があったらコメントしていただければ助かります。
またあくまで個人が勝手にやった事ですので、KtaiStyleの開発者様へのこれについての質問等はご迷惑が掛かりますので、しないで下さい。
(もし開発者様やその関係者様が、『こんな記事を勝手に載せるなゴルァ』とおっしゃる場合は、速やかに削除させていただきます。)