WordPressのカスタムテンプレートを使って、異なるサイドバーを含むレイアウトを作成

WordPressとはWEB上で使われている最大規模のブログプラットフォームの１つで、その知名度の成長とありがたいほどの柔軟性により、静的なWEBサイトのCMSとしての使用される機会も非常に増えています。

そのようなサイトは主にWordPressのページ機能を中心に構築されておりますが、「ニュース」や「ブログ」ページを作成する為などに、特別カテゴリーの投稿表示を可能にさせておいた方が都合がよいこともあります。今回のアーティクルではカスタムサイドバーやサムネイル等を含め、WEBサイト上でブログページを作成する為のカスタムテンプレートの使い方についてご紹介していきます。
　　　

今から作成するもの

画像は一見にしかずなので、それでは作成したい内容をざっと見てみましょう。

まずWEBサイト内に、2つのページを作成します：

左の「Normal page」では、例として「home」と「about」と言うページを作りたいと思います。実際にページ上で表示させたい項目は以下の通りです。

• ページコンテンツ
• 検索ボックスとカレンダーで構成されたサイドバー

右側の「My Blog(or news) page」で表示させたい項目はこちらです。

• 「ブログ」と名付けるページ内容
• 最新投稿リスト（1ページに付き3つの投稿と一部のサムネイル）
• ブログ記事に関連するカスタムサイドバー（RSSリンクとカテゴリーリストから構成）

たたき台が完成したので、早速コーディングから始めていきましょう！

「ブログ」WordPressページテンプレートの作成

まずは先ほどのレイアウトを使いこなす為に、ブログ用の独自のページテンプレートを作成する必要があります。こちらがテンプレート用の全コードです。「blog.php」という名前で保存してください。

<?php
/*
Template Name: blog_in_blog
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<!-- Get the content of the blog article  -->
<?php  // get the content of our "my blog page"
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <h1 class="entry-title"><?php the_title(); ?></h1>
    <div class="entry-content">
        <?php the_content();  ?>
    </div><!-- entry-content -->
</div><!-- post-->
<hr/>
<?php endwhile; ?>
<?php  // get the articles of category 3 4 and 5
query_posts('cat=3,4,5&posts_per_page=3');
rewind_posts();
get_template_part( 'loop', 'archive' );
 ?>
</div><!-- content -->
</div><!-- container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
   

それではこれから１つ１つ説明していきましょう。

テンプレートの名前

一行目にはテンプレートの名前を書きましょう。

/*
Template Name: blog_in_blog
*/
   

この「blog_in_blog」の部分はダッシュボードの「ページ属性」＞「テンプレート」の下の所に表示されます。（後程詳しく説明しますね。）

ページ内容にの取得

次に「ウェルカム」メッセージページの内容を取得させています。

<!-- Get the content of the blog article  -->
<?php  // get the content of our "my blog page"
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <div class="entry-content">
            <?php the_content();  ?>
        </div><!-- entry-content -->
    </div><!-- post -->
    <hr/>
<?php endwhile; ?>
   

基本的にはpage.phpに書かれているコードと同じコードです。

投稿の取得

さてではテンプレート内で一番面白くて重要なパートに移りましょうか。下記のコードで投稿部分を取得します。

<?php  // get the articles of category 3 4 and 5
query_posts('cat=3,4,5&posts_per_page=3');
rewind_posts();
get_template_part( 'loop', 'archive' );
?>
   

ここで使用しているquery_posts()ファンクションでは2つのパラメータを使用しています。1つ目は表示させたい投稿のカテゴリーIDでもう1つはページごとの投稿数です。文章で説明すると「カテゴリー3と4と5に割り当てられたすべての投稿を、デフォルトの年次順で、1つのページに付き3つずつ表示させなさい」と指示していることになります。勿論カテゴリーIDはWordPressのインストール自体に依存します。query_postsのパラメータを変更する事は可能ですが、今回の例では1ページ毎に3つずつで丁度いいのではないかと思います。

これらの投稿を表示させるには、get_template_partファンクションでループのデフォルトアーカイブパートを使用します。これにより55文字の抜粋部分と「続きを読む」リンクが表示されます。

ブログページへのテンプレートの割り当て

次のステップは先ほど作成したばかりのテンプレートをブログページに割り当てることです。まずはタイトルブログを作成して、素敵なウェルカムメッセージを書き込みましょう。

それから右側に行って、「ページ属性（Page Attributes）」パネルの「テンプレート（Template）」のドロップダウンメニューから「blog_in_blog」を選んでください。

ページを保存すると、以下のような感じで表示されているはずです。

ちょっとこれではみすぼらしいので投稿サムネイルを加えて、もう少し魅力的なページにしていきましょう。

投稿サムネイルをブログページへ追加

投稿サムネイルの有効化

WordPress 3.0+では投稿サムネイルはあまり簡単なものとは言えません。デフォルトテーマのTwenty Tenをお使いのみなさんの場合は投稿サムネイルは既に有効化されています。この機能が存在するかどうかを確認する為にはfunction.phpファイルを開いて下記のコードがあるか見てみてください。

add_theme_support( 'post-thumbnails' );
   

もし上記のコードがfunction.phpファイルに無かったら、単純ですが、追加しておきましょう。

アイキャッチ画像パネルの追加

