どうも、だいちです。
Web制作の仕事をするにあたって、HTML・CSSでWebページがコーディングできるようになった次のステップとして、WordPressでの制作が挙げられます。
今回はそのWordPressについて「よく聞くけどそもそもなんなの？」という疑問に対してまとめてみました。
静的サイトとWordPressサイト
まずは前置きの話からですが、そもそもWebサイトには静的サイトと動的サイトがあります。
静的サイトとは、Webサーバー上にあるHTMLファイルを読み込み、そのままPCなどのローカル環境に表示させます。
ユーザー → HTMLファイル → サーバー
それに対しWordPressサイトは、サーバー上にあるデータベースに保存されているファイルデータを、WordPressが代わりに取得し、ローカル環境に表示させます。
ユーザー → WordPress → サーバー（の中のデータベース）
なぜWordPressを経由するのか？HTMLファイルをアップロードしないのか？
ここが「WordPressとは？」を理解する部分になります。
WordPressの仕組み
静的サイトはユーザーの動作で内容が変化する機能がないため、サーバーにHTMLファイルをアップすれば終了ですが、WordPressはユーザーの投稿や設定内容が反映される機能を持っています。
その機能のために、WordPressはサーバーにあるデータベースと連携させる必要があります。
データベースに「投稿記事」や「カテゴリ」などのデータを整理させて、それをPHPファイルで動的にページを生成させることでWeb上に表示させることになります。
なのでWordPressのインストールは、専用のPHPフォルダ群のインストールともいえます。
このプログラミング言語が記載されたPHPファイル内のコードが命令文となり、データベースにある情報を取得します。
わざわざPHPがHTMLを生成する意味は？HTMLを直接読み込めばいいんじゃないの？と思うかもしれませんがサイトの更新や修正がある場合はどうでしょう。
静的サイトの場合、HTMLファイルのコードを修正し、それをFTPソフトなどでサーバーにアップし直すことになります。
例えばページ内にあるグローバルナビゲーションの項目を増やしたいという修正であった時、これが1ページ1箇所の修正であればそれほど手間ではないと思います。
しかし、ブログやコーポレートサイトなどで、この修正が100ページにも渡る場合どうでしょう？
とてもじゃないですが、1ページずつ修正＋サーバーアップなんてしていられないと思います。
あと、そもそもですがHTMLを触れる人なんて勉強している人以外そうそういません。
WordPressには管理画面というプログラミングがわからない方でも操作可能なUIの画面があります。
そこを操作することで、WordPressがユーザーの代わりに、PHPファイルへ橋渡し役として命令を出してくれます。
それぞれのファイル間が相互に連携することで、ページが複数に渡るWebサイトを作成する際に必要な工程を、万人が操作可能な状態にしてくれるわけです。
要は、WordPressを使えば誰でもPHPで生成するページが作成可能になる→更新や保守管理が楽になる、というメリットがあります。
このため、世界中のWebサイトの多くにWordPressが採用されているということなんです。
- HTMLファイルの直接編集が不要となる
- FTPソフトなどでのファイルアップロード作業が不要となる
- PHPファイルの直接編集が不要となる
WordPressだと手間を省きつつ、ページが大量に跨がる修正や更新も簡単にできるようになるということですね。
ポチップWordPressの基本機能とページ構成
ワードプレスでは主に3つの画面があります。
それが「トップページ」、「投稿ページ」、「固定ページ」です。
「トップページ」はホーム画面のことで、初めは最新の投稿記事一覧が表示されますが、後から固定ページなどに変更することもできます。
管理画面から修正や投稿、更新できるのは「投稿ページ」と「固定ページ」になります。
それぞれのページに紐づくページを紹介します。
投稿ページ
個別記事ページ
これは投稿された内容が表示されているページです。今見ていただいているこのページが個別記事ページということになります。
投稿ページはその単体で完結するため、ページに階層を作ることはありません。その代わり、カテゴリやタグといった目印となるものを設定することができます。
アーカイブページ
記事の一覧が表示されているページです。
このブログのホームに設定されているページがそれにあたります。
固定ページ
基本的に更新をしないページで使われます。
ブログサイトであれば自己紹介や問い合わせフォームが設定されていたり、コーポレートサイトであれば会社概要などが設定されていることが一般的です。
固定ページは投稿ページとは違い、一覧となるアーカイブ画面のようなものは存在しません。その代わりページの階層を作り管理することができます。
WordPressのテーマについて
WordPressには無料、有料のテーマというものが存在しますが、テーマはサイトを構成するための雛形になります。
管理画面に用意されたフォーマット通りに文字や画像を入力していくだけで、テーマに予め決められたマークアップに沿って更新されていきます。
これにより閉じタグ忘れなども発生しませんし、どこにどのタグを使うか考える必要もありません。
HTMLで直接コーディングされた静的サイトの場合、先述の通りサイト全体で修正があると大変ですが、テーマの大元を修正すれば、PHPが他ページにまたがり一括で修正がかかります。
例えば、見出しレベル（h2、h3など）の変更などある場合、1ページずつ修正が必要になります。それに対し、WordPressは一元管理で簡単に修正できるわけです。
さらにテーマはCSSでデザインも仕上げられていますので、他テーマに切り替えるだけで簡単に公開画面の見た目を変えることができます。
大幅なCSSの修正が必要なく、サイトのデザインも簡単に切り替えられるというわけです。
HTML・CSSの知識が無い人でも、テーマを選んで設定するだけで、初めから綺麗な見た目のサイトを作れるということです。
まとめ
ここまでを踏まえて、WordPressがブラウザに公開される流れを一度整理します。
テーマの上でユーザーが管理画面を操作（投稿ページ or 固定ページ）
↓
裏側にあるPHPのファイル群に連動
↓
サーバー内のデータベースへ情報を保存
↓
サーバー内のデータベースから必要な情報を取得
↓
取得した情報からPHPがHTMLを生成
↓
アーカイブページ + 個別記事ページ or 固定ページが更新
↓
ブラウザ上に更新されたWebサイトが反映
こんな感じです。
他にもWordPressとPHPの橋渡し機能を様々な形で強化させるプラグインなどもありますが、それはまた別でまとめればと思っています。
かなり簡易的にまとめましたが、要するにWordPressは、プログラミング言語がわからない人でも簡単な操作でWebページの作成、修正、更新ができるシステムということになります。
もっと詳しく知りたい方は、書籍や動画教材で掘り下げて学習することをオススメします。
それでは今回はこのへんで！
コメント