• WordPress

    【WordPressオリジナルテーマ作成記録④】記事の一覧を表示させる

    WordPressには記事一覧を表示させるループが用意されています。

    ループ内では指定した条件に従って、管理画面から投稿した内容を出力することができ、

    繰り返し処理によって記事一覧を表示させます。

     

    基本的なループのコード

    1つ1つコードの意味を追っていきます。

     

    1.if ( have_posts() ) :

    WordPress関数have_posts()を使ったPHPのif文。

    関数have_posts()は真偽値を返すため、

    投稿がある場合(ture=真)はelseまでの処理を、

    投稿がない場合(false=偽)はelseからendifまでの処理が実行されます。

     

    <?php if (have_posts() ) : ?> の次の行には、

    if文の”投稿がある場合”の中で、かつ、ループの直前にあたるので、

    ulliで投稿を表示するのであれば<ul>を記述するのがいいとされています。

     

     

    2.while (have_posts() ) :

    whileは与えられた条件が真である限り、endwhileまでのコードを繰り返し処理します。

    ここでの投稿設定では1ページに表示させる最大投稿数を10としているので、

    1ページの中では最大で10回のループ処理がされています。

     

     

    3.the_post();

    the_post()はループ内で参照する投稿を順番にセットアップしてくれるWordPress関数。

    この関数をループ内で使用することにより、投稿のタイトルや日時、本文など

    あらゆるデータを取得できるようになるのです。

     

    私は1度、このthe_post()関数を書き忘れてしまったことがあました!

    すると投稿データが永遠に出力されてしまい焦りました…

    ループの中でこの関数the_post()を使わないと永遠とループしてしまうから書かないといけない、

    という感じでしか理解できていないのですが、

    WordPressの the_post() ってそもそも何者? ←こちらで詳しく書かれています!

     

    4.endwhile

    ループを終了させます。

    endwhileとelseまでの間はループ後に1度だけ処理されるので、

    ループ前に<ul>を開始しているので、ここに</ul>を入れましょう。

     

    5.else

    elseからendifの間は表示する投稿がない場合に1度のみ処理されます。

    「投稿がありません」などのメッセージを入れておくといいでしょう。

     

    6.endif

    if文はendifで閉じてあげて完成します。

     

    これらをindex.phpの記事を表示させたいところに記述していくと

    こんな感じになりました!

     

    投稿内容の出力

    上記のコードのままだとindex.phpに直接書き込まれた内容が表示されてしまうので、

    テンプレートタグを使い管理画面から投稿した内容を出力できるようにしていきます。

     

    タイトルの出力と個別ページへのリンク変更

    記事のタイトルは<?php the_title(); ?>で呼び出し、

    個別ページへのリンクは<?php the_permalink(); ?>に書き換えます。

     

    日時とカテゴリー

    関数get_the_date()はそれぞれの投稿の日時などを表示することができますが、

    値を返すのみで出力はされないので、echoを使って出力する必要があります。

    <time>にクラスを付与して<time class=<?php echo get_the_date('Y-m-d') ?>とします。

    表示される部分も関数get_the_date()とechoを使って出力します。

     

    カテゴリーはthe_category()で取得しますが、

    1つの記事でカテゴリーが複数ある場合には繋がって表示されてしまうので、

    第一引数に区切り文字を指定します。ここでは半角スペースにしています。

     

    以上の点を書きかえたコードはこちら

    これで記事一覧が表示されましたが、サムネイル画像は取得できていません。

    次の記事ではサムネイル画像の取得について書いていきます!!