オリジナルテーマ WordPress

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

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

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

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

記事一覧ページ用のテンプレートファイルを作成

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

今回は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>   
         <time datetime="<?php the_time('Y-m-d'); ?>">
           <?php the_time('Y年m月d日'); ?> //投稿日
         </time>
         <h3>
           <?php the_title(); ?> //タイトル
         </h3>   
         <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>   
         <time datetime="<?php the_time('Y-m-d'); ?>">
           <?php the_time('Y年m月d日'); ?> //投稿日
         </time>
         <h3>
           <?php the_title(); ?> //タイトル
         </h3>   
         <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>   
         <time datetime="<?php the_time('Y-m-d'); ?>">
           <?php the_time('Y年m月d日'); ?> //投稿日
         </time>
         <h3>
           <?php the_title(); ?> //タイトル
         </h3>   
         <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ページに表示する最大投稿数」で設定可能です。

 

カスタム投稿の一覧表示の場合はここではなく、functions.phpで調整しますが今回は割愛させて頂きます。

以上です。

-オリジナルテーマ, WordPress