WordPressの標準ウィジェットが出力するHTMLまとめ

標準ウィジェットに対応したテーマを作成するときに、いちいち確認するのが面倒なのでまとめてみた。

仕様

• バージョン4.3.2基準。
• ウィジェットの【ヘッダー】は register_sidebar 関数で任意に登録できるので除外。
• ウィジェットのコンテナーは上記同様に register_sidebar で任意のタグに変更できるが、付与されるClassを確認するために <div> タグを使った
• サンプルデータには WordPressユニットテストデータ を利用

ウィジェットHTML

アーカイブ

<div class="widget_archive">
    <ul>
        <li><a href='#'>2015年12月</a></li>
        <li><a href='#'>2015年11月</a></li>
        <li><a href='#'>2015年10月</a></li>
        <li><a href='#'>2015年9月</a></li>
        <li><a href='#'>2015年8月</a></li>
        <li><a href='#'>2015年7月</a></li>
        <li><a href='#'>2015年6月</a></li>
        <li><a href='#'>2015年5月</a></li>
        <li><a href='#'>2015年4月</a></li>
        <li><a href='#'>2015年3月</a></li>
        <li><a href='#'>2015年2月</a></li>
        <li><a href='#'>2015年1月</a></li>
    </ul>
</div>

アーカイブ（ドロップダウン）

<div class="widget_archive">
    <label class="screen-reader-text" for="archives-dropdown-xxx">アーカイブ</label>
    <select id="archives-dropdown-xxx" name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
        <option value="">月を選択</option>
        <option value='#'> 2015年12月 </option>
        <option value='#'> 2015年11月 </option>
        <option value='#'> 2015年10月 </option>
        <option value='#'> 2015年9月 </option>
        <option value='#'> 2015年8月 </option>
        <option value='#'> 2015年7月 </option>
        <option value='#'> 2015年6月 </option>
        <option value='#'> 2015年5月 </option>
        <option value='#'> 2015年4月 </option>
        <option value='#'> 2015年3月 </option>
        <option value='#'> 2015年2月 </option>
        <option value='#'> 2015年1月 </option>
    </select>
</div>

補足

id="archives-dropdown-xxx" の xxx の箇所はウィジェットIDが入る。

カテゴリー

<div class="widget_categories">
    <ul>
        <li class="cat-item cat-item-xxx"><a href="#">カテゴリー A</a> (1)</li>
        <li class="cat-item cat-item-xxx"><a href="#">カテゴリー B</a> (1)</li>
        <li class="cat-item cat-item-xxx"><a href="#">カテゴリー C</a> (1)</li>
        <li class="cat-item cat-item-xxx"><a href="#">カテゴリー 1</a> (1)
            <ul class='children'>
                <li class="cat-item cat-item-xxx"><a href="#">カテゴリー 2</a> (1)</li>
                <li class="cat-item cat-item-xxx"><a href="#">カテゴリー 3</a> (1)</li>
            </ul>
        </li>
        <li class="cat-item cat-item-xxx"><a href="#" >親カテゴリー</a> (1)
            <ul class='children'>
                <li class="cat-item cat-item-xxx"><a href="#" title="This is a description for the Child Category 01.">子カテゴリー 01</a> (1)</li>
                <li class="cat-item cat-item-xxx"><a href="#" title="This is a description for the Child Category 02.">子カテゴリー 02</a> (1)</li>
                <li class="cat-item cat-item-xxx"><a href="#" title="This is a description for the Child Category 03.">子カテゴリー 03</a> (1)
                    <ul class='children'>
                        <li class="cat-item cat-item-xxx"><a href="#" title="This is a description for the Grandchild Category.">孫カテゴリー</a> (1)</li>
                    </ul>
                </li>
                <li class="cat-item cat-item-xxx"><a href="#" title="This is a description for the Child Category 04.">子カテゴリー 04</a> (1)</li>
                <li class="cat-item cat-item-xxx"><a href="#" title="This is a description for the Child Category 05.">子カテゴリー 05</a> (1)</li>
            </ul>
        </li>
    </ul>
</div>

補足

class="cat-item cat-item-xxx" の xxx の箇所はカテゴリーIDが入る。

