HTMLで制作されたWEBを含む全WEBサイトの約4割強以上がWordPressで構築されていると言われています。WordPressはCMSと呼ばれるWEB制作プラットフォームの中で世界で約60%強のシェアがあり、まさにCMSの代表格といえます。当記事ではこのWordPressの実際の作成流れを見ていただくことでCMSの仕組みについてご理解を促進できればと思っています。
CMSとは「コンテンツ・マネジメント・システム」の略。
CMS(コンテンツ・マネジメント・システム)は直訳すると「コンテンツ(テキストや画像、レイアウト、デザインなど)を一元管理する仕組み」となります。この仕組みによってHTMLやCSSといった専門的なプログラミング知識がなくてもWEBサイトの作成や更新を比較的簡単に効率的に行うことが可能になります。また一元管理することで複数人のチームでの編集分業も行いやすくなります。
仕組みを理解していただくために、WordPressの特徴的なポイントを挙げて説明していきたいと思います。まずポイントとしては、
1. テンプレートファイル(テーマ)でレイアウトを定義
2. 管理画面から各編集ページ等にアクセス
3. 編集ページで入力した文字や画像がテンプレートに反映されページが生成
と言うことになります。なお各ページの入力内容、サイトの設定内容などはDB(データベース)技術によって一元管理されています。以下に詳しく説明を続けます。
1. テンプレートファイル(テーマ)でレイアウトを定義

WordPressでは「テーマ」と言うレイアウトのテンプレートが数多く用意されており、無料でダウンロードできるものだけでも1万件以上あると言われています。このテーマについては別記事で詳しく説明したいと思いますが、簡単に言うと上の画像のように「文字や画像をレイアウトするためのフレームのようなものです。上の画像は説明を分かりやすくするために当ホームページのテーマをアレンジして簡素にしたものでテーマには「ヘッダー」や、文字や画像がレイアウトされる「コンテンツエリア」(上の画像で言うと中央の囲まれた部分)、画像にはありませんが「フッター」が主な要素となります。各テーマはデザイン意図によってヘッダーやフッターのデザイン、コンテンツエリアの大きさやカラーリングなどを定義して、ページのレイアウトを生成する元となります。
2. 管理画面から各編集ページ等にアクセス

上の画像はWordPressの「管理画面」と呼ばれるものの一例です。WordPressを構築する際は専用のURLで管理画面にアクセスすることができます。管理画面では各種の設定やプラグインのインストール、画像のインポート、各ページの管理ができます。画像は各ページの管理の画面例で中央にページの一覧が表示されており、該当のページを選択することで編集画面の画面にアクセスします。この機能がHTMLで制作する場合と大きく異なる点で、誰でも簡単にページ編集の画面に辿り着くことができると言うわけです。

上の画像はページの編集画面です。WordPress標準(カスタマイズされていないもの)では、このような画面になります。「テストページ」と表示されている箇所がページ全体のタイトルを入力する箇所で、「ブロックを選択するには〜〜」と表示されている箇所が本文を入力する箇所です。標準での入力欄はこの2つしかありません。本文の箇所に「ブロックエディタ」と言う編集ツールを使用して、カラム数を増やしたり、見出しを作ったり、画像を挿入して大きさを調整したりします。「ブロックエディタ」については別記事で詳細を述べたいと思いますが、大雑把に言うと文書作成ツールの「Word」を使用して文書をレイアウトする操作のようなものだと考えていただいて結構です。この入力画面に文字や画像を入力したもの、およびそれが実際のページに反映されたものを以下に2点画像でご紹介します。


このような流れで各ページにタイトルと本文(画像や文字)を入力するとテンプレート(テーマ)を使用して各ページが生成されていく、、、と言うのがWordPressなどCMSの流れとなります。