WordPressでサイズの違うアイキャッチ画像をPC用とスマホ用で出し分ける

スマホ用にメディアクエリを設定してひと息ついた頃、PageSpeed Insightsを確認してみたら「モバイル」の速度がガタ落ちしていました。記憶では80点くらいあったのに、50点になっていました。

原因は画像。特にアイキャッチに使用している「722 × 234」ピクセルの元画像が大きすぎるようです。

メディアクエリで「max-width: 100%;」にしているだけなので毎回読み込みに時間が掛かっているようです。
PageSpeed Insightsはこれを『横幅 320px にリサイズしろよ』と迫ってきます。

ご丁寧にもリサイズされた画像のダウンロードすらできます。非常に親切です。
しかしそう簡単に置き換えるわけにもいかない、PC用の画面で見ると今度は小さくなってしまうからです。

さらに考えてみれば、このブログのメディアクエリのスマホ用ブレークポイント480pxにしました。
320pxで画像を用意したら、360pxで表示される「XPERIA Z1」などで見た時に余白ができるのではないだろうか?
アイキャッチの画像だけ「width: 100%;」で引き伸ばしたところで画像がぼやけるに違いない。

何かいい方法はないかなーと検索をかけていくと、たくさん出てきたので迷わず真似をしてみます。

やはり一番肝心なのは「全てを自動化」できること。投稿の度に手間を掛ける対応方法は避けたい。
というわけでやったことが以下の4つ+αです。

1. functions.php で2種類のサイズのアイキャッチ画像が作成されるようにする。
2. functions.php にUA(ユーザーエージェント)判定のための記述を行う。
3. テンプレートを編集してPCとスマホ時の画像出し分けの分岐条件「is_mobile」を設定する。
4. 過去の投稿に使っているアイキャッチの画像をプラグインで一括再生成する。

+α スマホ用のスライドメニューに使用している「sidr」が効かなくなったので対策

1. 2種類のサイズの画像が作成されるようにする

アイキャッチ登録時に複数のサイズが生成されるようにします。
まずは自分の現在の状態をおさらい。先に functions.php に書いてある部分。

functions.php
// アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(722, 234, false);

次に各種テンプレートに書いているアイキャッチ出力の部分。
インデックスシングルアーカイブなど数カ所あります。

<?php the_post_thumbnail(); ?>

722 × 234」ピクセルの画像を用意して、トリミングせずにそのまま使用しています。
アイキャッチはこの大きさ1種類しか使っていないのでとてもシンプルです。

ここにスマホ用として「480 × 156」ピクセルの画像が自動で作成されるようにします。

functions.php
// アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(722, 234, false);
add_image_size('mobile_thum', 480, 156, false);

add_image_size」を使うと、アイキャッチ設定時に指定したサイズも同時に作成されます。
今回は1つ足しただけですが、改行して同じように書いていけばいくつでも用意できます。

mobile_thum としている箇所の名称は自分で決めていいので、わかりやすくしておきます。

2. PCとスマホの判別をしてもらう

条件分岐には「is_mobile」を使用し、「wp_is_mobile」は使いません。

多くのブログで同じ説明がされていますが、似たような名前の関数「wp_is_mobile」では iPad などのタブレットもスマホ扱いになってしまうからです。このよく似た2つの関数は端末を見分けるUA(ユーザーエージェント)の振り分け方が違うだけで、基本的にやっていることは同じです。

もし、読みに来た端末がスマホならスマホ用を使い、そうでなければPC用を使う」という感じです。

まず functions.php にUA判定のための記述を行います。

functions.php
//is_mobile 用
function is_mobile() {
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        'Android.*mobile', // 1.5+ Android** Only mobile
        'Windows.*Phone',  // *** Windows Phone
        'dream',           // Pre 1.5 Android
        'CUPCAKE',         // 1.5+ Android
        'blackberry9500',  // Storm
        'blackberry9530',  // Storm
        'blackberry9520',  // Storm v2
        'blackberry9550',  // Storm v2
        'blackberry9800',  // Torch
        'webOS',           // Palm Pre Experimental
        'incognito',       // Other iPhone browser
        'webmate'          // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

上記の6行目が ‘Android‘ のみで紹介されている例がありますが Android を全てスマホ判定してしまうと「ネクサス7」などのAndroidタブレットもスマホとして判定されてしまうため、ここでは上記の書き方にしています。今回の発端はアイキャッチ画像のサイズ振り分けなので、タブレットで画像が小さく表示されるのは見逃すわけにはいきません。

↓ こちらのサイト様を参考にさせて頂きました。大変助かりました。

[WP] wp_is_mobile と iPad と WP Super Cache の怖い関係 | @mekemoke
3. テンプレートを編集する

これで準備が整いましたので、各種テンプレートの該当箇所を変更していきます。

各種テンプレート
<?php if ( is_mobile() ) : ?>
  the_post_thumbnail('mobile_thum'); // スマホ用
<?php else: ?>
  the_post_thumbnail(); // PC用
<?php endif; ?>

PC用のアイキャッチには特に名前を付けていないので空にしていますがこれで問題なく動作します。
アイキャッチ用の記述をしてある全てのテンプレートを探して書き換えます。

余談ですが、ここで私的な問題が発生しました。
「is_mobile」のUA判定用の書き込みを functions.php へ行うと、スマホ用のスライドメニューに使用している「sidr」が動かなくなってしまいました。

どうやら「is_mobile」でスマホとして判定を受けると「head cleaner」で整えていたヘッダー部分の整形が変わるようで、結果的にjQueryを正常に読み込めなくなっているようでした。ヘッダー部分に書いていた「sidr」本体へのパスと、実際の動きを書いた部分を</body>の一行前に移動させると再び正常に読み込むようになりました。

4. 以前の投稿に使っているアイキャッチ画像を登録し直す

add_image_size」の設定後にアップロードしたアイキャッチ画像は指定した画像で複製されます。

今回の例なら「480 × 156」ピクセルの画像が WordPress の「uploads」フォルダの中に作成されていることが確認できるはずです。

ただし、以前にアップロードして登録してあるアイキャッチ画像には当然別サイズの画像が用意されていません。ひとつずつ登録し直すことで解決できるのですがそれはさすがに面倒です。ここ程度の記事数ならまだしも、何百個も記事がある人は過労死してしまいます。

そこで「regenerate-thumbnails」というプラグインを使って、アイキャッチ画像を一括で登録し直します。

regenerate-thumbnails

プラグインの「新規追加」で検索してインストールし、有効化します。
管理画面の「ツール」から「Regen.Thumbnails」を選択。

regenerate-thumbnails01

Regenerate All Thumbnails」を押すと一括で全ての画像が再生成されます。
全ての画像が再生成されるため多少時間がかかります。

または、「メディア」のライブラリからひとつひとつ選んで再生成することも可能です。

regenerate-thumbnails02

全ての再生成が終われば作業は完了です。
私の愛機「MeMO Pad」でも正常にアイキャッチが表示されました。

そして PageSpeed Insights を再び確認。

mobile_speed

19点アップとぼちぼち回復しました。「画像の最適化」項目からアイキャッチが消えていたので「480 × 155」ピクセルの画像も最適であると判断されたようで一安心です。

コメント

 DISQUSコメントシステムとは?
DISQUSコメントシステムFacebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTubeTweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。

New Post



Random


CLOSE