サイドバーにきれいにタグを表示する方法(simplicity2)

ワードプレス(WordPress)でブログを運営していて思うのが、タグを適切に表示させて閲覧されるかたの利便性を向上させたい、というものです。その方法を簡単にまとめているサイトがあまりありませんでしたので、その方法をまとめました。ここでは、タグを表示させる方法も含めて紹介します。また、SEOの対策や前後のPV数も示しています。

※12/2に施策前後のタグの表示回数を解析(=効果の検証)しています。方法だけではなく、効果も検証するブログは見たことがありません。その意味で、このページは重要でしょう。

完成系の復習

まずは、私がどのようなことを目指しているのかを簡単に示します。

写真1. パソコン画面での表示

パソコン画面で弊サイトを表示させた場合、サイドバー(弊サイトではメイン画面の右側)にタグ一覧が表示され(写真1)、そのタグをクリックすると、関係あるページ一覧が表示されるシステムです。

写真2. モバイル画面での表示

モバイルでも基本的には同じですが、ページ下にこのようなタグが表示されても見ない人が多いでしょうから、常にページ下にメニューバーが表示されており、その右をクリックするとこのようなサイドバーが表示されるようになっています(写真2)。

※常にメニューバーを表示させるようにする方法はグローバルナビゲーションを常に表示する方法【simplicity2】で紹介しています。

このように設定する方法をまとめましょう、というのが本記事の主眼です。

今回の方法のまとめ

先に方法のまとめを簡単に示します。これだけでは意味がわからなければ、下の項目をお読みください。詳しく記しています。

1) タグをある程度整理する：100種類は論外、私は39種類まで整理しました。
2) ウィジェットの追加でタグクラウドを追加する
3) 2) を美しく表示するために、CSSファイルとテーマファイルのそれぞれ末尾にコードを追加する

復習．タグとカテゴリーの意味

さて、もう1度「タグ」と「カテゴリー」の意味を復習しましょう。これについては、多くの議論があると思いますが、私は以下のように考えています。

カテゴリ：一連の記事について分類されたもの、親子の分類も可能
タグ：特定のキーワードをまとめたもの

例えば、私は旅行記はシリーズものと考え、カテゴリ分けをしています。また、旅行も複数回実施していますので、その中に複数の旅行があります。例えば、「旅行記」という大分類に対して「18年GW中欧鉄道旅行記」というものです。このようにカテゴリーを分類しています。

また、私の記事では地下鉄を扱ったものが多くあります。混雑調査や旅行記、そしてダイヤ解析などです。地下鉄全体に興味ある人は、わざわざ別のカテゴリーに移動せずに地下鉄関連の記事を集めたいことでしょう。このような人のために、別の分類が必要です。この分類として「タグ」があります。

乱暴な言葉でまとめると、カテゴリーは主流となる分類、タグは横のつながりを持たせるための分類ということができます。弊サイトではカテゴリを常に表示できるような仕組みは整っています。今度はタグを常に表示させる仕組みを作ろうというものです。

実際にタグを表示させるようにする

準備：タグを整理する

私はこれまでタグを好き放題つけてきました。その種類は100を超えることでしょう。これでは、1タグ1記事でタグを付ける意味はありません(1つのタグで2つ以上の記事が該当しないと、読者さまには親切ではないでしょう)。そこで、私はタグを整理しました。以下の要領です(鉄道に興味ない人はわからないかもしれません…)。

常磐線、東海道線、山手線など→JR東日本(路線ごとではなく鉄道会社ごとにまとめました)
ダイヤ改正、ダイヤ解析→ダイヤ(似た言葉のタグについてはまとめました)

このようにタグを整理した結果、タグは39種類まで集約できました。それでも、ポーランドや相鉄などほとんど記事のないタグがあることは確かです…。また、タグはカテゴリとは異なるワードだけを選出しています。ただし、アクセスの多い「混雑調査」については、あえてそのタグをつけています。

タグをメニューに表示させる方法

このような下ごしらえを終えたら、タグをメニューに表示させます。私はsimplicity2というテーマを導入していますが、他のテーマでも大きな差はないことでしょう。以下に詳細な手順を示します。

写真3. 外観→ウィジェットを選択

