カテゴリとタグで絞り込んだ記事一覧の表示方法

サイト(ブログ)を運営していると、記事がどんどんたまっていきます。その溜まった記事を読者さんにわかりやすく一覧を示すために、カテゴリによる分類とタグによる分類を併用したくなるでしょう。本記事ではその方法をまとめるとともに、表示の工夫やサイト構造についても触れています。

写真1. JR東海の車両ばかりがやってくる名古屋駅(タグの意味で記事に関係ある写真とわかります)

本記事でできること(完成形)の概要

本記事のやりかたでできることは以下の通りです。

・カテゴリかつタグの双方が条件を満たす記事一覧を示すことができる

・特定のタグに対し、2つ以上のカテゴリに属する記事一覧を示すこともできる(図1)

・上記の記事一覧を表示する際に、隠すこともできる(図2、展開状態は図3)

図1. 本記事でやりたいことの図式(水色の領域の記事のみを一覧表示)

やりかたの概要

以下で詳細なやりかたを記していますが、基本的には、以下の手順で進めることが可能です。

1) カテゴリとタグの双方の検索を行うために、List category postsプラグインを導入
2) うまい具合に両方の要素を記述
3) スポイラー機能で当該部分を隠す(特別に追加CSSを記述)

復習：カテゴリとタグの使い分け

まず、カテゴリとタグの使い分けについておさらいします。

・カテゴリ：縦の分類で、親子関係も設定できる
・タグ：横の分類で、親子関係は設定できない

カテゴリはいわば「縦の分類」で親子関係のある分類です。一方、タグは「横の分類」で親子関係のない分類です。一般的にカテゴリは分類が少ないもの向け、タグは分類の多いもの向けとされます。また、タグは排他的なもので設定すると良いでしょう。

ここまでは抽象的な概念で説明いたしましたが、弊サイトで展開しているカテゴリとタグの使い分けを紹介します(図2)。

図2. 弊サイトにおけるカテゴリとタグの使い分け

弊サイトは鉄道ファンによる鉄道ファンのためのサイトです。鉄道ファンというのは、大きく分けて2種類に分類されます。1つが特定の分野に興味を示す人で、もう1つが特定の会社に興味を示す人です。前者の例は会社に限らず「車両動向」に興味を示す人です。後者が分野に限定せず「東急電鉄」に興味を示す人です。実際にはこの2つが混合した感じの人が主流でしょう。

そこで、弊サイトでは、趣味の分野をカテゴリに設定、会社ごとの分類をタグで分類いたしました。そして、カテゴリについては相当工夫して分類、整理しました。

でも、会社ごとに興味を示す人に対するケアは？そう気づき、会社ごとに記事をまとめることにしたのです。

弊サイトでの事例を述べましたが、東京23区のグルメのサイトを作成するとしたら、イタリアンという親カテゴリ、パスタやピザという子カテゴリ、新宿区や渋谷区というタグになるのでしょう。そして、新宿区の飲食店一覧というまとめ記事を作成する中で、「新宿区のパスタ屋」の記事一覧を作成するという流れです。

List category postsプラグインの導入と活用

会社ごとに記事をまとめる際に、どうせならカテゴリごとに記事一覧を提示することを考えました。でも、どうやるの？まさか、手入力？金輪際、記事の追加や修正がないのであれば、それも良いでしょう。しかし、記事の追加を一切考慮しないのはどうかしています。そこで、自動で表示する方法が必要です。

前準備：プラグインの導入と基本設定

そのような要望に応えるのがList category postsプラグインです。List category postsプラグインは複数のカテゴリやタグを指定することが可能です。

List category postsプラグインは一般的なプラグインの追加方法と同じです。WordPressの管理画面でプラグインをインストールし、次に有効化します。

有効化したら、初期設定を変更します。私は以下の通りに設定しました(図5)。

図5. List category postsプラグインの初期設定画面

ここで、重要なのは2点です。1点目は、記事数を-1にすることです。記事数を-1にすると、全ての記事が表示されます。2点目は、ページ送り機能をfalseにすることです。個人的な趣味ですが、記事一覧をページ分割するのは不親切だと思います。そのため、falseを選択させていただきました。

