いままでの投稿のタイトル一覧を表示したいなら、コード書いたりしないとダメらしい。けっこう大変!

ググったら方法がいろいろ出てきたから百番煎じ感あるけど、覚書しておく。

完成物

下記をクリックすると表示される。

記事一覧

用語

ページ

WordPressのコンテンツには「投稿」と「ページ」の2種類がある。

時系列順表示させる、いわゆるブログ記事にあたるものは、「投稿」。

「ページ」は、時系列で管理するようなものではないコンテンツ(「このサイトについて」とか、「投稿一覧」とか)を書くためのもの。

参考

カスタムページテンプレート

ページでは、自分で作ったテンプレートを使える。

ページのコンテンツとしてはテンプレートタグとかPHPコードを書けないので、そういうものを使いたければ、テンプレートを自作する。

ページの作成方法とテンプレートの設定方法

ページを作る

管理画面で、メインナビゲーションメニュー(左メニュー)から「固定ページ」を選んで、「新規追加」する。

参考

テンプレートを配置する

テンプレートを書いたら(書き方は後述)、そのファイルを、使っているテーマのディレクトリ内に配置する。

WordPressが動いているサーバにSSHとかFTPで接続して、「wordpress/wp-content/themes/テーマ名/」の下に配置。

いまの自分の手元の環境(ほぼデフォルトのはず)だと、下記のような感じ。ここに、作ったテンプレートを追加する。

$ ls /var/www/html/wp-content/themes/twentyseventeen/
404.php      comments.php    functions.php  index.php   rtl.css         search.php   style.css
archive.php  footer.php      header.php     page.php    screenshot.png  sidebar.php  template-parts
assets       front-page.php  inc            README.txt  searchform.php  single.php

参考

ページで使うテンプレートを選ぶ

ページの作成画面の、画面右側の「固定ページの属性」欄で、「テンプレート」のドロップダウンメニューから選ぶ。

テンプレートを1つも作っていなかったら、「テンプレート」のドロップダウンメニューがそもそも表示されない(ここでけっこう混乱した。。。)。

ページを作る

テンプレートを選んだら、ページそのもののコンテンツは空のまま、「公開」をクリックして公開する。

テンプレートの内容

WP Queryを使う。

完成形

<?php
/*
Template Name: list-posts-5
*/
?>

<?php get_header(); ?>

<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <style type='text/css'>
            a {
                text-decoration: underline;
            }
            .list-posts-pagination-container {
                width: 300px;
            }
            .list-posts-index-container {
                border-top: solid 1px black;
                border-bottom: solid 1px black;
                clear: both;
            }
            </style>

            <h2> 記事一覧 </h2>

            <?php
            // the query
            $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => 5,
                    'paged' => $paged,
            );
            $the_query = new WP_Query( $args ); ?>

            <?php if ( $the_query->have_posts() ) : ?>

                <!-- pagination here -->
                <!-- next_posts_link() に max_num_pages を指定して使う -->
                <div class="list-posts-pagination-container">
                    <div class="nav-previous alignleft"><?php next_posts_link( 'Older Entries', $the_query->max_num_pages ); ?></div>
                    <div class="nav-next alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
                </div>

                <!-- the loop -->
                <div class="list-posts-index-container">
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <p>
                        <?php the_time('y/m/d') ?>:  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </p>
                <?php endwhile; ?>
                </div>
                <!-- end of the loop -->

                <!-- pagination here -->
                <!-- next_posts_link() に max_num_pages を指定して使う -->
                <div class="list-posts-pagination-container">
                    <div class="nav-previous alignleft"><?php next_posts_link( 'Older Entries', $the_query->max_num_pages ); ?></div>
                    <div class="nav-next alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
                </div>

                <?php
                // クエリとページネーションをクリーンアップ(メインクエリを再設 定)
                wp_reset_postdata();
                ?>

                <?php wp_reset_postdata(); ?>

            <?php else : ?>
                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
            <?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer(); ?>

完成までの道のり

最初は、WP Queryのページにあるサンプルを真似て作った。

new WP_Query( $args );の$argsの箇所についても、WP Queryのページに説明があるので、てきとうにパラメータを調べつつ作成。

コードを表示




<div style="text-decoration:underline" onclick="this.parentNode.style.display='none'">
  閉じる
</div>


 

 

このままだと、CSSが適用されなくて見栄えがぜんぜん整ってなかったので、テーマ内の既存のテンプレートを真似て、適宜class属性を設定したdivタグで囲んだり、get_header()とかget_footer()を呼んだりした。

テーマ内のテンプレートは、管理画面で、下記の手順で確認できる。

  「外観 -> テーマの編集 -> 個別投稿ページ (page.php)」

コードを表示




<div style="text-decoration:underline" onclick="this.parentNode.style.display='none'">
  閉じる
</div>


 

 

さらに、記事のタイトルをリンクにして、クリックすると記事に飛べるようにした。ついでに、記事の投稿日も表示されるようにした。

記事の情報(タイトル、日付、リンク等)は、テンプレートタグを使えば取得できる(投稿についてのタグは、「投稿タグ」の節にまとめられてる)。

コードを表示




<div style="text-decoration:underline" onclick="this.parentNode.style.display='none'">
  閉じる
</div>


 

 

投稿の数が多くなった時に、1ページにつき最大50件まで表示するようにして、続きの50件は別ページで表示する、とかいうことをしたい(最初に書いたサンプルのページだと、最大5件表示するようにしてる)。

これをやるために、ページネーションの処理を書いた。

これも、公式のwikiにいいサンプル(サンプル1サンプル2)があるので、基本的に真似ただけ。

あと、CSSを書いて体裁を整えたりして完成。