93.WordPressの自作テーマを作るには ～まずは流れを確認する～
WordPressを使った自作サイトを作るには実質自作テーマを作る必要があります。
それは昨日の学習でわかりました。
本日はそのサイト制作の流れから始まり、
必要な知識を適宜学習していけたらと考えています。
デイトラでは上級編DAY9の内容です。
では早速やっていきましょう。
WordPressを用いたサイト制作に必要な知識
サイト制作をするので、WordPressのテーマの作り方、プラグインやショートコードの使い方に関する知識が必要なようです。
意外と盲点なんですが、WordPressサイトは「作って終わり」ではなく
クライアントに使ってもらうものと言うこと。
つまり、使いやすいサイトを作る必要があると。
更に言えば、作者が使い方を知らないと使いやすさを追求することはできない。
こういうことだそうです。
細々した知識も必要ですが、まずは百聞は一見に如かず、ではなく一見は一体験に如かずということで、自身でWordPressサイトをサクッと立ち上げて運用してみるのが一番良さそうですね。
WordPressを使ったサイト制作の流れ
一般的な流れは
デザインをして、コーディングをして、最後にテーマ化するそうです。
既存のテーマ流用をすることは少なく、ほぼほぼオリジナルのテーマを作成する。
なぜなら、デザインの自由度やクライアントの使いやすさに直結するからです。
WordPressサイト制作を仕事にする場合はオリジナルテーマ作成できることがスタートラインくらいのレベル感のようですので、テーマ作成は必須の課題と行って良さそうですね。
どのファイルに手を加えたり、作ったりするのか
基本的にWeb制作で触るWordPress関連のフォルダやファイルはおおよそ決まっているそうです。
それが下記の４つ
wp-config.php
wp-content > pluginsフォルダ
wp-content > themesフォルダ
wp-content > uploadsフォルダ
の中身達です。
その他のphpファイルは、サイト制作というよりはWordPress自体を稼働させる為のPHPファイルだったりするので下手に触ることの無いよう注意が必要です。
必須のテンプレートを作成する
昨日も学習しましたがテンプレートは階層があります。
なので、最終到達地点に該当するようなテンプレートは必須で必要になるわけですね。
それが下記のファイルたちです。
- index.php
- page.php
- single.php
- archive.php
- header.php
- footer.php
- search.php
- 404.php
- functions.php
- style.css
これらのファイルがテンプレートとして必須になります。
つまるところ、自作サイトを制作したければ、これらのテンプレートを自作する必要があるという事ですね。
今日のまとめ
- WordPressのサイト(テーマ)を作るには運用していく側の視点が必要
- デザイン、コーディング、テーマ化の流れで作っていく
- 階層に基づいた必須のテンプレートが存在するので、テーマを作る上では必ず用意する
テーマを自作するというと難易度が高そうな気がしてしまいます。
今後、すらすらとできるように引き続き取り組んで行きたいと思います。
92.テーマって何だ？② ～テンプレートと階層構造～
本日も引き続きテーマについて。
昨日はテーマの場所や、ざっくりとした仕組みについて確認しました。
じゃあ、テーマのフォルダの中身はどうなっているのか？
それについて見ていきましょう。
テーマはテンプレートの集まり
デフォルトで用意されているテーマフォルダの中を見ると、様々なPHPファイルがあると思います。
などがあり、
ここで注意したいのが、PHPとCSSはあるがHTMLは無いのです。
何故か？
そう、
ブラウザからリクエストを受け取ったサーバーがHTMLを生成して返却しているんでしたね。
この
「サーバーがHTMLを生成する」
この時にテーマフォルダ内のPHP達がテンプレートとして活躍しているというわけです。
リクエストに応じて、必要なPHPを組み合わせて、コンテンツ部分はデータベースから引っ張ってきて、適切な箇所に埋め込んで、最終的にHTMLに整形してブラウザに返すと…。
URLをクリックすると簡単に表示されるwebサイトですが、中ではこんな事も行われていたんですね。
改めてスゴイですね。
テンプレートには階層がある
テンプレートと言ってもどのリクエストにどのテンプレートを使用するのか。
そういった決まりごとが無いと混乱してしまいますね。
そこを解決できる優先順位的なルールが存在しています。
それがテンプレート階層です。
～がなければ～を使って、さらに～がなければ～を…
のような動きをします。
おなじみのindex.phpは階層構造では一番最後にあたります。
すべての条件を満たさない場合に適用されるテンプレート、すべての受け皿のような存在だったんですね。
そして下記が、テンプレート階層を図にしたもの
左から順に評価されて、なければ右へを繰り返していきます。
リクエストに対応する該当のテンプレートがあった場合に、そのテンプレートを使用してHTMLが生成されてブラウザに返されます。
最終的に辿り着く先がindex.phpなのは先程お伝えした通りですね。
因みに主なテンプレートには以下のようなものがあります。
- single.php・・・投稿詳細ページ用のテンプレートファイル
- archive.php・・・投稿一覧ページ用のテンプレートファイル
- page.php・・・固定一覧ページ用のテンプレートファイル
- search.php・・・検索結果ページ用のテンプレートファイル
- 404.php・・・404ページ用のテンプレートファイル
テンプレート階層については、繰り返し使って血肉にしていく必要がありそうですね。
今日のまとめ
- テーマはテンプレートファイルの集合体
- リクエストに応じて使用するテンプレートを切り替える
- 使用するテンプレートは優先順位があり、それをテンプレート階層と呼ぶ
本日はテーマのおもにテンプレートに関して学習しました。
本業が立て込んでいて、あまり時間が取れないですが引き続きやっていきます。
では、また。
91.テーマって何だ？ ～見栄えの管理～
本日はWordPressのテーマについて。
テーマって一体なんでしょうか？
早速やっていきましょう。
まずはおさらい
タイトルやカテゴリー、日付やコンテンツ等のデータに関してはデータベースから取得してくるんでしたね。
その辺りの細かい話は昨日の記事を参考にしてもらえれば。
データについてはわかりましたと。
ここまでで、デザインに関する話が出てきていないことにお気づきでしょうか。
テーマとは見栄えを管理するもの
相手はブラウザですから、当然見栄えの管理と言えど「HTMLとCSS」で行っていくわけです。
それをいい感じにしてくれるのが、今回の「テーマ」なんですね。
データベースから取得したデータを、ブラウザに渡す時にHTML、CSSをいい感じにして渡す為の型と捉えても良さそうです。
テーマはどこにあるのか
WordPressのファイルについて学習した時に出てきたwp-contentフォルダの中にあるthemesフォルダ。この中にテーマがあります。またテーマはフォルダ単位で分けられています。
オリジナルのWorPressサイトを作るには？
つまるところ、このテーマを自作するところから始まるようですね。
wp-contentのthemesフォルダ内に、自作したテーマ関連のファイルを収めたフォルダを配置して、管理画面から有効化することでオリジナルのテーマが使えるようになるわけですね。
WordPressのページが表示されるイメージ
ブラウザからのリクエストを受け取った時に、まずは要求されたデータをデータベースから取得する。
そして、有効化されているテーマの該当ページのテンプレートに対して、データベースから取得してきたデータをはめ込むような形でHTMLを生成する。
それをブラウザに返却する。
こんな感じで良いのではないでしょうか。
今日のまとめ
- WordPressにはデータとは別に見た目を管理する為のテーマが存在している
- テーマはwp-contentのthemesフォルダ内にフォルダ単位で格納されている
- 自作のテーマはwp-contentのthemesフォルダ内に配置して、有効化することで初めて使用できる
本日は２２時までロボットと戯れていたので、学習の進みが非常に遅いです。
１２月５日までは、こんな調子が続きそうです。
とは言え、ロボットもWeb制作もどちらも面白いんですけどね。
なんとか歩みを止めずに続けていきたいと思います。
では、また。
90.WordPressを知ろう② ～管理画面とデータベース～
本日はWordPressの実際の管理画面とデータベースがどのように紐づいているのか。
ここを確認していきます。
では早速やっていきましょう。
サイトデータはデータベースに保存されている
昨日の動的サイトのイメージでも確認したように、サイトデータはデータベースに保存されています。
WordPressの場合は
管理画面(wp-adminのファイル群)からデータの追加・修正・削除などを行います。
管理画面で実施した追加・修正・削除等のデータの操作はサーバーを経由してデータベースに反映されます。
いったいどこのデータベースかと言えば、
そう、wp-configで設定した接続先データベースに対してですね。
wp-configの中身は
このようになっています。
今はローカル環境で適当な設定なので公開しても良いのですが、
ここを公開するとサイト乗っ取りに合うそうなのでくれぐれも注意されたしです。
なので、今はwordpressというデータベースに、ユーザー名 rootととしてアクセスしているような状態ということですね。
phpMyAdminを触ってみる
MySQLの操作や管理をブラウザを使って行える、PHPによって作られたWebアプリケーション。
ということで、簡単に言うと
chromeでデータベースを簡単に触れるようにしたアプリだよ
くらいのイメージで良いと思います。
phpMyAdminはMAMPをインストールした時に設定されていると思います。
上記のような画面のやつです。
ここでwp-congfigで接続するデータベースを作成したり、実際のデータベースの中身を確認したりできます。
円柱形のマークの「wordpress」の部分がデータベースの塊のようですね。
そして「wp-commentmeta」や「wp-posts」の部分がテーブルで、
一時停止マークのような「Columns」がカラムですね。
データベースの学習でやりましたね。
ということはこれらにアクセスするには、
が必要になるわけです。
上記画像の中程に
しっかり使われていますね。
試しにwp_postsを表示しようとクリックした所です。
ORDER BYは取出したデータの並べ替えに関する記述のようですね。
この学習した内容がつながっていく感じが面白いですね。
実際の記事データを確認してみます。
wp_postsの１つを開いてみましょう。
下記はpost_content部拡大図
post_contentカラムの値としてHTML形式のテキストが格納されています。
PHPがリクエストを受け取ったときには、条件に合せてここの値を取得しているということなのでしょう。
PHPがデータベースに対してSQLで問い合わせているということなのでしょうか。
管理画面でも記事データを確認してみる
管理画面を開いて先程のページを確認してみましょう
サンプルページをクリックします
同じ内容が表示されていますね！
管理画面はデータベースを参照していることがわかりましたね。
ここで変更を行うことで、先程のデータベースのposts_contentの値を操作する処理が行われるということでしょう。
このページ１つがデータベースで言うところのロウに該当するのでしょうか。
大分イメージが湧いてきた気がします。
今日のまとめ
- 管理画面はデータベースを操作している
- phpMyAdminはブラウザでMySQLを操作できるアプリ
- ページ１つがデータベースで言うところのロウのイメージ
本日は管理画面とデータベースについて学習しました。
関連性が大分イメージできたと思います。
個人的には満足な時間でした。
引き続き学習していきます。
では、また。
89.WordPressを知ろう ～基本的な仕組みを確認しよう～
本日からWordPressの学習に入っていきます。
まずは基本概念の学習からということで、めちゃくちゃ大切な所ですね。
しっかり、やっていきましょう。
Webサイトが表示される流れをおさらい
- ブラウザが、URLをもとにサーバーに対してリクエストを出す。
- サーバーが応答、ブラウザに対してコンテンツを返却。
- ブラウザがサーバーから受け取ったコンテンツを表示する。
ざっくりこんな流れですね。
なぜ、こんな話をいまさらおさらいしたのかと言えば、WordPressでのWebサイト表示が少し違うからです。
基本を押さえつつ、どういう仕組なのかを見ていきましょう。
静的サイトと動的サイト
これらの言葉を聞いたことがある人もいると思います。
静的サイトは作れる人割りといるけど、動的サイトを担当できる人が・・・なんてお話を私もどこかで耳にした記憶があります。
で、それらが何かというと
静的サイト
→サーバーに返却用のコンテンツを予め準備してあり、ブラウザからのリクエストに応じて準備されたコンテテンツを返すだけのサイト。
倉庫から製品を取出して出荷するだけみたいなイメージですね。
動的サイト
→サーバーはブラウザからのリクエストに応じて、都度返却用のコンテンツを生成するサイト。
注文を受けてから料理を作って提供するみたいなイメージですね。
で、WordPressがどちらのサイトになるかと言えば、動的サイトというわけです。
今後は動的サイトの概要も押さえておく必要があるということですね。
動的サイトの動き
ブラウザからのリクエストに応じてコンテンツを生成するという話は先程やりました。
一旦、整理しておきましょう。
サーバーにはブラウザで表示するためのコンテンツが用意されていない。
それは、サーバー上にHTMLファイルは無いということと同義ですね。
ですので、サーバーはブラウザからのリクエストに応じて必要なデータをHTML形式にしてから、ブラウザに返却する処理が必要ということになります。
このHTML形式にする事を生成という言葉で表しているようですね。
まとめると、
サーバーが保持しているデータにHTMLは無いが、
リクエストがある度に、保持しているデータをもとにHTMLを生成して返却することで、あたかもHTMLファイルがあるかのように振る舞っている。
こんなところでしょうか。
どうやってコンテンツを生成しているのか
ここで疑問が湧いてきます。
サーバーはいったいどうやって都合よくコンテンツを生成しているのか。
そう、プログラムが処理しているのです。
所謂、サーバーサイドプログラミングというやつですね。
このプログラミング言語としてPHPやJava、Rubyが使われているといわけです。
だんだん点がつながってきましたね！
コンテンツの元となるデータの管理は？
サーバーがプログラムでコンテンツを生成してくれるのは、わかった。
ページ数が膨大なブログ等のデータを一体どうやって保存・管理・アクセスしているのか。
という新たな疑問が生まれます。
そう、ここで必要になってくるのがデータベースです。
コンテンツ（ブログ記事等）のデータをデータベースのテーブルで管理して、
リクエスト（URL）から得た情報を元にプログラムが
SQLで問い合わせて必要なデータを取得してくるということなのでしょう。
PHPとデータベース、SQLが動的サイトに必要ということが見えてきました。
WordPressは一体何をしているの？
今後WordPressを使っていく上で、WordPressのファイルをサーバーに設置することになります。
このファイル達の中身は主に
- Webページのリクエストを受けっとた時に適切な処理をしてブラウザに返す為のファイル群（メインはPHP）
- データベースを操作する為の管理用ページのファイル群
- コンテンツとして表示する為のHTML、CSS等のテンプレート類
大きく分けて３つに分かれています。
①については、ここまで学習してきた内容ですね。
②は何だか難しく感じてしまいますが、データベースの操作というのはつまるところコンテンツの元となるデータの編集という事ですね。簡単に言うと、記事の編集とか該当すると思います。
③はHTMLをブラウザに返却する際の見栄えを整える為のファイルとして捉えれば良いと思います。
まとめると
①ブラウザのリクエストに対する処理
②サイトの編集（データベース操作機能）
③サイトの見た目を整える（ブラウザにHTMLとして返却する際の見栄え）
ざっくり、この３つをWordPressで行っているイメージで良いと思います。
WordPressのファイル群
PHPを基本としたファイルで構成されている事は先程も確認しましたね。
WordPressで押さえておくべきファイル、フォルダを確認しておきます。
wp-adminフォルダ
→管理画面用のファイルが格納されている。
データベースのデータを操作する為のファイルもここにありそうですね。
wp-contentフォルダ
→Webサイト表示に関わるファイル一式が格納されている。
我々Webコーダー達は主にこのフォルダ内のデータをいじくり倒していくようです。
wp-includesフォルダ
→WordPressで利用する様々な定義ファイルが格納されている。
ここは変更する必要はほぼ内容で、むしろ触れないほうが良いとの事です。
wp-config.phpファイル
→接続するデータベースの定義などが記述されている。
ここの設定をミスるとデータベースからデータが取れないのでコンテンツ生成ができない、サイトが表示されないって事ですよね。大事です。
index.phpファイル
→Webサイトへのすべてのアクセスの起点
サイトに対して色々なURLでアクセスされるのですが、そのリクエスト（URL）をまずはindex.phpが受け取って、そのリクエストに対して必要なコンテンツを集め、テンプレートを適用してブラウザにHTMLを返している。結構重要なファイルです。
総合案内の窓口みたいですね。
今日のまとめ
- WordPressは動的サイト、リクエストを受け取ってサーバー側で処理をしてコンテンツを返却している
- 動的サイトには２つの技術が必要で、コンテンツを生成してブラウザに返す処理技術とコンテンツの元となるデータの管理技術
- WordPressではPHPで処理を、MySQLでデータの管理を行っている
かなりのボリュームになりましたが、これでもまだ序章なんですよ…。
基本をしっかりイメージしつつ先に進めていきます。
引き続きやっていきましょう。
では、また。
88.復習しよう⑤ ～データベース・SQL～
復習シリーズ第５弾
データベース・SQLについて。
これで今までの学習を再咀嚼したので、明日からはWordPress課題に入っていけます。
では早速やっていきましょう。
データベースとは
データを「集めて」「使いやすい形に整理」して「まとめた」もの。
こんなイメージです。
一般的には、
構造化した情報またはデータの組織的な集合
と言われているようです。わかりにくいですよね。
意味のあるデータのまとまりを作って、
それらを整理して使いやすくしたもの、またはその仕組のこと
と自分は解釈しています。
データベースのメリット
データベースとはでも書いた内容と重複する部分もありますが、
- データをある単位でまとめて管理できる
- データが整理されているので簡単に目的のデータを取り出せる
- 全体のデータから、指定条件でまとめたデータを取り出せる
こんなところですね。
データをある単位でまとめて管理できるというのは、
ロウとかレコードと呼ばれる単位で管理していて、
ちょうど住所録とか、社員名簿の１件の情報をイメージしてもらうとわかりやすいと思います。
例えば、社員名簿の場合。
社員Aさんの「名前、年齢、性別、所属、入社日」をまとめて１行に書きますよね。
このような「行」単位で１件のデータを管理する点がデータベースと同じなのです。
また、名前とか年齢とかそのデータが何かを表すのは列とかカラムと言われます。
ロウ(行)、カラム(列)で構成される１つのデータのまとまりをテーブルといいます。
身近なものはエクセルですね。
行、列、シート
こんなイメージです。
目的のデータを取出したり、指定した条件に合致したデータを新しいテーブルとして取り出すみたいなこともできます。
これは、使い方によってはかなり強力だと思います。
例えば、
全社員名簿から男性のみの社員名簿を瞬時に取得するだとか、
全国の住所録から静岡県静岡市の住所録を取得するだとか、そういうイメージです。
これがスグにできるというのは使い勝手がかなり良いデータですよね。
もともとのデータベースのデータを書き換えずに行うこともできるので、
必要に応じて全体のデータから必要な部分だけを抜き出して、使用するというのも保守性の面から見ても良さそうですね。
SQLとは
SQLはデータベースを操作する為の問い合わせ言語です。
先程から、こういうデータを取得したりと言っていた指示をする為の言語だと思っていただければ間違いありません。
どうやってデータベースを操作するのか
これもデータベースのところでお話した、管理されている仕組みに対してアプローチしていくような形で記述します。
そう、テーブル、ロウ、カラムに対して条件を指定したりするわけです。
細かい部分は省きますが、
SELECTでカラム名を、
FROMでテーブル名を、
条件指定はWHERE カラム名 = 値(取得したいロウの値)
のように指定して上げることで、該当データをすべて取得してくれます。
例えば以下のようにSQLで記述すると
SELECT name FROM test WHERE gender ='男';
testテーブルのgenderカラムの値が'男'のロウのnameカラムの値を取得
という具合です。
SQLとデータベースがWeb制作と関係あるのか
これは、WordPressのデータ管理がデータベースで行われているから基礎知識として必須ということです。
その辺りの仕組についてはおそらく今後の課題で触れていくことになるでしょう。
楽しみです。
今日のまとめ
- データベースはデータを「集めて」「使いやすい形に整理」して「まとめた」もの。
- データベースではカラム、ロウ、テーブルでデータを管理している
- SQLはデータベースに対して、必要なデータを取出したり、編集したりする操作の為の言語
本日はデータベース、SQLについてやってきました。
明日からはいよいよWordPressです。
歩みが遅い笑
ですが、歩みは止めずに進めていきますよ。
では、また。
87.復習しよう④ ～PHPについて～
復習シリーズ第４弾
今回はPHPについて
割りと最近学習した内容ですが、WordPressを触っていくに当たって、結構な頻度で触れ合うことが予想されます。
改めて基本を復習していきます。
PHPとは
プログラミング言語の一つで、特にWeb分野の開発が得意と言われています。
Web制作においては、PHPを単体で使うことはなく、基本的にHTMLと組み合わせて使います。
なぜなら、ブラウザはHTMLは理解できても、PHPは理解できないからです。
ブラウザに伝えるにはどうすれば？
PHPのプログラムはサーバーで動いています。
JavaScriptもプログラミング言語でしたが、こちらはブラウザ側で動いていたのです。
ここが、PHPとJavaScriptの大きな違いですね。
JavaScriptはそもそもブラウザが理解して処理していました。
PHPはサーバーで動き、処理をした後、サーバーからブラウザへデータを返す時にHTMLの形式で渡されていれば良いのです。
なので、PHPが出力する最終的なデータがHTML形式であれば、中でどんな処理を行っていようがブラウザにはHTMLにしか見えないので関係ないわけです。
PHPの特徴は？
PHPは書き方がシンプルでわかりやすいです。
JavaScriptを学習した後であれば尚更理解が早いかなと思います。
書き方は少し違うけれど、仕組みは似ている。変数、関数なんかは特に説明不要ですよね。
１つだけ、新しく学習した要素としてクラスがありますね。
これはオブジェクト指向言語では必ず出てくる要素の１つで、データと処理をまとめて使い回す仕組みでした。
設計図と制作物の関係と説明されることが多いですが、CSSの共通クラスに通ずる部分もある気がします。（似たようなものを予めテンプレートとしてまとめて、再利用する）
また、HTMLの中に埋め込むような形で記述します。
HTMLをブロック単位でforeachで複製して出力したり、
条件式で該当時のみHTMLを出力したりと
まさに動的なWebページを作ることができます。
Formを使ってデータの受け渡しをするのもPHPの仕事で、HTMLタグの特定の属性を参照してデータの受け渡しを行ってくれます。
これも超便利ですね。
きっちり基本を押さえて、WordPressに入って行きたいですね。
今日のまとめ
- PHPはサーバーで動くプログラミング言語
- どんな処理を書いても、最終的にはサーバーからブラウザにHTMLとして渡される
- クラスというデータと処理をまとめる仕組みが使える
- ページ間でのデータのやり取りが可能になる
本日はPHPについて復習しました。
明日はSQLとデータベースをおさらいして
WordPressの学習に突入していきます。
では、また。
