投稿ページの作成
Twitter Bootstrap 3 を用いて WordPress テーマを作成しよう ③まででメインとなる「index.php」では投稿一覧の表示まで行いました。今回は、投稿の個別ページを表示する「single.php」を作成します。「index.php」からリンクされたページは、WordPress により「single.php」に誘導されるため、「index.php」に手を入れる必要はまったくありません。
single.php
投稿個別ページと聞くと、何から手を付けなければいけないかわからない、という方もいらっしゃるかもしれませんが、個別ページの作成方法は投稿一覧とよく似ています。まず、前回までの「index.php」を見てください。
<!-- Example row of columns -->
<div class="row">
<div class="col-sm-8">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post() ?>
<div class="row">
<div class="col-sm-4">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( array( 180, 9999 ) ); ?>
</a>
</div>
<div class="col-sm-8">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div>記事が見つかりませんでした。</div>
<?php endif; ?> </div>
<div class="col-sm-4">
<?php get_sidebar(); ?> </div>
</div>
</div>
これが前回までに作成した投稿一覧を表示する「index.php」です。続いて今回作成する、「single.php」の全容です。
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-sm-8">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post() ?>
<h3><?php the_title(); ?></h3>
<div>
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div>記事が見つかりませんでした。</div>
<?php endif; ?>
<div class="col-sm-4">
<?php get_sidebar(); ?> </div>
</div>
<?php get_footer(); ?>
差異は当然あるにしても、「index.php」と作りが似ていることに気が付くと思います。投稿一覧を作成する際に使用した、have_posts() 関数や、the_post() 関数も登場します。これらの関数について詳細に知りたい場合は、Twitter Bootstrap 3 を用いて WordPress テーマを作成しよう ②で詳しくご紹介していますので是非参考にしてみてください。
投稿一覧と投稿個別ページで、唯一大きく異なるのがthe_excerpt() 関数ではなく、the_content() 関数を呼び出しているところです。前者は本文の抜粋でしたが、後者は本文の内容をすべて表示します。これで投稿の内容を個別ページに出力することができました。
「index.php」と「single.php」には共通点が多い
ソースコードを参照すると、両者にあまり差異がないことに気付くかもしれません。複数のソースに同一の内容のコードを書いておくと、修正が発生した場合に、漏れなくすべての箇所を洗い出す必要があることから、共通化できるものは共通化しておいたほうがよいでしょう。
そこで、「index.php」に「single.php」の内容をマージし、必要な時だけ「single.php」の個別部分を呼び出すように、両者のソースコードを修正します。ただし、「single.php」という名前のファイルが存在すると、WordPress は投稿個別ページの呼び出し時にこのファイルを使用してしまうため、この時点で「single.php」は「content-single.php」に名称を変更します。
index.php
<?php get_header(); ?>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-sm-8">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post() ?>
<?php if ( is_single() ) { get_template_part( 'content-single' ); } else { ?>
<div class="row">
<div class="col-sm-4">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( array( 180, 9999 ) ); ?>
</a>
</div>
<div class="col-sm-8">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; ?>
<?php else : ?>
<div>記事が見つかりませんでした。</div>
<?php endif; ?> </div>
<div class="col-sm-4">
<?php get_sidebar(); ?> </div>
</div>
</div>
<?php get_footer(); ?>
content-single.php
<?php the_title(); ?>
</h3>
<div>
<?php the_content(); ?>
</div>
注目すべきは、「index.php」の分岐点です。is_single() 関数を使って、投稿個別ページかどうかを判定し、もしそうなら投稿個別ページのテンプレートを呼び出しています。テンプレートの呼び出しには、get_template_part() 関数を使います。
また、「content-single.php」については、「index.php」との共通部分を取り除いたところ、たった 2 行のソースコードにおさまりました。
投稿一覧ページも別ファイルとして作成する
WordPress には、投稿一覧、投稿個別ページのみならず、アーカイブページ、検索結果、カテゴリーページ、著者ページと多数のページが存在します。今後、このようなページについて、すべて部品化していくことを考えると、投稿一覧ページについても、ファイルを分割した方がメンテナンス性がよさそうです。
というわけで、「index.php」から投稿一覧部分を切り出し、「content-index.php」という名前でファイルを保存します。
index.php
<?php get_header(); ?>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-sm-8">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post() ?>
<?php if ( is_single() ) { get_template_part( 'content-single' ); } else { get_template_part( 'content-index' ); } ?>
<?php endwhile; ?>
<?php else : ?>
<div>記事が見つかりませんでした。</div>
<?php endif; ?> </div>
<div class="col-sm-4">
<?php get_sidebar(); ?> </div>
</div>
</div>
<?php get_footer(); ?>
content-index.php
<div class="col-sm-4">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( array( 180, 9999 ) ); ?>
</a>
</div>
<div class="col-sm-8">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div>
<?php the_excerpt(); ?>
</div>
</div>
</div>
これでだいぶ見通しがよくなりました。
まとめ
第 4 回までで、WordPress のテーマ開発に必要な知識の基本的な部分についてはすべて揃いました。ページネーションやページャー、関連記事の表示など、細かな部分についてはまだまだ残っていますが、Twitter Bootstrap 3 を使ったサイト構築の流れについては、ひととおり掴んでいただけたのではないでしょうか。連載としては今回が最後になります。最後までご愛読いただきましてありがとうございました。
本連載に対するご意見、ご要望、叱咤激励、何でもお待ちしております。コメント欄、または @おったんまでお願いします。