WordPress オリジナルテーマの作り方

2013年12月25日
Wordpress

WordPressのオリジナルテーマの作り方について説明していきます。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが（もちろんあった方が楽ですが）、自分でデザインをするためのPhotoshopとCSSの知識は必要です。前回に引き続き、Nick La氏によるWeb Designer Wallを参照しています。

↑私が10年以上利用している会計ソフト！

※これはWordpress旧バージョンのオリジナルテーマの作り方です。最新版Wordpressを使用してのオリジナルテーマの作り方は「WordPress オリジナルテーマの作り方 3.0+」を御覧ください。

WordPress オリジナルテーマ作成完璧ガイド

WordPressのコーディングに入る前に

この記事で説明されているテーマ”GlossyBlue”、HTMLテンプレートファイル、Photoshopモックアップファイルがセットになったdemo.zipダウンロードしてファイルを見ながらこの記事を読むとより分かりやすいと思います！

フロントエンド

作り始める前に、Wordpressのデフォルトテーマを見てみましょう。ヘッダー、記事タイトル、検索フォーム、ナビゲーション、フッターなどなど。。

デフォルトテーマ index.php

デフォルトテーマ single.php

Photoshop モックアップ

デフォルトテーマにある情報をもとに、Photoshopで自分のブログのデザインをしていきます。今回はNick La氏による無料Wordpressテーマのひとつ、GlossyBlueを例にあげて説明していきます。demo.zipをダウンロードするとPhotoshopファイルも見ることができます。

HTML + CSS

Photoshopモックアップが完成したら、HTMLとCSSによるスタティックページを各ページ分作成します。demo.zipにあるHTMLファイルを見ながら記事を読むと分かりやすいと思います。zipファイルを解凍し、index.html, single.html, page.htmlを確認してみてください。後でこのHTMLファイルにWordpressの機能を付け加えていきます。

なぜスタティックHTMLファイルを先に作るのか？

多くの場合、後のコーディングを簡単にすることができます。必要なすべてのテンプレートをHTMLで作り、ブラウザーテストをしてWordpressのコードをコピーペーストします。そうすることでテーマを作成する時にHTMLやCSSのバグを心配する必要がなくなります。

WordPressのテーマはどのように動作するのか

デフォルトテーマのフォルダー (wp-content/themes/default)を見ると、たくさんのPHPファイル（テンプレートファイルと呼ばれます）と一つのstyle.cssファイルがあるのがわかります。トップページには実はいくつかのテンプレートファイルが使用されているのです。（index.phpにはheader.php, sidebar.php, footer.phpが使用されています。）

テンプレート階層についてのより詳しい情報はこちら。

WordPressのコーディングを始めましょう

1. デフォルトテンプレートファイルを複製する

wp-content/themesフォルダーに作成したHTMLファイルのあるフォルダーをコピーし、わかりやすい名前（”glossyblue”など）をつけます。そのフォルダーに、デフォルトテーマにあるcomments.phpとsearchform.phpをコピーします。

2. Style.css

デフォルトテーマのフォルダーにあるstyle.cssを開きます。最初にあるコメントアウトされたコード（下記）をコピーし、オリジナルテーマのstyle.cssにペーストします。テーマの名前やその他の情報を変更。

/*
Theme Name: GlossyBlue
Theme URI: http://www.ndesign-studio.com
Description: A theme by <a href="http://www.ndesign-studio.com">N.Design Studio</a>.
Version: 1
Author: Nick La
Author URI: http://www.ndesign-studio.com
*/

3. ファイルを分割する

複数のファイル（header.php, sidebar.php, footer.php）をどこへ分割するのか理解しましょう。下記画像はindex.phpがどのように分割されているか、簡単に説明しています。

4. Header.php

新しいPHPファイルを作成し、header.phpと名前をつけて保存。HTMLファイルのindex.htmlを開き、一番上からヘッダー部分が終わるところまでをコピーし、新しく作成した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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
	<div id="header">
		<div id="headerimg">
			<h1><a href="#">My Blog</a></h1>

			<div class="description">Blog Description</div>
		</div>
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<!--/header -->

デフォルトテーマの header.php を開き、<title>, <link>（CSS用）, <h1>, <div>部分の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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

</head>
<body>
<div id="page">
	<div id="header">
		<div id="headerimg">
			<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
			<div class="description"><?php bloginfo('description'); ?></div>
		</div>

ナビゲーションメニュー (wp_list_pages)

