投稿記事一覧を表示させる[ループ]

2016年6月18日

テーマを一から作成する 第4回目

 

前回はindex.phpテンプレートをheader.phpやfooter.phpテンプレートに分割するまでを行いました。今回は、下記イラストの構造における「記事」の部分を作成していきます。

 

第3回目 header/saidebar/footerに分割する[wp_head][wp_enqueue_style]

 

indexを分割

 

 

スポンサーリンク

 

 

まずテンプレートにコードを記述する前に、適当な記事を投稿して下さい。

 

 

記事内には「続きを読む」タグを挿入しています。

投稿の編集

 

 

今回は以下のような記事を3つ投稿しています。

投稿記事一覧

 

 

次にフロントページ(index.php)に、投稿した記事の一覧を表示させます。index.phpテンプレートを以下のように記述してみます。

 

index.php

 

5行目と13行目のループの部分は以下のような構成になっています。

記事(投稿)があるかを判定し、 if(have_posts())

記事がある間はループさせ while(have_posts())

記事を取得します。 the_post()

記事が無くなればループを終了し endwhile

完了となります。 endif

 

記事が3件表示されました。

投稿一覧3件

 

 

次に表示件数を変更してみます。設定>表示設定 画面の「1ページに表示する最大投稿数」はデフォルトでは10件に設定されているので、2件に設定してみて下さい。

 

最大投稿件数

 

フロント画面は最新の記事が2件だけ表示されます。以前の記事一覧を見るためには、「古い投稿ページへ」のような文言とそのリンクを用意しなくてはいけません。この場合、previous_posts_linknext_posts_link タグを記事ループの外に記述します。

 

 

古い投稿ページへのリンクが貼られる。

投稿一覧2件

 

古い投稿ページのリンクをクリックすると2ページ目が開きます。

古い投稿ページへ遷移

 

 

今回作成した最終のindex.phpです。

 

 previous_posts_link とnext_posts_link タグとは別に、個別記事ページ(single.php等)で利用するページ送りのための previous_post_link とnext_post_link タグがあることに注意して下さい。postの後にsがあるかないかの違いです。

 

 

今回作成したテーマファイルは以下のリンクからダウンロードできます。

 

ダウンロード

 

次回は個別記事ページを作成します。

第5回目

個別記事ページを作成する[single.php]

 

 

 

参照ページ


 

WordPress
Codex日本語版

ループ

テンプレートタグ/the permalink

テンプレートタグ/the title

テンプレートタグ/the time
テンプレートタグ/the category
テンプレートタグ/the content

テンプレートタグ/previous posts link

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー