「全記事一覧」を固定ページのカスタムテンプレートで作る [WordPressテーマ作成の手順17]

オリジナルテーマの構成はだいたい組み上がったのですが、ここで、全記事の一覧が欲しくなりました。
WordPressで全記事一覧用テンプレートが用意されているのかと思ったのですが、無いんですね。そこまで至れり尽くせりじゃないか、WordPress。
固定ページのカスタムテンプレートでアーカイブ的なページを作れるようなので、それを全記事一覧に利用できないかと、さっそく試してみました。

本ブログの「全記事一覧」はこちら。(戻ってきてね)
この「全記事一覧」ページ↑の作り方を、今回メモっていきます。

本日のINDEX

スポンサーリンク

category.phpをコピーしてカスタムテンプレートを作る

category.php じゃなくても、tag.php でも同じ。アーカイブ用の表示を流用します。

category.php(tag.php も)では、ループ内に
get_template_part(‘each_exrpt_post’); を使って、パーツテンプレート「each_exrpt_post.php」を呼び出している。
これは home.php の時に作った「抜粋セット」をまんま流用したもの。
今回の全記事一覧でも、コレを流用します。

同じく category.php(tag.php も)で設置したページャーもそのまま流用したい。

というわけで、既にできているアーカイブ用のテンプレートを使えば早い。

category.phpをコピーして、適当な名前を付けます。
ここでは「page_all.php」にしました。(ファイル名はなんでもOK。自分がわかりやすいものに)
これを、固定ページのカスタムテンプレートにします。

カスタムテンプレートの宣言

カスタムテンプレートには、ファイルの冒頭にphpのコメントで、名前(Template Name)を宣言してあげる必要があります。

<?php
/*
Template Name: Page_all
*/
?>

ここでは名前をファイル名と同じ「Page_all」にした。が、別に違ってもOK。
ファイル名よりも、この Template Name: での宣言名のほうが大事。
Template Name:で名前をつけることによって、WordPressがカスタムテンプレートであることを認識し、固定ページ編集画面の、ページ属性>テンプレートにこの名前が表示され、選択できるようになります。

全記事一覧部分を作る

冒頭にカスタムテンプレート名の宣言をしたあとは、ファイルにちょっと書き足して、全記事一覧を表示できるようにします。

ページ送りのためのソースを加える

category.php や tag.php などのWordPressのアーカイブ用テンプレートでは、デフォルトで、ページ送りの機能が使えるようになっているのでカンタンでした。
「管理画面>設定>表示設定」で「1ページに表示する最大投稿数」を指定すれば、そのまま反映された。
(参考:カテゴリーに属する記事を一覧表示するcategory.phpを作る [WordPressテーマ作成の手順13]

ページ送りとは
アーカイブ用ページで、例えば 1ページに6コ記事を表示するように指定したら、該当する記事が7個以上の場合、2ページ目以降も作って表示する。これがページ送りね。

今回作るのは、WordPressで用意されたアーカイブ用テンプレートではないので、ページ送りの機能を付けてやる必要があります。
で、ループの前に、下記の2行を追加。

<?php 
$paged = get_query_var('paged');
query_posts("posts_per_page=9&paged=$paged&orderby=date&order=DESC");

if (have_posts()) : //ここからループの始まり

2行目の $paged = get_query_var(‘paged’); は、ページネーションの現在のページを取得するそうです。
(参考サイト:関数リファレンス/get query var-WordPress Codex 日本語版
(「これでは現在のページが0になるので1にして使う」…などの情報もあったのですが、今回の場合は上記ソースでOKでした)

3行目の query_posts() で、1ページにつき何記事表示するかや、ページ送り、表示順を指定しています。(query_posts はもう古い…なんて噂もありますが、素人には指定がカンタンなので使いました)

  • posts_per_page=9 で、1ページに9コ記事を表示します。(数字を適当に変えて使う)
  • paged=$paged で、2行目の $paged = get_query_var(‘paged’); を受けて、現在のページから記事群を表示するそうです。
  • orderby=date は投稿日順。orderbyには他には author(著者順)、comment_count(コメント数順)、rand(ランダム)などもあります。
  • order=DESC は降順(大きい値から小さい値へ)。日付だと新しい順になります。(逆の昇順ASC
    *ちなみにASCDESCとは…
    ・ASC = Ascending order(昇順)の略
    ・DESC = Descending order(降順)の略

参考サイト:
テンプレートタグ/query posts -WordPress Codex 日本語版
関数リファレンス/WP Query(パラメータの確認ができます)-WordPress Codex 日本語版

ページャーを上部にもつけて

これでもう、全記事を日付順で一覧表示するカスタムテンプレートになったのですが、
category.phpでは、下部にだけ表示している「ページャー」を、上部にも付けてみます。
これは、ループのif文の範囲に置くので、下記のようになりました。
(ハイライト部分がページャー)

<?php 
$paged = get_query_var('paged');
query_posts("posts_per_page=9&paged=$paged&orderby=date&order=ASC");

if (have_posts()) : ?> //ここからループの始まり
<!--------------PageNavi--------------->
<div class="col-full">
  <div class="wrap-col" id="pager">
    <?php
    if (function_exists('page_navi')) :
    page_navi('elm_class=page-nav&edge_type=span');
    endif;?>
  </div>
</div><!---PageNavi END-->

<?php while (have_posts()) :
  the_post();
  get_template_part('each_exrpt_post'); //抜粋セットをループ表示
endwhile;?>

<!--------------PageNavi--------------->
<div class="col-full">
  <div class="wrap-col" id="pager">
    <?php
    if (function_exists('page_navi')) :
    page_navi('elm_class=page-nav&edge_type=span');
    endif;?>
  </div>
</div><!---PageNavi END-->

<?php endif; ?> //ループ終了

タイトルまわりも書き換えよう

category.php をコピーして作っているので、タイトル部分が、
<h1><?php single_cat_title(); ?></h1>
になっている。
これじゃマズイので、
<h1><?php the_title();?></h1>
に書き換えます。
これで、固定ページ編集画面で書くタイトルが、ここに表示されるようになりました。

さてこれで、カスタムテンプレートが出来上がったので、これを固定ページで指定します。

固定ページでカスタムテンプレートを指定する

できあがったカスタムテンプレートを、固定ページに指定して全記事一覧ページを完成させます。

「管理画面>固定ページ>新規追加」で新しい固定ページを作り、下記のように指定します。

タイトルとパーマリンクは必須。これが全記事一覧ページのタイトルとして出力され、URLもこれで決まります。
「ページ属性>テンプレート」で、さきほど作ったカスタムテンプレートの名前(ファイル名ではなく、ファイル内の冒頭で宣言した名前)が出ていますので選択します。
このほか、メタ情報も固定ページでは重要ですので書いておきます。

で、記事の本文は不要です。
この固定ページに使うカスタムテンプレートは記事を出力する部分が無いので、書いても無駄だし。アーカイブを出力するページなので、記事本文はいらんのですよ。

これで「全記事一覧」は完成。
ここでできたパーマリンクを、トップページやサイドバーに置けば、いつでも「全記事一覧」を参照できるようになりました。意外とカンタン。便利ですねWordPress。

Share on FacebookTweet about this on TwitterShare on Google+

関連記事

WordPressの Embedカードのリンクを別ウィンドウで開く(PCのみ。スマホ・タブレットはそのまま)

WordPressの Embedカード(ブログカード)のリンクは、デフォルトでは同ウィンドウで開くようになっていますが、これを別ウィンドウ(別タブ)で開くように [記事を読む]

WordPressの Embedカードのスタイルを編集する方法2つ

前回の記事で、WordPress 4.5 の Embedカード(ブログカード)の「テンプレートの構成」や「HTML要素のクラス名」などを調べました。これを元に、 [記事を読む]

WordPress4.5で Embedカードの PHPファイルの構造がだいぶ変わったみたい

前回から WordPressの Embedカード(ブログカード)について調べたことをメモっています。 今回は Embedカードの PHPファイルの構造について [記事を読む]

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

^