この記事にはプロモーションが含まれています。

【SWELL】関連記事を任意の場所に表示する方法【ショートコード】

2024-06-202024-08-18

SWELLでショートコードを使用して「関連記事」を任意の場所に表示する方法をご紹介します。

SWELLの「関連記事」はデフォルトだと決められた場所に表示されますが、

今回ご紹介する方法を使用することで自分の好きな場所に「関連記事」を表示できるため、上手く活用することで回遊率を高めることが可能です。

ケケンタ

本記事の内容がお役に立てば何よりです！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

【全体の流れ】ショートコードで「関連記事」を任意の場所に表示する

ケケンタ

この記事でご紹介する内容の流れをザックリまとめると以下のようになります。

ショートコードを使用して「関連記事」を任意の場所に表示する流れ

SWELLのデフォルト機能で出力されている「関連記事」のHTML構造に基づき、記事ごとの出力用HTMLを用意する
表示中の投稿の「関連記事」をWP_Queryで取得する
①で書いた処理と②で取得したデータをループで回して「関連記事」を出力する
ここまでの処理①～③をショートコードに登録して任意の場所で表示できるようにする

ソースコード

ソースコード全体は以下の通りです。

以下２つのソースコードをfunctions.phpに追記し、ショートコード「my_short_create_related_post_list」を任意の場所に記述するだけで「関連記事」を出力できます。

※子テーマのfunctoins.phpにソースコードを追加する手順はこちら（この記事内の別項目に移動します）

記事ごとの出力用HTML

function create_related_post() {
  // サムネイル（サムネイルの有無によって表示する画像をサムネイル or NO IMAGE画像を設定）
  $thumb_url = has_post_thumbnail() 
                  ? get_the_post_thumbnail_url(get_the_ID(), 'medium') 
                  : 'https://サイトドメイン（例：kekenta-it-blog.com）/wp-content/themes/swell/assets/img/no_img.png';
                     // ↑このURL＝NO IMAGE画像は任意のものでOK
  $permalink = get_the_permalink();   // 記事リンク
  $title     = get_the_title();       // タイトル
  $date      = get_the_date('Y-m-d'); // 公開日

  // 関連記事のHTML
  $html  = <<<CURRENT_POST
    <li class="p-postList__item">
      <a href="{$permalink}" class="p-postList__link">
        <div class="p-postList__thumb c-postThumb">
          <figure class="c-postThumb__figure">
            <img width="300" height="169" src="{$thumb_url}" alt="{$title}" class="c-postThumb__img u-obf-cover">
          </figure>
        </div>
        <div class="p-postList__body">
          <div class="p-postList__title">{$title}</div>
          <div class="p-postList__meta">
            <div class="p-postList__times c-postTimes u-thin">
              <time class="c-postTimes__posted icon-posted" datetime="{$date}" aria-label="公開日">{$date}</time>
            </div>
          </div>
        </div>
        </a>
    </li>
    CURRENT_POST;

  return $html;
}

「WP_Queryで取得した関連記事をループで取得する処理」をショートコードに登録

function create_related_post_list() {
  $html  = '<section class="l-articleBottom__section -related">';
  $html .= '<h2 class="l-articleBottom__title c-secTitle">関連記事</h2>';
  $html .= '<ul class="p-postList p-relatedPosts -type-card">';

  // 関連記事の呼び出し
  $args = array(
    'post_type'       => 'post',                      // 「投稿」の記事を取得
    'category_name'   => get_the_category()[0]->slug, // 表示中の記事のカテゴリーを指定
    "post__not_in"    => [get_the_ID()],              // 表示中の記事は「関連記事」に含めない
    'posts_per_page'  => 8,                           // 8件の記事を取得する（※調整可能）
  );
  $the_query = new WP_Query( $args );

  if ( $the_query->have_posts() ) :  
    while ( $the_query->have_posts() ) : $the_query->the_post();

      // 関連記事をひとつずつ取得
      $html .= create_related_post();
    
    endwhile;
  endif;
  wp_reset_postdata();

  $html .= '</ul></section>';

  echo $html;
}
add_shortcode('my_short_create_related_post_list', 'create_related_post_list');

ケケンタ

ご興味のある方に向けて、以下より簡単に解説をしていきます。

解説

① 記事ごとの出力用HTML

今回、「関連記事」のHTML構造をあえてSWELLで使用されているものと同じものにしています。

理由

構造をまったく同じにすればSWELLでデフォルトで使用している「関連記事」と同じ見た目になる
SWELLで設定した内容が今回作成する「関連記事」の見た目にも反映されるようになる

ここで言っている構造とは、HTMLタグだけでなく、classや属性などすべてを含めたものを指しています。
実際のSWELLデフォルトの関連記事のHTML構造はGoogle chromeの検証ツールで確認できます。

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】

デフォルトの「関連記事」の構造を引用して組み立てたのが以下のソースコードです。

デフォルトの「関連記事」の構造を引用して組み立てたソースコード

function create_related_post() {
  // サムネイル（サムネイルの有無によって表示する画像をサムネイル or NO IMAGE画像を設定）
  $thumb_url = has_post_thumbnail() 
                  ? get_the_post_thumbnail_url(get_the_ID(), 'medium') 
                  : 'https://サイトドメイン（例：kekenta-it-blog.com）/wp-content/themes/swell/assets/img/no_img.png';
                     // ↑このURL＝NO IMAGE画像は任意のものでOK
  $permalink = get_the_permalink();   // 記事リンク
  $title     = get_the_title();       // タイトル
  $date      = get_the_date('Y-m-d'); // 公開日

  // 関連記事のHTML
  $html  = <<<CURRENT_POST
    <li class="p-postList__item">
      <a href="{$permalink}" class="p-postList__link">
        <div class="p-postList__thumb c-postThumb">
          <figure class="c-postThumb__figure">
            <img width="300" height="169" src="{$thumb_url}" alt="{$title}" class="c-postThumb__img u-obf-cover">
          </figure>
        </div>
        <div class="p-postList__body">
          <div class="p-postList__title">{$title}</div>
          <div class="p-postList__meta">
            <div class="p-postList__times c-postTimes u-thin">
              <time class="c-postTimes__posted icon-posted" datetime="{$date}" aria-label="公開日">{$date}</time>
            </div>
          </div>
        </div>
        </a>
    </li>
    CURRENT_POST;

  return $html;
}

３～９行目では記事ひとつひとつのアイキャッチ画像や個別ページへのリンク、タイトル、日付を取得しています。

ちなみに以下の部分で設定しているURLは「アイキャッチ画像が未設定だった場合に出力される画像のURL」です。

アイキャッチ画像が未設定だった場合に出力される画像のURL

$thumb_url = has_post_thumbnail() 
                  ? get_the_post_thumbnail_url(get_the_ID(), 'medium') 
                  : 'https://サイトドメイン（例：kekenta-it-blog.com）/wp-content/themes/swell/assets/img/no_img.png';
                     // ↑このURL＝NO IMAGE画像は任意のものでOK

上記のソースコードではSWELLでデフォルトで用意されているno_img.pngを指定しています。

そして以下の部分に各情報を当て込み、このあと改めてご紹介するループ処理で記事ひとつひとつが正しく出力されるように構造を整えています。

HTML内に取得済みの各情報を当て込んでいる

// 関連記事のHTML
$html  = <<<CURRENT_POST
  <li class="p-postList__item">
    <a href="{$permalink}" class="p-postList__link">
      <div class="p-postList__thumb c-postThumb">
        <figure class="c-postThumb__figure">
          <img width="300" height="169" src="{$thumb_url}" alt="{$title}" class="c-postThumb__img u-obf-cover">
        </figure>
      </div>
      <div class="p-postList__body">
        <div class="p-postList__title">{$title}</div>
        <div class="p-postList__meta">
          <div class="p-postList__times c-postTimes u-thin">
            <time class="c-postTimes__posted icon-posted" datetime="{$date}" aria-label="公開日">{$date}</time>
          </div>
        </div>
      </div>
      </a>
  </li>
  CURRENT_POST;

②「WP_Queryで取得した関連記事をループで取得する処理」をショートコードに登録

２つ目にご紹介したソースコードでは

まずWP_Queryで現在表示中の投稿の「関連記事」（ここでは同じカテゴリーを８記事）を取得し
それを「①記事ごとの出力用HTML」でご紹介した処理を用いてループで出力しています

function create_related_post_list() {
  $html  = '<section class="l-articleBottom__section -related">';
  $html .= '<h2 class="l-articleBottom__title c-secTitle">関連記事</h2>';
  $html .= '<ul class="p-postList p-relatedPosts -type-card">';

  // 関連記事の呼び出し
  $args = array(
    'post_type'       => 'post',                      // 「投稿」の記事を取得
    'category_name'   => get_the_category()[0]->slug, // 表示中の記事のカテゴリーを指定
    "post__not_in"    => [get_the_ID()],              // 表示中の記事は「関連記事」に含めない
    'posts_per_page'  => 8,                           // 8件の記事を取得する（※調整可能）
  );
  $the_query = new WP_Query( $args );

  // ここからループを回している
  if ( $the_query->have_posts() ) :  
    while ( $the_query->have_posts() ) : $the_query->the_post();

      // 関連記事をひとつずつ取得
      $html .= create_related_post();
    
    endwhile;
  endif;
  wp_reset_postdata();
  // ループ処理ここまで

  $html .= '</ul></section>';

  echo $html;
}
add_shortcode('my_short_create_related_post_list', 'create_related_post_list');

ここで登場しているHTML構造もSWELLのデフォルトの「関連記事」を引用したものとなっています。

ケケンタ

最終行のadd_shortcodeで上記の処理をショートコード名「my_short_create_related_post_list」として登録をしています。

以上で任意の場所に「関連記事」を出力するショートコードの用意ができました。

あとはこれを好きな場所（例えばウィジェットの「記事下部」）に貼り付ければ、「関連記事」が出力されます。

使用例