【テーマの自作】記事の一覧取得 – 後編

WordPressのテーマの自作における、記事の一覧の取得について説明していきます。

今回は後編ですので、前編のところまでは理解できている前提で進みます。

まだ前編を理解できていない場合は、【テーマの自作】記事の一覧取得 – 前編より前編の内容を理解してから本記事をご参照ください。

スポンサーリンク

おさらい

【テーマの自作】記事の一覧取得 – 前編のおさらいです。

【テーマの自作】記事の一覧取得 – 前編では、以下の記載をすることで「最新の投稿記事の上位10件分の一覧」を取得するところまで説明しました。

<?php>
    $posts_query = array(
        'post_type' => 'post',
        'offset' => 10
    );

    $posts_result = new WP_Query($posts_query);
?>

 

【2行目~5行目】

「どんな内容の記事を取得するのか」を設定しています。

例えば、「カテゴリーがWordPressに分類されるものだけ」「投稿日が2019年以降のものだけ」等。

 

【7行目】

2~5行目で作成した設定(クエリ)を用いて、記事の一覧を取得しています。

取得した記事の一覧を、本記事では「クエリ結果」と呼称します。

本記事では、この「クエリ結果」をどのように画面上に表示させるのかを記載していきます。

スポンサーリンク

クエリ結果の表示方法

現時点の状態では$posts_resultにクエリ結果が保存されている状態です。

画面上に表示させるためには、クエリ結果が保存されている$posts_resultを利用します。

 

例として、「記事へとリンクすることが可能な記事のタイトルを一覧として表示させる」場合には以下のような記載をします。

if ($posts_result->have_posts()):
    while ($posts_result->have_posts()):
        $posts_result->the_post();
        echo ' <a href="'; echo the_permalink(); echo '">';
        echo the_title();
        echo ' </a>';
    endwhile;
endif;

1度に理解しようとすると難しいですが、

1つずつ紐解いていけばそんなに難しくないです。

地道に1つずつ理解していきましょう!

以下詳細です。

 

【1行目と8行目】

phpのif文という記述です。

if文は以下の記述になります。

if(式):
//ここに処理内容を記載する
endif;

上記のように記載することで、1行目の式が合っている場合に2行目の処理を行うという処理が作成できます。

「式が合っている」というのは、例えば、

 

1=1は式が合っています。なので、もし式に「1=1」が入っていたら2行目の処理が行われます。

1=2は式が合っていません。なので、もし式に「1=2」が入っていたら2行目の処理は行いません。

 

改めて今回の例を見てみると、

式には「$posts_result->have_posts()」が設定されています。

そして、「$posts_result->have_posts()」は「クエリ結果が空じゃなければ合っている」という式です。

 

もう少し具体的に説明していきます。

 

仮に「カテゴリーがWordPressという記事を取得する」という設定で記事の一覧を取得しようとしても、

もしカテゴリーがWordPressの記事が1件もない場合、表示させるための記事が何もない状態になります。

その状態で記事の一覧を表示させようとすると、「表示させるための記事の一覧がないのに、記事の一覧を表示しようとする」というチグハグな処理となってしまいます。

そのような処理を行った場合、システムはエラーを起こしてしまい動作が停止します。

そのため、この1行目と8行目のif文で「ちゃんと記事の一覧が取得できたかどうか」を判別しているわけですね。

 

【2行目と3行目と7行目】

phpのwhile文という記述です。

while文は以下の記述になります。

while (式):
//ここに処理内容を記載する
endwhile;

上記のように記載することで、1行目の式が合っている限り2行目の処理を何度も行うという処理が作成できます。

if文と違うところは、2行目の処理が終わった後に再度式の状態を見て、もしその式が合っているのであれば再び2行目の処理を行うところです。

 

なので、例えば以下のような記述にすると無限ループに陥ってしまいます。

※無限ループに陥った場合は、エラーは発生しませんが延々と処理が行われてしまうため色々とよろしくないです。

while (1=1):
//ここに処理内容を記載する
endwhile;

while文の使い道としては、カウント用の変数を用意しておき、その変数が一定の数値以上になるまで何度も処理を行う、という使い方が多いです。

 

例えば、以下のような感じにすることで2行目の処理が10回行われる処理を作成できます。

$count = 0
while ($count < 10):
    $count = $count + 1
endwhile;

詳細に説明すると、

1行目で$countに「0」を設定しています。

そして次のwhile文が読み込まれますが、その時の式は「0 < 10」(0は10より小さい)です。

「0 < 10」(0は10より小さい)は合っているので、while文の中の処理が実行されます。

 

次の処理(while文の中の処理)では、$countに$count+1を設定しています。

この時の$countは「0」なので「$count+1」は「0+1」となり、$countの中には「1」が入ります。

 

ここでwhile文が終了します。

while文が終了したので、ここでwhile文に設定された式が合っているのかを確認します。

 

現在の状態であれば$countが「1」ですので、「1 < 10」(1は10より小さい)の判定が行われます。

「1 < 10」(1は10より小さい)は式として合っていますよね?

式が合っているため、再びwhile文の中の処理が実行されます。

 

もう一度while文の中の処理が行われ始めるわけですが、次の処理では$countが「1」になっているため、「$count+1」は「1+1」となり、$countは「2」が設定されます。

 

……あとは想像がつくかと思います。

while文はこのような感じで使用することが多いです。

スポンサーリンク

さて、話は戻ります。

