WordPress Webデザイナー向けオリジナルテーマ作成方法

Posted on: 2011/07/05

WordPress Webデザイナー向けオリジナルテーマ作成方法

WordPressのオリジナルテーマの作成方法について、Webデザイナー向けに解説してみたいと思います。

WordPressのオリジナルテーマを作成する際、ディフォルトテーマや配布テーマをカスタマイズしていくという方法は非常に有効です。
しかし、Webデザイナーのみなさんであれば、配布テーマのデザインをそのまま使うなんてことはありえないでしょうから、結局、このやり方では、不要なコードやデザインを削り、一度フラットな状態にしてからカスタマイズしはじめることになるのです。
であれば、配布テーマをカスタマイズできるだけではなく、一からオリジナルテーマを作成できるようにしておくことが望ましいと思います。

その為には、わけのわからないコードをただコピペするだけではなく、テンプレートタグやWordPressの仕組みを少しずつ覚えていくことで、必要な機能は後でいくらでも自分で追加できる状態になっていくことが、将来的に有益だと思います。

1. 基本構造を理解する

フロントエンドのレイアウトは、3カラムを基本とします。

これを、ファイル構成に当てはめると、index.php から、どのページでも共通で表示されるヘッダー、サイドバー、フッターの部分を、それぞれ header.php、sidebar.php、footer.php として切り出しておきます。
この、ファイルを分割する方法は、ディフォルトテーマや配布テーマでも多く採用されており、PHPによる動的なWebサイト制作における基本的な考え方の一つでもあります。

テーマディレクトリに最低限必要なファイルは、スタイルシートの style.css と index.php の2つです。
今回は、index.php を header.php、sidebar.php、footer.php に分割しましたので、これらも含めます。

加えて、個別記事ページ用テンプレートの single.php、オプション関数ファイル群の functions.php 、テーマ内で使用する画像の格納フォルダとして images フォルダ、テーマのスクリーンショット画像として screenshot.png を用意します。（詳しくは後述）

以上、テーマディレクトリの構成は以下のようになりました。

2. style.css

では、さっそく、style.css から作成していきます。
まずはじめに、コメント形式でテーマの詳細を記述します。

/*
Theme Name: noDesigne
Description: noDesigne Theme
Version: 0.1
Author: hijiri
Author URI: http://hijiriworld.com/web/
*/

これらの情報は、「管理画面 > 概観 > テーマ」で読み込まれます。

テーマの詳細を記述した後は、レイアウトやデザインに従って自由にCSSを記述してください。

（さらに・・・）

記事本文の改行は、自動的に p タグに変換されたり、ファイルアップローダーから記事内に画像を挿入すると、選択した配置によって、imgタグに自動的にクラスが付加されます。これらは、WordPressのバックエンド側の仕様です。

これらがレイアウト崩れを起こさないようにする為、以下CSSを記述しておきます。

