WordPressのウィジェットに当てられるクラス名を一覧にしてみた

WordPressのウィジェットの使い方で標準のウィジェットの使い方を、Twenty Ten のサイドバーのカスタマイズでウィジェットの大まかなマークアップを見てみました。

今日は、一つ一つのウィジェットに当てられるクラス名を見てみたいと思います。ウィジェットごとにデザインを変えたいな〜〜、と思うときにお役立て下さい。では、行きます!

カテゴリー

カテゴリーウィジェットです。

id — categories-x
class —  widget_categories

がそれぞれ割り当てられます。

カテゴリー一覧へのリンクがリスト形式で出力されます。liには、「cat-item」という共通のクラス名と、「cat-item-3」のようにカテゴリーidを含んだクラス名の2つのクラス名がつきます。

<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を含んだクラス名の2つのクラス名がつきます。
子ページはクラス名「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やクラス名がつくのかをしっかり把握しておけば、いろんな事が出来そうですね。

コメントをどうぞ♪