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以上にスマホは軽さが命だと思うので、こういった施策はいろいろやっていきたいですね。