<ul id=nav> 内の <li> タグを <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>に置き換える。

<ul id="nav">
	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>
<!--/header -->

wp_list_pagesのより詳しい説明はこちら。

5. Sidebar.php

オリジナルテーマのフォルダーに新たにPHPファイルを作成し、sidebar.phpと名づけて保存。そこへindex.html内にある<form id=searchform> から<div id=sidebar>が終わるところまでをコピーし、sidebar.phpにペーストします。

<form id=searchform> の部分を<?php include (TEMPLATEPATH . '/searchform.php'); ?>に置き換える
カテゴリー<li> タグの部分を<?php wp_list_categories('show_count=1&title_li='); ?>に置き換える
アーカイブ<li> タグの部分を<?php wp_get_archives('type=monthly'); ?>に置き換える

	<?php include (TEMPLATEPATH . '/searchform.php'); ?>

	<div id="sidebar">
		<h3>Category</h3>
		<ul class="ul-cat">
			<?php wp_list_categories('show_count=1&title_li='); ?>
		</ul>
		<h3>Archives</h3>
		<ul class="ul-archives">
			<?php wp_get_archives('type=monthly'); ?>
		</ul>
	</div>
	<!--/sidebar -->

wp_list_categoriesについて、詳しくはこちら。 wp_get_archivesについてはこちら。

6. Footer.php

新規PHPファイルを作り、footer.phpという名前で保存。index.htmlの<div id=footer>から</html>まで(下記部分)をコピーし、footer.phpにペーストします。

	<div id="footer">
		<div class="left-col">
			<h4>Recent Posts </h4>
			<ul class="recent-posts">
				<li><a href="#">Blog Title Text</a><br />
					10/23/2006</li>
				<li><a href="#">Blog Title</a><br />
					10/23/2006</li>
				<li><a href="#">Title Text</a><br />
					10/23/2006</li>
				<li><a href="#">Sample Blog Title</a><br />
					10/23/2006</li>
			</ul>
		</div>
		<div class="left-col">
			<h4>Recently Commented</h4>
			<ul class="recent-comments">
				<li><a href="#">Nick:</a> This is a test comment</li>
				<li><a href="#">Jen:</a> Hello, nice day!</li>
				<li><a href="#">Someone:</a> Wow, this is another test comment</li>
				<li><a href="#">Admin:</a> This is a comment</li>
			</ul>
		</div>
		<div class="right-col">
			<h4>About</h4>
			<p>Welcome to my design blog and portfolio showcase. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
			<p>Feel free to <a href="#"> contact me.</a></p>
		</div>
		<hr class="clear" />
	</div>
	<!--/footer -->
</div>
<!--/page -->
<div id="credits"><span class="left">Powered by <a href="http://www.wordpress.org">WordPress</a> | Theme by <a href="http://www.ndesign-studio.com">N.Design Studio</a></span> <span class="right"><a href="#" class="rss">Entries RSS</a> <a href="#" class="rss">Comments RSS</a></span></div>
</body>
</html>

7. Index.php

ついにトップページの作成です。index.htmlを開き、<div id=content>の部分だけを残しindex.phpとして保存します。get_header, get_sidebar, get_footerをレイアウトにあう用に挿入します。

<?php get_header(); ?>
	<div id="content">
		<div class="post">
			<div class="post-date"><span class="post-month">Oct</span> <span class="post-day">13</span></div>
			<div class="post-title">
				<h2><a href="#">Sample Blog Entry</a></h2>
				<span class="post-cat"><a href="#">News</a></span> <span class="post-comments"><a href="#">3 comments</a></span> 
			</div>
			<div class="entry">
				<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Read more...</a> </p>
			</div>
		</div>
		<div class="navigation">
			<span class="previous-entries"><a href="#">Previous Entries</a></span>
			<span class="next-entries"><a href="#">Next Entries</a></span>
		</div>
	</div>
	<!--/content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

8. ループを理解する

下の画像はどのようにループが動作するのかを説明しています。ループは記事を表示させるため、また何を表示させるかをコントロールするためにあります。基本的に、ブログ内に記事があるかをチェックし、もしあればその記事を表示、なければ「記事がみつかりません」と表示します。

9. ループをコピーする