カテゴリー（ドロップダウン）

<div class="widget_categories">
    <label class="screen-reader-text" for="cat">カテゴリー</label>
    <select name='cat' id='cat' class='postform' >
        <option value='-1'>カテゴリーを選択</option>
        <option class="level-0" value="xxx">カテゴリー A&nbsp;&nbsp;(1)</option>
        <option class="level-0" value="xxx">カテゴリー B&nbsp;&nbsp;(1)</option>
        <option class="level-0" value="xxx">カテゴリー C&nbsp;&nbsp;(1)</option>
        <option class="level-0" value="xxx">カテゴリー 1&nbsp;&nbsp;(1)</option>
        <option class="level-1" value="xxx">&nbsp;&nbsp;&nbsp;カテゴリー 2&nbsp;&nbsp;(1)</option>
        <option class="level-1" value="xxx">&nbsp;&nbsp;&nbsp;カテゴリー 3&nbsp;&nbsp;(1)</option>
        <option class="level-0" value="xxx">親カテゴリー&nbsp;&nbsp;(1)</option>
        <option class="level-1" value="xxx">&nbsp;&nbsp;&nbsp;子カテゴリー 01&nbsp;&nbsp;(1)</option>
        <option class="level-1" value="xxx">&nbsp;&nbsp;&nbsp;子カテゴリー 02&nbsp;&nbsp;(1)</option>
        <option class="level-1" value="xxx">&nbsp;&nbsp;&nbsp;子カテゴリー 03&nbsp;&nbsp;(1)</option>
        <option class="level-2" value="xxx">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;孫カテゴリー&nbsp;&nbsp;(1)</option>
        <option class="level-1" value="xxx">&nbsp;&nbsp;&nbsp;子カテゴリー 04&nbsp;&nbsp;(1)</option>
        <option class="level-1" value="xxx">&nbsp;&nbsp;&nbsp;子カテゴリー 05&nbsp;&nbsp;(1)</option>
    </select>
</div>

補足

value="xxx" の xxx の箇所はカテゴリーIDが入る。

カスタムメニュー

<div class="widget_nav_menu">
    <div class="menu-xxx-container">
        <ul id="menu-xxx" class="menu">
            <li id="menu-item-xxx" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-xxx"><a href="#">タイプ：カスタム</a></li>
            <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-xxx"><a href="#">タイプ：投稿</a></li>
            <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">タイプ：固定ページ</a></li>
            <li id="menu-item-xxx" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-xxx"><a href="#">タイプ：カテゴリー</a></li>
            <li id="menu-item-xxx" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-xxx"><a href="#">タイプ：タグ</a></li>
            <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-xxx"><a href="#">階層メニュー</a>
                <ul class="sub-menu">
                    <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">レベル 2a</a></li>
                    <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">レベル 2b</a></li>
                    <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-xxx"><a href="#">レベル 2c</a>
                        <ul class="sub-menu">
                            <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">レベル 3a</a></li>
                            <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">レベル 3b</a></li>
                            <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">レベル 3c</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-xxx"><a href="#">レベル 2d</a>
                        <ul class="sub-menu">
                            <li id="menu-item-xxx" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-xxx"><a href="#">レベル 3e</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

補足

• class="menu-xxx-container" および id="menu-xxx" の xxx の箇所は選択されたメニュー名（日本語の場合UTF8エンコードされたもの）が入る。
• id="menu-item-xxx" の xxx はメニューアイテムIDが入る

カレンダー