デフォルトではそのテーマでサムネイルが有効化されたら、投稿エリアの右側のパネルに「アイキャッチ画像（Featured Image）」が追加されることになっています。

「アイキャッチ画像を設定（Set featured image）」をクリックしてファイルを選択し、「投稿に挿入（insert into post）」ではなく「アイキャッチ画像として使用（Use as featured image）」をクリックします。それから「全ての変更を保存（save all changes）」をクリックしてメディアパート部分は完了です。もし全てうまくいっていたら、アイキャッチ画像パネルに画像が表示されているはずです。次にすることはテンプレートでの画像表示を有効化させることです。

ブログテーマにサムネイルを追加

ここで少しblog.phpファイルに戻ってみましょうか。投稿を表示させる為にループのアーカイブテンプレートパートを使用しました。なので今度はサムネイルをloop.phpに追加する必要があります。

アーカイブに関する行を探しているので、開始行から探してみましょうか。

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search.
   

抜粋記事にならないようにサムネイルを追加するにはthe_post_thumbnail()ファンクションを利用しましょう。

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<div class="entry-summary">
<?php
// thumbnails function
if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) {
    the_post_thumbnail(
    array(80,80), array(
        'class' => 'alignleft post_thumbnail',
        'alt'   => trim(strip_tags( $attachment->post_excerpt ))));
} ?>
<?php the_excerpt(); ?>
</div><!-- entry-summary -->
   

初めの配列（array）で80×80ピクセルの画像サイズを与えています。2つ目の配列（array）では画像用のクラスとalt属性（他の属性に関してはコーデックスをご参照ください）という、ファンクション上で使用可能ないくつかのデフォルト属性を使用しています。

サイドバーのセットアップ

投稿部分も終わってサムネイル部分も終わったので、次にするべきことはサイドバーのカスタマイズです。最初に少し触れましたが、今回2つのサイドバーが必要ですよね。1つはWEBサイトの「Normal page」用でもう1つは「My Blog(or news) page」用でしたね。

ウィジェットエリアのセットアップ

Twenty Tenテーマには3つのサイドバーのウィジェットエリアと、4つのフッターが付属しています。管理画面の「外観（Appearances）」＞「ウィジェット（Widgets）」にはサイドバーを作成する為のエリアが2つあります。「primary widget area」は固定ページ用に使用する予定なので、検索ボックスとカレンダーウィジェットを追加しましょう。「secondary widget area」はブログページやアーカイブ、投稿ページ用に使用するので、RSSリンクを表示させる為のfeed text link widgetとカテゴリーウィジェットを追加しましょう。

サイドバー表示の為に条件分岐タグの使用

「blog.phpテンプレートを使用して投稿したら2つ目のウィジェットエリアに表示され、それ以外のテンプレートを使って投稿したら1つ目のウィジェットに表示される」と言うような、とてもシンプルな指示をWordPressに出したかったとしたらどのようにしたらいいと思いますか。あ、それとカテゴリーは投稿にリンクされているので、カテゴリーも2つ目のウィジェットに表示させたいですよね。

ではまずは使用するコードを見てみましょうか。

<?php
wp_reset_query();
if ( (is_page_template('blog.php'))OR(is_category(3,4,5))OR(is_single())) {
if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
    <ul class="xoxo">
        <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
    </ul>
</div><!-- secondary widget-area -->
<?php endif; ?>
<?php }
else {
// A second sidebar for widgets, just because.
if ( is_active_sidebar( 'primary-widget-area' ) ) : ?>
<div id="primary" class="widget-area" role="complementary">
    <ul class="xoxo">
        <?php dynamic_sidebar( 'primary-widget-area' ); ?>
    </ul>
</div><!-- secondary widget-area -->
<?php endif;
} ?>
   

まずはwp_reset_query();の部分ですが、ページが呼び出された時にクエリーを元の状態に戻すものです。ページ間での衝突を避け条件分岐タグを問題なく動作させる為に必要となってきます。

サイドバーの中核、条件分岐タグに移りましょうか。まず初めにblog.phpテンプレートをブログページに使用したかどうか検出する為に、is_page_template(‘blog.php’)を使用します。is_page_template()という条件分岐タグは、PHP用の拡張子（.php）で保存されているファイルを使用する必要があり、それ以外だと動作しません。また2つ目のサイドバーにカテゴリーを表示する為に、is_category(3,4,5)とis_single()を使ってチェックしています。あとは2つ目のウィジェットエリアを取得する為のコードを記述しています。

1つ目のウィジェットエリアはそれ以外の全てのページで使用されるので、条件のその他の部分に記述します。完成するとこのようになるはずです。

終わりに・・・

さて、これで完成です！今回はWordPressのカスタムテンプレートを使って、カスタムサイドバーのある固定ページとブログページがある基本的なWEBサイトを作成する方法をご紹介しました。勿論コードは改善してテーマに沿った調整する必要はありますけれどね。

カスタムサイドバーなんて必要ないし、もっと簡単なものが作りたい！と言う方は、特定のページを全ての投稿を表示する為のフロントページとして使用することが出来ます。これは「設定（Setting）」＞「表示設定（Readings）」で固定ページにチェックを入れ、特定のページを投稿のフロントページと設定することが出来ます。あとはblog-in-blogと言う面白いプラグインを使うと言う手もあります。