.post p { clear: both; }
.aligncenter {
	display: block;
	margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

このように、WordPressのバックエンド側や、テンプレートタグが生成するHTMLには、自動的にクラスやidが付加されることがありますので、後々、出力されたソースを確認してみてください。

3. index.php – ループを理解する

次に、メインとなる index.phpを作成します。

<?php get_header(); ?>
		
<!-- content -->

<div id="content">
	
	<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post(); ?>
			
			<div class="post">
				
				<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
				
				<?php echo get_the_date(); ?>
				
				<div class="entry">
					<?php the_content(); ?>
				</div>
				
			</div>
		
		<?php endwhile; ?>
		
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('<< Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries >>') ?></div>
		</div>
	
	<?php else : ?>
		
		Not Found.
		
	<?php endif; ?>
	
</div>
		
<?php get_sidebar(); ?>

<?php get_footer(); ?>

まずは、WordPressの肝となる、ループの仕組みについて理解しましょう。

have_posts – 投稿データがあるか調べる
the_post – 投稿データを読み込む

よって、このループを日本語で表現するならば、
「記事の数だけ以下の”処理”を繰り返す。記事がなければ’Not Found’を表示する。」となります。

（さらに・・・）

以下二つの記述方法は同じ意味になります。
WordPressでは、前者の記述方法がほとんどですので、これを機に覚えてしまいましょう。

get_header() – header.phpファイルを読み込む
get_sidebar() – sidebar.phpファイルを読み込む
get_footer() – footer.phpファイルを読み込む
the_permalink() – 記事のパーマリンクを出力
the_title() – 記事のタイトルを出力
get_the_date() – 記事の投稿日時を出力
the_content() – 記事の本文を出力
next_posts_link() – 古い記事へのリンクを出力
previous_posts_link() – 新しい記事へのリンクを出力

4. header.php

header.php を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	
	<meta name="description" content="<?php bloginfo('description'); ?>">
	<meta name="keywords" content="">
	
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
	
	<?php wp_head(); ?>
	
</head>
 
<body>

	<div id="wrapper">
	
		<!-- header -->
		
		<div id="header">
			
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			
		</div>

bloginfo() – 使用中のWordPressに関するさまざまな情報を出力
引数: name – 「一般設定」管理画面で指定したブログのタイトルを出力
引数: description – 「一般設定」管理画面で指定したブログの説明文を出力
引数: url – ブログのサイトURLを出力
引数: stylesheet_url – CSSファイル（style.css）のURLを参照
wp_title – 現在のページのタイトルを出力します。
wp nav menu – ナビゲーションメニューを出力します。
wp_head() – おまじない
これがないと動作しないプラグインもあるので、”おまじない”として記述しておきましょう。

5. sidebar.php

sidebar.php を作成します。

<!-- sidebar -->

<div id="sidebar">
	
	<ul>
		<?php wp_get_archives(); ?>
	</ul>
	
</div>

サイドバーには、「アーカイブ」や「最近の投稿」、「最近のコメント」などを表示するのがスタンダードでしょうか。
今回は、月別アーカイブを表示しておくことにします。

wp_get_archives() – アーカイブリストを出力
引数に応じて様々なアーカイブリストを出力することが出来ます。ディフォルトでは月別アーカイブリストになります。

6. footer.php

footer.php を作成します。

	<!-- footer -->
	
	<div id="footer">
	
		<p class="copy">
			&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.
			Theme Design by <a href="http://www.hijiriworld.com/web">hijiri</a>
		</p>
	
	</div>

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

</body>
</html>

wp_footer() – おまじない

7. single.php – テンプレート階層を理解する

個別記事ページ用テンプレート single.phpを作成します。
先ほど作成したindex.phpのコードをコピペして、ハイライトされた箇所を変更します。

<?php get_header(); ?>

<!-- content -->

<div id="content">
	
	<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post(); ?>
			
			<div class="post">
				
				<h2><?php the_title(); ?></h2>
				
				<?php echo get_the_date(); ?>
				
				<div class="entry">
					<?php the_content(); ?>
				</div>
				
				<!-- Comments -->
				
				<?php comments_template(); ?>
				
			</div>
		
		<?php endwhile; ?>
		
	<?php else : ?>
		
		Not Found.
		
	<?php endif; ?>
	
</div>
		
<?php get_sidebar(); ?>

<?php get_footer(); ?>

変更点は、記事タイトルの個別記事ページへのリンクを外し、コメント欄を付け足しました。
そして、ページ送りのナビゲーションも消しておきましょう。

comments_template() – コメント欄を出力

ここで、ループと同様に重要な、テンプレート階層について理解しましょう。

WordPress は要求されているページの種類（メインページ、カテゴリーページなど）を判断し、テンプレート階層というルールに基づき、テーマディレクトリ内から該当のテンプレートを探してページを生成します。

このルールに従ってテンプレートを用意すれば、特に分岐条件を記述しなくとも、要求されたページによって自動的にテンプレートを選択してくれます。

例えば、さきほど、個別記事ページ用のテンプレート single.php を作成しました。
これで、個別記事ページが要求されると、自動的に single.php のテンプレートが適用されるようになります。
もし、single.php が存在しなければ、index.php のテンプレートが適用されます。

この、テンプレート階層の流れをざっくりと図解すると、以下のようになります。

もちろん、その他のページや、より細かい振り分けも可能ですので、一度全体図を眺めてみてください。
テンプレート階層の全体図はこちら→テンプレート階層構造図

8. functions.php

functions.php は、機能拡張の関数を記述するファイルです。
後々いろいろな機能を追加していく時には、functions.php に必要な関数を記述していくことになります。

まずは、WordPressに標準で搭載されているウィジェット機能とメニュー機能をONにしておく記述をしておきましょう。

// ウィジェット機能対応
if (function_exists('register_sidebar')) register_sidebar();

// メニュー機能対応
add_theme_support('menus');

9. images ディレクトリ

テーマ内で使用する画像、つまり、テーマのデザイン素材として使用する画像は、ここに格納することになります。
参照する際は以下のようにパスを指定します。

<?php bloginfo('template_url') ?>/images/ファイル名

10. screenshot.png

スクリーンショット画像を作成します。
サイズは、300×225px がディフォルトです。ファイル形式は png が望ましいですが、jpegやgifでも構いません。

11. テーマをアップロード

出来上がったテーマを、ディレクトリごと /wp-content/themes/ にアップロードします。
「管理画面 > 外観 > テーマ」から、このテーマが使用できるようになったことを確認してみてください。

hijiriworld Web