メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

WordPressでアイキャッチ画像を表示させる時、the_post_thumbnail()やget_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">

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

    こいつらを出力せずにスマートに表示させましょう。

    新しい関数を定義する

    とりあえず、先に完成形をお見せします。

    //function.phpに定義しておく
    function get_thumb_img($size = 'full'){
      // アイキャッチ画像のIDを取得
      $thumb_id = get_post_thumbnail_id();
      // $sizeサイズの画像内容を取得
      $thumb_img = wp_get_attachment_image_src( $thumb_id , $size );
      // 画像のurlだけ取得
      $thumb_src = $thumb_img[0];
      //alt属性に入れるもの(タイトル)
      $thumb_alt = get_the_title();
    
      return '<img src="'.$thumb_src.'" alt="'.$thumb_alt.'">';
    }
    
    //使用する時の例
    <?php echo get_thumb_img('large'); ?>
    

     

    さて、この新しく定義したget_thumb_img関数の中身ですが、仕組みとしては前回のメモにて紹介したコードを利用しています。

    このメモの方法でアイキャッチ画像のurlを取得し、そのurlをimgタグのsrc属性に入力させたものをretunで返すというのが今回の関数です。alt属性の値にはとりあえず投稿タイトルを入力するようにしています。

    実際にこの関数を使ってみると、次のようになります。(大きさはlargeを指定しました)

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

    表示はOKですね。ソースを見てみると、次のようになっています。

    <img src="http://wemo.tech/wp-content/uploads/2017/05/eye_eye2-600x345.jpg" alt="the_post_thumbnail()なんて使わない。アイキャッチ画像を無駄なソースを吐き出さずに表示する方法">

    無駄な記述がなくなり、スッキリしました。

    alt属性の値を自由に変更したい場合

    先ほどの関数では、alt属性には投稿のタイトルが入力されるようになっています。特にalt属性の値にこだわりがない場合は、先ほどの関数のままで使うのが楽だと思います。

    この部分を自由に変更してアイキャッチを出力したい場合は、先ほどの関数を次のように変更して定義しましょう。

    //aly属性に関する引数を増やしておく
    function get_thumb_img($size = 'full', $alt = "img"){
      // アイキャッチ画像のIDを取得
      $thumb_id = get_post_thumbnail_id();
      // $sizeサイズの画像内容を取得
      $thumb_img = wp_get_attachment_image_src( $thumb_id , $size );
      // 画像のurlだけ取得
      $thumb_src = $thumb_img[0];
      //alt属性に関する引数が空だった場合、デフォルトで投稿タイトルを入力する
      if($alt == "img"){
        $alt = get_the_title();
      }
      return '<img src="'.$thumb_src.'" alt="'.$alt.'">';
    }
    

    そして、次のように記述して出力させてみます。

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

    出力は下のようになります。

    あああ

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

    まとめ

    さて、いかがだったでしょうか。2つ目のalt属性指定可能な関数は、メモを書いている間に思いついたので分けて書きましたが、こっちの方が断然勝手がいいですね。

    1つ目の関数と同じように、引数を空にしてもデフォルトでタイトルを入れているので、明らかな上位互換となりました。笑

    これからは私もこちらを使っていこうと思います。

     

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top