WordPressテーマ（テンプレート）カスタマイズのまとめ（日本語訳）

• 著者: Nick La
• 件名: WordPress Theme Hacks
• 日付: 2007年10月15日
• URL: http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/
• 訳者: Arata Kojima

WordPress Theme Hacks

WordPressは最初ウェブログやブログプラットフォームとして開発された。しかし、今、WordPressはとても力強く成長し、僕たちはWordPressであらゆるタイプのWebサイトを作り、CMSとしても利用することができる。
この記事では、みんながよりよいWordPressのテーマを作るために、僕の技をみんなと共有しようと思う。僕はプログラマでもデベロッパーでもない。だから、フロントエンドの開発にフォーカスしようと思う。
そういえば、言い忘れていた。私のようなプログラマーではなく、デザイナーであっても、すばらしいWebサイトをWordPressで作ることができる。僕のWordPressのサイトは次のものだ。N.Design Studio、Best Web Gallery、Web Designer Wall、そしていくつかのWordPress Themesだ。

コンディショナルタグ

ダイナミックなWordPressのテーマを作るときに、コンディショナルタグはすばらしく便利なものだ。コンディショナルタグは、どのコンテンツをいくつ表示するか、というのをコントロールすることができる。いくつかのサンプルを見てみよう。

ダイナミックハイライトメニュー

これは僕がBest Web Galleryで使ったハイライトメニューだ。Home、Category、Archive、Search、Singleのどれかのページにいるとすると、箇条書き（ナビゲーション）のはじめの項目のliタグに、"Gallery"ボタンをハイライトするためのclass="current"を追加する。
2番目の項目においては、"about"という名前のページにいるときに、class="current"を追加する。

<ul id="nav"> 
  <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#">Gallery</a></li> 
  <li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#">About</a></li>
  <li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#">Submit</a></li>
</ul>

（訳者注：コンディショナルタグはありとあらゆるところで使いまわせます。特に、WPのようなCMSはテンプレート枚数が少なくなるためか、現在位置を示すようなデザイン、自分がいるページにハイライトを与えるなどが難しくなります。その意味では、この例は非常に有益です）

ダイナミックタイトルタグ

また、ダイナミックなtitleタグをheader.phpに加えるためにもコンディショナルタグが有効だ。

<title>
<?phpif (is_home()) {
	echo bloginfo('name');
} elseif (is_404()) {
	echo '404 Not Found';
} elseif (is_category()) {
	echo 'Category:'; wp_title('');
} elseif (is_search()) {
	echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
	echo 'Archives:'; wp_title('');
} else {	echo wp_title('');
}
?>
</title>

（訳者注：こういったtitle要素の使い方もありですが、個人的にはwpSEOというプラグインでtitle要素を作ったほうが便利かなと思います）

ダイナミックコンテンツ

もし、トップページのみに表示されるファイルを組み込むのであれば、こんなコードはどうだろう。

<?php if ( is_home() ) { include ('file.php'); } ?>

ハイライトする記事を目立たせる

カテゴリID2を目立たせたいとすると、そのカテゴリに属する全ての記事をハイライトするために、CSSクラスを追加したいだろう。ならば、ループでこんなスニペットを使おう。

<?php if ( in_category('2') ) { echo ('class="feature"'); } ?>

（訳者注：コンディショナルタグを局所的に使うのはすごく便利。テンプレートを分けないとできないようなコーディングも、1枚のテンプレートで済んでしまいます）

1つのテンプレートをユニークにする

あるカテゴリで個々の記事を表示するために、1つの違うテンプレートを使いたいとしよう。記事がどのカテゴリに属しているかをin_categoryでチェックし、それからテンプレートを選択すればよい。
デフォルトのsingle.phpには、以下のコードを入力する。記事がカテゴリ1に属していればsingle1.phpというテンプレートを使い、一方カテゴリ2であればsingle2.php、ほかのものならばsingle_other.phpを適用する、というコードになっている。

<?php
  $post = $wp_query- >post;
  if ( in_category('1') ) {
  include(TEMPLATEPATH . '/single1.php');
  } elseif ( in_category('2') ) {
  include(TEMPLATEPATH . '/single2.php');
  } else {
  include(TEMPLATEPATH . '/single_other.php');
  }
? >

（訳者注：カテゴリ1は会社の新着情報、カテゴリ2は商品情報など、カテゴリごとにテンプレートのデザインを変えたいときに便利な方法。sidebar.phpに読み込むと、サイドバーのコンテンツをいろいろと変えられて面白い）

