クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

サーバサイドの中でのWordPressの位置付け

WordPressは無料のCMS(コンテンツ・マネジメント・システム)です。
CMSはページの構造(仕組み)とコンテンツ(内容)が分離されており、ブラウザの管理画面でブログのように記事を更新できます。

また、様々な開発者が作成したテーマ(デザインテンプレート)やプラグイン拡張機能)があり、プログラミングの知識がなくてもサイトを作ることができます。
そしてプログラミング知識があればさらに自由にカスタマイズすることができます。

カスタマイズする時に掴んでおいた方がいいのがサーバサイドの中でのWordPressの位置付けです。

目次:

サーバサイドとは

Webの基礎知識」の中でも書いたようにWebサイトはサーバ上にあるデータ(静的ページ)をブラウザがダウンロードして表示します。
例えばFacebookなどのSNSの場合、ユーザーがSNSにアクセスするとブラウザがサーバ上の最新投稿データをダウンロードし、ブラウザ上でHTML、CSS、JSがデータを処理して画面に表示します。
このブラウザ側の言語を「フロントエンド(クライアントサイド)」と言いましたね。

※参考【Webの基礎知識】書ける前に読む!HTML、CSS、JSの書式-1

それでは投稿を行う時はどうでしょうか。
SNSアカウントのユーザーが「投稿ボタン」を押すと入力欄が表示されますね。そこにコンテンツを入力し、「送信ボタン」を押すとSNSに投稿記事が追加されます。
これらの処理をサーバ側で実現しているのが「サーバサイド(バックエンド)」の言語です *1 。第三者ユーザーによる「いいね」や「コメント」の処理も同様です。

  • フロントエンドの例SNSの最新の投稿を表示する
  • サーバサイドの例SNSへの投稿、いいね、コメントを反映する

f:id:idr_zz:20180101010705j:plain

サーバサイドの言語

サーバサイドの言語を大きく分けると「データベース言語」と「プログラミング言語」があります。データベース言語はデータベースに直接問い合わせて変更を加えます。プログラミング言語はデータベースからデータを読み込んで動的ページを作成します。

そしてWordPressのデータベース言語は「SQL」、プログラミング言語は「PHP」です!

サーバサイドの主な言語:

f:id:idr_zz:20181026210844p:plain

PHPのライブラリ、フレームワーク

生JSとライブラリとフレームワークの理解」の中で、JSの中にライブラリフレームワークがある、と書きました。

参考【卒jQueryへの道】生JSとライブラリとフレームワークの理解

同様にPHPもライブラリやフレームワークがあります。

f:id:idr_zz:20180101011354j:plain

PHPWordPressphpMyAdmin

PHPにはライブラリ、フレームワーク以外にもツールがあります。
一つは冒頭にも触れたCMSで、代表的な物は「WordPress」。他にはデータベース接続クライアントの「phpMyAdmin」も有名です。*4

f:id:idr_zz:20180101011926j:plain

SQLMySQL

WordPressphpMyAdminがアクセスするデータベース言語はSQLですが、データベース自体はRDBMS(リレーショナルデータベースマネジメントシステム)である「MySQL」で作られています。リレーショナルデータベースとは関係データベースともいい、エクセルのように行と列がある表形式で構成されたデータベースです。

※参考: RDB(リレーショナルデータベース)とは | NoSQLとの違い・変化するデータベース事情 - データベース | ボクシルマガジン

MySQL自体はいわゆる黒い画面CUI:キャラクターユーザーインターフェースWindowsコマンドプロンプトMacのターミナル)で編集しなければなりません。
そこでブラウザGUIグラフィカルユーザーインターフェース)でも操作・編集ができるようにPHPで作られたのがWordPressphpMyAdminというわけです。
Wordpressは個々の投稿やカテゴリなどの編集ができ、phpMyAdminはデータベース全体のインポート、エクスポートなどができます。

f:id:idr_zz:20180101013832j:plain

終わりに

というわけでWordPressはブラウザからサーバサイドのプログラミング言語PHPによってデータベース(MySQL)を編集するツールです。この流れは先ほどのSNSの例と良く似ています。

f:id:idr_zz:20180101015842j:plain

フロントエンドは基本的にサーバにあらかじめ用意されてたコンテンツをブラウザに表示する一方向の技術ですが、サーバサイドはユーザーの操作をページのコンテンツ自体に反映される双方向の技術です。
今回は概要的な内容に留めますが、これから徐々にWordPress等のサーバサイド技術について触れていきたいと思います。

※この投稿、本当は2017年最後の投稿にしたかったのですが0時を回ってしまいましたので、2018年一発目の投稿になりました。それでは、今年もよろしくお願いいたします!!

(サーバサイド記事の続きを書きました!)
※参考:PHPの基本を理解するためにJSと比較する


※参考:サーバサイドの基本まとめました!
【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと idr-zz.hatenablog.com

*1:どちらかといえばブラウザ側はフロントエンドが、サーバ側はサーバサイドがよく使われるようです。

*2:以前ここにCSVXMLも書いていましたが、これらはデータ形式であり問い合わせ言語ではないため、訂正しました

*3:ちなみにJSのNode.jsもサーバサイドで動きます!

*4:これらは多くのレンタルサーバが対応しています