本番：プラグインの活用

写真2. JR東日本の東海道線は混雑する(2019年に朝ラッシュ時の様子を観察、品川)

プラグインを導入したら、当該記事にショートコードを記します。ショートコードとは、[]で文字列を囲うと特別な処理が実行されるおまじないと考えましょう。以下、いくつか事例を紹介しますが、コードの()は[]に変換してご使用ください。

基本的な使用方法：カテゴリとタグの併用

catlist name=”○○”でカテゴリを指定、 tags=“××”でタグを指定するのが基本です。併用(=双方の条件を満たした記事を表示)する場合は並べて半角ぶん開けます。

例1) カテゴリが「電車の混雑」、タグが「JR東日本」の場合

1. (catlist name=”電車の混雑” tags=“JR東日本”)

この場合は、カテゴリが「電車の混雑」かつタグが「JR東日本」の記事だけが表示されます。タグがJR東日本の記事であっても、(電車の混雑以外のカテゴリの)旅行記の記事は表示されませんし、電車の混雑のカテゴリであってもタグが「東京メトロ」の記事は表示されません。

応用編1：カテゴリを複数指定する場合

では、カテゴリが複数の場合はどうしましょうか。この場合は、catlist name=”○○”,”○○”でカテゴリを複数指定します。

例2) カテゴリが「旅行記」と「乗り鉄」、タグが「JR東日本」の場合

1. (catlist name=”旅行記”,”乗り鉄” tags=“JR東日本”)

この場合は、「カテゴリ：旅行記、タグ：JR東日本」の記事一覧と「カテゴリ：乗り鉄、タグ：JR東日本」の記事一覧の双方を表示されます。カテゴリは「かつ」ではなく「または」という意味です。

応用編2：タグで一部を除きたい

では、除きたいタグがある場合はどうすれば良いのでしょうか。Xのタグがある記事からAのタグのある記事とBのタグがある記事を除きたい場合です。このような場合はexclude_tags= ”A,B”と記します。

例3) 「地下鉄」とタグがついた記事から「東京メトロ」のタグがついた記事と「東京都交通局」のタグがついた記事を除きたい場合

1. (catlist tags=”地下鉄” exclude_tags= ”東京メトロ,東京都交通局”)

この場合、「タグ：地下鉄」の記事一覧のうち、「タグ：東京都交通局」と「タグ：東京メトロ」のいずれかの記事一覧を表示しません。いいかえると、東京以外の地下鉄の記事一覧を表示している状態です。

ここで、除きたいタグそれぞれを”で囲うのではないことに注意しましょう。

例3の誤り例

1. (catlist tags=”地下鉄” exclude_tags= ”東京メトロ”,”東京都交通局”)

このようにそれぞれのタグを”で囲わないように注意です。

必要に応じて展開するためのおまじない

ここまでの操作で、任意の記事にショートコードを書きこんで、ピンポイントの検索条件の記事一覧を示すことができました。しかし、当該記事が多くあると、見るほうは大変です。例えば、弊サイトではカテゴリが「電車の混雑」、タグが「JR東日本」の記事は54あります。54の記事一覧が表示されていると、見るほうはウザいでしょう。

それを改善する良い方策はないのでしょうか。その解決法は、デフォルトでは記事を隠した状態にしておき、必要に応じて記事一覧を展開してもらうというものです。これを導入しているサイトさんも多いでしょうから、きっと技術的には不具合はないはずです。

では、どのようにすれば良いのでしょうか。Shortcodes Ultimateプラグインを導入しても同様の機能は実現できますが、しばしば動作不良になってしまいます。そのため、CSSとHTLMの出番です。なお、この方法はインターネットで検索し、それをカスタマイズしています。【コピペだけ！】アコーディオンボタンをCSSとHTMLだけで実装する方法！に感謝申し上げます。

※このサイトさんは自己啓発的な内容があります。その点については企業系のサイトさんの「宣伝」と同様なものと認識すれば良いでしょう。

