WordPressのテーマ作成(1):ファイル構成

Sponsored Link

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

Sponsored Link

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のテーマは、ヘッダー・フッター・インデックス(コンテンツの中身)・サイドバーと分かれています。
そして、インデックスのテンプレートに、ヘッダー・フッター・サイドバーをインクルードする形になっています。
それぞれファイルを開くと分かるのですが、


で区切られている事が分かります。
これを目安にします。

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

				<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &amp;#187;', '1 Comment &amp;#187;', '% Comments &amp;#187;'); ?></p>
			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&amp;laquo; Previous Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries &amp;raquo;') ?></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になります。

【画像1】
Wordpressのテーマ構成1

【画像2】
Wordpressのテーマ配置構成1

Sponsored Link