WordPress アイキャッチ画像のサイズをスマートフォンと PC で切り替える

Hitchhiker's Guide to Your Galaxy
photo credit: Krisztina Tordai via photopin cc

WordPress をカスタマイズする楽しさに目覚め、最近はそれ関連の投稿ばかりの hirose (@shirose_jp) です。今日は1枚の画像だけでスマートフォン向けと PC 向けにアイキャッチ画像の表示サイズを切り替えるように設定したので、その方法を書いてみたいと思います。

目次

  1. 目的
  2. iPhone で見るサムネイル画像
  3. 画像サイズを考える
  4. wp_is_mobile で条件分岐
  5. array でサイズを指定

1. 目的

以前、記事の一覧ページにはサムネイルサイズ、個別ページにはより大きなサイズのアイキャッチ画像を表示させるように設定しました。また、iPhone の Retina ディスプレイでもスクリーンショットが鮮明に表示されるよう、あらかじめ大きめの画像を用意して縮小表示させる方法を取り入れました。

関連記事:

今回行った作業はこれらの派生形です。サムネイルサイズのアイキャッチ画像は解像度が高くないため、そのまま Retina ディスプレイで表示すると不鮮明になってしまいます。そこで、スマートフォン向けに縦横をそれぞれ半分のサイズにして表示させるようにしてみました。

2. iPhone で見るサムネイル画像

こちらが今回の作業を開始する前の content.php のコードです。記事の個別ページ以外のページでは、WordPress 管理画面の「設定」→「メディア」→「画像サイズ」で指定している「サムネイル」サイズの画像を表示させています。

<div class="entry-post-thumbnail">
	<?php if ( is_single() ) : ?>
	<?php the_post_thumbnail( 'full' ); ?>
	<?php else : ?>
	<?php the_post_thumbnail( 'thumbnail' ); ?>
	<?php endif; // is_single() ?>
</div><!-- .entry-post-thumbnail -->

もともと「サムネイル」のサイズは 150px x 150px に指定していたので、スマートフォンと PC の区別なく、このサイズでアイキャッチ画像が表示されていました。

こちらは iPhone 5 の Safari でこのブログのトップページを表示したところです。画像が少しぼやけた感じになっていることが分かると思います。

screen shoot

これは Retina ディスプレイの解像度が高いためで、鮮明に表示させるには、見せたいサイズと比べて縦横がそれぞれ倍以上の画像を用意する必要があります。

3. 画像サイズを考える

単純に考えれば 300px x 300px の画像を用意して、スマートフォンでも PC でも 150px x 150px で表示させればよいのですが、ファイルサイズが重くなることが気がかりでした。

スマートフォン向けの表示サイズはもう少し小さくてもいいのかなという思いもあったので、スマートフォンのみ 75px x 75px で表示させることにしました。

4. wp_is_mobile で条件分岐

スマートフォン向けに表示サイズを切り替えるための設定ですが、ちょうど次のサイトでそれ用の条件分岐タグがあることが紹介されていました。

具体的には wp_is_mobile 関数を以下のように使えばいいとのことです。

<?php if ( wp_is_mobile() ) : ?>
... スマートフォン向けのコード ...
<?php else : ?>
... PC 向けのコード ...
<?php endif; ?>

今回は、サムネイルサイズのアイキャッチ画像を使っているページに表示サイズの切り替えを導入したいので、先ほどの content.php のコードの後半部分をひとまず書き換えます。

<div class="entry-post-thumbnail">
	<?php if ( is_single() ) : ?>
	<?php the_post_thumbnail( 'full' ); ?>
	<?php else : ?>
		<?php if ( wp_is_mobile() ) : ?>
		... スマートフォン向けのコード ...
		<?php else : ?>
		... PC 向けのコード ...
		<?php endif; // wp_is_mobile() ?>
	<?php endif; // is_single() ?>
</div><!-- .entry-post-thumbnail -->

5. array でサイズを指定

これでスマートフォンと PC で表示サイズを切り替えるための記述が済んだので、続いて実際に表示させるサイズを明示的に指定してみます。

そのため、アイキャッチ画像を出力するコードのパラメータに array を使います。

次のように記述すると、「メディア設定」に基づいて生成されているサムネイル画像を、75px x 75px に縮小して表示してくれます。

<?php the_post_thumbnail( array(75,75) ); ?>

これを content.php の条件分岐させたところに書き込みます。

<div class="entry-post-thumbnail">
	<?php if ( is_single() ) : ?>
	<?php the_post_thumbnail( 'full' ); ?>
	<?php else : ?>
		<?php if ( wp_is_mobile() ) : ?>
		<?php the_post_thumbnail( array(75,75) ); ?>
		<?php else : ?>
		<?php the_post_thumbnail( 'thumbnail' ); ?>
		<?php endif; // wp_is_mobile() ?>
	<?php endif; // is_single() ?>
</div><!-- .entry-post-thumbnail -->

これで、スマートフォンからのアクセスには 75px x 75px で、PC などスマートフォン以外からのアクセスには 150px x 150px で、サムネイルサイズのアイキャッチ画像を表示させられます。

こちらが iPhone からアクセスしたトップページのスクリーンショット。先ほどより画像が鮮明に表示されています。

screen shoot

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です