WordPressの管理画面にアクセスし、そこの外観を選択し、右側に表示されるウィジェットをクリックします。

すると、利用できるウィジェットが一覧として表示されていますので、タグクラウドを選択し、追加をクリックします。追加をクリックした後に、どの領域に追加させるかの画面がありますので、そこをいじります。

写真4. ウィジェットの設定画面

ウィジェットの設定画面では大して設定する内容はありません(写真4)。内容はないよーということです。ここで、ポイントは以下の3つです。

・タイトル：どのようなタイトルにするかという設定です。弊サイトでは主に鉄道会社ごとの分類としていますので、「鉄道会社などの分類です！」という設定にしました。一般的には、「キーワード別の分類」などの文言で良いです。

・分類：私は文句なしに「タグ」としました。カテゴリー別の分類は別の設定で実施していますので、今回はやる必要はありません。

・サイドバーウィジェット：一番上のサイドバーウィジェットを選択しました。この右側に数字が書いていますが、これはサイドバーの上から何番目に表示させるか、というものです。私は上のほうに表示させたかったので、3としました。

これでサイドバーにタグの一覧は表示されますが、多くの記事があるタグと少しの記事しかないタグでは文字サイズが異なり、あまり美しくありませんでした。ただし、このような見た目を無視しても良いと割り切れば、ここで終了です。

パソコンでの見た目を改善する

次に、コードソースをいじることで、フォントサイズを統一します。

スタイルシートCSSを編集することで対応可能です。CSSとは「デザインをこのようにしましょう」というおまじないを命令するための文です(と私は理解しています)。

写真5. CSSを呼び出す画面

CSSをいじるためのソースコードを呼び出します。具体的には、WordPressの管理画面から外観→テーマの編集を選択します。simplicity2の場合は、テーマの編集をクリックするとそのままCSSの編集画面にアクセスできます。

写真6. CSSファイルを上書き内容

上記の内容をCSSファイルに上書きします。コピペしたい人のために文字列も示します。

1. /*タグクラウドのデザイン*/
2. .tagcloud a {
3. font-size: 15px !important;
4. line-height: 1;
5. text-decoration: none;
6. transition: 0.8s ;
7. }
8. .tagcloud a:hover {
9. background: #dcdddd;
10. color: #fbfaf5;
11. }
12. /*
13. これでカスタマイズ終了*/

これでパソコンで表示を確認すると、ばっちりです。でも…。

モバイルの表示も反映させる

上機嫌になった私は「モバイルも美しい表示になっているだろう」と期待してモバイルも同様に表示を確認しました。すると、全く反映されていませんでした。諸先輩方の記述を流し読みすると、別のファイルもいじらないといけないようです。その方法も示します。

写真7. テーマのための関数をいじる

さきほどいじったファイルのすぐ下に「テーマのための関数」という項目があります(右側をたどってみましょう)。ここをクリックして、おまじないを追加します(写真7)。このおまじないではフォントサイズの最大値と最小値を同じにしているので、美しい表示が実現できます。

1. //タグクラウドのカスタマイズ
2. function tag_cloud_customize($args) {
3.  $myargs = array(
4.  'smallest' => 14, //最小フォントサイズ
5.  'largest' => 14, //最大フォントサイズ
6.  'unit' => 'px', //フォントサイズ単位
7.  );
8.  $args = wp_parse_args($args, $myargs);
9.  return $args;
10. }
11. add_filter('widget_tag_cloud_args', 'tag_cloud_customize');

このように設定を変更することで、弊サイトは少しだけ読者に優しいブログになりました(よね？)。

効果の確認

このようなレイアウトを変更してどの程度活用度合いが上がったのでしょうか。私は施策の前後での効果を判定するのに、施策実施前の28日と施策実施後の28日で探ることにしています。月単位だと30日だったり31日だったりで絶対数が異なります。また、30日だと曜日の配列で、曜日の影響が大きい場合には、曜日の影響が発生してしまいます。そのため、あえて30日ではなく、28日にしています。

変更前：タグの表示数168(6.0回/日)
変更後：タグの表示数317(11.3回/日)

施策実施前後で1.89倍になっています。読者さまにタグがよく活用されるようになったのです。この施策が大変意味あったのです。