<div class="widget_calendar">
    <div id="calendar_wrap">
        <table id="wp-calendar">
            <caption>2015年10月</caption>
            <thead>
                <tr>
                    <th scope="col" title="月曜日">月</th>
                    <th scope="col" title="火曜日">火</th>
                    <th scope="col" title="水曜日">水</th>
                    <th scope="col" title="木曜日">木</th>
                    <th scope="col" title="金曜日">金</th>
                    <th scope="col" title="土曜日">土</th>
                    <th scope="col" title="日曜日">日</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="3" id="prev"><a href="#">&laquo; 9月</a></td>
                    <td class="pad">&nbsp;</td>
                    <td colspan="3" id="next"><a href="#">11月 &raquo;</a></td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td colspan="3" class="pad">&nbsp;</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td id="today"><a href="#">4</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>6</td>
                    <td><a href="#">7</a></td>
                    <td><a href="#">8</a></td>
                    <td><a href="#">9</a></td>
                    <td>10</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td><a href="#">12</a></td>
                    <td>13</td>
                    <td><a href="#">14</a></td>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                    <td><a href="#">18</a></td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                    <td><a href="#">22</a></td>
                    <td><a href="#">23</a></td>
                    <td>24</td>
                    <td><a href="#">25</a></td>
                </tr>
                <tr>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                    <td><a href="#">29</a></td>
                    <td>30</td>
                    <td>31</td>
                    <td class="pad" colspan="1">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

補足

• 空のセルには class="pad" が付く

タグ

<div class="widget_tag_cloud">
    <div class="tagcloud">
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>8ビット</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>aside</a>
        <a href='#' class='tag-link-xxx' title='3件のトピック' style='font-size: 12.516129032258pt;'>Codex</a>
        <a href='#' class='tag-link-xxx' title='7件のトピック' style='font-size: 17.032258064516pt;'>css</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>FTW</a>
        <a href='#' class='tag-link-xxx' title='5件のトピック' style='font-size: 15.225806451613pt;'>html</a>
        <a href='#' class='tag-link-xxx' title='3件のトピック' style='font-size: 12.516129032258pt;'>jetpack</a>
        <a href='#' class='tag-link-xxx' title='2件のトピック' style='font-size: 10.709677419355pt;'>twitter</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>WordPress</a>
        <a href='#' class='tag-link-xxx' title='4件のトピック' style='font-size: 14.021505376344pt;'>コメント</a>
        <a href='#' class='tag-link-xxx' title='12件のトピック' style='font-size: 20.193548387097pt;'>コンテンツ</a>
        <a href='#' class='tag-link-xxx' title='6件のトピック' style='font-size: 16.279569892473pt;'>ショートコード</a>
        <a href='#' class='tag-link-xxx' title='2件のトピック' style='font-size: 10.709677419355pt;'>チャット</a>
        <a href='#' class='tag-link-xxx' title='12件のトピック' style='font-size: 20.193548387097pt;'>テンプレート</a>
        <a href='#' class='tag-link-xxx' title='6件のトピック' style='font-size: 16.279569892473pt;'>マークアップ</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>メディア</a>
        <a href='#' class='tag-link-xxx' title='16件のトピック' style='font-size: 22pt;'>投稿フォーマット</a>
        <a href='#' class='tag-link-xxx' title='2件のトピック' style='font-size: 10.709677419355pt;'>リンク</a>
        <a href='#' class='tag-link-xxx' title='4件のトピック' style='font-size: 14.021505376344pt;'>レイアウト</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>一覧</a>
        <a href='#' class='tag-link-xxx' title='3件のトピック' style='font-size: 12.516129032258pt;'>動画</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>固定</a>
        <a href='#' class='tag-link-xxx' title='4件のトピック' style='font-size: 14.021505376344pt;'>埋め込み</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>失敗</a>
        <a href='#' class='tag-link-xxx' title='2件のトピック' style='font-size: 10.709677419355pt;'>字幕</a>
        <a href='#' class='tag-link-xxx' title='2件のトピック' style='font-size: 10.709677419355pt;'>引用</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>必読</a>
        <a href='#' class='tag-link-xxx' title='1件のトピック' style='font-size: 8pt;'>愛</a>
    </div>
</div>

補足

• class='tag-link-xxx' の xxx にはタグIDが入る

固定ページ

