ゼロから始めるWordPress自作テーマ #11「ブログ投稿の一覧ページをつくろう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第１１回は「ブログ投稿の一覧ページをつくろう」です。
ブログ投稿一覧ページを作成して、そのページにリンクさせます。WordPressのフックという概念についても学習します。また、ページに表示させる投稿数を制限したり、ページ送り機能を作成したりします。
もくじ
完成形
今回の完成形です。トップページから投稿一覧ページに遷移します。
今回のコードは以下から取得できます。
今回は以下のステップで進めていきます。ちょっと長いです。
- 投稿一覧ページを作成する
- 投稿一覧ページへのリンクを張る
- 投稿一覧ページのタイトルを表示する
- 表示投稿数を変更する
- ページ送りをつくる
Step.1 投稿一覧ページを作成する
実装方法
投稿のカテゴリごとの一覧ページは、何も設定しなくても作成されていました。一方、すべての投稿一覧を表示するページは、明示的に作成する必要があります。
ページの作成は functions.php に以下のように記述します。
// 投稿のアーカイブページを作成
function post_has_archive($args, $post_type)
{
if ('post' == $post_type) {
$args['rewrite'] = true;
$args['has_archive'] = 'blog';
}
return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);これで、https://ブログURL/blog というURLに、投稿一覧のアーカイブページが作られるようになります。
簡単ですね。
このままコピペでも良いのですが、add_filter という関数について説明します。add_filter はフィルターフックと呼ばれるWordPress上の重要な概念です。階層テンプレートも重要ですが、同じくらいフィルターフックも重要な概念です。
フックとは
フックは「物を引っかける器具」のことです。
WordPressでも同じような意味で、「イベントに引っかける処理」のことをフックと呼びます。イベントが起こったときに、引っかけておいた（登録しておいた）処理を実行する仕組みです。
たとえば、ヘッダーを表示するタイミングに引っ掛けたり、データベースから投稿データを取得するタイミングに引っ掛けたり、します。WordPressは、こういったイベントを定義していて、そのイベントに処理させたい内容を引っ掛けることができます。フックをつかうことで、このタイミングでは別の処理を挟みたいというようなカスタマイズができるようになります。
アクションフックとフィルターフック
フックには、アクションフックとフィルターフックの２つがあります。
アクションフックは、ページを表示するタイミングなど、表示や見た目の処理に関するイベントへのフックのことです。一方で、フィルターフックは、データの取得や登録など、データベースに対する処理に関するイベントへのフックのことです。
アクションフックは見た目、フィルターフックはデータ、に関するイベントのフックと把握しておけば良いと思います。実際のところ、イベントが起こるタイミングが違うだけで、フックとしての機能は同じなので、詳しい違いを理解しておかなくてもOKです。
それぞれどんなフックイベントがあるのかは、以下のリンクに記載されています。
上記の実装方法でうまく行かない場合は
上記の実装方法だと、ローカル環境では正しく動作したのですが、サーバー上の本番環境では正しく動作しませんでした。わたしの環境では以下の実装を試すと、正しくカテゴリ一覧のページを表示できましたので、うまく行かない場合は試してみるといいかと思います。
Step.2 投稿一覧ページへのリンクをつくる
トップページの新着投稿一覧の下に、投稿一覧ページへのリンクをつくります。
先ほど作成したblogというURLへのリンクを配置するだけです。
ボタンのcssはGitHubのソースを参照ください。
<main class="main-top">
<div class="content-area">
<!-- 新着投稿を表示 -->
<h2 class="top-header">NEW ARTICLES</h2>
<div class="new-post-container">
<!-- 省略 -->
</div>
<!-- ブログ投稿一覧ページへのリンク -->
<div class="center-btn">
<a href="<?php echo home_url('/blog'); ?>" class="btn">▶ ALL ARTICLES</a>
</div>
</div>
</main>Step.3 投稿一覧ページのタイトル表示を変える
カテゴリ一覧のアーカイブページを表示するときは、archive.phpの以下のようなコードでカテゴリ名を表示するようにしていました。
<!-- カテゴリ名の表示 -->
<?php $title = single_cat_title('', false); ?>
<h2 class="top-header">CATEGORY : <?php echo $title; ?></h2>ブログ投稿の一覧ページは、すべてのカテゴリの投稿を表示します。そのため、$title にはカテゴリ名が入ってきません。そのため、以下のようにコードを修正します。$title にカテゴリ名が入っている場合はカテゴリ名を表示して、$title にカテゴリ名が入っていない場合は「すべての投稿」と表示させます。
<!-- カテゴリ名の表示 -->
<?php $title = single_cat_title('', false); ?>
<?php if ($title) : ?>
<h2 class="top-header">CATEGORY : <?php echo $title; ?></h2>
<?php else: ?>
<h2 class="top-header">すべての投稿</h2>
<?php endif;?>これで、ブログ投稿の一覧ページで正しくページタイトルを表示できるようになりました。
Step.4 投稿一覧の表示数を変更する
１ページに最大何個の記事を表示させるかを設定します。
トップページの新着一覧は８個で、カテゴリ一覧やブログ投稿一覧は１２個のように、用途によって表示を変えるケースがよくあります。
まず、最大表示数を決めます。上記の例では、１２個が最大表示数です。これをWordPressの「表示設定」で設定しておきます。
その上で、用途に応じて表示投稿数を制限します。制限するには、posts_per_pageというクエリを使用します。今回は新着の記事一覧の数を８個に変更したいので、front-pageで以下のように指定します。
<main class="main-top">
<!-- 新着の記事一覧 -->
<div class="content-area">
<h2 class="top-header">NEW ARTICLES</h2>
<div class="new-post-container">
<!-- ページの最大表示投稿数を変更 -->
<?php query_posts('posts_per_page=8'); ?>
<?php while (have_posts()) : ?>
<?php the_post(); ?>これで、新着投稿は８個まで、ブログ一覧やカテゴリ一覧では１２個まで表示させるように設定できました。
Step.5 ページ送りを作成する
ページ数が増えてきて、最大表示数より多くなると、ページ送り（ページネーション）が必要になってきます。ページ下部にある「１，２，…，次へ」みたいなやつですね。
ページネーションを表示させたい位置 archive.php の下部に以下のようなコードを追加します。
<!-- ページネーション -->
<div class="post-pagenation">
<?php the_posts_pagination(
array(
'mid_size' => 2, // 表示するページ番号の数
'prev_next' => true, // 「前へ」「次へ」のリンクを表示するか
'prev_text' => __( '<'), // 「前へ」リンクのテキスト
'next_text' => __( '>'), // 「次へ」リンクのテキスト
'type' => 'list',
)
); ?>
</div>これで、ページ送りができます。リストのHTMLになっていますので、見た目は適宜cssで調整します。
まとめ
今回は、ブログ投稿一覧のアーカイブページを作成しました。
アーカイブページをつくるだけでなく、WordPressのフックという概念も把握できました。フックを使うと、さまざまなイベントに応じてカスタマイズさせることができるようになります。最初は理解が難しいかもしれませんが、何回かフック処理のコードを書いていくと、どういうモノかが分かるようになると思います。
次回は、ブログのロゴをつくります。