1. TOP
  2. wordpressテーマ作成
  3. 5.WordPressのループを使い記事一覧を表示するindex.phpを作成する

5.WordPressのループを使い記事一覧を表示するindex.phpを作成する

|

index.phpは、[home.php(トップページ)][category.php(カテゴリ別一覧ページ)][tag.php(タグ別一覧ページ)][archive.php(アーカイブ一覧ページ)][serch.php(検索結果一覧ページ)]が作成されていない場合に、変わりとなって表示される万能テンプレートです。

また、WordPressで上記の記事の一覧を表示するためのphpファイルを作成していく際の、ベースとなるテンプレートでもあります。

WordPressテーマ作成5では、記事を呼びだすためのループの記述方法とテーマのメイン部分であるindex.phpの作成していきます。

メインループとサブループについて理解する

index.phpを作成する前に、記事の一覧を呼び出すためのwordpressのループについて理解しておきましょう。

ループとは、WordPressのデータベースから記事のデータを抽出して表示する機能で、WordPressが自動的に処理を行うメインループと自分で抽出条件を選択するサブループが存在します。

WordPressで自動的にページを生成する上で、ループは絶対に欠かせない存在なのでメインループとサブループに分けて理解しておきましょう。

メインループ

メインループでは、呼び出されたURLなどから自動的にWordPressが必要なデータを判別し表示させるループです。表示させるコンテンツはWordPressが自動で判別するので、TOPページや記事ページ・カテゴリ、タグ、アーカイブページなどで使用します。

メインループのソース
<?php if(have_posts()): while(have_posts()): the_post(); ?>

~ループ内で表示させたい内容を記述~

<?php endwhile; endif; ?>

『have_posts』という関数を使って記事のデータがあるかないかを判別し、『while』から後で繰り返しの処理を行なっています。

記述の後に、データベースから呼び出したいデータの指示(タイトルやURL・コンテンツなど)を記述し、最後に『<?php endwhile; endif; ?>』でループの処理を終了させましょう。

メインループで呼び出す記事の数は、管理画面の『設定』→『表示設定』→『1ページで表示する最大投稿数』で指定できます。

サブループ

サブループは、WordPressのデータベースから抽出するデータの条件を自分で指定することができます。記事の属性や、呼び出す記事数など様々な条件を付けて呼び出すことができるので様々な場面で活躍します。

サブループには、『WP_Query』『get_posts』『query_posts(非推奨)』の3つの形式がありますが、今回は一番取得できる情報量が多く複雑な処理が可能な『WP_Query』の使い方をご紹介します。

サブループのソース
<?php
$args = array(ここに条件を記述
);
$my_query = new WP_Query( $args );
while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

-ループ内で表示させたい内容を記述-

<?php endwhile; wp_reset_postdata(); ?>

『array()』の中の配列で、様々な記事の抽出条件を指定することで、好きな条件の記事を出力することができます。

パラメーターについては、コーデックスに詳しく記述されていますので参考にしてください。

サブループを使う場合は、ループ終了後に『wp_reset_postdata();』を記述して必ずループをリセットしてください。

index.phpにコンテンツを追加する

今回作成するWordPressテーマでは、一覧ページの記事情報に『サムネイル画像』『タイトル』『記事の投稿日』『カテゴリ』『抜粋』を呼び出して表示させます。

index.phpには、下記のコードを追加します。

index.phpのcontentsの後に追加
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <article <?php post_class( 'kiji-list' ); ?>>
    <a href="<?php the_permalink(); ?>">
      <!--画像を追加-->
      <?php if( has_post_thumbnail() ): ?>
        <?php the_post_thumbnail('medium'); ?>
      <?php else: ?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
      <?php endif; ?>
      <div class="text">
        <!--タイトル-->
        <h2><?php the_title(); ?></h2>
        <!--投稿日を表示-->
        <span class="kiji-date">
          <i class="fas fa-pencil-alt"></i>
          <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
            <?php echo get_the_date(); ?>
          </time>
        </span>
        <!--カテゴリ-->
        <?php if (!is_category()): ?>
          <?php if( has_category() ): ?>
          <span class="cat-data">
            <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
          </span>
          <?php endif; ?>
        <?php endif; ?>
        <!--抜粋-->
        <?php the_excerpt(); ?>
      </div>
    </a>
  </article>
<?php endwhile; endif; ?><!--ループ終了-->

上記のソースを追加することで、記事の一覧を出力することができます。一つ一つの要素については下記の通りです。

index.phpを構成する各要素

メインループ

<?php if(have_posts()): while(have_posts()): the_post(); ?>

  ~ループさせる内容を記述~

<?php endwhile; endif; ?>

index.phpでは、メインループを使用してWordPressのデータベースの中から自動で条件に合った記事の情報を取得します。

記事の各要素を出力する枠とリンク

