Wordpressのタグクラウドが気に入らないのでベタ書きした話
2013-11-29 2017-09-13
Wordpressのタグクラウドがどうにも気に入らない。
「気に入らないなら俺色に染めるだろ。常識的に考えて。」と最初はwp_tag_cloud()を改造する気満々だったんですが、よく考えればhtml出力するだけの簡単なお仕事なので、html吐くだけの単純なプログラムをfunction.phpに追加することにしました。
※追記 function.phpに追記するよりは、本当はtagcloud.phpみたいなの作って、その中に書いてget_template_partで読み込んだ方が保守しやすいです。
自作タグクラウドのコード
function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function get_my_tagcloud() { $base_url = site_url(); $tags_html .= '<h4 class="side-tag">Tags</h4>'; // h4なりh3なりテーマにあったタグを設定する $tags_html .= '<div class="my-tagcloud"><ul>'; $tags = get_tags(); foreach($tags as $tag) { $tags_html .= '<li><a href="'.$base_url.'/tag/'.$tag->slug.'"'; /* タグの利用数に応じて、見た目を変化させたい場合は↓みたいな感じでcssの指定を変える if($tag->count > 20) { $tags_html .= ' class="tag-count-high"'; } else if ($tag->count > 10 && $tag->count <= 20) { $tags_html .= ' class="tag-count-middle"'; } else if ($tag->count > 5 && $tag->count <= 10) { $tags_html .= ' class="tag-count-low"'; } */ $tags_html .= '>'.$tag->name.'('.$tag->count.')</a></li>'; } $tags_html .= '</ul></div>'; echo $tags_html; } |
これだけ。
タグの一覧を取ってきて、リスト化して吐き出すだけの簡単なお仕事。htmlタグ部分の調整と、tagのフィルタリングはお好みで。コメントアウト部分を使えば、タグの利用回数に応じて適応するcssを変えられる。
view側での呼び出しは
|
1 |
<?php get_my_tagcloud(); ?> |
これだけ。呼べば終わり。functionに追加したget_my_tagcloud()がhtmlを生成してくれる。
で、一応cssのサンプルも乗っけときますが、色とか背景色とかボーダーとかフォントとかその辺は追加してやってください。サイトに合わせる感じで。後は流れで。このままだと驚きのダサさになるのでホント気をつけて。
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
h4 .side-tag { /* お好みで */ } .my-tagcloud ul li { padding:4px; background-color:#EEE; /* お好みで */ } .my-tagcloud ul li a{ color:#407ba2; /* お好みで */ } .tag-count-high { color:red; } .tag-count-middle { color:yellow; } .tag-count-low { color:blue; } |
また、cssは利用しているテーマによって挙動が変わるので、テーマに合わせた形での調整必須。上のcss改造して「設定しても何も変わらないんだけど！」って人は、既にidセレクタ(#sidebarとか)で設定されてしまっているはずなので、要チェック。idセレクタはclassセレクタより優先度が高い。(「.」がclassセレクタ、「#」がidセレクタ)
「デザインとか自分じゃ出来ねえよ！」って人はInfinityScopeさんの記事とか参考にすると良いよ！このサイトのタグクラウドもその記事参考にしてcssいじったよ！
あとがき
wp_tag_cloud()もヴィジェットのタグクラウドもいまいち好きになれないって人は、使ってみてください。
リストタグ(ul li)入れたかったのが作った最大の理由。タグクラウドは本質的にはリストなので、aタグの羅列は何か違う気がした。SEO的にも多少良い可能性があるかもしれない。