デフォルトテーマのindex.phpを開きます。その中にあるループをコピーし、オリジナルテーマのindex.php内にある<div id=content>の中にペーストします。その後、スタティックテキストをWordpressテンプレートタグ（日時、タイトル、カテゴリー、コメント、前後の記事へのリンク）と置き換えます。

	<div id="content">

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

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

		<div class="post">
			<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
			<div class="post-title">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<span class="post-cat"><?php the_category(', ') ?></span> 
				<span class="post-comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span> 
			</div>
			<div class="entry">
				<?php the_content('Read the rest of this entry &raquo;'); ?>
			</div>
		</div>

		<?php endwhile; ?>

		<div class="navigation"> 
			<span class="previous-entries"><?php next_posts_link('Older Entries') ?></span>
			<span class="next-entries"><?php previous_posts_link('Newer Entries') ?></span> 
		</div>

	<?php else : ?>

		<h2>Not Found</h2>
		<p>Sorry, but you are looking for something that isn't here.</p>

	<?php endif; ?>

	</div>
	<!--/content -->

10. テーマを確認してみる

これでフロントページのメインとなる部分の設定が完了しました！管理ページへログインし、左側の外観 > テーマから自作のテーマを選択し、「使用する」をクリック。ブラウザーでどのように表示されているか確認してみてください。

11. Single.php

続いて、single.phpのテンプレートを作っていきましょう。今までやってきたようにデフォルトテーマをコピペして作っていくことも可能ですが、先程作成したindex.phpをsingle.phpとして保存し、使用すると簡単です。デフォルトテーマのsingle.phpを開き、テンプレートタグをコピーします。その後comments_templateを追加。下記コードのハイライト部分が変更した箇所です。

<?php get_header(); ?>

	<div id="content">

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

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

		<div class="post">
			<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
			<div class="post-title">
				<h2><?php the_title(); ?></h2>
				<span class="post-cat"><?php the_category(', ') ?></span> 
			</div>
			<div class="entry">

				<?php the_content(); ?>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
			
			<?php comments_template(); ?>
			
		</div>

		<?php endwhile; ?>

		<div class="navigation"> 
			<span class="previous-entries"><?php previous_post_link(' %link') ?></span>
			<span class="next-entries"><?php next_post_link('%link') ?></span> 
		</div>

	<?php else : ?>

		<h2>Not Found</h2>
		<p>Sorry, but you are looking for something that isn't here.</p>

	<?php endif; ?>

	</div>
	<!--/content -->

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

12. Page.php

11. で作成したsingle.phpをそのままpage.phpとして保存します。日時、コメントフォーム、前後の記事へのリンクを削除します。これでpage.phpの完成です… 簡単ですね！

13. HTMLファイルを削除する

オリジナルテーマのフォルダー内にあるすべてのHTMLファイルを削除します。（もう必要ないので。）これでベーシックなWordpressのテーマは完成です。他にもたくさんのPHPファイルがありますが、基本的なテーマのみ必要なのであれば、これらのファイルを変更する必要はありません。例えばsearch.php や 404.phpがテーマのフォルダーになくても、Wordpressは自動的にindex.phpを使ってページを表示させます。テンプレート階層についてのより詳しい情報はこちら。

14. WordPress ページテンプレート

最後の例として、アーカイブページ（記事一覧）を作るためにどのようにページテンプレートを使うかを説明します。サイトマップにおすすめです。デフォルトテーマのarchives.phpをオリジナルテーマのフォルダーにコピーし、必要のないコードを削除します。例えばこのように↓

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content">
	<h2><?php the_title(); ?></h2>
</div>

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

query_post（posts_per_page=-1はすべての記事を表示させるという意味）を使ってすべての記事を表示させます。

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content">

	<h2><?php the_title(); ?></h2>

	<?php query_posts('posts_per_page=-1'); ?>

	<ul>
		<?php while (have_posts()) : the_post(); ?>
		<li>
			<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
			<?php the_time('M d Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
		</li>
		<?php endwhile;?>
	</ul>

</div>

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

管理ページにログインし、新しいページを作成します。右側の「テンプレート」のドロップダウンメニューからArchivesを選択します。（英語版のスクリーンショットで申し訳ないです…）

WordPressには多くのプラグインや、プラグインを使わなくてもカスタマイズできる技がたくさんあります！より素敵なテーマを作成するためにもぜひぜひ参考にしてみてください。次回はついにローカルからWebへアップロードしてみます。お楽しみに！

WordPress オリジナルテーマ作成完璧ガイド

参照Webサイト: Web Designer Wall – Building Custom WordPress Theme