【WordPress】タグに関する記事の一覧を表示する方法をまとめてみた!

(この記事は2022年5月2日に投稿されました。)

WordPressではタグに関する記事の一覧を表示することができます。

タグとは記事に関連するキーワードを紐づけることができる、階層構造をもたない機能であり、記事につけることでカテゴリー関係なく設定することができます。

そのためタグをうまく利用すると、サイトのコンテンツとして活用することができます。

例えば、タグがついている記事を集めて、タグのアーカイブページを表示したり、タグの関連記事として表示したりすることができます。

今回はWordPressのタグに関する記事の一覧を表示する方法についてまとめてみましたので紹介していきます。

もし、タグに関する記事の一覧を表示して何かしたい場合はこちらの記事を参考にしてみてください。

この記事はこんな方におすすめ
・タグ機能の使い方がわからない人
・タグを使って記事の一覧を表示したい人




タグとは

タグとは記事に関連するキーワードを紐づけることができる、階層構造をもたない機能になります。

そのため、「記事に貼り付ける付箋のようなもの」として扱うことができ、カテゴリー関係なくユーザーが記事を探しやすくすることができます。

もし、タグについてもっと詳しく知りたい場合は下記の記事をご参考下さい。

タグに関する記事の一覧を表示する方法

タグに関する記事の一覧を表示する方法についてご紹介します。

タグに関する記事の一覧を表示するには下記の2つのパターンがあり、それぞれコードが異なります。

  1. アーカイブページで表示する場合
  2. アーカイブページ以外で表示する場合

それぞれのコードの書き方について解説していきます。

アーカイブページで表示する場合

まず、1つ目はアーカイブページで表示する場合です。

アーカイブページとは記事の一覧を表示するページとなります。

そのため、タグに関する記事の一覧をアーカイブページで表示するには下記のようなコードとなります。

まず、single_tag_title()でタグ名を表示しています。

そして、while文を使用して、記事がある場合は該当する記事を全て表示し、ない場合は「該当する記事は見つかりませんでした。」の文字を表示するようにしています。

アーカイブページ以外で表示する方法

タグに関する記事の一覧をアーカイブページ以外で表示するには下記のようなコードとなります。

まず、get_posts()を使ってどのタグに関する記事を取得するのか設定します。

そして、設定したタグにフィルターをかけてから、foreach文を使用し、該当する記事を取り出して表示しています。

タグに関する記事の一覧を様々な形式で表示してみた

タグに関する記事の一覧を様々な形式で表示してみたのでご紹介していきます。

今回の記事でご紹介する形式は下記のようになります。

  1. タグページとして表示してみた
  2. リンクカードとして表示してみた
  3. 関連記事として表示してみた
  4. カルーセルスライダーとして表示してみた

タグページとして表示してみた

まず1つ目は、タグに関する記事の一覧をタグページとして表示してみました。

タグに関する記事の一覧をアーカイブページとして表示することで、タグがついている記事をまとめたページを作成することができます。

そのため、今回は「tag.php」に下記のコードを記述していきます。

⚫︎ tag.php

⚫︎ 実行結果

個人のタグをクリックすると、個人のタグページが表示されています。

もし、テーマに「tag.php」がない場合はテーマにPHPファイルを追加する必要がありますので、わからない場合は下記の記事をご参考ください。

リンクカードとして表示してみた

2つ目は、タグに関する記事の一覧をリンクカードとして表示する場合です。

タグに関する記事一覧をリンクカードにすることで、TOPページやサイドバーに設置することができます。

そのため、下記のようなコードを「front-page.php」や「sidebar.php」で記述することで実現することができます。

今回はPz-link-cardで作成したリンクカードを、「front-page.php」に設置してみます。

⚫︎ 実行結果

WordPressでタグに関する記事をリンクカードとして表示した場合

TOPページの下に個人に関する記事がリンクカードとして表示しています。

関連記事として表示してみた

3つ目は、タグに関する記事の一覧を関連記事として表示する方法です。

タグに関する記事一覧を関連記事として表示することで、記事の一番下に表示することができます。

そのため、「related.php」や「single.php」に記述することで実現することができます。

今回は「single.php」に記述していきます。

⚫︎ 実行結果

WordPressでタグに関する記事を関連記事として表示した場合

記事の下に個人に関する記事が関連記事として表示されています。

もし、関連記事を表示する方法について詳しく知りたい場合は、下記の記事をご参考ください。

カルーセルスライダーとして表示してみた

4つ目は、タグに関する記事一覧をカルーセルスライダーとして表示する場合です。

タグに関する記事一覧をカルーセルスライダにすることで、TOPページに設置することができます。

今回は、jQueryのslick.jsを使用していきます。

そのため、「header.php」「fromt-page.php」「footer.php」に下記のコードを記述していきます。

⚫︎ header.php

⚫︎ front-page.php

⚫︎ footer.php

⚫︎ 実行結果

TOPページに個人に関する記事がカルーセルスライダーで表示されています。

もし、WordPressでslick.jsを使用する方法がわからない場合は下記の記事をご参考ください。

まとめ

⚫︎ タグとは記事に関連するキーワードを紐づけることができる、階層構造をもたない機能

⚫︎ タグに関する記事の一覧を表示するには下記の2つのパターンがあり、それぞれコードが異なる
・アーカイブページで表示する場合
・アーカイブページ以外で表示する場合

⚫︎ タグに関する記事の一覧は下記の4つの形式で表示することができる
・タグページとして表示する
・リンクカードとして表示する
・関連記事として表示する
・カルーセルスライダーとして表示する

コメントを残す

メールアドレスが公開されることはありません。