WordPressのショートコードでアイキャッチ画像を表示する方法

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

WordPressのショートコードで、数件の新着記事をサムネイル画像つきで表示する機能の実装を進めています。

前回はこちらの記事です。

WordPressのショートコードで記事の抜粋・リンクつきの投稿の作成者も表示する

WordPressのショートコードで、数件の新着記事をサムネイル画像つきで表示する機能の実装を進めています。今回は、投稿記事の抜粋そしてリンク付きの投稿の作成者も追加で表示してみたいと思います。

tonari-it.com

2016.08.10

ショートコードを使って、投稿記事の抜粋、リンク付きの投稿作成者を表示する方法をお伝えしました。

今回は、いよいよです。WordPressのショートコードでアイキャッチ画像を表示する方法についてお伝えします。

投稿記事の各情報を表示するショートコードのおさらい

前回作成したプログラムはこちら。

//記事タイトルをリンク付きで出力するprint_post
function print_post($atts){
  $retHTML='';
  global $post;
  $myposts = get_posts();
  foreach($myposts as $post):
    setup_postdata($post);
    $retHTML.=''.the_title("","",false).'
';
    $retHTML.=get_the_date().' '.get_the_author().'
';
    $retHTML.=get_the_excerpt().'
';
  endforeach;
  wp_reset_postdata();
  return $retHTML;
}

add_shortcode('list','print_post');

新着記事の5件について

• 記事タイトル（リンク付き）
• 公開日
• 投稿者（リンク付き）
• 抜粋

を表示するショートコード[[list]]を作成しています。

HTMLを生成して表示内容を決めている部分はforeach文内の8行目～10行目になりますので、今回目標とするアイキャッチの表示についてもこの中に記述をしていくことになります。

get_the_post_thumbnailでアイキャッチ画像を取得する

アイキャッチ画像を取得する場合は、get_the_post_thumbnailを使います。

各パラメータは以下のように設定をします。

• $post_id：投稿ID（省略時は現在の投稿）
• $size：画像サイズ。以下の4種類から選択。もしくは幅と高さをpx単位で配列にて指定（例：array(32,32)）（省略時はデフォルトで設定されている大きさ）。
  • thumbnail：サムネイルサイズ
  • medium：中サイズ
  • large：大サイズ
  • full：フルサイズ
• $attr：画像を表示する際のimgタグに含める属性/値を配列で指定。省略可。

全ての引数を省略してみる

パラメータは全て省略可ということなので、まずは引数を何も渡さない場合のアイキャッチ画像を表示してみましょう。

7行目と8行目の間に以下を挿入してみます。

$retHTML.=get_the_post_thumbnail().'
';

ショートコードの表示を見てみますと

バッチリ画像が表示されていますね。

画像がフルマックスの大きさで表示されていますが、ソースを確認してみると

とありますので、このブログではデフォルトのサイズはフルサイズに設定されているようですね。

ちょっとデカすぎるので、サイズ指定をしてみましょう。

サムネイルサイズでアイキャッチ画像を表示

第二引数に「’thumbnail’」を指定すれば良いのですが、そうすると第一引数も記述しないと順番がおかしくなりますよね…。

そんな時は、WordPress Codexにあるように

「空」の引数値を示すシングルクォート（”）を用いると、これらの引数に初期値を与えることになります。

参考 テンプレートタグ/タグパラメータの渡し方

を使わせてもらいましょう。

$retHTML.=get_the_post_thumbnail('','thumbnail').'
';

とすればOKですね。第一引数を空にして、第二引数だけ記述。これでいけるのかな…？

おお、良さそうですね！

任意のサイズでアイキャッチ画像を表示

ただ、当ブログのサムネイルサイズは300×300ということで、まだちょっと大きい印象ですね。

サイズ指定をして、もう少し小さく表示してみましょう。

その場合は第二引数にarray()を使って、幅と高さを指定してあげればよかったですね。

$retHTML.=get_the_post_thumbnail('',array(100,100)).'
';

幅100、高さ100に指定をしてみました。

表示はこちら。

バッチリです！

まとめ

WordPressのショートコードで投稿記事のサムネイルを表示する方法についてお伝えしました。

get_the_post_thumbnailを使いますが、サイズの指定さえちゃんとできれば特に難しくありませんね。

あとは好みに装飾をしていけばOKです。

どうぞご活用下さいね！

連載目次：WordPressのショートコードで新着記事を表示する

初心者でもWordPressショートコードを自作することを目標にして、数件の新着記事をアイキャッチ画像つきで表示する機能を題材として連載形式でショートコードの作り方をお伝えしていきます。

1. WordPressショートコードとは何か、自作する際に注意すべき３つの事
2. WordPressで最も簡単なショートコードの作り方を初心者向けにとっても丁寧に説明します
3. WordPressで引数ありのショートコードを作成する方法をとっても丁寧に説明します
4. WordPressのショートコードでforeach文で配列内のテキストを全て表示する方法
5. WordPressショートコードで複数の記事タイトルを表示する方法
6. WordPressショートコードで記事のパーマリンクと投稿日を取得する方法
7. WordPressのショートコードで記事の抜粋・リンクつきの投稿の作成者も表示する
8. WordPressのショートコードでアイキャッチ画像を表示する方法