段階1. 追加CSSで以下のCSSを記述

ここでの考えかたは、最初にショートコード用のCSSを記述し、そのショートコードを任意の場所に貼付するというものです。

教えてくれたサイトさんのボタンの色はオレンジ色でした。オレンジ色では「鉄道ラボ」のカラースキームには合致しない(周囲から浮く)と判断しました。そのため、ボタンの色は濃緑色に変更しています。

これで、準備は完了です。

貼りたい場所にHTLMを記述する

次に、貼りたい場所に適切なHTLMを記述します。以下に、そのショートコードを記すことにします。

1. <div class="ac-box">
2. <input id="ac-1" name="accordion-1" type="checkbox" />
3. <label for="ac-1">○○に関する記事一覧</label>
4. <div class="ac-small">記事一覧のショートコード</div></div>

この中身については通常は文章などを入れますが、別に文章に限定する必要もありません。中身にショートコードを挿入しても構いません。

つまり、カテゴリ「電車の混雑」、タグ「JR東日本」の記事一覧の場合は、以下のコードです。

例1) カテゴリが「電車の混雑」、タグが「JR東日本」の場合

1. <div class="ac-box">
2. <input id="ac-1" name="accordion-1" type="checkbox" />
3. <label for="ac-1">JR東日本の電車の混雑に関する記事一覧</label>
4. <div class="ac-small">(catlist name=”電車の混雑” tags=“JR東日本”)</div></div>

ここで、注意が必要なのは、同じ記事にショートコードを複数導入する際には、-1という数字を-2、-3に書きかえる必要があるということです。例えば、同じ記事に「電車の混雑」の他に「鉄道ダイヤ」という内容も含めたい場合、以下のように新しく設定する必要があります。

1. <div class="ac-box">
2. <input id="ac-2" name="accordion-2" type="checkbox" />
3. <label for="ac-2">JR東日本の鉄道ダイヤに関する記事一覧</label>
4. <div class="ac-small">(catlist name=”鉄道ダイヤ” tags=“JR東日本”)</div></div>

補足：有機的な結合

ここまでで、カテゴリとタグの双方を絞った記事一覧の表示方法を紹介しました(もちろん、私の知らない別の方法もあるでしょう)。では、カテゴリとタグの双方を絞った記事一覧の活用方法はないのでしょうか。私なりの活用法を示します。

私は新たに「鉄道会社ごとの記事まとめ」と固定ページを新たに作成しました。そこに、各鉄道会社ごとのイメージ図を貼り付けています。この写真はword上で文字を上から書きこんだだけですので、高価なソフトウェアを導入する必要もありません。なお、このあたりの工夫については、トップページリニューアル(固定ページ化)とその効果(simplicity2)に記しています。

図6. タグを活用した階層分類構造

このようにして、従来のカテゴリ別の階層分類構造だけではなく、タグ別の階層分類構造も構築いたしました。こうすることで、横の分類についてもきちんと整理できました。

また、トップページから鉄道会社ごとの記事まとめへの動線も確保しています。この写真は25者の写真を選択し、word上で組み合わせました。私の技術ではすべての写真を隙間なく並べることは不可能でした。そのため、隙間の白色が目立つ始末でした。しょうがないので、写真の背景に濃灰色の枠を用意し、写真と写真の隙間が目立たないようにしました。そう、わからなければOKなのです！

写真2. 25者の写真の集合体(全部わかったらすごいと思うよ！)

他のサイトと差別化するために

他のサイトさんと差別化するためには、他でやっていない取り組みが重要です。普通、カテゴリ別の記事一覧を作成することもしません。ましてやタグで階層分類構造をつくることなどしないでしょう。普通の人がやらない内容であれば、他のサイトさんと差別化することに成功します。

このような取り組みは大物ブロガーさんでもやっている人は少ないでしょう。では、他の人たちがこの記事を読んだら？大丈夫です。こんなマイナーなサイトのこの記事がそう多くの人に読まれません。そのため、この記事を読んだあなたは、他のサイトさんと差をつけることに成功します。やったね！