XHTMLベースの既存のWordPressのテーマファイルをHTML5にするチュートリアル

Post on:2011年10月11日

はじめに

はじめに、なぜHTML5を使うのかを理解する必要があります。私が考えるHTML5を使う大きな理由は、HTML5がセマンティックなマークアップだからです。
HTML5ではheader, footer, nav, section, articleなどを正確に使用する必要があります。

ここでは、XHTMLベースの既存のWordPressのテーマファイルの中でメインとなる、header, index, single, footerをHTML5にしてみます。

header.phpをHTML5に変更

header.php: XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- Header Container -->
<div class="header">
    <div class="container_12">
        <h1 class="grid_6"><a href="<?php bloginfo('url');?>">Paulund</a></h1>
        <div class="grid_6 header_nav">
            <ul>
                <li><a href="<?php bloginfo('url');?>/contactform">Contact</a></li>
                <li><a href="<?php bloginfo('url');?>/playground">Playground</a></li>
                <li><a href="<?php bloginfo('url');?>">Home</a></li>
 
            </ul>
        </div>
    </div>
</div>
<!-- End Header Container -->
 
<!-- Navigation Bar -->
<div class="nav">
    <div class="container_12">
        <ul class="grid_12 nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</div>
<!-- Navigation Bar -->
<div class="container_12">

header.php: HTML5

<!doctype html>
<html>
<head>
</head>
<body>
<!-- Header Container -->
<header>
    <div class="container_12">
        <h1 class="grid_6"><a href="<?php bloginfo('url');?>">Paulund</a></h1>
        <section class="grid_6">
            <ul>
                <li><a href="<?php bloginfo('url');?>/contactform">Contact</a></li>
                <li><a href="<?php bloginfo('url');?>/playground">Playground</a></li>
                <li><a href="<?php bloginfo('url');?>">Home</a></li>
            </ul>
        </section>
    </div>
</header>
<!-- End Header Container -->
 
<!-- Navigation Bar -->
<nav>
    <div class="container_12">
        <ul class="grid_12 nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- Navigation Bar -->
<section class="container_12">

header.php: 修正のポイント

doctypeはHTML5のシンプルなものに変更しました。
「class=header」がheaderタグ、「class=nav」がnavタグに変更しました。
メインコンテンツのタグをsectionタグで内包しました。
※sectionタグを使用するべきか、divタグを使用するかは内容によって変えてください。

index.phpをHTML5に変更

index.php: XHTML

<?php get_header(); ?>
<!-- content start -->
 
<div class="grid_8">
<div class="main">
  <?php if (have_posts()) : while (have_posts()) : the_post();
  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
 
