HTMLをカスタマイズしてWordPressのテーマを作成する方法

Pocket

htmltowp
既に作られたテーマの中から選択するだけでもWordPressを使うことができますが、せっかくHTMLを書けるなら自分でテーマを作らなきゃもったいない!
自分だけのドメインを取得して、さらに自分だけのテーマを作っちゃいましょう。やり方は以下で紹介するようにものすごく簡単にできます。

さて、前回の記事ではWordPressのインストールとパーマリンクの設定までを行いました。ここではHTMLをWordPressに変換する方法を紹介していきます。

テーマを作成するまでの手順は以下の通りです。

  1. 必要なテンプレートファイルを用意
  2. HTMLを各テンプレートファイルに分解する
  3. 動的に取得するところをテンプレートタグに置き換える
  4. ウィジェットを使用できるようにカスタマイズ

ではさっそくいってみましょう。

必要なテンプレートファイルを用意

ここではサンプルとして以下のようにHTML5でサイトを想定しています。一般的なブログ形式で、トップを表示するindex.htmlと各記事を表示するblog.htmlがあります。

ではこれをテンプレートファイルに分割したいと思います。

まずは以下のファイルを作成します。

  • index.php(トップページ)
  • header.php(ヘッダー)
  • sidebar.php(サイドバー)
  • footer.php(フッター)

  • category.php(カテゴリー)
  • tag.php(タグ)
  • single.php(個別の記事を表示)
  • page.php(固定ページを表示)
  • search.php(検索結果を表示)
  • 404.php(404ページを表示)

  • style.css(cssのファイル)
  • functions.php(関数用のファイル)

以上のファイルは今回使うものなので、必ずしも全てが必要なわけではありません。また、ここでは使用していないテンプレートファイルが他にもいくつかあります。作成するサイトに合わせて必要なテンプレートファイルを用意しましょう。

CSSファイルはすでにあるものをそのまま使用するのですが、ファイルの一番上に以下のようなコメントを入れておきます。これがないとテーマとして認識されないようです。

/*   
Theme Name: テーマの名前
Theme URI: テーマのホームサイトの URI
Description: サイトの簡単な説明
Author: 作者の名前
Author URI: 作者の URI
Template: 親テーマの定義 (オプション)
Version: バージョン番号 (オプション)
.
コメント/利用許諾の記述 (あれば)
.
*/

HTMLを各テンプレートファイルに分解する

ファイルが用意できたら次は元のHTMLファイルを分割していきます。
まずはindex.htmlをindex,header,sidebar,footerの4つのファイルに分割します。

今回使用するHTMLの構造をもう一度見てみましょう。
この構造のheaderなどの部分をそのまま分割すればいいので…

のようになります。

では実際に分割してみましょう。ヘッダーに当たる部分を選択してheader.phpにコピー&ペーストします。ヘッダーはHTMLの宣言文から</header>までを入れます。

header.php

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <header>
    <h1>TitleLogo</h1>
    <nav>
    </nav>
  </header>

同様にsedebar.php、footer.phpにもコピペします。
最後に残った部分がindex.phpとなります。

次にインクルードタグを入れます。
インクルードタグとはindex.phpから他のテンプレートファイルを読み込むために入れるものです。読み込むのはヘッダー、サイドバー、フッターの3つで、以下のようになります。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

この3つのタグをindex.phpの任意の場所(分割する前にあった場所)に入れます。

index.php+インクルードタグ

<?php get_header(); ?>

<section>
  <article>〜</article>
  <article>〜</article>
</section>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

次にプラグインにヘッダーなどの位置を認識させるフックを入れておきます。
</head>の直前に<?php wp_head(); ?>
</footer>の直後に<?php wp_footer(); ?>を入れます。

<!--header.php-->
<title>タイトル</title>
<link href="css/style.css" rel="stylesheet" type="text/css">

<?php wp_head(); ?>
</head>
<body>
<div id="container">


<!--footer.php-->
</footer>
<?php wp_footer(); ?>

</body>
</html>

動的に取得するところをテンプレートタグに置き換える

基本の4つのテンプレートファイルに分割できたら次はテンプレートタグを使って、動的にデータを取得するところを置き換えていきます。変更するのはindex.phpのみなので、ここではほかの3つは忘れましょう。

