Simplicityのタグクラウドのデザイン、表示数をカスタマイズしてみました

Simplicityでは、ウィジェットを使って簡単にタグクラウドを表示することができます。こんな感じです。

ただ、このデフォルト表示だと、タグの大きさがバラバラで数も多く、少し見づらい感じがしますよね。

そこで、Simplicityのタグクラウドのデザインと表示数をカスタマイズしてみました。

シンプルになって、個人的には少しは見やすくなったかなと思っています。（そうでもないですか？笑）

こんな見た目に変えたいなと思っていただいた方のために、カスタマイズ方法についてご紹介します。

コピペするだけですので、初心者の方でも簡単にできますよ。参考になれば幸いです。

そもそもタグクラウドを表示する意味ってあるの？

「そもそも、タグクラウドって表示する意味ある？」とお考えの方もいらっしゃると思いますが、このタグクラウドは表示する意味があるんです。

ユーザがサイトを訪れた時、「キーワードで検索するよりもリンクをクリックするユーザの方が多い」という調査結果があるそうです。

『ナビゲーションは検索よりも大切である』という記事で、著者のGerry McGovern氏は彼のチームが行った調査について紹介しており、「ユーザーの70%はリンクのクリックから始め、30%は検索を使用した」と述べています。

また、「検索を使うよりもリンクをクリックするほうが簡単で早いため、ユーザーはよりナビゲーションに頼っている」とも述べています。

引用 現代のWebナビゲーションにおける４つのルール

確かに、何かのサイトを訪れた時、わざわざキーワードで検索するよりもクリックして画面を遷移することの方が多いですよね。スマホだとなおさらです。

タグクラウドはクリックして画面遷移させるための一つの手段として意味があるかと思います。

Simplicityにおけるタグクラウドのカスタマイズ方法

Simplicityのタグクラウドのデザインを変更したい場合、修正するファイルは以下2種類です。

1. function.php
2. style.css

両方ともSimplicityの子テーマにあるファイルを修正してください。子テーマって何？という方はこちらの記事をご覧ください。

参考  Simplicityを使うなら子テーマをインストールしておいた方がいい

function.phpの修正内容

まずはfuncrtion.phpの修正内容です。以下のソースをコピペしてください。

//タグクラウドのデザイン変更
function tag_cloud_customize($args) {
    $myargs = array(
        'smallest' => 9, //最小フォントサイズ
        'largest' => 9,  //最大フォントサイズ
        'orderby' => 'count', //表示順(件数)
        'order'   => 'DESC', //ソート順(降順)
        'number' => 20 // 表示数
    );
    $args = wp_parse_args($args, $myargs);
    return $args;
}
add_filter('widget_tag_cloud_args', 'tag_cloud_customize');

上記のソースの中身について解説します。中身が理解できれば少し数字をいじって、自分好みに微調整できますよ。

その他に指定できるタグクラウドのパラメータは以下の記事をご覧ください。

参考  WordPressテーマのSimplicityで表示されるタグクラウドをカスタマイズしてみた

style.cssの修正内容

続いて、style.cssです。先ほどのfunction.phpと同じようにコピペしてください。

/*--------------------------------------
  タグクラウドのカスタマイズ
--------------------------------------*/
.tagcloud a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 12px;
    color: #666; /* 文字色 */
    text-decoration: none;
    border-radius: 2px; /* 角を少し丸く */
    border: 1px solid #e6e6e6; 
    background: #FFF; /* 背景色 */
}

.tagcloud a:hover {
    transition: 0.3s;
    background: #EFEFEF; /* マウスホバー時の背景色 */
}

.tagcloud a:before {
 font-family: "FontAwesome";
 content: "\f02b"; /* 絵文字のコード */
 padding-right: 4px;
}

このstyle.cssでは、タグクラウドをどのように表示するかのデザインを設定しています。

タグを意味する絵文字はAwesomeのアイコン（フォント）を利用しています。別のアイコンに変更したい場合、以下のサイトからお好きなアイコンを選んで、「/* 絵文字のコード */」と書かれた中身を変更してください。

参考  Icons|Font Awesome

なお、タグクラウドはサイドメニューに表示されるものです。ampページにはサイトメニューが表示されないため、上記ソースソースコードをamp.cssへ反映する必要はありません。

まとめ

Simplicityによるタグクラウドのカスタマイズ方法についてご紹介しました。シンプルになって、個人的には見やすくなったなと自負してます。笑

その他、目次のカスタマイズやナビバーへのアイコン表示のカスタマイズなども実施しています。参考になれば幸いです。