カテゴリテンプレートをユニークにする

異なるカテゴリテンプレートを使って、特定のカテゴリを表示したいとしよう。これは単純にカテゴリテンプレートをcategory-2.phpとして保存すればよい。（注意：“-”とカテゴリID番号をファイル名にする）すると、category-2.phpはカテゴリ2を表示した際に使われ、category-3.phpはカテゴリ3のときに使われる、など。

（訳者注：上記と絡ませて使うと便利。コンディショナルタグで表示ページを指定し、カテゴリごとにページデザインを変える、など）

1つ目の記事のあとにGoogle Adsenseを表示する

多くの人が僕に質問する。「どうやって、1つ目の記事のあとにGoogle Adsenseを表示しているんだい？」これはすごく単純。ループ内に変数($loopcounter)を加えればよいだけだ。
もし、$loopcounterが1以下、または等しいのであれば、そのときはgoogle-ad.phpを組み入れる。

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); $loopcounter++; ?>
  // the loop stuffs
  <?php if ($loopcounter <= 1) { include (TEMPLATEPATH . '/ad.php'); } ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

クエリーポスト

ループ内にいくつの記事を表示するのかを制御するために、クエリーポストを使うことができる。どのコンテンツが、どこに、どうやって表示されるのかを制御させられるのがクエリーポストだ。特定のカテゴリにクエリーを要求することもできるし、除外することもできるから、フルに活用することが可能だ。最新記事の一覧を表示したもの、特定の記事を表示するもの、またどうやって特定のカテゴリから除外するのかについて、クエリーポストを使った例を示してみよう。

最新記事を表示する

以下のコードが最新5件を一覧に表示するものだ。

<?php query_posts('showposts=5'); ?>
<ul>
  <?php while (have_posts()) : the_post(); ?>
  <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
  <?php endwhile;?>
</ul>

（訳者注：ブログデザインのサイドバーでよくある新着記事5件など）

特定の記事を表示する

カテゴリ2は特別なカテゴリとする。このカテゴリから5件をサイドバーに表示したい。そんなときは、こんなコードをsidebar.phpに入れればよい。

<?php query_posts('cat=2&showposts=5'); ?>
<ul>
  <?php while (have_posts()) : the_post(); ?>
  <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
  <?php endwhile;?>
</ul>

（訳者注：僕はhome.phpに使うのが好みです。カテゴリを1と2に分けておき、それぞれお知らせと新製品に分ける。それらを上記のコードで出力しデザインすれば、タブで切り替えるようなコンテンツを制作できます）

特定のカテゴリから除外する

また、query_postsを使って、特定のカテゴリを表示しないこともできる。以下のコードはカテゴリ2の全ての記事を除外したものだ。（注意：ID番号の前にマイナス記号が入っている）

<?php query_posts('cat=-2'); ?>
<?php while (have_posts()) : the_post(); ?>
  //the loop here
<?php endwhile;?>

Tips：posts_per_page引数を使うことによって、ページの記事ごとに上書することもできる。（例：query_posts('posts_per_page=6');）

カスタムフィールド

カスタムフィールドはWordPressの最もすごい機能の1つだ。記事のコンテンツや抜粋と同じように、特別なデータやテキストを記事に加えることができる。カスタムフィールドを使えば、文字通りWordPressを統合的なCMSとして運用できるようになる。Web Designer Wallでは、僕はカスタムフィールドを記事イメージと記事へのリンクを表示するために利用している。
はじめに記事のカスタムフィールドに追加する。

記事イメージと記事へのリンクを表示するため、以下のコードをループに入れる。

<?php //get article_image (custom field) ?>
<?php $image = get_post_meta($post->ID, 'article_image', true); ?>

<a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>

Tips：WordPressでは複数のキーを作り、保存もできる。その上、そのキーはほかの記事にも使うことができる。これを忘れてはならない。
僕は同じ手順を使い、Best Web Galleryでとてもダイナミックなテンプレートを作った。そこで、サイトのサムネール、ツールチップのイメージ、URLを表示するために、カスタムフィールドを使っているのだ。

（訳者注：すごく便利な機能です。WordPressでECサイトっぽいテンプレートを作る。でも少し触れましたが、個々の商品の価格や仕様を入れれるようにあらかじめコーディングしておくと、サイト管理の時間を削減できます。また、プラグインのGet Custom Field Valuesを入れておくと、ちょっと幸せになれます）

