標準のタグクラウドウィジェットをもっと見やすくキレイにしたい！
ということで、タグクラウドを改修しました。
最初はプラグインも検討したのですが、プラグインを使わずにできる方法を見つけたのでそちらを使わせていただくことにしました。
表示箇所はサイドバーを考えていたのですが、タグの数がかなり多く、サイドバーに表示するのがかなり鬱陶しかったので、サイドバーでは表示する数を限定し、すべてのタグは固定ページに出力しようと考えました。
（固定ページ作成の際に起きた不思議な現象はこちら…）
そこで上記サイトを参考にして、数を指定して出力するようにしました。
|
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// タグクラウド function get_my_tagcloud( $count ) { $base_url = site_url(); $tags_html .= '<ul class="my-tagcloud">'; $args = array( 'orderby' => 'count', //並び順のキー（count：タグの使用件数、name：タグ名、slug：タグスラッグ名、term_group：タームグループ名、id または 空文字：タグ ID） 'order' => 'DESC', //ソートの昇順（ASC）or降順（DESC） //'hide_empty' => true, //使用件数が 0 のタグを除くかどうか //'exclude' => '', //一覧から除くタグIDをコンマまたはスペース区切りで指定（includeが指定されている場合無視される） //'include' => '', //一覧に含めるタグIDをコンマまたはスペース区切りで指定 'number' => $count, //取得するタグの最大個数 //'offset' => '', //見つかったタームの先頭から指定の個数を読み飛ばして返す //'fields' => 'all', //戻り値に何を返すか（all：タグオブジェクトの配列、ids：タグ ID（整数）の配列、names：タグ名（文字列）の配列） //'slug' => '', //指定したスラッグに一致するタグを返す //'search' => '', //取得するタグ名に含まれる文字列（大文字／小文字を区別しない） //'name__like' => '', //取得するタグ名に含まれる文字列（大文字／小文字を区別する） //'description__like' => '', //取得するタグの「説明」に含まれる文字列（大文字／小文字を区別しない） ); $tags = get_tags( $args ); 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.'<span>('.$tag -> count.')</span></a></li>'; } $tags_html .= '</ul>'; echo $tags_html; } |
タグの利用数に応じて見た目を変化…というのは今回使用してないのですが、今後やりたくなるかもなのでコメントでそのまま残しています。
$count が何も指定されていない場合はすべてのタグが出力されます。
親テーマフォルダから sidebar.php を子テーマの方にコピーしてきて、以下のように編集。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php //if (is_active_sidebar('sidebar-scroll') && !is_mobile() ): ?> <?php if( !is_page( 'tags' ) && !is_mobile() ): ?> <!--スクロール追従領域--> <div id="sidebar-scroll"> <?php //dynamic_sidebar('sidebar-scroll');?> <aside id="tags" class="widget widget-tags"> <h3 class="widget_title sidebar_widget_title">タグクラウド</h3> <?php get_my_tagcloud( 30 ); ?> <p><a href="<?php echo site_url() ?>/tags">すべてのタグを表示</a></p> </aside> </div> <?php endif; ?> |
サイドバーに設けられていた追従領域はタグクラウドだけのエリアにし、タグクラウドの固定ページ以外で表示させるようにしました。（なので管理画面で追従領域にウィジェットを追加しても反映されない状態）
ホントなら自作でウィジェット作るのが正解なのでしょうが今回は直接 sidebar.php を編集しちゃいました。とりあえずこれで。。
サイドバーには30個のタグを表示、そして固定ページはタグクラウド用のテンプレートを作成し、表示する箇所に以下を追加。
|
1 |
<?php get_my_tagcloud(); ?> |
$count が何も指定されていないのですべてのタグが出力されます。
デザインは、以前からサイトに付箋的なものを入れたいなぁと思っていたので今回それをやることにしました。
参考にさせていただいたサイトはこちら。
影やらなんやら微調整してこんな感じです。
|
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 26 27 28 29 30 31 32 33 34 35 36 37 |
ul.my-tagcloud { position: relative; z-index: 0; padding: 0; } ul.my-tagcloud li { display: inline-block; margin: 0px 10px 12px 0; padding: 0; position: relative; /* グラデーションで折り目がついた感じに */ background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%); } ul.my-tagcloud li:after { /* ドロップシャドウを少し斜めに配置して、立体感を出す */ content: ""; display: block; position: absolute; z-index: -1; bottom: 5px; left: 3px; height: 15px; width: 93%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); transform: rotate(3deg); } ul.my-tagcloud li a { font-size: 14px; padding: 10px 14px; display: inline-block; text-decoration: none; } ul.my-tagcloud li a span { font-size: 12px; margin-left: 1px; } |
背景が方眼紙なのでなんだかしっくり来る感じがします！