カテゴリー: カスタマイズ

WordPress の記事作成には、２つのタイプがあります。ひとつは投稿。もうひとつは固定ページです。その固定ページですが、テーマによってはテンプレートを選ぶことができます。例えば、WordPress にデフォルトで備わっているテーマの場合を見てみましょう。
Twenty Elevenの場合、テンプレートは３種類あります。

基本的にこれらのテンプレートのうち、どれかを使えば事足りるとは思いますが、中にはちょっと違うレイアウトのテンプレートが欲しいと思う場合もあるでしょう。
特に、〝トップページのみ〟他のページとは違ったレイアウトにしたいと思う事は少なくないのではないでしょうか？　かく言うぼくも、トップページのみレイアウトや表示を変えたいと思った事が多々あります。そんな時は条件分岐タグを使うのも１つの方法ですが、テンプレートファイルを新たに作成し、別のレイアウトを表示してくれる方法を使うのも手です。
この記事では、そんなテンプレートファイルの作り方を説明していきます。

事例）Twenty Eleven の場合

テンプレートファイルとは？

ここでは、WordPress のデフォルトテーマである Twenty Eleven を例に取って見て行きます。Twenty Eleven には３種類のテンプレートがありました。デフォルトテンプレート・サイドバーテンプレート・ショーケーステンプレートの３つです。これら３つのテンプレートを呼び出すファイルは次の３つです。

これらのファイルを開いてみてください。ショーケーステンプレートは結構複雑で、何が書かれているのかよく分かりませんが、デフォルトとサイドバーテンプレートは、結構スカスカで、簡単な作りになっているのが分かると思います。
ですが、その全ての元になっているのはデフォルトテンプレートです。よく見てみると、デフォルトテンプレートとサイドバーテンプレートの違いは、サイドバー呼び出すタグがあるかないかの違いだけです。