<article <?php post_class( 'kiji-list' ); ?>>
  <a href="<?php the_permalink(); ?>">

  </a>
</article>

htmlのarticle要素で記事の箱を作り『<?php post_class( 'kiji-list' ); ?>』で『kiji-list+各記事の情報』がclass属性として追加されるように設定しています。

記事の項目をクリックしたときのリンクは『<a href="<?php the_permalink(); ?>">』で記述し、各記事のURLを自動で取得するようにしてください。

サムネイル画像

<?php if( has_post_thumbnail() ): ?>
  <?php the_post_thumbnail('medium'); ?>
<?php else: ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
<?php endif; ?>

画像は、各記事に設定されているアイキャッチ画像を自動で出力します。『<?php if( has_post_thumbnail() ): ?>』でアイキャッチ画像がある場合とない場合で条件分岐を行います。

アイキャッチ画像がある場合は、『<?php the_post_thumbnail('medium'); ?>』で画像を中サイズで呼び出します。

ソースコードの('medium')の部分で、呼び出す画像のサイズを指定することができます。『thumbnail』『medium』『large』『full』『空欄』のどれかの値を指定し、ページの呼び込み速度を上昇させるためにも適切なサイズで出力しましょう。

アイキャッチ画像が無い場合は『no-image.gif』という画像が出力されるように、作成しているWordPressのテーマ内のimagesフォルダ(headerのタイトル画像を挿入時に作成)に追加しています。
追加した『no-image.gif』の画像が必要な方はご自由にお使いください。

テキストエリア

<div class="text">~</div>

呼び出される『タイトル』『投稿日』『カテゴリ』『抜粋』を一つのかたまりとしてCSSで簡単に調整できるように、<div class="text">というエリアを作成しています。

記事のタイトル

<h2><?php the_title(); ?></h2>

記事のタイトルは『<?php the_title(); ?>』で呼び出します。今回は、記事のタイトルは『h2』タグで出力されるようにします。

投稿日

<span class="kiji-date">
  <i class="fas fa-pencil-alt"></i>
  <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
    <?php echo get_the_date(); ?>
  </time>
</span>

投稿日は、検索エンジンにインデックスしている記事の正式な投稿日を伝えるために『time <time datetime="<?php echo get_the_date(); ?>">』で出力します。『()』の中で日付を好きな形式に変更することができます。『()』の中が空欄の場合は、管理画面の『設定』→『一般』→『日付のフォーマット』で選択したものが表示されます。

また、投稿日の表記だということがわかりやすいように、投稿日の前に『<i class="fa fa-pencil"></i>』でペンのアイコン追加しましょう。

カテゴリ

<?php if( has_category() ): ?>
  <span class="cat-data">
  <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
  </span>
<?php endif; ?>

カテゴリは『if( has_category()』で条件分岐して、カテゴリの設定がある場合に『 $postcat=get_the_category(); echo $postcat[0]->name;』でカテゴリの名前だけを出力します。

抜粋

<?php the_excerpt(); ?>

抜粋は、『<?php the_excerpt(); ?>』でデータベースから呼び出します。呼び出された抜粋欄は『<p>~</p>』で囲まれた一つの段落として出力されます。

要素がきちんと組み込まれていれば、上記の画像のように各記事の一覧が出力されます。(画像はTOPページ)

index.phpの記事一覧のPC用デザイン

記事の一覧が出力されたら、CSSを追加していきましょう。まずはPC用のCSSから整えていきます。

CSSでデザインを始める前に、contentsに要素を確認するために指定しているカラーと高さの一時設定を、非表示もしくは削除してください。

style.cssに記述
.kiji-list {
  margin: 0 0 15px;
  border: solid 1px #ddd;
  background-color: #fff;
}

.kiji-list a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #000;
}

.kiji-list a:after {
  display: block;
  clear: both;
  content: '';
}

.kiji-list a:hover {
  background-color: #eee;
}

.kiji-list img {
  float: left;
  width: 220px;
  height: 150px;
  object-fit: cover;
}

.kiji-list .text {
  width: auto;
  margin-left: 250px;
}

.kiji-list h2 {
  font-size: 1.05em;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 5px;
}

.kiji-date {
  font-size: .8em;
  margin-bottom: 8px;
  color: #666;
}

.cat-data {
  font-size: .6em;
  padding: 3px 5px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  border-radius: 3px;
  background-color: #464646;
}

.kiji-list p {
  font-size: .8em;
  margin: 10px 0 0;
}

object-fitは、とても便利なCSSプロパティですがIEに対応していません。object-fitをIEにも対応させる方法は下記の記事で紹介しています。

wordpressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する

今回は、記事が一行ずつ表示されるようにCSSを設定していますが、お好みに合わせて自由にCSSを調整してください。

