WordPressのテーマ作成（１）：ファイル構成

WordPressのテーマを自分で作成する方法を検索すると少ないですね…。

PHPが混ざってるから、テーマを制作するのが難しいという人もいるようで、実はそういうわけでもなく、MTよりも作りやすいような気がします。

ということで、テーマを作成する手順を段階的に追って書いていこうかなと思いました。

テーマのファイル構成

まずは、WordPressをインストールして、デフォルトで入っているテーマを例に、構成から説明して行きたいと思います。

defaultテーマのファイル構成

「theme」→「default」のファイル一覧（名前の順）。

404.php
archive.php
archives.php
attachment.php
comments.php
comments-paged.php
comments-popup.php
footer.php
functions.php
guestbook.php
header.php
index.php
links.php
page.php
search.php
searchform.php
sidebar.php
single.php
style.css

このうち、まず必要最低限のデザインを作成するのに必要なのは、

footer.php：全てのページのフッターのテンプレート
header.php：全てのページのヘッダーのテンプレート
index.php：Indexページのコンテンツのテンプレート
page.php：ページを作成する時の元になるテンプレート
sidebar.php：全てのページのサイドバーのテンプレート
single.php：個別エントリーのテンプレート
style.css：全てのページを制御するCSS

上記になります。
他のファイルは、上記を作成してから、それを元に編集すればいいと思います。

カスタマイズしやすい方法

WordPressのテーマは、ヘッダー・フッター・インデックス（コンテンツの中身）・サイドバーと分かれています。
そして、インデックスのテンプレートに、ヘッダー・フッター・サイドバーをインクルードする形になっています。
それぞれファイルを開くと分かるのですが、<hr />で区切られている事が分かります。
これを目安にします。

ここで、分割しているとブラウザで見れないし、編集・作成しづらいと思うかもしれません。
そこで、インデックスページのそれぞれインクルードしている箇所に、ヘッダーテンプレート・フッターテンプレート・サイドバーテンプレートの中身を入れてしまうと作成しやすくなります。
そして、index.htmlなど適当な名前を付けて保存し、作成して行きます。
作成し終わった後に、WordPressのテンプレート構成すればよいです。

Dreamweaverやホームページビルダーなどの作成ソフトを使うともっと効率が上がります。

【例】

<?php get_header(); ?>　→ここをheader.phpの中身に書き換える。

<div id=”content” class=”narrowcolumn”>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>
<small><?php the_time(’F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

<div class=”entry”>
<?php the_content(’Read the rest of this entry »’); ?>
</div>

<p class=”postmetadata”>Posted in <?php the_category(’, ‘) ?> | <?php edit_post_link(’Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
</div>

<?php endwhile; ?>

<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(’« Previous Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(’Next Entries »’) ?></div>
</div>

<?php else : ?>

<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>　→ここをsidebar.phpの中身に書き換える。

<?php get_footer(); ?>　→ここをfooter.phpの中身に書き換える。