WordPress

【仕組みを知る】WordPressって何?ってとこからはじめよう

 

悩む人
悩む人

HTML、CSSは一通り学んだからWordPressを学びたい。

けど、実際WordPressってどんな仕組みで動いてるの?

 

こんな質問にお答えします。

 

この記事を書いている僕は、

Web制作会社に務める現役のWebコーダーです。

 

この記事をざっくり読んでもらうことで、WordPressとHTMLで作られたサイトとの仕組みの違いがわかるようになりますよ。

 

下記の内容でお届けしますので、3分ほどでサクッと理解できるはずです。

  • WordPressとは
  • まずは通常のWebページの仕組みを知る
  • WordPressがページを表示する仕組み

 

WordPressとは

WordPressはCMSの一つで、Web制作やプログラミングのスキルがなくても、コンテンツを管理したり、更新したりできるシステムのことです。

PHPというプログラミング言語で作られていて、カスタマイズをする時には必須になります。

CMSContents Management System(コンテンツ・マネジメント・システム)

 

 

CMSの中での利用率はダントツのシェアを誇っていて、Web制作会社に勤務する人なら必須のスキルとなっています。

WordPressというと、ブログってイメージですが、企業サイトや、ECサイトにも使われていたりしますし、かなり柔軟性があります。

 

もちろん、当ブログもWordPressで作っていますね。

 

特徴をまとめると、下記の通りです

  • Webサイトの中でも多くのシェアを占めている
  • 無料配布で商用利用も可能(オープンソース)
  • 豊富なデザイン、拡張機能が無料で使える

 

こんな感じですが、少しずつ仕組みを知っていきましょう。

まずは、通常のWebページが表示される仕組みからです。

 

まずは通常のWebページの仕組みを知る

Webページが表示される仕組み

簡単な図ですみません。

HTMLで作られた、「静的」と言われるWebサイトの場合です。

 

HTMLサイトを作る時、Webサーバー上にHTMLやCSS、画像ファイルをアップロードしますね。

URLへアクセスした時に、それらのファイルがサーバーから送信され、パソコンに表示されるという仕組みになっています。

 

また、

WebページのURLは、http://hogehoge.com/index.html のようにHTMLファイルの位置を表しているのがわかります。

つまり、htmlファイルに直接アクセスすることで、リンクが貼られているcssや画像ファイルが読み込まれるということです。

 

なんとなくわかったでしょうか?

次に、本題のWordPressをみていきましょう。

 

WordPressがページを表示する仕組み

何やらごちゃごちゃしてますね。

 

結論から言うと、

WordPressの特徴としては、HTMLファイルが存在しないということです。

 

HTMLファイルがなかったら、ページを表示させてるの?

 

と思いますよね。

通常のWebページの場合、HTMLファイルへ直接アクセスしていましたが、WordPressでは「リクエストを送る」といった方が正しいかもしれません。

 

例えば、通常のWebページの場合は、index.htmlというファイルにアクセスしたかったらこんなURLになります。

http://hogehoge.com/index.html

つまり、表示したいファイル名をそのままURLに指定している状態です。

 

ですが、WordPressだとこんな感じ。

http://hogehoge.com/2019/12/

明らかにファイル名ではないですよね。

コレは、2019年12月のアーカイブページを表示するという意味になります。

 

 

URLのリクエストに応じて、WordPressがテンプレートを選択し、必要な情報をデータベースから取得します。テンプレートファイルにデータを埋め込んで、HTMLデータを生成といった流れですね。

 

テンプレートファイルの種類はたくさんあって、それぞれに役割が決められています。

ファイル:wp-template-hierarchy.jpg

 

例えば、archive.phpだったら、一覧ページを表示させるためのテンプレート

single.phpは投稿ページを表示させるテンプレートです。

 

テンプレート階層はWordPressのカスタマイズにとっても重要なのですが、今は「テンプレートを使い分けるんだなー」と覚えておいてください。

 

ちょっとまとめるとこんな感じですね。

  1. URLへアクセス
  2. (WordPress)URLに応じてテンプレートファイルを選択
  3. (WordPress)データベースからデータをとる
  4. (WordPress)テンプレートファイルにデータを埋め込んでHTMLを作る
  5. HTMLで作られたサイトと同じように見える

 

WordPressにはHTMLファイルはありませんが、テンプレートファイルで作ったHTMLをブラウザに渡し、CSSや画像ファイルも同時にリンクされます。

 

 

WordPress学習の第一歩

企業サイトやブログテーマであっても、WordPressサイトであれば動きは同じです。

 

WordPress側で行う処理を理解しておくことで、後々カスタマイズをする際に必ず役に立ちます。

そもそもがわかってないと、コードを書いていてエラーが出た時に対応できないですし、何より楽しくないです。

 

まずは、この仕組みを理解することが第一歩かなと思います。