デモのCSSをそのまま記述してスマホで表示すると、上の画像のようなデザインになります。PC用のデザインが整ったら、『@media』を使ってスマホ用の表示を整えていきましょう。

index.phpの記事一覧のスマホ用デザイン

スマホ用のデザインを整えるときは、ブラウザのデベロッパツール(F12キー)を使ってスマホ版の表示を確認しながら調整すると便利ですよ。

style.cssに記述
@media (max-width: 599px) {
  .kiji-list a {
    padding: 10px;
  }
  .kiji-list img {
    width: 100px;
    height: 80px;
  }
  .kiji-list .text {
    margin-left: 120px;
  }
  .kiji-list h2 {
    font-size: .95em;
  }
  .kiji-date {
    margin-bottom: 0;
  }
  .kiji-list p {
    visibility: hidden;
    height: 0;
  }
}

スマホ用の表示では、記事の抜粋を非表示にしています。また、タブレットは含まずにスマートフォンのみ表示を切り替えたいので、フックポイントを『max-width: 599px』に設定してデザインを調整しています。

上記のCSSをそのまま記述するとスマートフォンでは上記の画像のように表示されます。

ページネーションを追加する

記事の一覧が出力できたら、最新の記事だけでなく全ての記事をユーザーが確認できるようにページネーション(ページ送り)を作成しましょう。

メインループで記事を出力するときに使用するページネーションは、WordPressのデフォルトの機能として搭載されています。

index.phpのループ終了後(<?php endwhile; endif; ?>の後)に記述
<div class="pagination">
    <?php echo paginate_links( array(
      'type' => 'list',
      'mid_size' => '1',
      'prev_text' => '&laquo;',
      'next_text' => '&raquo;'
      ) ); ?>
</div>

『<?php echo paginate_links(~』でページネーションの機能を呼び出し『array(~』の中に値を記述していきます。

'type' => 'list'

htmlタグのリストタグ(<ul><li><ul><li>)でページネーションを表示するように指定します。

mid_size

現在のページ番号の両隣に、何個ずつの数字を表示するかを指定することができます。

'prev_text' => '&laquo;'と'next_text' => '&raquo;'

ページネーションの最初と最後の表記を指定できます。

ページネーション用のデザインを指定する

ページネーションは、PCとスマホを分けずにCSSを設定しています。

style.cssに記述
.pagination {
  margin: 40px 0 30px;
  text-align: center;
}

.pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination li {
  display: inline-block;
  width: auto;
}

.pagination li a, .pagination li > span {
  font-size: .9em;
  display: block;
  width: 30px;
  margin: 0 1px;
  padding: 5px 0;
  text-decoration: none;
  color: #000;
  border: solid 1px #ccc;
  border-radius: 3px;
}

.pagination li > span {
  color: #fff;
  background-color: #464646;
}

.pagination li a:hover {
  color: #fff;
  background-color: #464646;
}

.pagination li .dots {
  width: 15px;
  padding: 0;
  color: #000;
  border-color: transparent;
  background-color: transparent;
}

『.pagination li > span 』のようにセレクタに『>』を使うと、その要素の直下の要素を指定することができます。今回の場合は、<li>の直下の<span>にだけcssが設定されます。

CSSをそのまま反映すると、上記の画像のようにデザインが反映されます。好みに合わせて、サイズや色を調整してください。

カテゴリページやタグページにタイトルを追加する

最後に、カテゴリページやタグページ・月別アーカイブページなどに、『〇〇の記事』とカテゴリ名やタグの名前が出力されるようにしましょう。

タイトルを追加するコードは、ループの直前に設置します。追加したコードは下記の通りです。

index.phpのループ『<?php if(have_posts()):~』の直前に追加
<?php if(is_category() || is_tag()): ?>
  <h1><?php single_cat_title() ?>の記事一覧</h1>
<?php elseif(is_year()): ?>
  <h1><?php the_time("Y年") ?>の記事一覧</h1>
<?php elseif(is_month()): ?>
  <h1><?php the_time("Y年m月") ?>の記事一覧</h1>
<?php endif; ?>

上記のソースコードを追加すると、カテゴリ一覧ページやタグ一覧ページにタイトルが出力されるようになります。

上記のようにカテゴリページやタグページにタイトルが出力されたら、サイズや余白のデザインを整えましょう。デモでは下記のCSSを反映しています。

style.cssに追加
.contents > h1 {
  font-size: 1.5em;
  margin: 0 0 20px;
}

@media (max-width: 599px) {
  .contents > h1 {
  font-size: 1.3em;
  }
}

好みに合わせて、サイズや色・余白を変更してください。以上でindex.phpの作成は完了です。次回は、ユーザーに一番みられると行っても過言ではない『single.php』の作成方法についてご紹介します。

下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。

5.までで作成したテーマ ダウンロード