テーマを一から作成する 第4回目
前回はindex.phpテンプレートをheader.phpやfooter.phpテンプレートに分割するまでを行いました。今回は、下記イラストの構造における「記事」の部分を作成していきます。
第3回目 header/saidebar/footerに分割する[wp_head][wp_enqueue_style]
スポンサーリンク
まずテンプレートにコードを記述する前に、適当な記事を投稿して下さい。
記事内には「続きを読む」タグを挿入しています。
今回は以下のような記事を3つ投稿しています。
次にフロントページ（index.php）に、投稿した記事の一覧を表示させます。index.phpテンプレートを以下のように記述してみます。
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php get_header(); ?> <main> <?php if(have_posts()): while(have_posts()):the_post(); ?> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time> <p><?php the_category(', '); ?></p> <p><?php the_content('Read more'); ?></p> <?php endwhile; endif; ?> </main> <?php get_sidebar(); ?> <?php get_footer(); ?> |
5行目と13行目のループの部分は以下のような構成になっています。
記事（投稿）があるかを判定し、 if(have_posts())
記事がある間はループさせ while(have_posts())
記事を取得します。 the_post()
記事が無くなればループを終了し endwhile
完了となります。 endif
記事が3件表示されました。
次に表示件数を変更してみます。設定＞表示設定 画面の「1ページに表示する最大投稿数」はデフォルトでは10件に設定されているので、2件に設定してみて下さい。
フロント画面は最新の記事が2件だけ表示されます。以前の記事一覧を見るためには、「古い投稿ページへ」のような文言とそのリンクを用意しなくてはいけません。この場合、previous_posts_link とnext_posts_link タグを記事ループの外に記述します。
古い投稿ページへのリンクが貼られる。
古い投稿ページのリンクをクリックすると2ページ目が開きます。
今回作成した最終のindex.phpです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php get_header(); ?> <main> <?php if(have_posts()): while(have_posts()):the_post(); ?> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time> <p><?php the_category(', '); ?></p> <p><?php the_content('Read more'); ?></p> <?php endwhile; endif; ?> <?php previous_posts_link('新しい投稿ページへ'); ?> <?php next_posts_link('古い投稿ページへ'); ?> </main> <?php get_sidebar(); ?> <?php get_footer(); ?> |
previous_posts_link とnext_posts_link タグとは別に、個別記事ページ（single.php等）で利用するページ送りのための previous_post_link とnext_post_link タグがあることに注意して下さい。postの後にsがあるかないかの違いです。
今回作成したテーマファイルは以下のリンクからダウンロードできます。
次回は個別記事ページを作成します。
第5回目
参照ページ
WordPress
Codex日本語版
テンプレートタグ/the time
テンプレートタグ/the category
テンプレートタグ/the content