ではいったい何をするかというと、「繰り返し表示する」「記事ごとにデータを取ってくる」箇所に対して、テンプレートタグというもので置き換える作業を行います。再びHTMLの構造を見てみましょう。

index.htmlは記事の一覧なので、各記事が新しい順に並んでいると思って下さい。これを見ると<article>が何度も繰り返されているのが分かります。

さきほど分割したindex.phpの方でもまだ<article>が繰り返しでてくるので、1回目だけを残してばっさり削除しループタグでかこみます。また、記事がなかった場合にそのことを伝えるテキストを入れておきます。

<?php get_header(); ?>
<section>

<!--ループここから-->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<article>
  <h1 class="postTitle">Title</h1>
  <div class="thumbnail"><img src="#" /></div>
  <div class="excerpt">text,text,text</div>
  <div class="moreLink"><a href="#">more</a></div>
</article>

<!--記事がなかった場合に表示-->
<?php endwhile; else: ?>
  <?php _e('記事が見つかりませんでした。'); ?>
<?php endif; ?>
<!--ループここまで-->

</section>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

こうすることで記事がある数だけループ内を繰り返すことができます。

次にループの中身を置き換えていきましょう、まずは<.postTitle>から。
タイトルは記事ごとにデータを取得するタグがあるのでそれを使用します。

<!--
記事へのリンクは<?php the_permalink(); ?>
記事のタイトルは<?php the_title();?>
-->

<h1 class="postTitle"><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a></h1>

次は<thumbnail>です、これも記事ごとに設定したアイキャッチ画像を表示するためのタグがあるのでそれを使用します。

<div class="thumbnail">
  <?php if(has_post_thumbnail()): ?>
    <?php the_post_thumbnail(); ?>
  <?php endif; ?>
</div>

次は記事の抜粋ですこれも同様にタグを使用して以下のようにします。

<div class="excerpt">
  <?php the_excerpt(); ?>
</div>

最後に記事へのリンクとなる<.moreLink>、ですがこれは単に記事へのリンクを入れればいいので…

<div class="moreLink">
  <a href="<?php the_permalink(); ?>">more</a>
</div>

となります。最終的にindex.phpは以下のようになっています。

<?php get_header(); ?>
<section>

<!--ループここから-->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<article>
<!--記事のタイトル-->
  <h1 class="postTitle"><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a></h1>

<!--サムネイル表示-->
  <div class="thumbnail">
    <?php if(has_post_thumbnail()): ?>
      <?php the_post_thumbnail(); ?>
    <?php endif; ?>
  </div>

<!--記事の抜粋を表示-->
  <div class="excerpt">
    <?php the_excerpt(); ?>
  </div>

<!--記事へのリンク-->
  <div class="moreLink">
    <a href="<?php the_permalink(); ?>">more</a>
  </div>
</article>

<!--記事がなかった場合に表示-->
<?php endwhile; else: ?>
  <?php _e('記事が見つかりませんでした。'); ?>
<?php endif; ?>
<!--ループここまで-->

</section>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

カテゴリーとタグページも同様に一覧を表示させたいので、index.php内をコピーして、category.phpとtag.phpにペーストしましょう。

ここまでで基本の4つのテンプレートファイル (index,header,sidebar,footer)とcategory.php、tag.phpが完成しました。続いてsingle、page、search、404.phpを作成していきます。

single.phpは個別の記事ページです、記事ページの構造は以下のようになっています。

index.phpのサムネイル〜続きへがなくなって、記事の中身だけが表示されています。index.phpをコピーして、サムネイル、抜粋、続きを削除し<.postBody>を入れます。記事の中身を表示させるタグがあるのでそれを入れて完成です。この<?php the_content(); ?>の部分に記事として投稿した内容が挿入されることになります。

<?php get_header(); ?>
<section>

<!--ループここから-->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<article>

  <h1 class="postTitle"><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a></h1>
  
  <div class="postBody">
    <?php the_content(); ?>
  </div>

</article>

<!--記事がなかった場合に表示-->
<?php endwhile; else: ?>
  <?php _e('記事が見つかりませんでした。'); ?>
