wp.vicunaのHTML5化その1:レイアウトとタグの配置


Vicunas本家でもそういうプロジェクトが立っていると思うんですけど、待ち切れず見切り発車的にwp.vicunaのHTML化をやってみました。

そこから見えることはただひとつ。

wp.vicunaのレイアウト構成はすごい!

wp.vicunaにはスキンがあって、どのスキンを使うかによって作業が異なります。ここではstyle-vega、wp.vicunaにプリインされているスキンを使ってHTML5化をしてみます。なおこのスキン以外を選んでHTML5化を行った場合、レイアウトが崩れる恐れがあります。作業するときは必ずwp.vicunaファイルをコピーしてから試してください。責任は、とれません。

wp.vicunaのレイアウト構成を知る

まずはおさらい。wp.vicunaのHTMLレイアウト構成は大まかに言って、下のような図になります(ごめんなさい図のサイドバーのIDが違いますね。正しくはdiv#utilitiesでした)。
Vicunaのレイアウト構成
トップページや各記事のページで見た目が違う(vicunaではdoubleとかsingleとかレイアウトをそう呼んでますね)のですが、こんな感じのブロックでできていて、これらのブロックをCSSで位置変更しているんです。こういう要素を「ブロック要素」っていいます。

さて早速ではあるのですが、IDやclass名を見て「ピン!」とくる人はHTML5の要素をある程度知っている方と思います。HTML5の新要素で、レイアウトに関するものといえば、

  • header・・・HTMLのヘッダー部分を示す。
  • article・・・記事部分を示す。
  • section・・・記事のセクションを示す。
  • nav・・・HTMLのページナビゲーションを示す。
  • footer・・・HTMLのフッター部分を示す。

どうですか?これらともう一度図の中のIDやclass名を見てください。HTML5の要素をどのように配置すべきか、もうわかるかと思います。
vicunaのタグ配置
wp.vicunaの要素は、すでにHTML5化を考慮して決められたIDやクラス名のつけ方ですよね。<div class=”section”>とかを見るとそう感じざるを得ないですよ。というわけでHTML5のタグの配置が決まりました。あとはそれに向けて走るだけです!

実際にテーマファイルをいじってみる

まずはこれをやらなければいけません。HTML5要素ってまだ新しいためブラウザによってはうまく表示することができません。HTML5をブラウザで認識させるために、script.jsの頭にでも下のプログラムを埋め込んでおきます。

1
2
3
4
var HOST;
var PATH;
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');for(var i=0;i<e.length;i++){document.createElement(e[i])}})()

これはarticleやsectionをブロックにするためのものです。これがないとブロックにならないため、レイアウトを構成することができません。

これができたら次はheader.php。もちろんHTML5に対応するタグへの変更を行うのですが、もうひとつ上記のJavascriptを読み込む処理を増やします。そのままの状態ですとトップページやカテゴリページではJavascriptを読んでくれないのです。そこでheader.phpの27行目の部分で下記のように変更します。

1
2
3
<?php //    if ( is_single() || is_page() ) :  // コメントアウト  ?>
    <script type="text/javascript" charset="utf-8" src="<?php echo get_vicuna_javascript_uri() ?>"></script>
<?php //    endif; // コメントアウト ?>

コメントアウトの部分は、消してしまっても問題ありません。これでどんなページでもJavascriptを読み込んでくれます。

それ以外の変更点として、1行目のXML宣言は不要、3行目のDOCTYPE宣言を簡略(HTML5)し、metaタグのcharset簡略化やHTML5に不適合な項目を削除します。<html>タグ内のxml:lang属性も不要ですので削除します。なおxmlns属性は”http://www.w3.org/1999/xhtml”とするならばそのままでもいいそうです。

本当は<link>タグのrelもHTML5に合わせて消さなければいけない部分もあるのですが、消すとSEO的にどうなのかなぁと思い、あえて残してあります。これらをまとめたソースが下記になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<?php
    if (function_exists('wpj_cut_hindrance')) {
        $lang = wpj_cut_hindrance(get_bloginfo('language'));
    } else {
        $lang = "ja";
    }
?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $lang; ?>">
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <meta name="author" content="<?php bloginfo('name'); ?>" />
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="RSS 2.0" />
    <link rel="alternate" type="application/atom+xml" href="<?php bloginfo('atom_url'); ?>" title="Atom cite contents" />
<?php   if ( !is_home() ) : ?>
    <link rel="start" href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?> Home" />
<?php   endif; ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php   if ( $description = get_bloginfo('description') ) : ?>
    <meta name="description" content="<?php bloginfo('description'); ?>" />
<?php   endif; ?>
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <script type="text/javascript" charset="utf-8" src="<?php echo get_vicuna_javascript_uri() ?>"></script>
<?php wp_head(); ?>

次にheader.php・footer.php・sidebar.php・function.phpを除くすべてのPHPファイルでタグの変更をします。エディタで文字列置換すると早いかもしれません(間違いも増えるかもですけど)。ただ、これら全部ソースを載せるとえらいことになるので、index.phpを例に挙げてタグの変更をします。

  • 5行目、<div id=”header”>を<header>へ。
  • 8行目、</div>を</header>へ。
  • 11行目、<div id=”main”>を<article>へ。
  • 19行目、<div class=”section entry” id=”・・・”>を<section id=”・・・”>へ。
  • 46行目、</div>を</section>へ。
  • 53行目、</div>を</article>へ。

まとめるとこんな感じです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php get_header(); ?>
    <title><?php bloginfo('name'); ?></title>
</head>
<body class="mainIndex double">
<header>
    <p class="siteName"><a href="<?php bloginfo('home'); ?>"><?php bloginfo('name'); ?></a></p>
    <?php vicuna_description(); ?>
</header>

<div id="content">
    <article>
        <p class="topicPath"><a href="<?php bloginfo('home'); ?>" title="<?php _e('Home', 'vicuna'); ?>"><?php _e('Home', 'vicuna'); ?></a></p>
        <h1><?php bloginfo('name'); ?></h1>
<?php
    if (have_posts()) :
        while (have_posts()) : the_post();
?>

        <section id="entry<?php the_ID(); ?>">
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <ul class="info">
                <li class="date"><?php the_time(__('Y-m-d (D)', 'vicuna')); ?></li>
                <li class="category"><?php the_category(' | ') ?></li>
                <?php if (function_exists('the_tags')) : the_tags('<li class="tags">', ' | ', '</li>'); endif; ?>
                <?php edit_post_link(__('Edit', 'vicuna'), '<li class="admin">', '</li>'); ?>
            </ul>
            <div class="textBody">
<?php the_content(__('Continue reading', 'vicuna')); ?>
            </div>
            <ul class="reaction">
<?php           $trackpingCount = get_vicuna_pings_count();
            $commentCount = (int) get_comments_number() - (int) $trackpingCount;
            if ($commentCount > 0 || 'open' == $post->comment_status) : ?>
                <li class="comment"><a href="<?php the_permalink() ?>#comments" title="<?php printf(__('Comments on %s', 'vicuna'), $title); ?>" rel="nofollow"><?php if ('open' == $post->comment_status) : _e('Comments', 'vicuna'); else : _e('Comments (Close)', 'vicuna'); endif; ?></a>: <span class="count"><?php echo $commentCount; ?></span></li>
<?php           else : ?>
                <li><?php _e('Comments (Close)', 'vicuna'); ?>: <span class="count"><?php echo $commentCount; ?></span></li>
<?php
            endif;
            if ($trackpingCount > 0 || 'open' == $post->ping_status) :
?>
                <li class="trackback"><a href="<?php the_permalink() ?>#trackback" title="<?php printf(__('Trackbacks to %s', 'vicuna'), $title); ?>" rel="nofollow"><?php if ('open' == $post->ping_status) : _e('Trackbacks', 'vicuna'); else : _e('Trackbacks (Close)', 'vicuna'); endif; ?></a>: <span class="count"><?php echo $trackpingCount; ?></span></li>
<?php           else : ?>
                <li><?php _e('Trackbacks (Close)', 'vicuna'); ?>: <span class="count"><?php echo $trackpingCount; ?></span></li>
<?php           endif ?>
            </ul>
        </section>
<?php
        endwhile;
    endif;
?>
<?php vicuna_paging_link('indent=2') ?>
        <p class="topicPath"><a href="<?php bloginfo('home'); ?>" title="<?php _e('Home', 'vicuna'); ?>"><?php _e('Home', 'vicuna'); ?></a></p>
    </article><!-- end main-->

<?php   get_sidebar(); ?>

<?php   get_footer(); ?>

次にsidebar.phpです。ここは<div id=”utilities”>の部分を<nav>に変えるだけです。1行目と70行目をそれぞれ<nav>~</nav>に変えてください。

次にfooter.phpです。ここもsidebar.phpと同様<div id=”footer”>を<footer>へ変え、そこに対応する</div>(10行目?)を</footer>に変えるだけです。

1
2
3
4
5
6
7
8
9
10
11
12
13
    <p class="return"><a href="#header"><?php _e('Return to page top'); ?></a></p>
</div><!--end content-->

<footer>
    <ul class="support">
        <li>Powered by <a href="http://wordpress.org/">WordPress <?php bloginfo('version'); ?></a></li>
        <li class="template"><a href="http://vicuna.jp/">vicuna CMS</a> - <a href="<?php vicuna_link(); ?>" title="ver.1.5.8">WordPress テーマ</a></li>
    </ul>
    <address><?php printf(__('Copyright &copy; %s All Rights Reserved.', 'vicuna'), get_bloginfo('name')); ?></address>
</footer>
<?php   wp_footer(); ?>
</body>
</html>

スタイルシートを変更する

長くなってきましたね。あと少しです。スタイルシートも項目2と同じタグを変換するだけです。具体的には下のタグ5つです。

  • div#header を header に
  • div.entry を section に
  • div#main を article に
  • div#footer を footer に
  • div#utilities を nav に

最後に(これが最後!)core.cssに下記のコードを一番上の当たり(19行目あたりかなあ)に入れておいてください。

1
2
3
4
5
6
7
header,
section,
article,
nav,
footer {
    display: block;
};

これで使う要素をブロック化します。

ここまで出来たらサーバにアップロードし、有効化する前にプレビューを見てきちんと表示ができればOKです。

がっつりファイルを触りましたが・・・大丈夫でしょうか。きちんとできたかどうかは、見た目とwp.vicunaのメタ情報にあるValid XHTMLリンクを押してみるとチェックしてくれますよ。