リストページ

wp_list_pagesというテンプレートタグは、ナビゲーションのためにヘッダーやサイバーにページの一覧を表示するために使われる。どのようにwp_list_pagesを用いて、サイトマップやサブメニューを作るのかを示してみよう。

サイトマップ

全てのページのサイトマップ（サンプル）を作るために、サイトマップのページテンプレートに次のコードを入れよう。（注意：僕はページID12を除外している。なぜならページID12は僕のサイトマップ自身のページであり、そのページを表示する必要がないと思うからだ）。

<ul>
  <?php wp_list_pages('exclude=12&title_li=' ); ?>
</ul>

ダイナミックサブページメニュー

サブページにいるとすると、サブページのメニューを出力する。そうするためには、このコードをsidebar.phpに入れよう。

<?php
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if ($children) { ?>
<ul>
  <?php echo $children; ?>
</ul>
<?php } ?>

（訳者注：これも便利。ページ機能を使いすぎると、どうしてもページ数が多くなってしまい、サイドメニューが縦長になったりしてしまいます。その収納方法として使えます）

ページテンプレート

WordPressをベーシックなWebページ管理システムとして使いたいのであれば、ページテンプレート機能を見逃してはならない。
どのようにページがどのように表示されるべきかを制御するのがページテンプレート機能だ。この機能を使うためには、まずページテンプレートを作る必要がある。それから、あるページに特定のテンプレートを指定することができるようになる。
ページテンプレートがどのように構造化されたのかを示してみよう。（例えば、portfolio.php）

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
  //the loop here
<?php get_footer(); ?>

記事を投稿したり編集したりするときに、右側に“Page Template”というタブを見つけることができるだろう。ここに利用できるテンプレートが表示される。

（訳者注：個人的にはあまりページテンプレートは増やしたくない、できればWPのデフォルトのページテンプレート機能だけで完結させたいです。でも、知っておくと、いざというときに使えます）

WordPress各種設定

管理画面には、はじめからたくさんの設定をすることができ、もっとあなたのサイトをよくできる。ここにいくつかあげよう。

トップページをカスタムする

デフォルトにおいては、WordPressはトップページにあなたの記事を表示する。しかし、もし静的なページ（ようこそやスプラッシュなど）を代わりに使いたいのであれば、管理画面 > 各種設定 > 表示設定から決定することができる。

（訳者注：home.phpとの使い分けがキーポイントでしょう。この機能を使えばトップページに掲載するコンテンツもページ機能で管理することができます。でも、キービジュアルと新着情報を掲載するくらいであれば、home.phpで管理してもよいような気がします）

パーマリンク

デフォルトのWordPressは記事のURLにwww.yoursite.com/?p=123というものを使っているが、これは検索エンジンにとって好ましいURLではない。パーマリンクは、管理画面 > 各種設定 > パーマリンク設定から変更することができる。個人的には、パーマリンクは/%category%/%postname%/が気に入っている。

（訳者注：WPを使うブロガーは/%category%/%postname%/をよく使っていますが、一般の人たちが管理するサイトの場合にはちょっと悩みどころ。わざわざ記事を投稿するたびにURLを設定するのはよろしくないかも。個人的には、3番目のNumericが好みです）

カテゴリ接頭語

デフォルトのWordPressのカテゴリの接頭語は、カテゴリになっている（例：yoursite.com/category/cat-name/）。
これにarticleをカテゴリーベースに入れることにより（各種設定 > パーマリンク）、カテゴリURLをyoursite.com/article/cat-name/にすることができる。

まだあるかい？

WordPress Codexは常にWordPressについて学ぶ最高の場所だ。Thank you WordPress and happy blogging!

訳者より一言

WordPressをブログではなく、CMSとして使い、その上デザインにこだわって作ろうとすると、WPが用意するテンプレートタグでは足りなくなります。あとは、いかにしてコンディショナルタグなどを使い分けていくかが、WPでうまくサイトを構築できるのかのキーポイントになります。筆者も最後で言うように、WordPress Codexは本当にすごいリソースです。英語なのが痛いところではあるんですが、ぜひとも参考にしたほうがよいかと思います。
あと、WordPressで企業サイトを作る際によく使うプラグインとWordPressで企業サイトを作る際に押さえておくべき10個のことという記事も書いていますので、ご参照ください。