ワードプレス twentyten



twentytenテーマのhtml class 構造




<!DOCTYPE html>
<html [language_attributes()]>
<head>
<meta charset="" />
<title> </title>
<link rel="profile" href="" />
<link rel="stylesheet" type="" media="" href="" />
<link rel="pingback" href="" />
</head>

<body [body_class()]>

<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">

<[h1|div] id="site-title">
<span>
<a href="" title="" rel="home"> </a>
</span>
</[h1|div]>

<div id="site-description"> </div>

<img src="" width="" height="" alt="" />

</div>
<!-- #branding -->

<div id="access" role="navigation">

<div class="skip-link screen-reader-text">

<a href="#content" title=""> </a>

</div>
wp_nav_menu

</div>
<!-- #access -->



</div><!-- #masthead -->


</div>
<!-- #header -->

<div id="main">


<div id="container">
<div id="content" role="main"> </div>
<!-- #content -->


</div>
<!-- #container -->

<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">

<li id="search" class="widget-container widget_search"> </li>

<li id="archives" class="widget-container">
<h3 class="widget-title"> </h3>
<ul>
<li> </li>
</ul>
</li>

<li id="meta" class="widget-container">
<h3 class="widget-title"> </h3>
<ul>

<li> </li>

</ul>
</li>

</ul>
</div>
<!-- #primary .widget-area -->

<div id="secondary" class="widget-area" role="complementary">
<ul class="xoxo">
<li> </li>
</ul>
</div>
<!-- #secondary .widget-area -->

</div><!-- #main -->

<div id="footer" role="contentinfo">
<div id="colophon">

<div id="site-info">
<a href="" title="" rel="home"> </a>
</div><!-- #site-info -->

<div id="site-generator">
<a href="" title="" rel="generator">Proudly powered by WordPress</a>
</div><!-- #site-generator -->

</div>
<!-- #colophon -->


</div>
<!-- #footer -->

</div>
<!-- #wrapper -->


</body>
</html>


インストールして使うブログに「ワードプレス」というブログがあります。

ホームページを作る場合の、ベースになったり、よく見かけます。


このワードプレスのデフォルトテーマファイルが、TwentyTenというテーマに変更になりました。(ver3.0)


これまでのデフォルトと何が違うのかを、まとめていきます。

文書型

従来は、xhtml1.0Transitionalでしたが、策定中の、html5の記述の仕方に、変更されています。

header

profileアトリビュートが、headerエレメントから、linkエレメントのrelアトリビュートに記述位置が変更になっています。



html4の記述をhtml5の記述に変更した模様
profile-uris · Microformats Wiki

body

スクリプトによる動的なクラス名の付与が行われるようになりました。


body 直下の divは、従来pegeというidが振られていましたが、wrapperというidに変更され、hfeedというクラスが追加されました。



microformatsに対応しました。


主要なコンテンツブロックに、roleアトリビュートが追加されています。


ランドマークロールタクソノミというもので、html4 html5共に、策定中のものには、含まれません。
xhtml2にroleが見られますが、個のアトリビュートは、WAI ARIAによるもののようです。


これ以外にも、コメントテンプレートに、入力必須項目には、area-checked=true などという属性が追加されていますが、これも、WAI ARIAによるものです。



WAI ARIAは、ajaxのような、非同期通信によって、部分的に更新されるライブリージョンをブラウザが検知できない。ということに手をうとうとしている風に見えます。

マイクロフォーマットに対応したことで、グリースモンキーを使った閲覧なども楽しめるようになるのかもしれないと思います。





最近は、ミニマリズムの影響をうけたシンプルなデザインを見ることが多くなった気がします。

Googleも、microdata microformatsに対応していて、おお!とも思いますが、



エントリーから、直接、レビューをmicroformatsで書けといわれても、なかなかつらいと思います。




3.0のテーマテンプレート的に、変化したところに、カテゴリベースで投稿レイアウトをコントロールしようとする考え方や、
プログラムそのものでは、カスタム投稿などが可能になってきていますが、


これらは、そういうモンを作って、使えという示唆のように感じられる今日この頃です。



9/17追記
Role Attribute 1.0

Last Call: Accessible Rich Internet Applications (WAI-ARIA)
Protocols and Formats Working Group Public Page




















TOP