オリジナルテーマ WordPress

WordPressオリジナルテーマの作り方⑥(記事一覧ページ編)

WordPressオリジナルテーマの作り方⑥(記事一覧ページ編)

今回はWordPressオリジナルテーマの作り方【第6回】記事一覧ページ編となります。

前回までに以下の事をやってきました。

今回は記事一覧ページについて書いていきたいと思います。

効率よくWordPress制作したい人はこちら

WordPressオリジナルテーマ:記事一覧ページの作り方

まずはテンプレートファイルを作成します。

今回はWordPressオリジナルテーマの作り方①(ファイルの準備編)で作成したhome.phpを使っていきます。

それではこれからコードを書いていきます。

 

記事を取得するためのループを書く

まず基本となるheader.phpとfooter.phpを読み込む為のインクルードタグを書きます。

ここはトップページの作り方と同じですね。

これは <?php get_header(); ?><?php get_footer(); ?>が追記されている以外は、前回のブログカード編の中身と同じです(もちろん案件によって中身は異なります)

<?php get_header(); ?>
<ul>
  <li>
    <a href="<?php the_permalink(); ?>"> // 記事へのリンク
      <div>    
        <img src="<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>" /> // アイキャッチ
      </div>   
        <div>    
         <div>
           <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> // カテゴリー名
         </div>
         <p>
           <time datetime="<?php the_time('Y-m-d'); ?>">
             <?php the_time('Y年m月d日'); ?> // 投稿日
           </time>
         </p>
         <h2>
           <?php the_title(); ?> // タイトル
         </h2>   
         <div>
           <?php the_excerpt(); ?> // 本文の抜粋
         </div>
      </div>   
    </a>
  </li>
</ul>
<?php get_footer(); ?>

ここに繰り返し処理であるループの記述するとこうなります。

<?php get_header(); ?>
<ul>
  <?php if(have_posts()): while(have_posts()): the_post(); ?>
  <li>
    <a href="<?php the_permalink(); ?>"> // 記事へのリンク
      <div>    
        <img src="<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>" /> // アイキャッチ
      </div>   
        <div>    
         <div>
           <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> // カテゴリー名
         </div>
         <p>
           <time datetime="<?php the_time('Y-m-d'); ?>">
             <?php the_time('Y年m月d日'); ?> // 投稿日
           </time>
         </p>
         <h2>
           <?php the_title(); ?> // タイトル
         </h2>   
         <div>
           <?php the_excerpt(); ?> // 本文の抜粋
         </div>
      </div>   
    </a>
  </li>
  <?php endwhile; endif; ?>
</ul>
<?php get_footer(); ?>

3行目と25行目ですね。

 

ページネーションを設置

次はページ送りするページネーションを設置します。

<?php the_posts_pagination( array(
  'prev_text' => '前のページへ',
  'next_text' => '次のページへ'
  ) );
?>

これは上記コードで言えば</ul>タグの直後に書きます。

この "前のページへ" や "次のページへ" の文章は自由に変えられます。

ページネーションについては細かく書くと大変なので、ここのページネーションは一例と思って下さい。

それでは最後に全体を見てみます。

<?php get_header(); ?>
<ul>
  <?php if(have_posts()): while(have_posts()): the_post(); ?>
  <li>
    <a href="<?php the_permalink(); ?>"> // 記事へのリンク
      <div>    
        <img src="<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>" /> // アイキャッチ
      </div>   
        <div>    
         <div>
           <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> // カテゴリー名
         </div>
         <p>
           <time datetime="<?php the_time('Y-m-d'); ?>">
             <?php the_time('Y年m月d日'); ?> // 投稿日
           </time>
         </p>
         <h2>
           <?php the_title(); ?> // タイトル
         </h2>   
         <div>
           <?php the_excerpt(); ?> // 本文の抜粋
         </div>
      </div>   
    </a>
  </li>
  <?php endwhile; endif; ?>
</ul>
<?php the_posts_pagination( array(
   'prev_text' => '前のページへ',
   'next_text' => '次のページへ'
   ) );
?>
<?php get_footer(); ?>

このループ処理とページネーションの書き方はカスタム投稿の記事一覧ページでも同じです。

 

一覧表示する記事数を設定

あとは一覧ページに表示する記事数を設定します。

設定 → 表示設定を選択します。

するとこちらが表示されるので「1ページに表示する最大投稿数」で設定可能です。

 

以上です。


まとめとおまけ

今回の内容ですが、以下のような設定も可能です。

  • PCでの表示数設定
  • スマホでの表示数設定
  • カテゴリーを1件だけ表示
  • カテゴリーを全部表示
  • ページネーションの前へ次へを画像にする

これらの設定方法は以下のコーディング&WordPressメモまとめ集コピペ出来るように掲載しています。

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-オリジナルテーマ, WordPress
-