<?php endif; ?>
<!--ループここまで-->

</section>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

page.phpは固定ページを表示させるテンプレートファイルです。基本的な構造は記事ページと同じで投稿の中身が違うだけなので、今作ったsingle.phpをそのままコピーすれば完成となります。

次はsearch.phpです、まずはindex.phpをコピーします。検索結果は、例えば記事のタイトルだけを表示したい場合、タイトル部分をのこしてその他(サムネイル、抜粋、続きへ)を削除します。そのあと、ループの前に検索ワードのタグを入れておきます。

<?php get_header(); ?>
<section>

<!--検索ワードの出力-->
<p class="searchTitle">検索結果:[<?php the_search_query(); ?>]</p>

<!--ループここから-->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<article>
<!--タイトルだけを表示-->
  <h1 class="postTitle"><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a></h1>

</article>

<!--記事がなかった場合に表示-->
<?php endwhile; else: ?>
  <?php _e('記事が見つかりませんでした。'); ?>
<?php endif; ?>
<!--ループここまで-->

</section>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

最後の404.phpはループや記事のコンテンツは必要ないので以下のように記述しておきます。

<?php get_header(); ?>

<!--表示したいテキストを記述-->
   <h2 class="center">Error 404 - Not Found</h2>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

これでテンプレートファイルは全てそろいました。細かいところは省いてとりあえずHTMLをWordPressに置き換えることが出来たと思います。

ウィジェットを使用できるようにカスタマイズ

最後にウィジェットを使用可能にするための設定を行います。wordpressのメニューから選択できるウィジェットを使えるようにするための設定です。
使用するテンプレートファイルはsidebar.phpとfooter.phpとfunctions.phpです。
細かくHTMLタグを設定することもできますが、ここではものすごく単純に表示させるようにします。まずはsidebar.phpの構造を見てみましょう。まだwordpressタグは何も入れていない状態です。

この3つの<.widget>にウィジェット入れたいので以下のようにタグを挿入します。

<aside>

<!--1つめのウィジェット-->
<div class="widget">
   <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar('widget1');?>
</div>
<!--2つめのウィジェット-->
<div class="widget">
   <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar('widget2');?>
</div>
<!--3つめのウィジェット-->
<div class="widget">
   <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar('widget3');?>
</div>

</aside>

これを機能させるために必要なのがfunctions.phpです。
functions.phpに以下のようなコードを入れます。

<?php 

  //サイドウィジェット
  register_sidebar(array('name'=>'widget1'));

  register_sidebar(array('name'=>'widget2'));
    
  register_sidebar(array('name'=>'widget3'));

?>

これでサイドバーのウィジェットは完了。続けてfooter.phpのフッターウィジェットの設定を行います。フッターもサイドバーと同様にコードを入れていきます。
ちなみにフッターの構造は以下のようになっています。

挿入するタグはサイドバーと同じなのでfooter.phpは以下のようになります。

<footer>

<!--1つめのウィジェット-->
<div class="leftWidget">
   <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar('widgetL');?>
</div>
<!--2つめのウィジェット-->
<div class="centerWidget">
   <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar('widgetC');?>
</div>
<!--3つめのウィジェット-->
<div class="rightWidget">
   <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar('widgetR');?>
</div>

</footer>
</body>
</html>

functions.phpも同様にコードを追加します。

<?php 

  //サイドウィジェット
  register_sidebar(array('name'=>'widget1'));

  register_sidebar(array('name'=>'widget2'));
    
  register_sidebar(array('name'=>'widget3'));

  //フッターウィジェット
  register_sidebar(array('name'=>'widgetL'));
    
  register_sidebar(array('name'=>'widgetC'));
    
  register_sidebar(array('name'=>'widgetR'));

?>

あとはwordpressメニューの「外観」→「ウィジェット」から任意の場所にウィジェットを配置するだけです。

長くなりましたが以上でHTMLからWordPressへの変換の基本的な所は完成です。ここからプラグインの追加やjQueryを使ったインタラクションの追加、SEOの設定などまだまだやることは山ほどあります。その辺りについてはぼちぼち記事を投稿していこうと思っています。
では、楽しいWordPressライフを送りましょう!