WordPress のトップに最新の記事一覧を表示する(1)

トップページ(フロントページ)はブログの顔、自由にカスタマイズして表示したい。WordPress は設定で最新の投稿を表示するか、固定ページを表示するか選択できるようになっている。当ブログでは、記事の更新内容を伝えたいので、最新の投稿を表示するように設定している。ただ、1ページに表示する最大投稿数を「1」に設定しているため、最新1件しか表示しない。そこで、WordPress をカスタマイズして最新8件の要約を表示するようにした。

WordPress の日本語版では、ブログのトップページは「フロントページ」と呼ぶ。古いバージョンでは、トップページとフロントページが混在していたようだが、英語表記に合わせてフロントページに統一したという経緯があるようだ。以下、フロントページに統一する。

なお、原稿執筆時点の環境は WordPress 3.7.1-ja、テーマには TwentyTwelve を改造したものを使用している。

フロントページ用のファイルを用意する

WordPress は、要求されたページを判断して使用するテンプレートを決定する。どのテンプレートを使用するかは、WordPress Codex 日本語版、テンプレート階層に図版がある。設定で最新の投稿を選択している場合、フロントページは home.php を使用する。

テンプレートは通常テーマに含まれており、たとえば Twenty Twelve を利用している場合は、「wp-content/themes/twentytwelve」の下に各種テンプレートが格納されている。フロントページ用のファイルは用意されていなかったので、archive.php を home.php にコピーした。

複数の投稿を読み込むコード

WordPress が home.php を呼び出したとき、記事はすでに読み込まれている。ただし、1ページに表示する最大投稿数を「1」に設定しているため、読み込まれた記事は1つのみだ。ページの最初で、query_posts を利用して8件の投稿を読み込むようにした。get_header(); は最初からある記述、以下2行は追加したコードだ。

get_header();
$paged = get_query_var('paged');
query_posts('posts_per_page=8&paged=' . $paged);

「$paged = get_query_var(‘paged’);」は、2ページ目以降を表示するために取得している。設定によりページを指定する URL は異なるが、当ブログの場合、https://www.united-bears.co.jp/blog/page/2という指定をすると、フロントページの2ページ目を表示する。前述の URL がリクエストされた場合、「$paged」には「2」が格納される。
「query_posts(‘posts_per_page=8&paged=’ . $paged);」は、投稿を読み込む関数の呼び出しだ。引数として記事数(posts_per_page)と、ページ(paged)を渡している。

投稿を読み込む WordPress の関数

WordPress は、以下の3つの方法で投稿を読み込むことができる。

query_posts() 関数の使用
get_posts() 関数の使用
WP_Query() オブジェクトの使用

利用する方法により、WordPress のグローバル変数に与える影響が異なる(※)。以下、利用する関数による動きの違いを要約する。サンプルコードを含む詳細な説明を読みたい人は、wpxtreme のWordPress ループ＆クエリーのモヤモヤを解消しよう！が非常にわかりやすい。

query_posts() 関数の使用	$wp_query を上書き。以降のコードで、読み込んだ投稿を元に have_posts() や the_post() 関数などを利用可能
get_posts() 関数の使用	$post を上書き。$wp_query を上書きしないので、関連する投稿を取得する場合などに利用。投稿の内容は、関数の戻り値で取得可能
WP_Query() オブジェクトの使用	$post を上書き。WP_Query()オブジェクトを使用

※PHP でグローバル変数に頼るコードは読みにくくバグを生みやすいが、WordPress は後方互換性を保つためにレガシーな作りのままになっているようだ。WordPress のコードの問題点は、レガシーズ公式ブログのレガシーコード in WordPressがわかりやすいだろう。

次回は、投稿内容と過去の投稿、新しい投稿のリンクを表示するコードを紹介する。