02. WordPressの全体像

この章では、WordPressの全体像を学びます。

WordPressは、管理画面で入力した内容を、テーマを通して公開画面に表示するCMSです。

まずは、管理画面、テーマ、プラグイン、データベースの役割を整理します。

WordPressとは

WordPressは、Webサイトの内容を管理するためのCMSです。

CMSは、Content Management Systemの略です。

HTMLファイルを直接編集しなくても、管理画面から投稿や固定ページを作成できます。

たとえば、次のようなサイトで使われます。

  • コーポレートサイト
  • 店舗サイト
  • 採用サイト
  • ブログ
  • お知らせ付きのサービスサイト
  • 実績を更新するポートフォリオサイト

Web制作では、クライアントが更新したい範囲がある時にWordPressが候補になります。

CMSの種類

CMSには、いくつかの種類があります。

WordPressは、管理画面、データベース、テーマ、公開画面までをまとめて持っているCMSです。

そのため、管理画面で入力した内容を、同じWordPressのテーマがHTMLとして表示します。

一方で、ヘッドレスCMSと呼ばれる仕組みもあります。

ヘッドレスCMSでは、管理画面とコンテンツ管理はCMS側で行い、公開画面はAstro、Next.js、Nuxtなど別の仕組みで作ることが多いです。

種類特徴
WordPressのようなCMS管理画面、データ、表示テーマをまとめて持つ
ヘッドレスCMSコンテンツ管理と公開画面を分ける

ヘッドレスCMSは、表示側を自由に作りやすい反面、API連携、ビルド、公開環境などの知識が必要になります。

Web制作初期では、まずWordPressのような一般的なCMSの考え方を理解すると、他のCMSも理解しやすくなります。

管理画面と公開画面

WordPressには、管理画面と公開画面があります。

管理画面は、投稿を書いたり、固定ページを編集したり、テーマやプラグインを管理したりする場所です。

公開画面は、ユーザーがブラウザで見るサイトです。

画面役割
管理画面コンテンツや設定を管理する
公開画面ユーザーに表示されるサイト

制作では、公開画面の見た目だけでなく、管理画面で更新しやすいかも考えます。

テーマ

テーマは、公開画面の見た目やテンプレートを担当します。

WordPressに保存されている投稿や固定ページを、どのようなHTML構造で表示するかを決めます。

クラシックテーマでは、PHP、HTML、CSS、JavaScriptを使ってテンプレートを作ります。

たとえば、次のようなファイルを使います。

  • style.css
  • functions.php
  • index.php
  • header.php
  • footer.php
  • single.php
  • page.php
  • archive.php

テーマは、サイトの表示を担当するものです。

お問い合わせフォーム、SEO補助、バックアップのような機能は、プラグインで補うことが多いです。

プラグイン

プラグインは、WordPressに機能を追加するための仕組みです。

よくあるプラグインの役割は次の通りです。

  • お問い合わせフォーム
  • SEO設定
  • バックアップ
  • セキュリティ
  • キャッシュ
  • カスタムフィールド
  • リダイレクト
  • SMTP送信

プラグインは便利ですが、入れすぎると管理が難しくなります。

更新停止や競合、表示速度への影響も考える必要があります。

データベース

WordPressでは、投稿、固定ページ、設定、ユーザー情報などがデータベースに保存されます。

静的HTMLサイトのように、ページごとにHTMLファイルだけがあるわけではありません。

たとえば、投稿本文はデータベースに保存され、テーマのテンプレートがそれを取得して表示します。

この仕組みがあるため、管理画面から内容を更新できます。

一方で、移行やバックアップではファイルだけでなくデータベースも扱う必要があります。

メディアファイル

画像やPDFなどは、メディアライブラリで管理します。

アップロードされたファイルは、サーバー上のuploadsディレクトリに保存されます。

投稿本文や固定ページには、その画像の情報が紐づきます。

WordPressサイトを移行する時は、テーマファイル、プラグイン、データベース、メディアファイルをセットで考えます。

WordPressがHTMLを出力する流れ

WordPressがページを表示する流れをざっくり整理します。

  1. ユーザーがURLにアクセスする
  2. WordPressがどのページか判断する
  3. テンプレート階層に沿って使うテーマファイルを決める
  4. データベースから投稿や固定ページの内容を取得する
  5. テーマがHTMLを出力する
  6. CSSやJavaScriptが読み込まれ、ブラウザに表示される

この流れを理解すると、どこで問題が起きているか切り分けやすくなります。

静的サイトとの違い

静的サイトでは、HTMLファイルの中に表示内容が直接書かれています。

WordPressでは、テンプレートと内容が分かれています。

項目静的サイトWordPress
内容の管理HTMLを直接編集管理画面で編集
表示の仕組みHTMLファイルを表示テーマがデータを表示
更新者制作者が多いクライアントも可能
移行ファイル中心ファイルとデータベース

WordPressは更新しやすい反面、設計、保守、セキュリティの考慮も必要です。

この章のまとめ

  • WordPressは、管理画面から内容を更新できるCMS
  • ヘッドレスCMSは、コンテンツ管理と公開画面を分けるCMSの考え方
  • テーマは公開画面の表示、プラグインは追加機能を担当する
  • 投稿や固定ページの内容はデータベースに保存される
  • 画像やPDFはメディアライブラリで管理される
  • WordPress制作では、テンプレート、データ、機能、運用を分けて考える