the_post_thumbnail()なんて使わない。無駄なソースを吐き出さずにアイキャッチ画像を表示する方法

2017年5月21日2019年8月16日

WordPressでアイキャッチ画像を表示させる時、the_post_thumbnail()という関数を使用していませんか？

関数を呼び出すだけで簡単にアイキャッチ画像が表示できるのですごく便利ですが、この関数を使用するとかなり無駄なソースを出力をしてしまいます。

そこで今回は、the_post_thumbnail()に代わる新しい関数を自分で作ってしまうことで、無駄なソースを出力せずにアイキャッチ画像を表示するための方法をメモしていきます。

the_post_thumbnail()の出力の汚さを実際に確認してみよう

まずは今回問題としているthe_post_thumbnail()を実際に出力してみましょう。

例として、当記事のアイキャッチ画像を表示させてみます。

大きさは「large（大サイズ）」を指定しました。一見問題ないですよね？

しかし、Chromのデベロッパーツールでソースを確認して見てください。

~~次のようなソースが吐き出されているかと思います。~~ 現在、ソースを綺麗にする簡単なカスタマイズを行なっています（後述）

<img width="600" height="345" src="http://wemo.tech/wp-content/uploads/2017/05/eye_eye2-600x345.jpg" class="attachment-large size-large wp-post-image" alt="画像" srcset="http://wemo.tech/wp-content/uploads/2017/05/eye_eye2-600x345.jpg 600w, http://wemo.tech/wp-content/uploads/2017/05/eye_eye2-180x104.jpg 180w, http://wemo.tech/wp-content/uploads/2017/05/eye_eye2-380x219.jpg 380w, http://wemo.tech/wp-content/uploads/2017/05/eye_eye2-768x442.jpg 768w, http://wemo.tech/wp-content/uploads/2017/05/eye_eye2.jpg 800w" sizes="(max-width: 600px) 100vw, 600px">

笑っちゃうくらい無駄に長いですよね。

追記（2018/05/02）：WordPressの簡単なカスタマイズでsrcset属性とsizes属性の出力は失くすことができる

すみません、現在当サイトではWordPressの出力をカスタマイズしているので、上記の「汚いソースコードの例」と、「the_post_thumbnail()で出力させてみた当記事のアイキャッチ画像をデベロッパーツールで確認した時のソースコード」の中身が異なるかと思います。

実は、srcset属性とsizes属性は、次のような簡単な記述だけで出力しないようにできるのです。

functions.phpに追記

add_filter('wp_calculate_image_srcset_meta', '__return_null');

この１行だけです。笑

これだけでだいぶスッキリします。が、今回紹介する自作関数の有用性はあまり変わらないと思うので、ぜひ続きも読んでみてください。

追記（2018/05/02）：そもそもsrcset属性やsizes属性は無意味なものではない

当記事の執筆当時は、これらの属性のソースは全く無意味なものだと認識してしまっていたのですが、そういうわけではありません。

srcset属性やsizes属性を使う前提でサイト設計をした場合、レスポンシブ対応時にこれらは非常に便利なものになります。

現状、そのような最先端なサイトはまだごく少数だと思うので、ほとんどのサイトでは全く無駄な出力なことには変わりありませんが。

「現在の投稿」のアイキャッチ画像をimgタグにして取得する新しい関数を作ってみた

クエリループ中に「現在の投稿」のアイキャッチ画像をimgタグにして取得する、get_thumb_img()という関数を作って見たので、コピペするなりアレンジするなりして使って見てください。

とりあえず、関数のコードから。

functions.phpで定義する

function get_thumb_img($size = 'full') {
  
  $thumb_id = get_post_thumbnail_id();                         // アイキャッチ画像のIDを取得
  
  $thumb_img = wp_get_attachment_image_src($thumb_id, $size);  // $sizeサイズの画像内容を取得
  
  $thumb_src = $thumb_img[0];    // 画像のurlだけ取得
  
  $thumb_alt = get_the_title();  //alt属性に入れるもの（記事のタイトルにしています）

  return '<img src="'.$thumb_src.'" alt="'.$thumb_alt.'">';
}

引数には好きなサイズを指定できるようにしています。使える値はthe_post_thumbnail()と同じ、"thumbnail", "medium", "large", "full"の4種です。

アイキャッチ画像を表示したい場所で以下のようにechoで呼び出します。

例：大サイズで現在の投稿のアイキャッチ画像を出力する

<?php echo get_thumb_img('large'); ?>

さて、この新しく定義したget_thumb_img()関数の中身ですが、処理の内容は以下の通りです。

「現在の投稿」のアイキャッチ画像の画像IDのみ取得
画像IDを元に、指定したサイズでアイキャッチ画像に関する情報を配列で取得
情報の配列の中からURLだけ取得
imgタグやalt属性値と組み合わせてreturnさせる

この3の部分までは、前回のメモにて詳しく説明していますので、参考にしてみてください。

alt属性の値も自由に指定して出力できるようにしてみた

執筆中にちょっと思いついたので、さらに改良してみました。

先ほどの関数では、alt属性を記事タイトルにしていますが、ここも引数で指定できるようにしてみます。特に指定しない場合のみ、先ほどと同様、記事タイトルを出力するものとします。

alt属性を自由に指定できるようにした版

//alt属性に関する引数を増やしておく
function get_thumb_img($size = 'full', $alt = null) {
  
  $thumb_id = get_post_thumbnail_id();
  
  $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
  
  $thumb_src = $thumb_img[0];
  
  $alt = ($alt) ? $alt : get_the_title();  //追記部分。alt属性に関する引数が空だった場合、デフォルトで投稿タイトルを入力する

  return '<img src="'.$thumb_src.'" alt="'.$alt.'">';
}

実際に出力してみましょう。

<?php echo get_thumb_img('large', "あああ"); ?>

alt属性を"あああ"として、呼び出してみたものが下の画像です。

デベロッパーツールで出力されたソースを確認すると、alt属性に"あああ"と入力されてるのが確認できるかと思います。

*ちなみに、$alt = ($alt) ? $alt : get_the_title();という部分は3項演算という記法を用いています。見慣れない方はググって見てください。

まとめ

さて、いかがだったでしょうか。

だいぶスッキリしましたよね。こんなことに気づくユーザーはいないので、完全に自己満足の世界ですが。笑

追記：投稿IDも指定して好きな投稿のアイキャッチ画像を取得できるように改良しました

追記（2018/05/02）：さらに改良してみたので、コードを載せておきます。

「現在の投稿」だけでなく、任意の投稿のアイキャッチ画像を取得できるように、引数に投稿IDを指定できるようにしてみました。

もちろん、指定しなければいままで通り、「現在の投稿」のアイキャッチ画像を取得できます。

指定した投稿のアイキャッチ画像も取得できるようになった改良版

function get_thumb_img($size = 'full', $alt = null, $p_id = null) {

  $p_id = ($p_id) ? $p_id : get_the_ID();    //追記部分
  $thumb_id = get_post_thumbnail_id($p_id);
  $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
  $thumb_src = $thumb_img[0];
  $alt = ($alt) ? $alt : get_the_title($p_id);

  return '<img src="'.$thumb_src.'" alt="'.$alt.'">';
}

この記事が気に入ったら
フォローしてね！

Follow @ddryo_loos

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！