通常のHTML/CSSと異なる概念でウェブサイトを作成するWordPressは、勉強手順を間違うと理解するまでに「時間がかかる」「挫折する」可能性があります。
この記事では、WordPress全体の概念をざっくり理解できるようになるための勉強の手順について解説します。
ツクルカ 全体像と挫折するポイントをしっかり抑えよう。
WordPressの全体像を理解する
WordPressを勉強する上で大切なのは、
どんな機能があるのか？
どうやって動いているのか？
などのWordPressの概念をしっかり理解することです。
先にも述べた通り、通常のHTML/CSSとは異なる概念でサイトを作成するからです。
WordPressの4つの概念
WordPressで押さえておくべき概念は、以下の4つです。
- CMS
- データベース
- テーマ
- プラグイン
HTML/CSSと異なる部分の概念を理解することで、WordPressで出来ることの幅がグッと広がります。
CMSを理解する
WordPressはCMSというシステムを利用して作られています。
CMSとは、Contents Management System（コンテンツ・マネージメント・システム）の略で、簡単にいうと画像やテキストをデータベースを用いて一元管理するシステムのことです。
サーバー上で一元管理された情報を用いてサイトを構成しているため、WordPressを使って行う更新作業はHTML/CSSなど専門的な知識を必要としません。
ユーザーからのリクエストに対して、ウェブブラウザで表示するために必要なデータをデータベースから集めて、ブラウザに表示できるように設定されているからです。
データベースの概念を理解する
WordPressはCMSを用いて構成されているため、ブラウザに表示されるデータはすべてデータベースに格納されています。
WordPressサイトは以下のような流れで、ユーザーにページを表示しています。
- ユーザーがサイトに訪問する（URLを叩く）
- データベースにページ情報（データ）をリクエストする
- 必要な情報を取り込み、HTMLを構築する
- データをブラウザに返して、ページを表示する
WordPressに情報を登録するとデータベースに取り込まれます。
そのためWordPressサイトを構築するための勉強とは、どの情報をどうやってデータベースから引っ張ってくるかという記述方式を理解することと言えます。
WordPress本体とテーマについて理解する
WordPressと切っても切れない関係にあるのが、テーマです。
WordPressサイトを構築するということは、オリジナルのテーマを作ることだからです。
WordPressをインストールすると、WordPressを動かすためのファイルが無数あります。
その中でWordPressをカスタマイズする必要があるのが、themaファイルです。
themaファイル以外は、編集することはありません。
themaファイルの例
- header.php
- sideber.php
- footer.php
- page.php
- archive.php
- single.php
- style.css
ect・・・
テーマファイルには無料版と有料版があります。
自作のブログを作るなどをする際は、すでに存在しているテーマファイルを使ってブログを更新します。
一方、コーポレートサイトなどオリジナルのサイトデザインをWordPressで作成するには、テーマファイルをカスタマイズしてオリジナルのテーマファイルを作成する必要があります。
そしてこれらのテンプレートを納品することが、WordPressでサイト構築の案件を受注した際の業務となります。
プラグインの理解
WordPressで高機能なサイトを作るために必須なのが、プラグインです。
プラグインとは、WordPressの拡張機能のことでプラグインを有効的に使うことで、PHPなど高度な専門知識がなくても高機能のサイトを用意することができます。
お問い合わせフォームなどサイト製作時には必ず必要な機能をプラグインで簡単に実装できたりします。
テストサイトを作る
WordPressを理解するための第一歩は、テストサイトを作ることです。
参考書やブログ、動画などで学ぶことも大切ですが、実際に手を動かした方がより理解が進みます。
テストサイトを作る際は、WordPressのインストールから始め、簡単なテストサイトを作り、WordPressを構成するファイルや全体の概念をざっくり理解しましょう。
HTMLサイトをWordPressで作ってみる
簡単なテストサイトを作れるようになったら、HTML/CSSで作成したサイトをWordPress化してみましょう。
WordPressは、themaファイルにあるテンプレートファイルをカスタマイズしてオリジナルテーマの作成します。
そのため通常のHTML/CSSで構築したサイト構成をテンプレートファイルで再現する必要があります。
しかしWordPressはデータベースを用いて構成されているため、ページごとにHTMLファイルを用意することがありません。
そのため、どのテーマファイルを用いてサイトをカスタマイズするのかを考える必要があります。
WordPressサイトの構築に慣れていないときは、この構成を考えるのが案外難しく、どうやってサイトを作ったらいいかわからなくなります。
そのため、自由にWordPressサイトを作れるようになるためには、HTML/CSSで作られた既存のサイトをWordPress化して慣れておく必要があります。
そうすることで、WordPressで受注できる幅が広がり、お金が稼ぎやすくなります。
知っておくべきこと
データベースを用いてページを出力するWordPressは、通常のHTML/CSSとは異なります。
その違いをしっかり理解し特徴を掴んでおくことで、WordPressで出来る範囲もをしっかり押さえておきましょう。
テンプレートタグの理解
データベースから情報を引っ張ってくるためには、特定のテンプレートタグで指令を送ります。
記事のタイトルや内容、カテゴリなど、ページを構成するために必要な情報はその都度テンプレートタグで指定して任意の場所に掲載されるように記述を行います。
投稿タイプの理解
元々ブログを作成するツールであったWordPressには、記事を投稿する機能があります。
この投稿機能は、デフォルトで1つだけ投稿タイプがあります。
お知らせやニュースなど、記事更新をするために用いられる機能です。
しかし投稿タイプは1つしかないため、2つ以上必要な場合は投稿タイプを増やす必要があります。
これをカスタム投稿タイプを呼び、WordPressは必要に応じて投稿タイプを自ら増やしてカスタマイズする必要があります。
メインクエリとサブクエリの理解
メインクエリとサブクエリを理解することで、WordPress内に格納されているあらゆる情報を引っ張り出すことができます。
フックの理解
フックはfunction.phpに記述することの多い概念で、WordPressで情報を処理するときの流れの中で、ポイントポイントに独自の処理を走らせることができます。
こうすることでデフォルトで設定されている処理だけでなく、自由に情報を追加・編集が出来るようになります。
フックを理解すると、WordPressのカスタマイズに自由度が高まります。
まとめ
- WordPressはシステムの全体像を理解するところから始める
- その後に、テストサイトを作り、実際のHTMLサイトをWordPress化してみる
- HTML/CSSとは異なる特徴を把握する
- テンプレートタグや投稿カスタマイズを知り、WordPressの特徴を抑える
- メインクエリとサブクエリ、フックが理解できるとカスタマイズできる範囲が広くなる
