【WordPress】ショートコードでサムネイル付きの関連記事を投稿内に表示する

こんにちは、Ryohei（@ityryohei）です！

関連記事とは、投稿に関連する記事を指します。本文の中で「合わせて読みたい！」などの文言でご紹介されています。具体的には下記のようなイメージです。

related-post-shortcode01

投稿内に関連記事を入れて別の記事に誘導する場合、リンクだけを表示するのではなく、紹介したい記事の情報を簡単に表示することでユーザの目を引くことができます。私自身、皆様のブログを拝見する際に関連記事が挿入されていると「この記事も気になる！」とついついクリックしてしまいます。

関連記事はプラグインを使うことで簡単に表示することができますが、プラグインをなるべく利用したくないという方もいらっしゃいます。

そこで、今回はWordpressの機能であるショートコードを使って、簡単に関連記事を投稿内に表示する方法をご紹介したいと思います。

ショートコードについては下記で詳しく解説していますので、よければご覧ください。

【WordPress】ショートコードの作成方法と使い方

単数の関連記事を取得する

一つの記事情報を取得する方法になります。基本的に一つの関連記事を載せるつもりだけど、複数になることがあるかもしれない...という方は下記で紹介している「複数の関連記事を取得する」をご覧ください。

ショートコード

投稿内に記述するショートコードです。post_idには投稿IDを指定します。

[related_post post_id="1899"]

関数

下記はショートコードで呼び出される関数になります。テーマ内のfunctions.phpに追記ください。ショートコード名と関数名は適宜変更いただければと思います。

function related_post_func($atts){

  //post_idが省略された場合のデフォルト値設定
  $a = shortcode_atts( array(
    'post_id' => '2018'
  ), $atts, 'related_post');

  //【値取得】
  //ショートコードのpost_idを取得
  $id = $a['post_id'];
  //post_idから投稿情報取得
  $post = get_post($id);
  //投稿タイトル取得
  $title = $post->post_title;
  //投稿年月日取得
  $date = get_the_time('Y年m月d日', $id);
  //カテゴリー情報取得
  $categories = get_the_category($id);
  //パーマリンク取得
  $permalink = get_permalink($id);
  //アイキャッチ画像のURL取得
  $image = wp_get_attachment_url(get_post_thumbnail_id($id));
  //投稿本文取得（100文字抜粋）
  $content = mb_substr($post->post_content, 0, 100, "UTF-8");

  //【出力】
  //投稿タイトル
  echo 'タイトル： '.$title;
  //投稿日
  echo '投稿日： '. $date;
  //カテゴリー情報（配列のためループ処理）
  if($categories){
    foreach($categories as $category) {
      //カテゴリー名
      echo 'カテゴリー名： '.$category->cat_name;
      //URL
      echo 'カテゴリーURL： '.get_category_link($category->term_id);
    }
  }
  //パーマリンク
  echo 'パーマリンク： '.$permalink;
  //アイキャッチ画像のURL
  echo 'アイキャッチURL： '. $image;
  //投稿本文
  echo '本文： '. strip_tags($content) .'...';

}
add_shortcode('related_post', 'related_post_func');

実行結果

ショートコードで出力される値のサンプルです。関連記事を表示するのに必要な情報は揃っているかと思います。

タイトル： 【WordPress】ショートコードの作成方法と使い方
投稿日： 2018年09月02日
カテゴリー名： WordPress
カテゴリーURL： https://into-the-program.com/category/wordpress
パーマリンク： https://into-the-program.com/wordpress/add-shortcode.php
アイキャッチURL： https://into-the-program.com/uploads/wordpress-add-shortcode.jpg
本文： ショートコードは、関数を短い記述で呼び出すことができるWordpressの機能です。投稿や固定ページといったPHPのプログラムが実行できない場面でも定義した関数をブラケット（[]）で囲った短いコードを...

複数の関連記事を取得する

上記は単数の関連記事に限定されていましたが、こちらは投稿IDを複数指定して投稿情報を取得することができます。

ショートコード

投稿内に記述するショートコードになります。

[related_posts post_id="1899,1597"]

関数

function related_posts_func($atts){

  //post_idが省略された場合のデフォルト値設定
  $a = shortcode_atts( array(
    'post_id' => '2018,2017'
  ), $atts, 'related_posts');

  //post_idの値をカンマで分割する
  $ids = explode(',', $a['post_id']);

  if(isset($ids)){
    //post_idの数だけループ
    foreach($ids as $id){

      //【値取得】
      //post_idから投稿情報取得
      $post = get_post($id);
      //投稿タイトル取得
      $title = $post->post_title;
      //投稿日取得
      $date = get_the_time('Y年m月d日', $id);
      //カテゴリー情報取得
      $categories = get_the_category($id);
      //パーマリンク取得
      $permalink = get_permalink($id);
      //アイキャッチ画像のURL取得
      $image = wp_get_attachment_url(get_post_thumbnail_id($id));
      //投稿本文取得（100文字抜粋）
      $content = mb_substr($post->post_content, 0, 100, "UTF-8");

      //【出力】
      //投稿タイトル
      echo 'タイトル： '.$title;
      //投稿日
      echo '投稿日： '. $date;
      //カテゴリー情報（配列のためループ処理）
      if($categories){
        foreach($categories as $category){
          //カテゴリー名
          echo 'カテゴリー名： '.$category->cat_name;
          //URL
          echo 'カテゴリーURL： '.get_category_link($category->term_id);
        }
      }
      //パーマリンク
      echo 'パーマリンク： '.$permalink;
      //アイキャッチ画像のURL
      echo 'アイキャッチURL： '. $image;
      //投稿本文
      echo '本文： '. strip_tags($content).'...';
    }
  }
}
add_shortcode('related_posts', 'related_posts_func');

実行結果

下記は実行結果のサンプルです。

タイトル： 【WordPress】ショートコードの作成方法と使い方
投稿日： 2018年09月02日
カテゴリー名： WordPress
カテゴリーURL： https://into-the-program.com/category/wordpress
パーマリンク： https://into-the-program.com/wordpress/add-shortcode.php
アイキャッチURL： https://into-the-program.com/uploads/wordpress-add-shortcode.jpg
本文： ショートコードは、関数を短い記述で呼び出すことができるWordpressの機能です。投稿や固定ページといったPHPのプログラムが実行できない場面でも定義した関数をブラケット（[]）で囲った短いコードを...

タイトル： 【jQuery】imgタグのsrcを書き換えて画像を変更する
投稿日： 2017年11月29日
カテゴリー名： jQuery
カテゴリーURL： https://into-the-program.com/category/jquery
パーマリンク： https://into-the-program.com/jquery/attr-img-src.php
アイキャッチURL： https://into-the-program.com/uploads/attr-img-src.png
本文： imgタグのsrcを書き換えて別の画像を表示する処理はサイトを制作する上でよく使用します。クリックでボタンのアイコンを変更したり、数秒置きに切り替えたり、ウィンドウサイズに応じて出力する画像を変...