図解で分かる Web の仕組み

WordPress とは ― 記事がページとして表示されるまでの流れを図で見る

WordPress のサイトでは、ページは最初から HTML のファイルとして置いてあるわけではありません。リクエストされるたびに、データベースの記事とテーマのファイルを組み合わせて作っています。その流れを順に見ていきます。

公開

ブラウザ Web サーバー .htaccess WordPress index.php 記事 データベース ファイル プラグイン テーマ wp-config.php DB につなぐ プラグイン テーマの準備 保存した HTML 4〜7 は省く /news/hello/ 投稿:hello WP_Query hello の記事 題名 本文 日付 single-post.php single.php singular.php index.php 上から順に探す プラグイン

1 / 7 1. 記事はデータベースに、見た目はファイルに 管理画面で書いた記事はデータベースに入ります。見た目を決めるテーマや、機能を足すプラグインは、サーバーの上のファイルです。 本文で読む

  1. 1. 記事はデータベースに、見た目はファイルに 管理画面で書いた記事はデータベースに入ります。見た目を決めるテーマや、機能を足すプラグインは、サーバーの上のファイルです。
  2. 2. どの URL も index.php に届く 画像などの実際にあるファイルはそのまま返し、それ以外の URL はすべて index.php という 1 つの入口に渡します。
  3. 3. WordPress を起動する 設定ファイルを読み、データベースにつなぎ、有効なプラグインとテーマの準備を順に読み込みます。
  4. 4. URL を読み解く URL の /news/hello/ から、「hello という名前の投稿を見せてほしい」というリクエストだと読み解きます。
  5. 5. データベースから記事を取り出す 読み解いた条件でデータベースに問い合わせ、記事の題名・本文・日付などを取り出します。
  6. 6. テンプレートを選ぶ 投稿のページなら single.php というように、ページの種類に合うテーマのテンプレートを、決まった順に探して選びます。
  7. 7. HTML を組み立てて返す テンプレートに記事を当てはめ、ヘッダーやフッター、プラグインが足す部分も合わせて、1 枚の HTML にして返します。

1. 記事はデータベースに、見た目はファイルに

WordPress のサイトは、大きく 2 つの置き場所でできています。

  • データベース:管理画面で書いた記事の題名・本文・日付、カテゴリー、設定など。MySQL や MariaDB というソフトに入っています
  • ファイル:WordPress そのもののプログラム、見た目を決める テーマ、機能を足す プラグイン、アップロードした画像。サーバーの上にファイルとして置かれています

ページを見たい人が来るたびに、この 2 つを組み合わせて 1 枚のページを作ります。ここからは、https://example.jp/news/hello/ という投稿のページがリクエストされたときの流れを見ていきます。

2. どの URL も index.php に届く

リクエストはまず、サーバーの Web サーバー(Apache や nginx などのソフト)が受け取ります。

  • 画像や CSS のように、その場所に実際にファイルがあれば、Web サーバーがそのまま返します
  • /news/hello/ のように実際のファイルがない URL は、WordPress の入口の index.php に渡します

この振り分けは、Apache なら .htaccess というファイルに書いた設定で行っています。WordPress のサイトでは、記事のページも一覧のページも、すべてこの 1 つの入口から始まります。

3. WordPress を起動する

index.php から、WordPress の起動が始まります。主な順番は次のとおりです。

  1. wp-config.php を読む。データベースの名前やパスワードなど、サイトごとの設定が書いてあります
  2. データベースにつなぐ
  3. 有効にしている プラグイン を読み込む
  4. 使っている テーマ の準備(functions.php)を読み込む

プラグインの数が多いと、この起動に時間がかかり、表示が遅くなる原因になります。

ページキャッシュのプラグインを使っていると、この起動のはじめ(データベースにつなぐより前)で、以前に組み立てて保存しておいた HTML をそのまま返して終わることがあります。4〜7 をまるごと省けるので、表示が大きく速くなります。図の下のボタンで、2 つの場合を切りかえて見られます。

4. URL を読み解く

起動が終わると、WordPress はリクエストされた URL を読み解きます。

/news/hello/ は、そのままでは WordPress には意味が分かりません。WordPress は、管理画面の「パーマリンク設定」で決めた URL の形と照らし合わせて、「hello という名前(スラッグ)の投稿」という条件に置きかえます。

照らし合わせても当てはまるものがなければ、ここで「ページが見つからない(404)」と決まります。

5. データベースから記事を取り出す

読み解いた条件で、データベースに問い合わせます。WordPress の中では、この問い合わせを WP_Query という部品が受け持っています。

データベースからは、記事の題名・本文・公開日・書いた人・カテゴリーなどが返ってきます。公開していない記事や、ゴミ箱に入れた記事は、ふだんの訪問者には返しません。

6. テンプレートを選ぶ

取り出した記事を、どの見た目で表示するかを決めます。テーマには、ページの種類ごとの テンプレート(見た目の型)のファイルが入っています。

WordPress は、ページの種類に合うテンプレートを、決まった順に探します。投稿のページなら、たとえば次の順です。

  1. single-post.php(投稿のページ専用)
  2. single.php(1 件のページ用)
  3. singular.php(1 件のページと固定ページ共通)
  4. index.php(どれもなければ最後にこれ)

テーマにあるもののうち、一番上のものが使われます。この決まりを テンプレート階層 といいます。

補足

サイトエディターで見た目を編集する「ブロックテーマ」では、テンプレートは PHP ではなく HTML のファイル(single.html など)で、サイトエディターで編集した内容はデータベースに入ります。探す順番の考え方は同じです。

7. HTML を組み立てて返す

選んだテンプレートに、取り出した記事を当てはめて、1 枚の HTML を組み立てます。

  • 記事の題名や本文を、テンプレートの決まった場所に入れます
  • ヘッダー・フッター・サイドバーなど、どのページにも共通する部分を合わせます
  • プラグインが、決まったタイミング(フック)で、計測のタグや目次などを足します

できあがった HTML は、Web サーバーを通ってブラウザに返ります。ブラウザがこの HTML から画面を描くまでは「Web サイトが表示されるまで」で説明しています。ページキャッシュのプラグインを使っていれば、このときの HTML が保存され、次の人には 3 の時点でそのまま返されます。

出典

この図解は、出典に挙げた仕様や公式の文書をもとに Claude(AI)が下書きし、セオリコが内容を確かめて公開しています。図は説明のために流れを簡単にしたもので、実際のやりとりはサイトや環境によって異なります。

表示されない・遅い・エラーが出るときは、ご相談ください。

症状をうかがい、どの段階で止まっているかから調べます。WordPress のトラブルの初回相談・簡易調査は無料です。