WordPressのテーマファイルをHTML5にするチュートリアル

Post on:2012年12月21日

チュートリアルのゴール

このチュートリアルは、XHTMLでつくられたWordPressのテーマファイルをHTML5にするものです。テーマファイルはそれぞれ違うファイルで構成されているので、ここではよくあるファイル構成を元にステップごとに解説します。
テーマファイルのリストは、下記の通りです。

header.php
index.php
sidebar.php
footer.php
single.php

HTML5のベーシックなレイアウト

チュートリアルに入る前に、基本的なHTML5のレイアウトを見てみましょう。

HTML5は、まずはDOCTYPE宣言から始めます。いくつかHTML5で新しく加わった要素があり、全体的により少ないコードで記述されているのが分かるでしょう。

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
	<title>TITLE | Slogan!</title>
</head>
<body>
	<nav role="navigation"></nav>
<!--Ending header.php-->
<!--Begin  index.php-->
	<section id="content">
		<article role="main">
			<h1>Title of the Article</h1>
			<time datetime="YYYY-MM-DD"></time>
			<p>Some lorem ispum text of your post goes here.</p>
			<p>The article's text ends.</p>
		</article>
		<aside role="sidebar">
			<h2>Some Widget in The Sidebar</h2>
		</aside>
	</section>
<!--Ending index.php-->
<!--begin  footer.php-->
	<footer role="foottext">
		<small>Some Copyright info</small>
	</footer>
</body>
</html>

HTML5の要素としては、header, footer, nav, section, articleをどこに使用すべきか知っておく必要があります。XHTMLのdivで構造化したコンテンツを各要素に照らし合わせてください。

Step 1: header.phpをHTML5化

WordPressのテーマファイルのヘッダに使用される「header.php」をHTML5にしてみましょう。

XHTML: header.php

<!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>
<title>My  Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header  -->
<div class="header">
	<div class="container">
		<h1><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
	</div><!-- End  Container -->
</div><!-- End  Header -->
<!-- Navigation Bar Starts -->
<div class="navbar">
	<div class="container">
		<ul class="grid nav_bar">
			<?php wp_list_categories('navs_li='); ?>
	     </ul>
	</div>
</div>
<!-- Navigation Bar Ends -->
<div class="container">

HTML5のセマンティックなマークアップは非常にシンプルです。各要素を理解し管理することが非常に簡単で、マークアップを減らします。

HTML5: header.php

<!doctype html>
<html>
<head>
<title>My Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
    <div class="container">
        <h1 class="grid"><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
    </div>
</header>
<!-- End Header  -->
<!-- Navigation Bar Starts-->
<nav>
    <div class="navbar">
        <ul class="grid nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- Navigation Bar Ends -->
<section class="container">

HTML5に変換したコードは、XHTMLのコードと非常に類似しています。いくつか変更のポイントを見てみましょう。

doctype

HTML5のDOCTYPEは非常にシンプルです。
header

コンテンツのヘッダにあたる箇所はheaderを使用します。
nav

XHTMLでdivを使用していたナビゲーションはnavを使用します。

メモ

若干の人々はheader内にsectionを含めます。これは多くの討論があります。個人的にはシンプルな構造を破壊するので、sectionを含めるのは反対です。もちろん、昔使ったdivを使うこともできます。

スクリプトとスタイルシート

外部スクリプトやスタイルシートを含めるのも、HTML5は非常にシンプルです。単にscript, linkタグを使用するだけです。「type="text/javascript"」「type="text/css"」は削除してください。

古いブラウザへの対応

HTML5をサポートしていないブラウザの対応は、「Modernizr」などのスクリプトを使用します。これはheader.phpに記述するのではなく、テーマファイル内のfunction.phpに加えます。

function html5_scripts()
{
	// Register the Modernizr script
	wp_register_script( 'modernizr', get_template_directory_uri() . '/js/Modernizr-1.6.min.js' );
	// Enqueue Modernizr
	wp_enqueue_script( 'modernizr' );
}
add_action( 'wp_enqueue_scripts', 'html5_scripts', 1 );

Step 2: index.phpをHTML5化

index.phpはヘッダ・フッタ・サイドバーを除いたコンテンツ部分で、トップページや各記事ページに使用されます。
まずはindex.phpの構造をシンプルにしたものから始めます。

XHTML: index.php: シンプル版

<div id="container">
<div id="content">
<div id="entries">
<div id="post">...</div>
</div><!--Ending Entries-->
<?php get_sidebar(); ?>
</div><!--Ending content-->
</div><!--Ending container-->
<?php get_footer(); ?>

