WordPress5速習4(WPループ)

WordPress

今回はWPの心臓ともいえるWPループについて学習する。前回からの続きの流れなのでまだの人はそちらから行ってもらいたい。

記事を読み込む

まずは実際にコードを書いて記事を読み込んでみよう。index.phpにハイライト部分を追記する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title><?php bloginfo('name');?></title>
  </head>
  <body>
    <h1><?php bloginfo('description');?></h1>
    <?php
    if(have_posts()):
      while(have_posts()):the_post();
    ?>
    <article>
      <?php the_category();?>
      <?php the_title();?>
      <?php the_content();?>
    </article>
    <?php
      endwhile;
    endif;
    ?>
  </body>
</html>

確認

サイトを表示してみよう。

すべての記事が読み込まれた!

WPループ

WPループによってすべての記事が読み込まれた。WPループは以下の部分だ。

<?php
    if(have_posts())://一つでも記事があればtrue
      while(have_posts())://記事が存在するあいだまわす
       the_post();//1件の記事を取り出す。
?>
とりだした1件の記事が表示される。
   
<?php
     endwhile;
    endif;
?>

1件ずつ記事を取り出しながら、記事の総数まわすループだ。
この記述は毎回出てくるのでコピペではなく自分でかけるまで練習する必要がある。

回すのはソースみればわかるが何を回している?

while文があるので回しているのはわかるが回す本体が見当たらない。これは一体どういうことであろうか?実はWPではリクエストする際にSQLクエリを発行して、そのリクエストに対する結果オブジェクトを取得している。結果オブジェクトを確認していみよう。

index.phpの最初に以下の3行を追記する。

<?php
print_r($wp_query);
?>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title><?php bloginfo('name');?></title>
  </head>

サイトを表示してみよう。

1件オブジェクトを取得してるのはわかるが見づらいのブラウザ右クリックでページのソースを表示する。

真ん中くらいに投稿されている記事情報がある。

メインクエリ

これで回す本体がわかった。WPではリクエストとともに暗黙でデータベースとの問い合わせを行って結果を持つオブジェクトを生成する。
そのオブジェクトから情報を取り出すのがWPループということだ。
このリクエストと同時に発行されるSQLクエリをメインクエリという。

また結果を持つオブジェクトがどんな情報を持っているのかを確かめるために行頭に今回のようにprint_rを置いて開発することはよくある。これも便利なので覚えておくとよいだろう

さらに取得

上の画像をみてもわかるが1つのポストデータは様々な情報を持っていることがわかった。投稿日時の情報も持っているようなのでこれを取得してみよう。
(上のprint_rはコメントアウトしておく)

<?php
//print_r($wp_query);
?>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title><?php bloginfo('name');?></title>
  </head>
  <body>
    <h1><?php bloginfo('description');?></h1>
    <?php
    if(have_posts()):
      while(have_posts()):the_post();
    ?>
    <article>
      <?php the_category();?>
      <?php the_time('Y-m-d');?>
      <?php the_title();?>
      <?php the_content();?>
    </article>
    <?php
      endwhile;
    endif;
    ?>
  </body>
</html>

投稿日時を指定フォーマット(Y-m-d)で取得できた。
今回のように専用の関数を呼び出してもいいが、postが持っているpost_dateという値を使うこともできる。

以下のように変更する。

  <article>
      <?php the_category();?>
      <?php //the_time('Y-m-d');?>
      <?php echo $post->post_date;?>
      <?php the_title();?>
      <?php the_content();?>
    </article>

実行する。

$post->post_date

とアロー演算子を使ってアクセスすることもできる。
(この使用方法は値の参照時にのみ使用すること。通常はthe_timeなどの専用関数を使うことが推奨されている。)

WPのグローバル変数

さっきから出てきている$wp_queryや$postも我々が宣言した記憶がない。
こいつらは何ものだろうか?
この2つの変数はどちらもWPが用意した変数でどのスクリプトからでも参照できるグローバル変数だ。
WPのグローバル変数にはどういったものがあるかのリンクを貼っておくのでちらりと確認しておくこと。
WPのグローバル変数

今一度WPループ

再掲になるがWPループの骨組みを見てみよう。

<?php
    if(have_posts())://一つでも記事があればtrue
      while(have_posts())://記事が存在するあいだまわす
       the_post();//1件の記事を取り出す。
?>
とりだした1件の記事が表示される。
   
<?php
     endwhile;
    endif;
?>

ここでやっている
the_post()
という処理は
「ループを次の投稿へ進めその投稿を取得して、それを$postにセットする処理を行っている。」
そしてループの中では$postが持っている情報を出力しているという訳だ。

終わりに

今回はWPの核ともいえるWPループについて裏で何が起こっているのかを解説した。私はWPの理解にここが一番大切と考えている。実際にprint_rしながら事象を確認ししっかりと舞台裏を理解してもらいたい。

参考リンク

WordPress のループやグローバル変数 $wp_query / Web Design Leaves
WordPress のループの使い方や仕組み、グローバル変数 $wp_query や $post、WP_Query クラス、ページ読み込み時の WordPress の処理の流れなどを理解するための覚え書きです。

コメント

タイトルとURLをコピーしました