MENU
  • プロフィール
  • サービス
    • 初回の無料相談
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ
  • お問合せ

    カテゴリー

    • HP継続レッスン
    • 単発レッスン
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • ひとりビジネス
    • Web・SNS集客
    • 自分で作れるおしゃれデザイン
    • プログラミング
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPressレッスン
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. プログラミング
    3. WordPressが記事を表示する仕組み〜メインクエリとサブクエリ〜

    WordPressが記事を表示する仕組み〜メインクエリとサブクエリ〜

    2022 12/19
    プログラミング
    2018-07-272022-12-19

    この記事では、WordPressの記事を表示する仕組みとコードの意味について整理してみました。

    目次

    WordPressのサイトにアクセスしてからページが表示されるまで。

    WordPressがページを表示するときの流れを図解します。

    WordPressページが表示する仕組み

    ① ユーザーがリンクをクリックすると、表示したいURLをWordPressに伝えます
    ※この間に、WordPressのコアファイルがプラグインや、functions.phpなどを読み込ます。
    ②データベースにアクセスし、表示したいページの記事データを取得します($wp_queryに保存されます)。
    ③テーマフォルダから、ページに応じたテンプレートファイルを選びます。
    ④テンプレートファイルと記事データを使って、ページを表示します

    ポイントは②WordPress側で記事データは自動で準備してくれるところ。
    テンプレートファイルには、この記事データの内容を表示させるプログラムを書いていきます。

    【参考記事】

    • クエリ概要 – WordPress Codex 日本語版

    メインコンテンツを表示するメインクエリ

    WordPressはアクセスしたURLに必要な記事データを自動でデータベースから取得してくれます。
    ページに必要なコンテンツをデータベースに依頼することをメインクエリと呼んでいます。

    クエリとは

    クエリ(Query)とはデータベースへのお問い合わせのこと。メインクエリは、「このページのメインコンテンツを取得してね」とWordPressからデータベースへの依頼している。

    WordPressのテンプレートファイルには、よくこんなコードが書かれています。

    <?php if(have_posts()): // ①記事データが入って入れば処理を行う
        while(have_posts()): // ②各記事データについて処理を行う
            the_post(); // ③次の記事データの情報を$postに入れる。
            the_title(); // ④$postからtitle(記事タイトル)を表示
            the_content(); // ④$postからcontent(記事本文)を表示
        endwhile;
    else : ?>
        <p>記事が見つかりません。</p>
    <?php endif; ?>
    メインループ図解

    このプログラムはメインクエリによって保存された記事データ($wp_query)から、各記事の情報を取り出して、タイトルや本文を表示させています。

    メインクエリをもとに、記事を表示させるループをメインループと呼ばれます。

    WordPressのコアファイル側がメインクエリを取得しておいてくれるので、テンプレートファイルにはメインクエリから記事データを表示するところだけ書けばすみます。

    さらなる記事データを表示するサブクエリ

    WordPressがはじめに取得してくれるメインクエリとは別のデータを使いたいときには、サブクエリを使います。

    例えば、関連記事(同じカテゴリーの記事)や同じ著者の他の記事を表示させたいときには、サブクエリの出番です。

    【こちらもオススメ】

    あわせて読みたい
    WordPressテーマに関連記事を表示する ブログ記事に「関連記事」を用意し、同カテゴリーの記事を表示します。 関連記事を表示するコード 今回は投稿ページのテンプレートファイル(single.php)に、関連記事…

    2ステップでコードを書きます。

    1. サブクエリ(ほしい記事データの条件)を指定して、データベースから記事データを取得する
    2. 取得した記事データをページに表示する

    サブクエリを使って記事を表示させるときにはWP_Queryを使う方法と、get_postsを使う方法の2種類があります。

    WP_Queryを使う方法

    WP_Queryは、グローバル変数$wp_queryに記事データを格納するやりかたです。

    
    // ①サブクエリを指定して、データベースから記事データを取得する
    <?php $args = array( // 抽出条件を指定する
        'post_per_page' => '5',
        'post_type' => 'post',
    );
    $query = new WP_Query( $args );
    //②取得した記事データをページに表示する
    if( $query->have_posts() ) :
        while ( $query->have_posts() ) :
            $query->the_post();
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        <?php endwhile;
        wp_reset_postdata(); ?>
    <?php else : ?>
        <p>記事が見つかりません。</p>
    <?php endif; ?>

    WP_Query()で使える抽出条件

    抽出条件いっぱいあるので、一部だけ抜粋しました。

    <?php $args = array(
        'author' => 1,2,3, // 著者ID省く場合は-1,-2,-3
        'category__in' => array( 1, 2 ), // カテゴリーID(複数)
        'post__in' => array( 3,4 ), // 記事ID(複数)
        'order' => 'DESC', // ソート順(ASC,DESC)
        'orderby' => 'date'
    ); ?>
    

    【WP_Queryで使える抽出条件についての詳しい記事】

    • WP_Queryを使って、記事を自在に取得してくる方法 | 東京上野のWeb制作会社LIG
    • ちょいちょい忘れる『WP_Query』の使い方 | 予習と復習
    • WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット

    取得した記事データをページに表示する

    サブクエリを元に記事を表示するループをサブループと呼びます。
    メインループと同じようにhave_posts()やthe_post()を使います。

    wp_reset_postdata()は、サブループで使っていた$postをメインループの値に戻してあげる処理です。$postは、メインループとサブループで共有しているので、ここでリセット忘れると、その後のメインループ処理が続けられず、正しく表示できないらしい。

    get_postsを使う方法

    get_postsは$posts(記事情報)の配列に記事データをいれるやり方です。

    <?p
    // ①サブクエリを指定して、データベースから記事データを取得する
    <?php $args = array( // 抽出条件を指定する
        'post_per_page' => '5',
        'post_type' => 'post',
    );
    $myposts = get_posts( $args );
    //②取得した記事データをページに表示する
    if($myposts)
        foreach($myposts as $post):
            setup_postdata($post); ?>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        <?php endforeach;
        wp_reset_postdata();
    else : ?>
        <p>記事が見つかりません。</p>
    <?php endif; ?>

    ①get_post()で使える抽出条件

    <?php
    $args = array(
        'posts_per_page' => 5, // 取得件数(初期値:5)
        'offset' => 0, // 最初に取得する記事(初期値:0)
        'category' => '', // カテゴリーID
        'category_name' => '', // カテゴリー名称
        'orderby' => 'date', // 記事をソートする条件
        'order' => 'DESC', // 記事のソート順(ASC,DESC)
        'include' => '', // 含める記事ID
        'exclude' => '', // 除外する記事ID
        'post_type' => 'post', // 記事タイプ(post,page)
        'author' => '', // 著者のID
        'author_name' => '', // 著者の名前
        'post_status' => 'publish', // 記事のステータス
    );
    $posts_array = get_posts( $args ); ?>

    【get_posts()で使える抽出条件についての詳しい記事】

    • get_posts – WordPress私的マニュアル
    • get_posts()テンプレートタグを使った情報の取得と表示方法 | memocarilog
    • テンプレートタグ/get posts – WordPress Codex 日本語版

    ②取得した記事データをページに表示する

    setup_postdata($post)で記事データの配列から、$postに記事データを入れます。また、記事内容を表示するテンプレートタグthe_title()やthe_content()が使えるようになります。

    WP_Queryとpostの違い

    WP_Queryとpostでは記事データを入れる変数(データを入れる箱)が違います。

    wp_queryとpostsの違い

    WP_Queryには、$posts(記事データ)のほかにページの種類を判定する情報も入っているのが特徴です。

    <div class="border-box">$is_single, $is_page, $is_archive, $is_preview, $is_date, $is_year, $is_month, $is_time, $is_author, $is_category, $is_tag, $is_tax, $is_search, $is_feed, $is_comment_feed, $is_trackback, $is_home, $is_404, $is_comments_popup, $is_admin, $is_attachment, $is_singular, $is_robots, $is_posts_page, $is_paged</div>

    【参考記事】関数リファレンス/WP Query – WordPress Codex 日本語版

    単なる記事の情報だけ使うときはget_post() 、記事の情報+ページの条件分岐タグを使うときはWP_Queryと覚えておくといいと思います。

    まとめ

    • URLに応じて、WordPressでは必要なページの記事データを自動取得してくれる
    • メインクエリは、そのURLのメインコンテンツを表示するときに使う
    • サブクエリはメインクエリに入っていないデータ(関連記事や著者の別記事など)を表示するときに使う
    プログラミング
    WordPress
    よかったらシェアしてね!
    中谷恵美
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    趣味は、文房具、ゲーム(RPGとモンハン)、手芸(刺繍、洋裁)。最近は作曲やアレンジも勉強中。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にピラティスを始めたが、果たして続くのか。
    詳しいプロフィールを見る
    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・美容サロン・弁護士・デザイナー・心理カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

    新着記事
    • これで解決!WordPressの読み込み速度を速くする方法
      2025-06-30
      はじめてのWordPress
    • ホームページに最適な画像サイズと形式の選び方
      2025-06-23
      自分で作れるおしゃれデザイン
    • 【無料相談へのご感想】親身になって解決してくれた事が本当に嬉しい
      2025-06-16
      単発レッスン
    • 8年使って思うWordPressの好きなところ、微妙なところ
      2025-06-09
      はじめてのWordPress
    • 公開中のページを安全に更新するには
      2025-06-06
      はじめてのWordPress
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      プログラミング
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      アメブロカスタマイズ
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      プログラミング
    目次