WordPressテーマで記事一覧を出力する

以前にheader.phpとsidebar.php、footer.phpの共通部分を切り出して実装しました。

その時作ったテーマは下です。

test_theme

今回はこの中のindex.phpをいじって記事一覧を表示できるようにしたいと思います。

 

index.phpのコード

取り合えずコードを示します。それから説明を加えていこうと思います。ここを理解できれば他のページも同様に実装できる箇所も多いので張り切っていきましょう。

<?php get_header(); ?>
  <main id="main">
    <!-- 変更箇所 -->
    <div class="entry-list">
<?php
if ( have_posts() ) :
  while ( have_posts() ) :
    the_post();
?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <time class="entry-time" datetime="<?php the_time('Y.m.d'); ?>"><?php the_time('Y.m.d'); ?></time>
<?php
    if (get_the_modified_time('Y.m.d') != get_the_time('Y.m.d')) :
?>
        <time class="entry-time">(最終更新日: <?php the_modified_time('Y.m.d'); ?>)</time>
<?php
    endif;
?>
<?php
    if ( has_post_thumbnail() ) :
?>
        <div class="entry-thumbnaiil">
          <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
        </div>
<?php
    endif;
?>
<?php
    if ( has_category() ) :
      $categories = get_the_category();
?>
        <div class="entry-category">
<?php
      foreach($categories as $category) :
?>
          <a href="<?php echo get_category_link($category->term_id); ?>" rel="tag"><?php echo $category->cat_name ?></a>
<?php
      endforeach;
?>
        </div>
<?php
    endif;

    if ( is_singular() ) :
?>
        <h1 class="entry-title"><?php echo get_the_title(); ?></h1>
<?php
    else :
?>
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo get_the_title(); ?></a></h2>
<?php
    endif;
?>
      </article>
<?php
  endwhile;
?>
    </div>
<?php
  the_posts_pagination();
endif;
?>
  <!-- 変更箇所ここまで -->
  </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

それでは重要な部分を見ていきます。

 

投稿取得のループ処理

if ( have_posts() ) :
  while ( have_posts() ) :
    the_post();
    /* ここで記事に対する処理、省略 */
  endwhile;
  the_posts_pagination();
endif;

この箇所が記事一覧取得の肝になります。WordPressテーマでよく用いられるループ制御です。

実はarchiveページやsingleページなどではあらかじめ記事のリストが取得されています。例えばあるカテゴリのページだとそれに属する記事リストは既に取得されています。そのため、その記事リストから「the_post()」で取り出し、「have_posts()」でまだリストに記事があるかどうかを判断しつつループ文を回せば記事一覧を取得できます。

「the_post()」で記事を一つ取り出した後は、その記事の投稿日や更新日、サムネイル、所属カテゴリ、タイトル、本文、URLなどをWordPressで用意された関数で取得できます。

「the_posts_pagination()」はWordPressダッシュボード→設定→表示設定の「1ページに表示する最大投稿数」を取得する記事数が超えた場合に、ページを分割し、その分割した他のページへのリンクを出力するものです。

それではループ内の記事情報の取得処理をみていきます。

 

投稿日・更新日の取得

index.phpのソース内の以下が投稿日や更新日を出力する処理にあたります。

<time class="entry-time" datetime="<?php the_time('Y.m.d'); ?>"><?php the_time('Y.m.d'); ?></time>
<?php
    if (get_the_modified_time('Y.m.d') != get_the_time('Y.m.d')) :
?>
        <time class="entry-time">(最終更新日: <?php the_modified_time('Y.m.d'); ?>)</time>
<?php
    endif;
?>

「the_time()」が投稿日取得、「get_the_modified_time()」が更新日を取得する処理になります。途中のif文は投稿日と更新日を比べて同じであれば更新日は出力しないようにするための処理です。

なお「Y.m.d」はphpの日付フォーマットに従って変更しても構いません。

 

サムネイル取得

<?php
    if ( has_post_thumbnail() ) :
?>
        <div class="entry-thumbnaiil">
          <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_post_thumbnail(); ?></a>
        </div>
<?php
    endif;
?>

if文でサムネイルが設定されているかどうかを判定し、されていればサムネイルを取得します。サムネイルには「the_permalink()」で記事へのリンクを取得し貼り付け、「php the_post_thumbnail()」でサムネイルを出力しています。

 

カテゴリ取得

<?php
    if ( has_category() ) :
      $categories = get_the_category();
?>
        <div class="entry-category">
<?php
      foreach($categories as $category) :
?>
          <a href="<?php echo get_category_link($category->term_id); ?>" rel="tag"><?php echo $category->cat_name ?></a>
<?php
      endforeach;
?>
        </div>
<?php
    endif;

if文でカテゴリが設定されているかどうかを判定しカテゴリがあれば、foreachでループを回してそれぞれ取得します。「get_the_category()」で全ての所属カテゴリを取得できるのでそこから一個ずつ要素を取り出して処理を行います。取り出した要素はメンバーを持っていて、そのメンバーの値を使用することでカテゴリのURLやカテゴリ名などが取得できます。「echo get_category_link($category->term_id)」の箇所ではカテゴリのURL、「echo $category->cat_name」の箇所ではカテゴリ名を出力しています。メンバーの値については以下を参照してみてください。

 

 

タイトル取得

<?php
    if ( is_singular() ) :
?>
        <h1 class="entry-title"><?php echo get_the_title(); ?></h1>
<?php
    else :
?>
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo get_the_title(); ?></a></h2>
<?php
    endif;
?>

一応if文で記事の詳細ページでないかを確認(is_singular)して、タイトル出力を行います。タイトルにも記事へのURLをはり(the_permalink)そして、記事タイトルを出力します(get_the_title)。

 

記事内容の出力

ここに掲載したindex.phpでは呼び出されていませんが、「the_content()」という関数で記事内容全てを、「the_excerpt()」という関数で記事の抜粋を出力することもできます。記事一覧を出力する際には抜粋を出力してあるページもよくみますね。

 

動かしてみる

実際に動かしてみると、日付、サムネイル、カテゴリ、記事タイトルが全て表示されることを確認できました。下はページの一部のスクリーンショットです。画面下部ではページが分割されて続きがあることを確認できます。ただ見栄えはあまりよくありません。これをstyle.cssでデザインしていくことになるわけです。

 

まとめ

今回は記事一覧の出力を行うところを実装しました。ここまでのソースを以下に置いておきます。

test_theme_2

同じ要領で他のページも実装する記事を書いていこうと思います。

return-top