header-logo

WordPressの仕組みついて

泉原 遥輝 | Haruki Izumihara
泉原 遥輝 | Haruki Izumihara
Cover Image for WordPressの仕組みついて

こんにちわ。泉原です。今回はWordPressの仕組みとメインループ、サブループについて解説したいと思います。対象はWordPressでサイトを作成したいと思っている方や、仕組みを理解したい方向けです。噛み砕いて記事を書いています！分からない点などあればお気軽にTwitterにDM(リンク)下さい！それでは本編に入ります。

リクエストとレスポンスでサイトを表示させている

リクエストとレスポンスを行ってサイトを表示させています。ユーザーが閲覧したいページのURLをリクエストして、WordPressが情報をレスポンスします。それぞれ矢印の向きに情報を渡しています。非常にシンプルですよね？

リクエスト リクエスト

レスポンス レスポンス 3人の登場人物が出てきます。ユーザーとWordPressとデータベースです。ユーザーは説明しなくても大丈夫だと思います。サイトを閲覧したい人ですね。WordPressはHTMLを作成したりサイトの仕様を決めています。最後はデータベースです。投稿された記事やユーザー情報などを保管しています。それでは、もう少し具体的に見ていきます。

リクエスト

  1. ユーザーはURLをクリックして、WordPressがURLを解析します。 ユーザーからWP

  2. 表示に必要な情報をデータベースに問い合わせします(クエリを要求) WPからデータベース

このような感じです。2番目のクエリを要求について補足しておきます。クエリとはデータベースにデータを要求することです。例えば、お知らせ一覧の記事が必要なら、記事をデータベースに問い合わせします。 何を問い合わせるかはユーザーがどんなページを見たいかによります。 ページによってWordPressが自動的にデータベースにクエリを要求します。次にレスポンスです。

レスポンス

  1. データベースからデータが返却されます。

    1. データは$wp_queryと呼ばれるグローバル変数に代入されます。 データベースからWP

  2. WordPressがデータを加工して、ユーザーに返却します。 WPからユーザー

  3. ユーザーがサイトを閲覧出来ます。 以上がリクエストとレスポンスになります。1番の返却されたデータは$wp_queryと呼ばれるグローバル変数に代入されている点を抑えておいて下さい。それでは次にメインループとサブループを解説します。

メインループはテンプレートに応じてクエリを要求する

メインループはテンプレートに応じて、必要な情報を繰り返し処理をします。メインクエリとは上で説明した通り、ユーザーがページを閲覧するために必要なデータをデータベースに要求することです。例えば、トップページなら投稿記事が返却されます。カテゴリーページなら、カテゴリーに紐付いているページのデータを返却します。

メインループのコード

<?php if(have_posts()): ?>
	<?php while(have_posts()): ?>
    <?php the_post(); ?>
		<!-- 繰り返し処理する内容 -->
	<?php endwhile; ?>
<?php else: ?>
	<!-- 投稿データが取得できない場合の処理 -->
<?php endif; ?>

コードの解説とグローバル変数について

それぞれのコードの意味は以下のとおりです。

  1. if(have_posts())投稿があるかどうか調べます。投稿があれば次に進みます。
  2. while(have_posts())投稿があれば繰り返し処理する
  3. the_post()は次の投稿を取得して,$post変数に代入する

このような動きをしています。3番目のthe_post()メソッドは取得したデータを$postに代入されています。レスポンスの1番で見たように返却されたデータは$wp_queryに代入されています。このデータは膨大で投稿記事だけを編集したいときに不便です。なので、現在の投稿は$postに代入するような動きになっています。

サブループは自分で取得したいデータを決める事が出来る

サブループはメインループと違って自分で取得したいデータを決める事が出来ます。メインループはWordPress側で決められているテンプレートによってデータを取得するんでした。それでは固定ページなどで投稿の記事をランキング形式で取得したり、カスタム投稿タイプの記事を取得することが出来ません。そこでサブループを使用します。

サブループのコード

<?php
$news_query = new WP_Query(
	array(
		'post_type'      => 'post',
		'category_name' => 'news',
		'posts_per_page' => 5,
	)
);
?>
<?php if ( $news_query->have_posts() ) : ?>
	<?php while ( $news_query->have_posts() ) : ?>
		<?php $news_query->the_post(); ?>
		<p><?php the_title(); ?></p>
	<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php get_footer(); ?>

サブループとメインループの大きく違うところは$news_queryとなっているところです。arry()の中で条件を決めて、$news_queryにオブジェクトを代入しています。 サプループの条件は以下の通りです。

  1. post_type => 投稿タイプは「投稿」
  2. category_name => カテゴリースラッグは「news」
  3. posts_per_page => 取得するデータの数は「5」 wp_reset_postdata()はその名の通りWordPressの投稿データをリセットするメソッドです。the_post()を実行すると$postに現在の投稿が追加されます。これをメインクエリの投稿情報に戻すために実行しています。

なぜサブループには$news_queryと書かれているの？

これは$news_queryオブジェクトのhave_posts()メソッドにアクセスしているからです。意味わからないですよね。オブジェクトは関数(メソッド)やプロパティー(データの値)などを保持しています。オブジェクトの中にあるメソッドにアクセスするときは->と書きます。JavaScriptのconsole.log()とかと同じですね。consoleオブジェクトの中にあるlog()メソッドにアクセスしてブラウザで値を確認することが出来ます。JavaScriptだと.がそれに当たります。

ではなぜメインループでは書かれてないの？と思いませんか？これは省略出来るんです。メインループだと取得したデータは$wp_queryに格納されます。なので 以下のように書き直しても正しく動きます。

メインループのコード(省略無し)

<?php if($wp_query->have_posts()): ?>
	<?php while($wp_query->have_posts()): ?>
    <?php $wp_query->the_post(); ?>
		<!-- 繰り返し処理する内容 -->
	<?php endwhile; ?>
<?php else: ?>
	<!-- 投稿データが取得できない場合の処理 -->
<?php endif; ?>

ざっくりとメインクエリとサブループの違いは理解しましたか？実際にlocalなどのアプリを使ってコードを書いてみて、違いを見てみると理解が深まると思います。それではありがとうございました！