yoshiislandblog.net
元営業の駆け出しアラサーSEが、休日にMACと戯れた際の殴り書きメモ。日々勉強。日々進歩。
20220523_wordpress_posts_list_3

WordPressで投稿一覧ページを作成する

2022-05-23

WordPressで投稿一覧ページを作成する

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("&laquo; Newer Posts") ?>
          </div>
          <div id="next-posts">
            <?php next_posts_link("Older Posts &raquo;"); ?>
          </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

20220523_wordpress_posts_list_1

Posts Pageの設定

「Settings」>「Reading Settings」に移動
「Your homepage displays」の「A static page」のラジオボタンをチェック
「Posts page」で先程作成した固定ページを選択する
20220523_wordpress_posts_list_2

これで、「home.php」と先程作成した固定ページが紐づく

「Blog pages show at most」から一度に表示するブログ一覧の記事数を指定することができる

これで「http://【Blog Link】/blog/」にアクセスすると、記事一覧ページができる
20220523_wordpress_posts_list_3

以上。