構造を変えずに、HTML5にしてみましょう。

HTML5: index.php: シンプル版

<div id="container">
	<div id="content">
		<section id="entries">
			<article id="post">...</article>
		</section><!--end entries-->
		<?php get_sidebar(); ?>
	</div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

ここでのポイントはレイアウトをするために、section, article, asideの3つのHTML5の基本的なレイアウトモデリングタグを使用しています。entriesのdivはsectionに、postのdivはarticleに置き換えられています。asideは次のステップで、サイドバーで使用します。

section

ブロックを切り離すためにsectionを使用します。
article

記事の箇所に使用するセマンティックなタグです。
aside

サイドバー用のセマンティックなタグです。
パンくずやページナビゲーション

パンくずの実装はdivでよいでしょう。

ページナビゲーションはその意味を考えるとnavで実装すべきでしょう。

HTML5: index.php: コンプリート版

<section class="entries">
  <?php if (have_posts()) : while (have_posts()) : the_post();
<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="post_image">
        <?php
        if ( has_post_thumbnail() ) {
            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="post_content">
        <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 ">Read More</a>
    </section>
    <section class="meta">
    <p> <?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(' ⏼ ', __('« Newer Posts'), __('Older Posts »')); ?>
</section>

Step 3: sidebar.phpをHTML5化

sidebar.phpはページのサイドバーに使用されるファイルです。

XHTML: sidebar.php

<div id="sidebar">...</div>

たいていのテーマファイルはdivを使用しているので、asideに変更します。

HTML5: sidebar.php

<aside id="sidebar">...</aside>

Step 4: footer.phpをHTML5化

footer.phpはページのフッタに使用されるファイルです。

XHTML: footer.php

<div id="footer">
<div id="foot_widgets">...</div>
<div id="copyright">...</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

divで囲まれていたフッタのエリアをfooterに変更し、各ウィジェットをsectionで配置します。

HTML5: footer.php

<footer id="footer">
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<div id="copyright">...</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Step 5: single.phpをHTML5化

single.phpはシングルページ用のファイルです。

XHTML: single.php

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="container">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <div class="content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <div id="entry-content-single">
          <?php the_content('<p >Read More</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 of post -->
</div></div>
<?php get_footer(); ?>

single.phpは特別な変更はありません。おそらく、sectionとarticleを使うだけのテーマファイルが多いでしょう。場合によっては、timeを使うことがあるかもしれません。

HTML5: single.php

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<section class="content">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <article class="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>Read More</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>
<?php get_footer(); ?>

メモ

SEOに有利ということで、若干の人々が「<header class="entry-header">」を記事のタイトルの前に使用します。

Step 6: style.cssをHTML5化

最後のステップではstyle.cssに、古いブラウザのために後方互換のスタイルを定義します。

CSS: style.css

header, nav, section, article, aside, figure, footer { display: block; }

style.css内の一番上に記述し、HTML5の各エレメントにブロックのスタイルを定義します。

WordPressのテーマファイルをHTML5にするチュートリアル

チュートリアルのゴール

HTML5のベーシックなレイアウト

HTML5

Step 1: header.phpをHTML5化

XHTML: header.php

HTML5: header.php

メモ

スクリプトとスタイルシート

古いブラウザへの対応

Step 2: index.phpをHTML5化

XHTML: index.php: シンプル版

HTML5: index.php: シンプル版

HTML5: index.php: コンプリート版

Step 3: sidebar.phpをHTML5化

XHTML: sidebar.php

HTML5: sidebar.php

Step 4: footer.phpをHTML5化

XHTML: footer.php

HTML5: footer.php

Step 5: single.phpをHTML5化

XHTML: single.php

HTML5: single.php

メモ

Step 6: style.cssをHTML5化

CSS: style.css

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

WordPressのテーマファイルをHTML5にするチュートリアル

チュートリアルのゴール

HTML5のベーシックなレイアウト

HTML5

Step 1: header.phpをHTML5化

XHTML: header.php

HTML5: header.php

メモ

スクリプトとスタイルシート

古いブラウザへの対応

Step 2: index.phpをHTML5化

XHTML: index.php: シンプル版

HTML5: index.php: シンプル版

HTML5: index.php: コンプリート版

Step 3: sidebar.phpをHTML5化

XHTML: sidebar.php

HTML5: sidebar.php

Step 4: footer.phpをHTML5化

XHTML: footer.php

HTML5: footer.php

Step 5: single.phpをHTML5化

XHTML: single.php

HTML5: single.php

メモ

Step 6: style.cssをHTML5化

CSS: style.css

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info