WordPressでスマートフォン表示時の投稿記事内画像をテキストリンクに置き換える方法

2012.3.4

WordPress向けスマホ用テーマを作っていて気になる箇所があります。それは、PC向けに作成した記事内画像をスマホで表示するため、表示が重くなっていること。

ガラケー時代と比べて読み込みも速くなったとはいえ、速い表示が求められると思っています。実際、私も画像が重すぎるページはそれだけで見なくなっています。

そこで、スマホで読み込んだ時に記事内画像をテキストリンクに変換し、タップして見てもらう形をとりたくて、方法を探したらちょうどいい記事があったのでメモ。

スマホからアクセスした時に専用のテーマを読み込ませる方法

前提として、私の場合PC用テーマとは別にスマホ用テーマを作成する形を取ることが大半です。そのため、「WPtap Mobile Detector」を使ってスマホ専用テーマを作成し、振り分けています。

投稿記事内画像をテキストリンクに置き換えるコード

上述のように、「WPtap Mobile Detector」を使ってテーマ自体を読み分けています。
スマホ用テーマのfunctions.phpに、以下を記述します。

/", $html, $match);
    //match[0]に連想配列で全てのimgタグが格納されているので、
    //ループしながらURLを抽出し、aタグに置き換えていく
    for($i=0;$i» 画像を見る';
        //置き換える
        $html= str_replace($match[0][$i],$url_link,$html);
        }
    }
    return $html;
}
add_filter('the_content', 'image_to_link');
?>

PC以上にスマホは軽さが命だと思うので、こういった施策はいろいろやっていきたいですね。

参考

• [PHP]携帯サイト用にimgタグをaタグへ変換する。 | mani-lab