<div class="widget_pages">
    <ul>
        <li class="page_item page-item-xxx"><a href="#">サンプルページ</a></li>
        <li class="page_item page-item-xxx"><a href="#">ブログ</a></li>
        <li class="page_item page-item-xxx"><a href="#">ページ A</a></li>
        <li class="page_item page-item-xxx"><a href="#">ページ B</a></li>
        <li class="page_item page-item-xxx page_item_has_children"><a href="#">レベル1</a>
            <ul class='children'>
                <li class="page_item page-item-xxx"><a href="#">レベル 2a</a></li>
                <li class="page_item page-item-xxx"><a href="#">レベル 2b</a></li>
                <li class="page_item page-item-xxx page_item_has_children"><a href="#">レベル2</a>
                    <ul class='children'>
                        <li class="page_item page-item-xxx page_item_has_children"><a href="#">レベル 3</a>
                            <ul class='children'>
                                <li class="page_item page-item-xxx"><a href="#">レベル 3a</a></li>
                                <li class="page_item page-item-xxx"><a href="#">レベル 3b</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="page_item page-item-xxx"><a href="#">文章例ページ</a></li>
    </ul>
</div>

補足

• class="page_item page-item-xxx" の xxx にはページIDが入る

最近のコメント

<div class="widget_recent_comments">
    <ul id="recentcomments">
        <li class="recentcomments"><a href="#">Hello world!</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>Mr WordPress</a></span> より</li>
        <li class="recentcomments"><a href="#">極端な例: コンテンツのない投稿</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>山田太郎</a></span> より</li>
        <li class="recentcomments"><a href="#">保護中: テンプレート: パスワードで保護されたページ</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>山田太郎</a></span> より</li>
        <li class="recentcomments"><a href="#">テンプレート: コメント</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>紫式部</a></span> より</li>
        <li class="recentcomments"><a href="#">テンプレート: コメント</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>紫式部</a></span> より</li>
        <li class="recentcomments"><a href="#">テンプレート: コメント</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>山田太郎</a></span> より</li>
        <li class="recentcomments"><a href="#">テンプレート: コメント</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>山田太郎</a></span> より</li>
        <li class="recentcomments"><a href="#">テンプレート: コメント</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>山田太郎</a></span> より</li>
        <li class="recentcomments"><a href="#">テンプレート: コメント</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>山田太郎</a></span> より</li>
        <li class="recentcomments"><a href="#">テンプレート: コメント</a> に <span class="comment-author-link"><a href='#' rel='external nofollow' class='url'>紫式部</a></span> より</li>
    </ul>
</div>

最近の投稿

<div class="widget_recent_entries">
    <ul>
        <li><a href="#">Hello world!</a> <span class="post-date">2015年10月4日</span></li>
        <li><a href="#">ものすごく長い日本語のタイトルが付いた記事の表示テストです。1行分しか想定されていない見出しのデザインだと文字がはみ出してしまってあら大変。複数行になっても問題ないデザインだといいですね。あと前後の記事へのリンクを出力している場合や、パンくずリストを実装している場合なども表示にズレがないか確認しておきましょう。</a> <span class="post-date">2014年1月5日</span></li>
        <li><a href="#">マークアップ: HTML タグとフォーマット</a> <span class="post-date">2013年1月11日</span></li>
        <li><a href="#">マークアップ: 画像の配置</a> <span class="post-date">2013年1月10日</span></li>
        <li><a href="#">マークアップ: テキスト配置</a> <span class="post-date">2013年1月9日</span></li>
        <li><a href="#">マークアップ: 特殊記号を含むタイトル ~`!@#$%^&#038;*()-_=+{}[]/;:'&#8221;?,.></a> <span class="post-date">2013年1月5日</span></li>
        <li><a href="#">マークアップ: マークアップ付きのタイトル</a> <span class="post-date">2013年1月5日</span></li>
        <li><a href="#">テンプレート: アイキャッチ画像 (縦)</a> <span class="post-date">2012年3月15日</span></li>
        <li><a href="#">テンプレート: アイキャッチ画像 (横)</a> <span class="post-date">2012年3月15日</span></li>
        <li><a href="#">テンプレート: More タグ</a> <span class="post-date">2012年3月15日</span> </li>
    </ul>
</div>

検索

<div class="widget_search">
    <form role="search" method="get" class="search-form" action="#">
        <label> <span class="screen-reader-text">検索:</span>
            <input type="search" class="search-field" placeholder="検索 &hellip;" value="" name="s" title="検索:" />
        </label>
        <input type="submit" class="search-submit screen-reader-text" value="検索" />
    </form>
</div>