デフォルトテンプレート

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>
		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
					<?php comments_template( '', true ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->
<!-- サイドバーのタグなし -->
<?php get_footer(); ?>

サイドバーテンプレート

<?php
/**
 * Template Name: Sidebar Template
 * Description: A Page Template that adds a sidebar to pages
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>
		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
					<?php comments_template( '', true ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->
<?php get_sidebar(); ?><!-- サイドバーのタグあり -->
<?php get_footer(); ?>

Twenty Eleven に新たにテンプレートを追加したい場合は、サイドバーテンプレートを活用すると簡単です。

(1) テンプレートファイルを複製する

まずは、サイドバーテンプレートを複製します。ファイル名は適当に付けてください。ここでは、【 sub-page.php 】としておきます。複製したファイルは子テーマのテーマフォルダにアップロードしましょう。

(2) テンプレートであることを認識させる

複製したファイルを開くと以下のようになっています（サイドバーテンプレートと同じ内容）。このファイルを新しいテンプレートと認識させるのはとても簡単です。冒頭部分の【 Template Name: Sidebar Template 】という部分に新しい名前を付けるだけです。【 Sidebar Template 】の部分ですね。ここは日本語でもOKです。

<?php
/**
 * Template Name: サブページ ←ここの名前を任意に変更するだけ！
 * Description: A Page Template that adds a sidebar to pages
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>

これで一旦固定ページ作成画面を見てみましょう。新しいテンプレートが認識されているはずです。

新しいテンプレート用のスタイルシートを適用する

新しく追加したテンプレートには、一部適用されないスタイルシートがあります。例えば、今回はサイドバーテンプレートを複製しましたが、サイドバーテンプレートにしか適用されないスタイルは、新しいテンプレート（ここではサブページテンプレート）に適用されません。そのため、サイドバーの位置が横ではなく、コンテンツの下にきているはずです。
新しいテンプレートだけにスタイルを適用させたい場合は、以下のように書くと便利です。

/* ファイル名の sub-page.php のみに適用させるスタイル */
.page-template-sub-page-php p {/*サブページの p タグの文字色は全て赤色になります。*/
	color: #f00;
}

もしくは、カスタムフィールドを使って、該当する固定ページのみに適用される専用スタイルシートを、新たに追加する方法もあります。
また、テンプレートに割り振られている id 自体を、新しく書き換えてもいいです。しかし、そうすると全てのスタイルをいちから適用し直さなくてはならなくなるので面倒です。

WordPress にはたくさんのおしゃれなテーマがあります。ですが、自社の色を出したり、自分独自のオリジナリティを出すにはある程度カスタマイズしたいと思いますよね？　一言で言えば、オリジナルのデザインテーマが欲しいということになるのではないでしょうか？
ですが、WordPress を集客やセールスに活用したいと考えるなら、サイトのカスタマイズに時間をかけるわけにはいきません。ぼくたちはあくまでもビジネスに WordPress を活用したいと考えているわけで、ウェブデザイナーになりたいわけではありません。
なので、できるだけ無駄な時間をかけずにカスタマイズするべきです。いちいち検索で調べたり、人に聞いたり、質問したり、そんな時間がもったえないですよね。

WordPress を使う本当の目的は
デザインスキルを身に付けることではない

また、完全にオリジナルのテーマを作るというのも非効率です。ぼくたちは WordPress のテーマを自作できるスキルを身につける必要はないのです。自社のイメージに合わせて、全体のカラーを整えたりレイアウトを整えたりできればいいわけです。
ですので、WordPress のテーマを 1 から作るのではなく、既にあるテーマを自分好みにカスタマイズできるようになれば十分なのです。そして、そのために必要なスキルや知識、テクニックなどは実はそんなに多くありません。中でもスタイルシートを変更する方法を身に付ければ、ある程度自分の好きなデザインにしていくことができます。
そこで、なるべく時間を書けずに Twenty Eleven のスタイルシートを変更し、Twenty Eleven をベースとしたオリジナリティのある WordPress サイトをつくろう！　ということで、あるマニュアルを作成しました。それがこちら。

WordPress のデフォルトテーマである Twenty Eleven の CSS の変更方法に特化したマニュアルです。ただし、これは Twenty Eleven のスタイルシートの内容を解説したものではありません。逆引きマニュアルとなっているように、「○○を変更したい場合は、●●を変更すれば OK」ということが瞬時に分るようにしたマニュアルです。
2013 年 2 月時点で 30 項目の変更箇所を記載しています。例えば「ヘッダーの高さを変更したいな〜」と思た場合、目次をざっと探して 9 番目の項目をクリックすると、該当ページへジャンプします。後はそこに書かれているスタイルの書き方をコピペして、好きな高さを指定すれば OK です。簡単ですよね？
そのような項目を、ヘッダー・グローバルナビゲーションメニュー・コンテンツ部分などに分けて、30 項目に渡って掲載しています。さらにこのマニュアルは、今後も変更内容を追加していく予定です。

Twenty Elevenを使う３つの理由

2013 年現在、WordPres sのデフォルトテーマの最新版は Twenty Twelve です。Twenty Eleven は 1 つ前のタイプのテーマです。
なぜ、Twenty Eleven を使うのでしょうか？

理由１）シンプルでカスタマイズ性が高い

Twenty Eleven はとてもシンプルな作りです。かつ、サイドバーも右・左と選べますし、フッターにも最大３つまでウィジェットを追加できます。つまり基本的なレイアウトは管理画面から簡単に変更できます。
また、デザインはシンプルかつ基本的なパーツはそろっているため、ビジネス上必要なコンテンツを見せるためのデザインが簡単にできます。タイトル・画像・ナビゲーションメニュー・サイドバー・フッターなど、これらの基本的なパーツを簡単に管理画面から編集することができます。
また、ある程度テーマファイルの中身も把握すれば、より自由にコンテンツを見せることも可能です。

理由２）新たに他のテーマのCSSを理解する時間がもったえない

CSS も基本的なことは一緒です。例えば文字の大きさを指定したければ【font-size】を使います。そこに違いはありません。ですが、id や class といった CSS セレクタの指定の仕方は、テーマごとに異なります。ですので、テーマが変われば改めて CSS の中身を把握しなければならず、そこに時間がかかります。
Twenty Eleven に関して今まで時間をかけてきていますので、今から更なる時間をかけて別のテーマの中身を理解するのは非効率です。Twenty Eleven はアップデートも繰り返されているテーマですのでまだまだ使えます。Twenty Twelve も魅力的ですが、こちらの分析・解析は他の専門家に任せて、ぼくたちは慣れ親しんだテーマを使いましょう。

理由３）情報が多い

これも理由 2 と似たような感じですが、Twenty Eleven はリリースされてから時間が経っているため、ネット上に関連情報が多いというのが挙げられます。また WordPress のデフォルトテンプレートであるため、やはり情報が多い。
他のテーマの場合、カスタマイズ方法を調べてみても、たいして情報が出てこない場合が多いでしょう。Twenty Elevenなら、デフォルトテーマということもあり、色んな人が使い方やカスタマイズの方法を公開してくれています。なので、時間短縮にもなりますし、調べる労力が減り、効率もよくなります。

無駄な時間を省いて、効率よくカスタマイズを

以上、Twenty Eleven を使う理由を挙げてみました。結局のところ、インターネットを使ったマーケティングに WordPress を使っていくとなると、最も重要なことはコンテンツをつくることです。質・量ともに重要です。この一番重要な部分に時間と力を注ぎ、その他の部分はできるだけ簡単に、効率よくできるようにしようというのが、このマニュアルの趣旨です。
「時は金なり」なんて言われますが、実際は「時は金よりも貴重」です（お金は失っても取り戻せますが、時間は失ったら失ったままですからね……）。ぜひ、作業の効率化を図って、ビジネスを成長させていってください。
＞ ダウンロードはこちらの専用ページから、無料でできます。