タグクラウド作成とタグクラウドページ作成

標準のタグクラウドウィジェットをもっと見やすくキレイにしたい!

ということで、タグクラウドを改修しました。

最初はプラグインも検討したのですが、プラグインを使わずにできる方法を見つけたのでそちらを使わせていただくことにしました。

表示箇所はサイドバーを考えていたのですが、タグの数がかなり多く、サイドバーに表示するのがかなり鬱陶しかったので、サイドバーでは表示する数を限定し、すべてのタグは固定ページに出力しようと考えました。

(固定ページ作成の際に起きた不思議な現象はこちら…)

そこで上記サイトを参考にして、数を指定して出力するようにしました。

タグの利用数に応じて見た目を変化…というのは今回使用してないのですが、今後やりたくなるかもなのでコメントでそのまま残しています。

$count が何も指定されていない場合はすべてのタグが出力されます。

親テーマフォルダから sidebar.php を子テーマの方にコピーしてきて、以下のように編集。

サイドバーに設けられていた追従領域はタグクラウドだけのエリアにし、タグクラウドの固定ページ以外で表示させるようにしました。(なので管理画面で追従領域にウィジェットを追加しても反映されない状態)

ホントなら自作でウィジェット作るのが正解なのでしょうが今回は直接 sidebar.php を編集しちゃいました。とりあえずこれで。。

サイドバーには30個のタグを表示、そして固定ページはタグクラウド用のテンプレートを作成し、表示する箇所に以下を追加。

$count が何も指定されていないのですべてのタグが出力されます。

デザインは、以前からサイトに付箋的なものを入れたいなぁと思っていたので今回それをやることにしました。

参考にさせていただいたサイトはこちら。

付箋紙デザインはcss3だけで表現 昔話をすれば、インターネット黎明期のころ私は角丸の枠を作りたくて、一生懸命にTableタグと角丸の小さなGif画像を駆使してそれを実現していました。「角が丸いボックスが作れる」それだけでちょっとしたものを作った気分でした・・・ しかしHTMLが5まで進化し、CSSが登場したと思ったら...

影やらなんやら微調整してこんな感じです。

背景が方眼紙なのでなんだかしっくり来る感じがします!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク