投稿者: PresentNote

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 を使っていくとなると、最も重要なことはコンテンツをつくることです。質・量ともに重要です。この一番重要な部分に時間と力を注ぎ、その他の部分はできるだけ簡単に、効率よくできるようにしようというのが、このマニュアルの趣旨です。
「時は金なり」なんて言われますが、実際は「時は金よりも貴重」です（お金は失っても取り戻せますが、時間は失ったら失ったままですからね……）。ぜひ、作業の効率化を図って、ビジネスを成長させていってください。
＞ ダウンロードはこちらの専用ページから、無料でできます。

Twenty Eleven でトップページやアーカイブページの記事一覧を抜粋表示にした場合、「続きを読む」の表示を変更したいと思ったことはありませんか？
デフォルトでは「続きを読む→」という感じで、テキストと→（矢印）だけです。目立ちませんし、味気ない。まぁこのブログはその味気ないままなんですが、そこは突っ込まないことにして、今回のコンテンツはこの「続きを読む→」のデザインを変更する方法に関してです。

記事の中にMoreタグを挿入した場合

More タグというのがあります。このタグを挿入すると、そのタグより前の文章だけが抜粋され、それ以降は「続きを読む」になります。記事の一覧ページやアーカイブページなどでは抜粋表示となり、個別投稿ページで全文表示となります。

ビジュアルエディタの場合）

テキストエディタの場合）

この場合、「続きを読む→」に class が割り振られます。自動的に。それがこちら。

ですので、この class に文字色や背景・画像などを指定すれば「続きを読む→」を自由にデザインできます。具体的なスタイルシートの書き方についてはのちほど。

Moreタグを使わず、常時抜粋表示になるようにテンプレートをカスタマイズしている場合

WordPress には、抜粋表示用のタグが用意されています。それがこちら。

<?php the_excerpt(); ?>

このタグを使えば、記事は抜粋表示になります。
このタグを使った、記事一覧の抜粋表示の方法についてはこちら。

トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-

このカスタマイズを行えば、いちいち記事ごとに More タグを指定しなくても、一定の文字数で自動的に抜粋表示してくれます。しかしこの場合、先ほどのような特定の class が割り振られません。【 more-link 】という class を指定しても、何も変化しないのです。
ではどのように指定すればいいのでしょうか？

「続きを読む」にclassを追加する方法

この編集は親テーマの functions.php を編集する必要がありそうです。該当箇所は以下の部分。

function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

<a> タグの中に class を指定すれば OK です。

function twentyeleven_continue_reading_link() {
return ' <a class="任意のセレクタを指定" href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

他にも、<a> タグの外を、<span> や <div> で囲っても OK です。

function twentyeleven_continue_reading_link() {
return ' <div class="任意のセレクタを指定"><a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a></div>';
/* </a>の後を必ず閉じるのを忘れないように！ */

<span> で囲むとインライン扱いなので、抜粋記事に続くように「続きを読む→」が表示されます。

<div> で囲むとブロック要素になるため、抜粋記事と「続きを読む→」が改行されて別段落として表示されます。

functions.phpを編集する場合の注意点

本来、テーマのカスタマイズは、子テーマをつくって編集するのが望ましいのですが、functions.php の場合はそうはいかない場合があります。親テーマと同じ内容を子テーマに記載すると、エラーが発生してサイトが表示されなくなるのです。
そのため、親テーマで既に記述されている内容を編集する場合は、親テーマの functions.php を直接編集する必要があります。そうなると、テーマのアップデートをした際に編集内容が元に戻ってしまいますので注意してください。

「続きを読む→」の編集テクニック

以上の方法で、「続きを読む→」をデザインするための下準備は整いました。あとはスタイルシートで編集をするだけです。

「続きを読む→」をスタイルシートでデザインする方法

指定した class に背景や文字色、余白などを指定していけば OK です。以下にサンプルを載せておきます。（functions.php の続きを読むの部分を <div> タグで囲った場合）

スタイルシートの記述例）

/* 続きを読む */
.read-more a {
 float: right;
 width: 100px;
 padding: 0.3em 1em;
 color: #eee;
 background: #000;
 border: 1px solid #666;
}

実際の表示）

「続きを読む→」の文言や矢印を変更する方法

「続きを読む」は「続きを読む」と表示されています。またその後の「→」も矢印のままです。これを好きな言葉に変更してみましょう。この変更は functoins.php を直接編集します。「Continue reading」と書かれている部分を好きな言葉に変更できます。

function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'もっと読む！（好きな言葉に置き換え） <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

矢印に関しては、HTML の特殊文字用コード（&rarr;）で記述されていますので、他のコードにしてもいいですし、消し去っても OK。その他の記号をそのまま記述して大丈夫です。

「続きを読む→」を画像にする方法

テキストではなく画像で表示させたい場合も、functions.php を直接編集します。テキストに該当する部分を消して、画像指定の <img> タグを使えば OK です。画像は絶対パスで指定しましょう。（Moreタグでの抜粋表示の場合は無効です。）

functions.phpの記述）

function twentyeleven_continue_reading_link() {
return ' <div class="read-more"><a href="'. esc_url( get_permalink() ) . '">' . __( '<img src="絶対パスで画像のURLを指定" alt="続きを読む" />', 'twentyeleven' ) . '</a></div>';

スタイルシートの記述例）

/* 続きを読む */
.read-more {
float: right;
}
/* マウスポインタを合わせると、光ったようになります */
.read-more:hover {
filter: alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
}

実際の表示）