テーマ作成方法
WordPressのテーマを作成するにあたって
WordPressのテーマを自分で作成したい人のために解説していきます。
ファイル構成
WordPressのファイル構成は、それぞれ役割ごとに分かれています。
そして、ファイルを組み合わせて（正確にはインクルード）セットで使います。
なぜこのように分かれているかというと、ヘッダー情報やフッター情報など共通で使う場合、
そうした共通部分を1ファイルにしておけば、変更した時全体が反映されるといった利便性があるからです。
(WordPressのテーマの利点はここにあります。）
まずは、WordPressをインストールして、デフォルトで入っているThemeを例に、構成から説明して行きたいと思います。 「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
上記になります。 他のファイルは、上記を作成してから、それを元に編集すればいいと思います。
Indexページの構成について
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の中身に書き換える。
構成は、以下の画像1になります。 配置構成は画像2になります。
