関連記事が出力するサムネイル画像のサイズを適切な大きさに変更する

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

先日に当研究所の子テーマに関連記事を追加いたしました。その後ページの表示処理速度が少し重たくなっていました。調べてみると関連記事の画像差し込みに以下スクリプトを使用していたのが原因でした。

<?php the_post_thumbnail('full'); ?>

関連記事は合計6つ表示していたので6記事ともに「アップロードした画像サイズのまま」出力していたのが重さの要因となっていました。the_post_thumbnail自体は一般的な関数ですがもし「full」を指定する際は「運営者側が画像サイズを事前にリサイズしたり、画像圧縮をしている場面で使うべき関数」でもあります。

関連記事が出力するサムネイル画像サイズを適切な大きさに変更する

当研究所では複数人のスタッフがアップする環境だったり、更新場所が国内外になったりとさまざまな状況が考えられるので、画像サイズを調整できずにアップロードするシチュエーションも出てきます。そういった場合は上記関数の「full」を「large」などで小さく出力されるように設定すれば画像サイズが抑えられます。

関連記事のサムネイル画像サイズを変更する

<?php the_post_thumbnail('large'); ?>

括弧の中がlargeだと横幅が1024pxになるか、640px基準になるかは導入テーマ側の仕様にもよって左右されますがアップロードしたままの画像サイズで出力される事態は避けられます。ただ、この指定だけではimgで出力される際に無駄なソースも一緒に吐き出されるのでhtmlソースとしてはシンプルではありません。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

実際に出力されたソース

<img width="1024" height="683" src="https://wp-labo.com/wp-content/uploads/2019/01/maik-jonietz-_yMciiStJyY-unsplash-1024x683.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://wp-labo.com/wp-content/uploads/2019/01/maik-jonietz-_yMciiStJyY-unsplash-1024x683.jpg 1024w, https://wp-labo.com/wp-content/uploads/2019/01/maik-jonietz-_yMciiStJyY-unsplash-300x200.jpg 300w, https://wp-labo.com/wp-content/uploads/2019/01/maik-jonietz-_yMciiStJyY-unsplash-768x512.jpg 768w, https://wp-labo.com/wp-content/uploads/2019/01/maik-jonietz-_yMciiStJyY-unsplash-304x203.jpg 304w, https://wp-labo.com/wp-content/uploads/2019/01/maik-jonietz-_yMciiStJyY-unsplash-282x188.jpg 282w" sizes="(max-width: 1024px) 100vw, 1024px">

出力ソースをシンプルにする方法

上記ソースを簡略化する場合はテーマのfunctions.phpからコントロール可能です。

add_filter('wp_calculate_image_srcset_meta', '__return_null');

ちなみに「the_post_thumbnail」関数で出力される「srcset属性」はレスポンシブと呼ばれる技術を用いたサイトでは効果的に動作しますが「srcset属性(sizesなど)を使う前提のサイト設計」になっていなければ別段必要はありません。シンプルなソースの方がhtmlもすっきりしますので不要であれば外しましょう。

functions.phpに追記した例

以下が実際にfunctions.phpへ追加した例。

functions.php変更後の出力ソース

<img width="1024" height="683" src="https://wp-labo.com/wp-content/uploads/2019/01/maik-jonietz-_yMciiStJyY-unsplash-1024x683.jpg" class="attachment-large size-large wp-post-image" alt="">

以上で関連記事のサムネイル画像がアップロードサイズで表示されなくなりました。関連記事のサムネイルはクリック時に拡大される処理を含んでも横幅1024pxあれば十分です。サムネイル画像のサイズが小さくなったことで記事が表示されるスピードも大幅に改善いたしました。スマホでの読み込みも早くなり一安心です。

サイズ指定方法は色々とありますのでメモとして以下も残しておきます。

//サムネイルサイズで表示
<?php the_post_thumbnail('thumbnail'); ?>
 
//中サイズで表示
<?php the_post_thumbnail('medium'); ?>
 
//大サイズで表示
<?php the_post_thumbnail('large'); ?>
 
//フルサイズで表示
<?php the_post_thumbnail('full'); ?>
 
//サイズを指定して表示
<?php the_post_thumbnail('array(640,480) ); ?>

まとめ

関連記事1つとっても実装は意外と奥が深いです。もう少し補足しておくと「srcset属性」は、HTML5から追加された属性で『アクセス端末の解像度(幅)によって表示させる画像を切り替えるために使う技術』です。Retinaモニターに対応させる際に最適な画像サイズを切り替えて表示させるサイト設計になっていると使います。

関連記事を導入してページ表示が重たくなったという方はぜひ一度出力しているソースをご確認くださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

- 超快速なワードプレスを運営しませんか?【AD】-

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください