いままでの投稿のタイトル一覧を表示したいなら、コード書いたりしないとダメらしい。けっこう大変!
ググったら方法がいろいろ出てきたから百番煎じ感あるけど、覚書しておく。
完成物
下記をクリックすると表示される。
用語
ページ
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のページに説明があるので、てきとうにパラメータを調べつつ作成。
このままだと、CSSが適用されなくて見栄えがぜんぜん整ってなかったので、テーマ内の既存のテンプレートを真似て、適宜class属性を設定したdivタグで囲んだり、get_header()
とかget_footer()
を呼んだりした。
テーマ内のテンプレートは、管理画面で、下記の手順で確認できる。
「外観 -> テーマの編集 -> 個別投稿ページ (page.php)」
さらに、記事のタイトルをリンクにして、クリックすると記事に飛べるようにした。ついでに、記事の投稿日も表示されるようにした。
記事の情報(タイトル、日付、リンク等)は、テンプレートタグを使えば取得できる(投稿についてのタグは、「投稿タグ」の節にまとめられてる)。
投稿の数が多くなった時に、1ページにつき最大50件まで表示するようにして、続きの50件は別ページで表示する、とかいうことをしたい(最初に書いたサンプルのページだと、最大5件表示するようにしてる)。
これをやるために、ページネーションの処理を書いた。
これも、公式のwikiにいいサンプル(サンプル1、サンプル2)があるので、基本的に真似ただけ。
あと、CSSを書いて体裁を整えたりして完成。