WordPressのウィジェットの使い方で標準のウィジェットの使い方を、Twenty Ten のサイドバーのカスタマイズでウィジェットの大まかなマークアップを見てみました。
今日は、一つ一つのウィジェットに当てられるクラス名を見てみたいと思います。ウィジェットごとにデザインを変えたいな〜〜、と思うときにお役立て下さい。では、行きます！
カテゴリー
カテゴリーウィジェットです。
id — categories-x
class — widget_categories
がそれぞれ割り当てられます。
カテゴリー一覧へのリンクがリスト形式で出力されます。liには、「cat-item」という共通のクラス名と、「cat-item-3」のようにカテゴリーidを含んだクラス名の２つのクラス名がつきます。
<ul> <li class="cat-item cat-item-3"><a href="" title="Category1 に含まれる投稿をすべて表示">Category1</a></li> <li class="cat-item cat-item-6"><a href="" title="Category1-1 に含まれる投稿をすべて表示">Category1-1</a> </li> </ul>
ページ
ページウィジェットです。
id — pages-x
class — widget_pages
がそれぞれ割り当てられます。
ページへのリンクがリストで出力されます。liには「page_item」という共通のクラス名と、「page-item-x」のようにページidを含んだクラス名の２つのクラス名がつきます。
子ページはクラス名「children」のついたulで入れ子になります。
<ul> <li class="page_item page-item-24"><a href="" title="page1">page1</a> <ul class='children'> <li class="page_item page-item-26"><a href="" title="page1-1">page1-1</a></li> </ul> </li> </ul>
アーカイブ
アーカイブウィジェットです。
id — archives-x
class — widget_archive
がそれぞれ割り当てられます。
アーカイブへのリンクがリストで出力されます。
<ul> <li><a href='' title='2010年12月'>2010年12月</a></li> </ul>
最近の投稿
最近の投稿ウィジェットです。
id — recent-posts-x
class — widget_recent_entries
がそれぞれ割り当てられます。
最近の投稿がリストでマークアップされてリンクとともに出力されます。
<ul> <li><a href="" title="テスト投稿1">テスト投稿1</a></li> <li><a href="" title="テスト投稿2">テスト投稿2</a></li> </ul>
最近のコメント
最近のコメントウィジェットです。
id — recent-comments-x
class — widget_recent_comments
がそれぞれ割り当てられます。
最近のコメントがリストでマークアップされてリンクとともに出力されます。ulにはid「recentcomments」が、liにはclass「recentcomments」がつくようです。idとclass名が同じですね。
<ul id="recentcomments"> <li class="recentcomments"><a href="">Hello world!</a> に <a href='' rel='external nofollow' class='url'>Mr WordPress</a> より</li> </ul>
検索
検索ウィジェットです。
id — search-x
class — widget_search
がそれぞれ割り当てられます。
また、formには「id=”searchform” 」が、入力エリアの」inputに「はid=”s”」 が、ボタンのinputには「id=”searchsubmit”」がそれぞれ割り当てられます。
テキスト
テキストウィジェットです。
id — text-x
class — widget_text
がそれぞれ割り当てられます。
テキストは「textwidget」というクラス名のついたdivで囲まれます。自動的に段落を追加にチェックをいれた場合には、「p」が追加されます。
<div class="textwidget"><p>テキスト</p></div>
カレンダー
カレンダーウィジェットです。
id — calendar-x
class — widget_calendar
がそれぞれ割り当てられます。
「calendar_wrap」というidのついたdivに囲まれた、tableでマークアップされます。tableのidは「wp-calendar」です。
メタ情報
メタ情報ウィジェットです。
id — meta-x
class — widget_meta
がそれぞれ割り当てられます。
リンク
リンクウィジェットです。
id — linkcat-x
class — widget_links
がそれぞれ割り当てられます。
リンクのリストが、リスト形式で出力されます。
<ul class='xoxo blogroll'> <li><a href="http://codex.wordpress.org/">Documentation</a></li> </ul>
タグクラウド
タグクラウドウィジェットです。
id — tag_cloud-x
class — widget_tag_cloud
がそれぞれ割り当てられます。
まとめ
はあはあ。。書き忘れないかな？？
いろいろごちゃごちゃしてるっぽいですが、基本的にウィジェット名がidに、ウィジェット名に「widget_」がついたものがクラス名になっている感じですね。
「id名-x」のxの部分はそのウィジェットを作った数分の通し番号が数字で入ります。
idやクラス名、そのウィジェットのある場所のidやクラス名をうまく組みあわせればデザインもぐっと広がるはず。
それに、ウィジェットはサイドバーばかりではなく、フッターにも入りますし、Twenty Tenに限らずにいえば、設定次第でどこにでも入れる事が出来ます。どのようなidやクラス名がつくのかをしっかり把握しておけば、いろんな事が出来そうですね。