Simplicityでは、ウィジェットを使って簡単にタグクラウドを表示することができます。こんな感じです。
ただ、このデフォルト表示だと、タグの大きさがバラバラで数も多く、少し見づらい感じがしますよね。
そこで、Simplicityのタグクラウドのデザインと表示数をカスタマイズしてみました。
シンプルになって、個人的には少しは見やすくなったかなと思っています。（そうでもないですか？笑）
こんな見た目に変えたいなと思っていただいた方のために、カスタマイズ方法についてご紹介します。
コピペするだけですので、初心者の方でも簡単にできますよ。参考になれば幸いです。
そもそもタグクラウドを表示する意味ってあるの？
「そもそも、タグクラウドって表示する意味ある？」とお考えの方もいらっしゃると思いますが、このタグクラウドは表示する意味があるんです。
ユーザがサイトを訪れた時、「キーワードで検索するよりもリンクをクリックするユーザの方が多い」という調査結果があるそうです。
『ナビゲーションは検索よりも大切である』という記事で、著者のGerry McGovern氏は彼のチームが行った調査について紹介しており、「ユーザーの70%はリンクのクリックから始め、30%は検索を使用した」と述べています。
また、「検索を使うよりもリンクをクリックするほうが簡単で早いため、ユーザーはよりナビゲーションに頼っている」とも述べています。
確かに、何かのサイトを訪れた時、わざわざキーワードで検索するよりもクリックして画面を遷移することの方が多いですよね。スマホだとなおさらです。
タグクラウドはクリックして画面遷移させるための一つの手段として意味があるかと思います。
Simplicityにおけるタグクラウドのカスタマイズ方法
Simplicityのタグクラウドのデザインを変更したい場合、修正するファイルは以下2種類です。
- function.php
- 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');
上記のソースの中身について解説します。中身が理解できれば少し数字をいじって、自分好みに微調整できますよ。
- ‘smallest’と’largest’
フォントサイズです。デフォルトだと使用頻度の多いタグはフォントサイズが大きいですが、見た目が変なのでフォントサイズは同じサイズにしています。 - ‘orderby’と’order’
並び替えの基準を表示件数として、降順に並ぶようにしています。DESCをASCにすると、昇順に並ぶようになります。RANDとすると、ランダムに並びます。 - ‘number’
表示されるタグクラウドです。デフォルトだと45となっています。少し多いので、20ぐらいが良いかなと思います。
その他に指定できるタグクラウドのパラメータは以下の記事をご覧ください。
参考 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のアイコン（フォント）を利用しています。別のアイコンに変更したい場合、以下のサイトからお好きなアイコンを選んで、「/* 絵文字のコード */」と書かれた中身を変更してください。
なお、タグクラウドはサイドメニューに表示されるものです。ampページにはサイトメニューが表示されないため、上記ソースソースコードをamp.cssへ反映する必要はありません。
まとめ
Simplicityによるタグクラウドのカスタマイズ方法についてご紹介しました。シンプルになって、個人的には見やすくなったなと自負してます。笑
その他、目次のカスタマイズやナビバーへのアイコン表示のカスタマイズなども実施しています。参考になれば幸いです。
コメント