WordPress 3.0のリリースで、人気のコンテンツ管理システムに多くの新機能が実装されました。
今回のチュートリアルではこれらの新機能の全てを活用していただくために、ゼロからWordPress 3.0テーマ（テンプレート）のコーディングの仕方をブログ対応やミニマルテーマも含めご紹介したいと思います。
この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
ワークステーション設定
チュートリアルを開始するにあたり、まずはご使用いただいているコンピュータへサーバ設定をする必要があります。Windowsの場合はXAMPPやWAMP、Macの場合はMAMPなどがよいかと思います。これらのツールによりローカルテスト環境でWordPressのテストをすることが可能となり、プロジェクトの最中にいちいちFTPを使ってファイル転送する必要は無くなります。
コード編集に関しては、Notepad++のご使用を強くお勧めします。シンタックスがハイライト表示されたり、コーディング用のユーザーインターフェースも非常にシンプルでクリーンであったりと、あくまで私の好みである部分が強いのですが、とても使い易いと思います。（それに無料に勝るものはありません！）他にもNotepadやNotepad 2も同様に使い易いと思いますよ。
必要なフォルダとファイルの準備
WordPressインストールを含むフォルダ内で、wp-content/themes/に移動し「New 3.0 Theme」というフォルダを新規作成し、今後このチュートリアルで作成するファイルは全てこのフォルダの中に収納するようにしてください。では下記の画像の様にファイルとフォルダを追加してください：
/images style.css header.php index.php single.php footer.php archive.php page.php sidebar.php functions.php
ステップ１－Style.css
sytle.cssにはWordPressテンプレートをスタイリングする全ての要素を書き込みます。けれどまず最初は各テンプレートの名前と、著者名とリンク、そして説明とバージョンを宣言しておきましょう。WordPressテーマ作成時には、テーマを動作させるには必ず2つのファイルが必要になると言うことを覚えておいてください。1つ目はこのstyle.cssファイルで、もう1つは今から作成するindex.phpファイルです。
/* Theme Name: New WP 3.0 Theme URI: http://www.onextrapixel.com Description: A clean and minimal theme that is completely compatible with WordPress 3.0 Author: Keenan Payne Author URI: http://slackrmedia.com Version: 1.0 */
これらのインフォメーションはいつでも変更が可能ですが、作成された定義に影響を与えないようにきちんとコメント内に記述されているか気を付けるようにしてください。
それでは後程テンプレートのPHPファイルに実装する基本的な定義を記述していきましょう。
body{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
background: #d9d9d9;
color: #000000;
}
a:link, a:visited{
text-decoration: none;
color: #000000;
}
a:hover{
color: #5f5f5f;
}
h1 {
font-size: 54px;
}
h3 {
font-size: 24px;
}
#wrapper{
margin: 0 auto;
width: 750px;
text-align: left;
background: #fff;
padding: 20px;
}
#header{
width: 750px;
height: 100px;
}
#blog{
float: left;
width: 520px;
padding: 0 10px 10px 10px;
}
.sidebar{
float: left;
width: 200px;
margin: 0 0 0 10px;
font-size: 14px;
list-style: none;
}
#footer{
clear: both;
text-align: center;
height: 50px;
background: #ccc;
padding: 10px;
}
タグでは単純にWEBサイト上で使用されるフォントの指定や、（自分の好みに応じて）背景色の設定を行ってください。それからテーマに沿って、リンクのスタイル属性の設定やヘッダーの設定も必要です。
#wrapperはWEBページ全体をカバーし、#headerはその字の通りヘッダー部分、#blogは最新のブログ投稿をカバーしており、最後に.sidebarと#footerも、それぞれ与えられた範囲の基本的な定義をしています。こちらに関してはまた後程詳しく説明しますね。
ステップ２－Header.php
次にheader.phpを作成します。現時点ではWEBサイトのロゴとカスタムナビゲーションまで設定しましょう。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title ( '|', true,'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/*
* Add this to support sites with sites with threaded comments enabled.
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
wp_get_archives('type=monthly&format=link');
?>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
全て詳しく説明する必要はないかと思いますが、上記のコードはあなたが作成するテーマのheader.php全てに必要であると言うことだけは、覚えておいてください。
初めにDOCTYPEの宣言し、WordPressの設定で入力したWEBサイト名を表示させるためのスタンダードを使用します。それからWordPress 3.0のスレッドコメントを有効にするstyle.cssとPHPを記述します。
ステップ３－カスタムナビゲーションの追加
ここまででheader.phpに、基本情報とブログの名前をコーディングしました。次にWordPress 3.0で導入された新機能のカスタムナビゲーションメニューを追加しましょう。実際にheader.phpにコードを追加する前に、まずはfunctions.phpを開いてカスタムメニューを有効にするために必要なコードを追加します。
<?php
//Add support for WordPress 3.0's custom menus
add_action( 'init', 'register_my_menu' );
//Register area for custom menu
function register_my_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}
?>
1つ目の方のコメント部分のコードからお分かりいただけるかと思いますが、add_actionはカスタムメニューへのサポートを追加するために使用されており、次にカスタムメニューを「プライマリーメニュー」と名付けて登録しています。さて、ではテーマにメニューを実装するための作業に移りましょう。
そうするためにはまずheader.phpの末尾に以下のコードを追加する必要があります。
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>
これが何を意味するかと言うと、使用されている主な機能は「wp_nav_menu」と、「sort_column」「container_class」「theme_location」です。「sort_column」の働きはと言うと、WordPressのダッシュボードの選択順序がきちんと守られているかを確認します。「container_class」はメニューをスタイリングするために作られたCSSクラスを、選択することを可能にします。最後に「theme_location」は、（現時点ではprimary-menuのみですが）私たちが選んだ場所にメニューを配置することを可能にします。
ステップ４－カスタムナビゲーションのスタイリング
カスタムヘッダーナビゲーションを実行しておりますが、現時点では何の変哲もない古めかしいリンクのリストと言う感じで面白くありませんよね。これを修正するにはstyle.cssにnavというクラスを追加します。
.nav{
width:750px;
background: #000;
display:block;
float:left;
position:relative;
}
.nav ul{
list-style:none;
}
.nav li{
float:left;
position:relative;
}
.navファイルでご覧いただける通り、ナビゲーションの幅や、背景色、アライン設定、ディスプレイ設定など基本的な宣言を幾つかしています。それからリンクの前に黒丸が出ないように、基本的なULリストの設定もしています。リスト自体は左側にフロートし、相対位置設定もしています。
それではリンクとドロップダウンメニューにスタイルを追加することで、ナビゲーション全体のスタイル設定を完成させましょう。
.nav a{
display:block;
text-decoration:none;
color:#fff;
padding:0 15px 10px 0;
font-size:13px;
font-weight:bold;
}
.nav ul ul{
display:none;
position:absolute;
top:100%;
left:0;
float:left;
z-index:99999;
background: #212121;
}
.nav ul ul ul{
top: 30%;
left:100%;
background: #343434;
}
.nav ul ul a{
height:auto;
line-height:1em;
padding:10px;
width:130px;
}
.nav li:hover > a,.nav ul ul:hover > a{
color:#ccc;
}
.nav ul li:hover > ul{
display:block;
}
まずはメニュー部分のリンクをスタイリングすることから始めており、ここからドロップダウンメニューのスタイリングに入ります。「.nav ul ul」の部分では絶対位置設定をし、トップの位置は１００％としています。こうすることにより親リンクの直下に配置することが出来ます。更にドロップダウンリンクを少し目立させる為に背景色も変更しています。そしてZインデックスを99999にすることにより、その下に何があろうとこの要素が他のどの要素よりも一番トップに位置するよう設定しています。
３つ目のドロップダウンメニューでも違いを出す為に、再び背景色をほんの少しだけ変更しています。配置自体は左側に１００％です。これにより１つ目のドロップダウンよりもずっと右寄りに表示されます。トップの設定は３０％としており、こうすることにより２つ目のドロップダウンと接しているけれども、メニュー全体からは下にずれて表示されます。
最後にドロップダウンメニュー用のリンクをスタイリングします。同様にユーザーがリンクとドロップダウンをホバーした時に、ナビゲーションがどのように表示されるかということも設定します。
ステップ５－Index.php
Index.phpはWEBサイトのホームページであり、後述するヘッダーやフッター、サイドバーや最新投稿ブログを表示させるためのコードなどを含んでおり、WordPress 3.0の投稿サムネイル機能を利用しています。
<?php get_header(); ?>
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
以下のコードはテーマファイル内のどこに配置しようとも、「header.php」「sidebar.php」「footer.php」内の全ての情報をアウトプットする為に使われています。
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
それ以外はここに書かれているコードは極めてシンプルなものです。header.phpを呼び出した後に少し前に作成した#blogを使い、WordPressブログの最新投稿を表示する為に使うループを呼び出しています。その後で投稿タイトルを、やはり事前に作成しておいたスタイルでラップしています。
WordPress 3.0の投稿サムネイル機能をどのように活用するかということは、<?php the_post_thumbnail(); ?>が担っています。そこに書かれているように、このコード自体は次のステップで説明するfunctions.phpの機能をアクティベートするまでは何もしません。
ステップ６－投稿サムネイルを有効にする
先ほどホームページ上で投稿サムネイルが表示されるよう、コードを追加しましたよね。けれどまだその機能をアクティベートしていないので、実際には何も変わっていません。ではここでfunctions.phpを再び開いて、下記のコードをメニューナビゲーションコードの後に来るように追加しましょう。
// Enable post thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(520, 250, true);
上記のコードはもうそのものずばりで、書かれている通りの働きをします。二行目のラインで投稿サムネイルへのサポートを追加しており、三行目はサムネイルの厳密なサイズを定義しています。このアーティクルでは横幅520ピクセル、高さ250ピクセルで設定しました。
ステップ７－Sidebar.php
ご想像がつくかと思いますが、sidebar.phpはサイトバーで表示させたい情報全てを賄うファイルです。index.php上でsidebar.phpを取得する為のコーディングは既に済んでいるので、今しなければならないことはsidebar.php内に必要情報を追加することだけです。そうすればホームページ上にサイトバーが表示されます。
<div class="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<?php endif; ?>
</div>
そうですね。上記がsidebar.phpが機能する為に必要な全てのコートですね。style.cssで作成したdivを呼び出し、その後に続くコードで、WordPressのバックエンドを経由して希望する順番と方法でウィジェットをサイドバーに追加することが出来ます。しかしながら、他の多くの機能と同様に、正常に動作させるためにはfunctions.phpファイルを多少書き換える必要があります。
//Some simple code for our widget-enabled sidebar
if ( function_exists('register_sidebar') )
register_sidebar();
このコードは、先ほどのsidebar.phpを登録するようWordPressに指示しています。WordPressではもし希望するなら、複数のサイドバーをいとも簡単に取り扱うことが出来ます。けれどこれ以上書くと、この長いチュートリアルが更に長くなってしまうので、もしご興味があればGoogleサーチしてみてください。
ステップ８－Single.php
single.phpは、シングルポストページ用に使用するもので、index.phpで書いたコードと殆ど同じです。唯一の違いと言えば、「comments-template」DIVタグとcomennts.phpを読み込むコードを追加したことくらいです。
<?php get_header(); ?>
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
ステップ９－Comments.php
WordPress 3.0のリリースに伴い全WordPressテーマを通してコメントフォームの標準化を進める事は、フックを介して変更することが可能となるのでテーマ作者やプラグイン開発者にとって非常にやり易くなりとても意味のあることです。
以下のコードは各テーマテンプレートにcomments.phpファイルを追加する為のコードです。
<?php comment_form(); ?>
このコードにより、テーマに沿った形でコメントフォームが表示されます。もしコメントフォームの更なるカスタマイズにご興味をお持ちでしたら、こちらのWordPress 3.0 Theme Tip the Comment Formというサイトをチェックしてみてください。
ステップ１０－Page.php
WordPressでページを作成すると、タイプした内容を表示するには別のファイルが使用されます。そのファイルがpage.phpです。コード自体はsingle.phpとほぼ同じなのですが、このページではコメントテンプレートは省略したいのと、投稿ナビゲーションに少し変更を加えたいのでその辺りが少し変わってきます。けれどそれ以外は全く同じです。
<?php get_header(); ?>
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
ステップ１１－Category.php
category.phpはユーザーが「特定の投稿カテゴリー」や「投稿時間」「特定の著者」を見るたびに、投稿を表示させる為の情報を提供するファイルとなります。先ほどのpage.phpと同様にコードの殆どがsingle.phpと同じですが、最初の部分だけ少し異なります。
<?php get_header(); ?>
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2>Archive for the ‘<?php single_cat_title(); ?>’ Category:</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2>Posts Tagged ‘<?php single_tag_title(); ?>’</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2>Archive for <?php the_time('F, Y'); ?>:</h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2>Archive for <?php the_time('Y'); ?>:</h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2>Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2>Blog Archives</h2>
<?php } ?>
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
このコードが追加された部分で、WordPressループのすぐ後ろに追加されています。
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2>Archive for the ‘<?php single_cat_title(); ?>’ Category:</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2>Posts Tagged ‘<?php single_tag_title(); ?>’</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2>Archive for <?php the_time('F, Y'); ?>:</h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2>Archive for <?php the_time('Y'); ?>:</h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2>Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2>Blog Archives</h2>
<?php } ?>
このコードの役割は、現在ブログのどこを参照しているかを表示する為に大量のPHPのif/elseifステートメントを処理することです。なので例えば「Test Category 1」という特定のカテゴリーを見ているとすると、他のポストより先にまずH2ヘッダーの「Archive for the ‘Test Category 1’ Category:」を表示してくれます。これは一定の日付や著者などに対しても同じ働きをしてくれます。
ステップ１２－背景のカスタマイズとリンクフィード
以前少し触れた通り、WordPress 3.0で実装された機能の1つとして、WordPressのバックエンドを通して画像だったり基本色だったりと背景の作成や変更が可能になったということが挙げられます。
この機能を完全に動作させる為に必要なのは、このたった1行のみです：
//Code for custom background support add_custom_background();
このようにして、背景のカスタマイズが有効となります。次に同じくらいシンプルなコードを追加します。そうすることにより、関連するリンクフィードがサイト上どこでも使用できるようになります。標準のフィード、コメント、タグ、カテゴリーなどを追加コード無しでヘッダーに加えることが出来ます。
この機能が本来の働きを問題なく出来るように、下記のコードをfunctions.phpに追加しましょう。
//Enable post and comments RSS feed links to head add_theme_support( 'automatic-feed-links' );
ステップ１３－Footer.php
今までの作業を全て完成させる為に、footer.phpファイルを作りましょう。このファイルではstyle.cssで宣言した#footer IDを使用し、基本的な著作権情報や一番下にある最新ストーリーやコメントのRSSフィードリンクを含んでいます。
<div id="footer">
<p>
<strong>Copyright 2011 <?php bloginfo('name'); ?> | All Rights Reserved.</strong> </a>
Designed by <a href="http://slackrmedia.com">SlackrMedia</a>
</p>
<p><a href="<?php bloginfo('rss2_url'); ?>">Latest Stories RSS</a> | <a href="<?php comments_rss_link('comment feed'); ?>">Comments RSS</a></p>
</div>
</div>
</body>
</html>
ステップ１４－その他の機能
ここでは、あまり重要ではないけれど、知ってると便利かもしれない機能を紹介したいと思います。WordPress 3.0のマルチサイト機能で、１つのWordPressをインストールしただけで複数のブログを所有することを可能にします。これもfunctions.phpに追加したいと思います。
//Enable multisite feature (WordPress 3.0)
define('WP_ALLOW_MULTISITE', true);
まとめ
この時点で下書きからWordPress 3.0のテーマを完成させているのではないでしょうか。しかもとても人気のある機能を搭載し、かつ必要最低限のままなので、今後もっとグラフィック的に印象を与えるサイトへと変貌させることも充分可能です。他にこのテーマを使ってどんなことが出来るでしょうか。テーマを変更するだけの基本的なオプションとスタイルは備わっているし、サイドバーを更に追加することだって、How to Create a Better WordPress Options Panel
のサイトを使って管理パネルを作ることだって出来ます。