WordPressで記事の一覧を表示させるためのwhile文は、以下のように記載をします。

    while ($posts_result->have_posts()):
        $posts_result->the_post();
        //ここに処理内容を記載する
    endwhile;
endif;

こうすることで、取得した記事の件数だけ、3行目の処理を行う処理が作成できます。

 

一応細かく説明すると。

 

$posts_result->have_posts()という式で、次の記事があるかどうかを判定しています。

$posts_result->the_post();という記述で、次の記述を読みこんでいます。

イメージ図は以下の通りです。

 

現在は$posts_resultに記事の一覧が保存されている状態です。

$posts_resultをタンスに例えると、1つ1つの引き出しに各記事の情報が入っているようなイメージです。

そして、記事の一覧を表示させるためには各記事の「サムネイル画像」だったり「記事へのリンクURL」だったり「記事のタイトル」を必要になるかと思います。

そのため、$posts_result->the_post();を記述することで、引き出しを上から順番に開けていっているイメージになります。

 

以上を踏まえてphpの記載で説明すると、

 

while文の中で$posts_result->the_post();(今開けている引き出しの次の引き出しを開ける、という処理)を行います。

そして、現在開けている引き出しの情報を利用し、色々と処理をします(4~6行目の処理です。後述します)

一通り処理が終わったらwhile文の終了なので、一度while文に設定されている式を確認します。

while文の式で設定されているのは$posts_result->have_posts()です(次に開ける引き出しがあるのかどうか)

もし、次の記事がなければ処理を終了します。次の記事があれば、同じように4~6行目の処理を行います。

 

【4~6行目】

while文の中の処理内容となります。

ここで、各記事の情報を利用して画面上に表示させています。

尚、echoはhtmlを出力するための記述です。

例えば、phpの記述の中で以下のような記述をすれば、結果的に「<div>test</div>」が生成されます。

echo '<div>test</div>'

今回の例の場合は以下のような記述をしていますが、

echo ' <a href="'; echo the_permalink(); echo '">';
echo the_title();
echo ' </a>';

この結果は以下のようなHTMLが出力される結果となります。

<a href="'the_permalink()関数の結果'">';
the_title()関数の結果
echo ' </a>';

 

更に、

the_permalink()関数で、現在開けている引き出しの記事のURLを取得しています。

the_title()関数で、現在開けている引き出しの記事のタイトルを取得しています。

上記の関数を利用することにより、最終的に「記事へとリンクすることが可能な記事のタイトルを表示するためのHTML」を作成し出力しているわけです。

スポンサーリンク

クエリ結果の表示方法まとめ

今回は取得したクエリ結果(記事の一覧のデータ)を使って「記事へとリンクすることが可能な記事のタイトルを一覧として表示させる」場合の記述を説明しました。

改めてその例を見てみましょう。

if ($posts_result->have_posts()):
    while ($posts_result->have_posts()):
        $posts_result->the_post();
        echo ' <a href="'; echo the_permalink(); echo '">';
        echo the_title();
        echo ' </a>';
    endwhile;
endif;

【クエリ結果の表示方法】しっかりと理解したあとで見てみれば、そこまで難しくないように見えるかと思います。

ざっと改めて説明すると、

 

1行目のif文でクエリ結果があるのかどうかを確認しています。

2行目のwhile文で次の記事があるのかどうかを確認しています。

3行目の処理で、現在参照している記事の次の記事に移動しています(開ける引き出しを1つ下にズラしています)

4~6行目の処理で、どのようにして画面上に表示させるかのHTMLを作成しています。

 

主に処理を作成する必要があるのは4~6行目になります。

それ以外の部分はコピペでも問題ないと思われます。

スポンサーリンク

記事の一覧の取得まとめ

この度、テーマの自作における「記事の一覧の取得方法」について前編と後編に分けて記載しました。

そのまとめを以下に記載します。

 

今回使用した例文を一度に記述すると、以下のような記述になります。

<?php
    $posts_query = array(
        'post_type' => 'post',
        'offset' => 10
    );

    $posts_result = new WP_Query($posts_query);

    if ($posts_result->have_posts()):
        while ($posts_result->have_posts()):
            $posts_result->the_post();
            echo ' <a href="'; echo the_permalink(); echo '">';
            echo the_title();
            echo ' </a>';
        endwhile;
    endif;
?>

3行目~4行目の記述を変えれば、記事の一覧の取得方法を変更することが可能です。(記事の一覧取得 -前編-参照)

12行目~14行目の記述を変えれば、どのように画面上に表示させるかを設定することが可能です。

あとはこれをindex.phpとかに埋め込めば、とりあえずの記事の一覧の表示は出来るかと思います。

 

記事の一覧の表示は、恐らくWordPressのテーマの自作において一番大変で複雑で面倒な部分だと思われます。

ここを乗り切ればあとは簡単だと思いますので、頑張っていきましょう!

お疲れ様でした!

スポンサーリンク

最後に

この記載だとindex.phpの記述内容がとても見づらくなります。

そのため、今回作成した「記事の一覧を取得するための記述」を関数として作成し、それを呼び出すことで記事の一覧を表示するような作りにした方がよいです。

「記事の一覧を取得するための関数」の作成方法については次回説明します(少しネタバレすると、function.phpファイルを利用します)

他のWordPressに関する記事

WordPressまとめ

WordPressに関する記事をテーマごとにまとめています。 「使い方」と「テーマの自作」については、上から順番に見ていくことでわかりやすいように作成しています。 スポンサーリンク [adcode] [outline[…]

スポンサーリンク