<div class="post" id="post-<?php the_ID(); ?>">
    <div class="postPic">
        <?php
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </div>
    <div class="postContent">
        <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more">Read More</a>
    </div>
    <div class="meta">
 
    <p><?php _e("In"); ?> <?php the_category(',') ?></p>
 
    <p><?php the_tags(""); ?></p>
 
    </div>
  </div>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
 
  <?php posts_nav_link(' &#8212; ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
</div>
</div>
<?php get_footer(); ?>

index.php: HTML5

<?php get_header(); ?>
<!-- content start -->
<div class="grid_8">
<section class="main">
  <?php if (have_posts()) : while (have_posts()) : the_post();
  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
 
<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="postPic">
        <?php
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </aside>
    <section class="postContent">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more clearfix">Read More</a>
    </section>
    <section class="meta">
 
    <p><?php _e("In"); ?> <?php the_category(',') ?></p>
 
    <p><?php the_tags(""); ?></p>
 
    </section>
</article>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
 
  <?php posts_nav_link(' &#8212; ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
</section>
</div>
<?php get_footer(); ?>

index.php: 修正のポイント

index.phpが一番多く変更点があります。
「class=post」のdivタグをarticleタグに変更し、記事のタイトルにh1タグを使用します。
post内の他のdivタグはsectionタグに変更しました。

single.phpをHTML5に変更

single.php: XHTML

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="grid_8">
<div class="main">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <div class="content_box">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
        <div id="entry-content-single">
          <?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
        </div>
        <div class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?>
 
          <p><?php the_tags(""); ?></p>
        </div>
        <div class="clearfix"></div>
    </div>
 
  <!-- end post -->
</div></div>
 
<!-- end posts-wrap -->
<?php get_footer(); ?>

single.php: HTML5

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="grid_8">
<section class="main">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <article class="content_box">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
 
        <section id="entry-content-single">
          <?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
        </section>
        <section class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?>
 
          <p><?php the_tags(""); ?></p>
        </section>
        <div class="clearfix"></div>
    </article>
  <!-- end post -->
</section></div>
 
<!-- end posts-wrap -->
<?php get_footer(); ?>

single.php: 修正のポイント

主な修正はindex.phpと類似しています。
「class=content_box」のdivタグをarticleタグに変更し、ページのタイトルにh1タグを使用します。
HTML5では同じページに複数のh1要素を配置することができます。

footer.phpをHTML5に変更

footer.php: XHTML

<?php get_sidebar(); ?>
</div>
<div class="clearfix"></div>
<!-- start footer -->
<div class="footer">
<div class="container_12">
    <div class="grid_12">
            <div class="grid_6">
                <h3><a href="<?php bloginfo('url');?>/playground/">Playground</a></h3>
                <p><a href="<?php bloginfo('url');?>/playground/button_generator.html" title="CSS Button Generator">CSS Button Generator</a></p>
                <p>Easily create a CSS Button using new CSS3 features and grab the CSS code. Edit everything from the height, width, border, background and text to create your custom CSS Button.</p>
            </div>
 
            <div class="grid_4">
            <h3><a href="http://www.twitter.com/paulund_">Follow</a></h3>
            <ul>
                <li><a href="http://www.twitter.com/paulund_">Follow Me On Twitter</a></li>
                <li><a href="http://feeds.feedburner.com/Paulundcouk">Subscribe To The RSS Feed</a></li>
                <li><a href="http://feedburner.google.com/fb/a/mailverify?uri=Paulundcouk&amp;loc=en_UK">Subscribe With Email</a></li>
            </ul>
            </div>
 
    </div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

footer.php: HTML5

<?php get_sidebar(); ?>
</section>
 
<!-- start footer -->
<footer>
    <div class="container_12">
        <div class="grid_12">
                <section class="grid_6">
                    <h3><a href="<?php bloginfo('url');?>/playground/">Playground</a></h3>
                    <p><a href="<?php bloginfo('url');?>/playground/button_generator.html" title="CSS Button Generator">CSS Button Generator</a></p>
                    <p>Easily create a CSS Button using new CSS3 features and grab the CSS code. Edit everything from the height, width, border, background and text to create your custom CSS Button.</p>
                </section>
 
                <section class="grid_4">
                <h3><a href="http://www.twitter.com/paulund_">Follow</a></h3>
                <ul>
                    <li><a href="http://www.twitter.com/paulund_">Follow Me On Twitter</a></li>
                    <li><a href="http://feeds.feedburner.com/Paulundcouk">Subscribe To The RSS Feed</a></li>
                    <li><a href="http://feedburner.google.com/fb/a/mailverify?uri=Paulundcouk&amp;loc=en_UK">Subscribe With Email</a></li>
                </ul>
                </section>
 
        </div>
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

footer.php: 修正のポイント

「class=footer」をfooterタグに変更しました。
divタグで配置された各リンクを有用なものにするため、sectionタグに変更しました。

[ad#ad-2]

補足：IE6/7/8への対応

元記事のHTML5化ではIE6/7/8への対応がないので、ごく簡単に補足しておきます。

HTML5をIE/6/7/8に対応させるスクリプト

HTML5 enabling scriptの「html5.js」を使用します。

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

HTML5の新要素を非サポートブラウザにブロック要素として定義

HTML5の新要素をブロック要素で定義します。

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
display:block;
}

CSS3をIE5.5/6/7/8で対応させるスクリプト

ie7.jsの「ie9.js」を使用します。

<!--&#91;if lt IE 9&#93;>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<!&#91;endif&#93;-->

XHTMLベースの既存のWordPressのテーマファイルをHTML5にするチュートリアル

はじめに

header.phpをHTML5に変更

header.php: XHTML

header.php: HTML5

header.php: 修正のポイント

index.phpをHTML5に変更

index.php: XHTML

index.php: HTML5

index.php: 修正のポイント

single.phpをHTML5に変更

single.php: XHTML

single.php: HTML5

single.php: 修正のポイント

footer.phpをHTML5に変更

footer.php: XHTML

footer.php: HTML5

footer.php: 修正のポイント

補足：IE6/7/8への対応

HTML5をIE/6/7/8に対応させるスクリプト

HTML5の新要素を非サポートブラウザにブロック要素として定義

CSS3をIE5.5/6/7/8で対応させるスクリプト

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

XHTMLベースの既存のWordPressのテーマファイルをHTML5にするチュートリアル

はじめに

header.phpをHTML5に変更

header.php: XHTML

header.php: HTML5

header.php: 修正のポイント

index.phpをHTML5に変更

index.php: XHTML

index.php: HTML5

index.php: 修正のポイント

single.phpをHTML5に変更

single.php: XHTML

single.php: HTML5

single.php: 修正のポイント

footer.phpをHTML5に変更

footer.php: XHTML

footer.php: HTML5

footer.php: 修正のポイント

補足：IE6/7/8への対応

HTML5をIE/6/7/8に対応させるスクリプト

HTML5の新要素を非サポートブラウザにブロック要素として定義

CSS3をIE5.5/6/7/8で対応させるスクリプト

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info