WordPressで投稿一覧ページを作成する
2022-05-23
WordPressで投稿一覧ページを作成する
Contents
home.phpの作成
投稿一覧のデザインは「home.php」に記述する
「home.php」は、以下のように作成する
「while ( have_posts() ) : the_post();」でループを回して記事一覧を出力する
$ cat home.php <?php get_header(); ?> <div id="wrapper"> <aside> <?php dynamic_sidebar( 'Sidebar' ); ?> </aside> <div id="content"> <div id="posts"> <div class="transparent-box"> <?php while ( have_posts() ) : the_post(); ?> <section <?php post_class('post-list'); ?>> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(array(80, 80)); ?> </a> <?php echo get_the_date( 'Y-m-d' ); ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php the_category( '</span><span class="category-item">' ); ?> </section> <?php endwhile; ?> <div id="page-navi"> <div id="previous-posts"> <?php previous_posts_link("« Newer Posts") ?> </div> <div id="next-posts"> <?php next_posts_link("Older Posts »"); ?> </div> </div> </div> </div> </div> </div> <?php get_footer(); ?>
ページ送りの関数は以下の通り、デフォルトの表示で使うと紛らわしいので、わかりやすい文言に変えておく方がおすすめ
個別記事のページ送りの場合
デフォルトで「« 古い投稿のタイトル」と表示される
デフォルトで「新しい投稿のタイトル »」と表示される
previous_post_link
記事一覧ページ送りの場合
デフォルトで「« Previous Page」と表示される
デフォルトで「Next Page »」と表示される
previous_posts_link
固定ページの作成
ここからは、「http://【Blog Link】/blog/」にアクセスすると「home.php」が表示されるように設定する
「Pages」から固定ページを作成し、slugをblogにしておく
固定ページのタイトルは必須なので適当に指定する
中身はhome.phpに記載しているので何も書かなくてOK
Posts Pageの設定
「Settings」>「Reading Settings」に移動
「Your homepage displays」の「A static page」のラジオボタンをチェック
「Posts page」で先程作成した固定ページを選択する
これで、「home.php」と先程作成した固定ページが紐づく
「Blog pages show at most」から一度に表示するブログ一覧の記事数を指定することができる
これで「http://【Blog Link】/blog/」にアクセスすると、記事一覧ページができる
以上。