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

ケケンタ — Thu, 20 Jun 2024 07:27:17 +0000

この記事ではSWELLで

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

をご紹介します。

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

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

ケケンタ

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

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点

【SWELL】タイトルとアイキャッチ画像の表示を上下逆にする方法

【SWELL】誰でも簡単！フッターのコピーライトをリンクにする方法

無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】

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

ケケンタ

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

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

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  = <<
      
        
          
            
          
        
        
          {$title}
          
            
              {$date}
            
          
        
        
    
    CURRENT_POST;

  return $html;
}

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

function create_related_post_list() {
  $html  = '';
  $html .= '関連記事';
  $html .= '';

  // 関連記事の呼び出し
  $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 .= '';

  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  = <<
      
        
          
            
          
        
        
          {$title}
          
            
              {$date}
            
          
        
        
    
    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  = <<
    
      
        
          
        
      
      
        {$title}
        
          
            {$date}
          
        
      
      
  
  CURRENT_POST;

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

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

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

function create_related_post_list() {
  $html  = '';
  $html .= '関連記事';
  $html .= '';

  // 関連記事の呼び出し
  $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 .= '';

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

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

ケケンタ

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

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

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

使用例

（例）記事下部に「関連記事」を出力するショートコードを設定

もしデフォルトの関連記事を使用している場合は表示が重複することになるため適宜非表示にしましょう。

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

「テーマファイルエディタ」の場所

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

functions.phpの場所

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

functions.phpの編集内容

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

ケケンタ

以上がSWELLで「関連記事」を任意の場所に出力する方法でした！

SWELLのデフォルト機能では関連記事は元々決められた場所にしか出力することができません。

しかし、今回ご紹介した方法を使用すれば自分が好きな場所にショートコードを設置＝「関連記事」を出力することが可能です。

オリジナリティを出したり回遊率を高めるために上手く活用していただければ何よりです！

このブログでは、他にもWordPressやWeb制作、PHPについて様々な情報を発信していますので、色々見ていただけると嬉しいです。

ケケンタ

それでは最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

SWELL記事一覧

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>

任意の場所 – ケケンタの独学ITブログ

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

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

ソースコード

関連記事

解説

① 記事ごとの出力用HTML

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

関連記事

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まとめ