WordPressの仕組みをもう少し掘り下げてみる
WordPressを学ぶにあたって、一番わかりにくいのはその全体像ではないかな、と思うようになりました。
この半年程度でいくつかWordPressテーマを作成したのですが、正直最初のうちはよくわからないまま参考書に従って作っていっただけで、single.phpってコード自体はpage.phpと全く一緒なんだけどなんで表示されるものが違うの？とか、テンプレート階層って何？！とか、そんな疑問がずっと頭にあったんです。
（書いてはあったけど理解できなかったのが大半。）
どんな書籍やブログ記事等でもテンプレート階層やWordPressの仕組みの説明はあるものの、いまいち納得というか、腹に落ちる感覚を掴めずにとてもモヤモヤした気持ちでした。
幸い現在はその仕組み、全体像が掴めたので、とても気持ちよくテーマ作成ができるようになりました。
というわけで以前、WordPressの仕組みを興味ない人にざっくり伝える、という記事を書いたのですが、
非常にざっくりした説明で、あまり役に立つ代物ではなかったので、今度はもう少し詳しく書いて行こう、という記事です。
まずはデータベースのこと
WordPressを触ったことのある方なら、データベースという単語にも触れていることと思います。
MySQLやMariaDBなどですね。これらは両方、データベースシステムの名称です。役割は同じ。
データベースは、その名の通り様々なデータを保存してくれるシステムで、sqlというプログラミング言語を使うことによりデータの書き込みや削除、書き換え、さらに検索機能や並べ替え機能などが可能です。
WordPressにおいては、記事本文や画像へのパスのほか、サイトが表示する内容を保存するために使用されています。
実際にどんなデータが保存されるかはこの後触れる予定ですが、興味のある方はデータベース構造 - WordPress Codex 日本語版にて詳しく解説されていますので、見てみてください。
今の段階ではWordPressで作成されたページの情報全てがこのデータベースに保存されるんだな（厳密には違いますが、話を単純にするために）、程度の考えで良いと思います。
「データベースには、WordPressのデータが全て保存されている」
データベースに届く情報はどこから発信されているか？
データベースに全ての情報が保存されているとして、保存される情報はどこから入力されるのか？という疑問がありますね。
それが管理画面の各入力画面です。
WordPressでコンテンツを公開する時には、投稿タイトルやテンプレートなど、記事を作成する際に様々な情報を書き込んだり選択したりしますよね。
それら管理画面から入力した様々な情報が、データベースに送信されていきます。
どんな情報が、どのように保存されているのか？
続いて、どんな情報が保存されているのか、代表的なものを見ていきましょう。
以下のような記事を投稿したとします。
この場合、次のような情報が届けられていきます。（もちろん、ほんの一部です。）
- post_id：投稿を管理するための番号。自動で付与されます。
- post_type：ページの種類を保存します。 「投稿」を選んでいればpost、「固定ページ」を選んでいればpageが保存される値になります。
※途中ですが、「キー（key）」、「値(value)」という単語について解説します。
データベースに何か情報を保存する際には、「キー」と「値」がセットになっているのが普通なのですが、これは以下のようなエクセルの表をイメージしてもらうとわかりやすいです。
「post_id」や「post_title」などがkey、「1」や「WordPressとデータベース」がその値です。
WordPressでは様々なキーがあらかじめ用意されており、それらを組み合わせて様々な機能に利用しています。
- post_title：投稿タイトル。②の内容がpost_titleというkeyの値として保存される
- link_image：投稿内に掲載された画像へのパスを値として保存します。
まだまだあるのですが、投稿画面から規定の情報が色々と届けられているらしい、というくらいの認識で問題ないでしょう。
「クエリ」について
WordPressの仕組みを理解するということであれば、データベースについてはこれで十分でしょう。
というわけで、続いて「クエリ」についても紹介します。
クエリとはWikipediaによると
クエリ（英: query、英語発音: [ˈkwɛri] 、英語発音: [ˈkwɪəri] （クウィァリ））とは、一般に一連の問い合わせの中の個々の質問を意味する。
とされています。
WordPressのパーマリンク設定を思い浮かべて欲しいのですが、デフォルトのパーマリンク設定では末尾は?p=123となっていますよね。
これは、postIDが123の記事を表示せよ、という要求になっていて、その要求文が「クエリ」です。
言い換えると、URLにデータベースへの要求が書かれているとも言えます。
クエリには、投稿名やカテゴリーの名称のほか、色々なものがあります。
ただ実際のところ、SEO的にも管理のしやすさ的にも、パーマリンク設定を変更するのが一般的ですから、実際はあまりこの形式のURLは見当たりませんよね。
多いのはpost_nameでのURL形式や、カスタムURLだと思いますが、これはサーバ側で処理をすることにより、表示するURL書き換えていて、実際はpost_idやcategoryなど、クエリ文がしっかりとサーバーに対して渡されています。
クエリにも色々と細かい話があるのですが、仕組みとしては以上を理解しておけば十分です。
テンプレート階層
長くなってきたので、これまでの内容を少し振り返りましょう。
ここまでの流れをまとめると
- 記事作成において様々な情報がデータベースに保存される
- アクセスしてきたURLに、データベースへのクエリが書かれている
- 要求された内容をデータベースから取り出し、ページを表示している
ということになります。
そしてここからは、テンプレート階層について簡単に紹介します。
テンプレートとは
まずテンプレートとは何かですが、ページを表示するための雛形です。
ファイルの中にはデータベースに保存された情報（記事本文やページタイトル）を表示するための関数であるWordPress関数がHTMLとともに書かれています。
テンプレートタイプ
WordPressには以下のようなテンプレートタイプが用意されています。
代表的なものをいくつか紹介していきます。
- 「投稿」(single.php)：管理画面左の「投稿」から作成されるページ。post_typeはpost。
- 「固定ページ(page.php)」：同じく、「固定ページ」から作るページ。post_typeはpage。
- 「アーカイブページ(archive.php)」：時系列で「投稿」を列記していくページ。
- 「カテゴリーページ(category.php)」：カテゴリ別に「投稿」を列記していくページ。
他に、特定の「投稿」や「カテゴリーページ」に対してのみ有効なテンプレートを作ることもできます。
- 「投稿＋任意の文字列」(single-任意の.文字列php)：特定の「投稿」に対して使用するテンプレート
- 「固定ページ＋任意の文字列(page-＋任意の文字列.php)」：特定の「固定ページ」に使用するテンプレート。
などです。
これらを利用して全てのページごとのテンプレートを用意することも可能ですが、それではCMSの利点が失われてしまいますから、最低限のテンプレートで済ませるというのが一般的です。そこで役立っているのが次に紹介するテンプレート階層というシステムです。
テンプレート階層とクエリ
ここで、先ほどのクエリのことを思い出して欲しいのですが、クエリには様々なタイプがあります。例えばカテゴリー名～～のものを要求するクエリや固定ページを要求するクエリなどです。
テンプレートは、このクエリに応じて選択される仕組みになっています。
カテゴリー名Aのページへのリクエストがあれば、カテゴリーAテンプレートを。
固定ページAへのリクエストがあれば、固定ページAのテンプレートを探して表示する仕組みが用意されています。
ただ、先ほども触れたとおり、一般的にはに全てのページごとにデザインを変更するようなことはないですよね。
とは言え、いくつものテンプレートを用意するかもしれません。
そこで活躍するのがテンプレート階層というシステムです。
ものすごく大まかにいうと、WordPressではクエリに対して次のような流れでテンプレートを探し、合致した時点でそのテンプレートを使用してページを表示してます。
このシステムがあることで、たくさんのテンプレートを利用するユーザーにも、最低限のテンプレートで運用するユーザーにも
対応が可能になっています。
クエリやキーのカスタマイズ
テーマを作っていると、例えば
「同じカテゴリに属する投稿を表示したい」だったり、人気の投稿一覧を表示したい、という要望が出てくることがあります。
そんな時のために、WordPressではオリジナルのキーやクエリを作ることができるようになっています。
WP_Queryなどを利用したカスタマイズですね。今回では触れませんが、データベースとクエリを自由にカスタマイズすることで、様々なことが可能です。
最後に
長々とWordPressの仕組みを紹介してきましたが、今回の内容は以上になります。
自分のためではある記事ですが、もしどなたかの助けになれば嬉しいです。
サイドバーを縦だけ固定するCSS
レスポンシブのサイドバー固定をCSSのみで実装する
久しぶりのCSSネタ。
サイドバーをfixedで横に固定したいときが多くあります。そのとき問題なのが、position:fixedの起点がブラウザの端になってしまうこと。
通常のサイトだと単純にfixedで問題ないのですが、レスポンシブのサイトだとブラウザ起点のfixedが恨めしい時が多くあります。
そんな時、親要素を起点にfixedしてくれたらいいのになと思っていたら、こんな方法がありました。
JSとかjQueryでもいいのでしょうが、CSSだけで対応できたら楽チンですし動きも軽いです。
HTMLはなんの変哲もありません。
続いてCSS。
「position:fixedの起点を親要素にするCSS」のCSS
仕組み
このCSSのポイントは、positionで左右位置を指定せずに、marginで位置を調整すること。fixedとabsoluteはtopやleftを指定せずにかけた場合は親要素の左上が起点になるんですね。そこで、marginで位置を指定してあげて完成！
WordPressの仕組みを興味ない人にざっくり伝える。
今、WordPressのテーマ作成を業務で行なっているのだけど、細かく書くべき備忘録がたくさん溜まっている。全てを書くのはいつになるやら、という感じ。
なので、まずはWordPress全体の仕組みについて、私なりの解釈を書いておきたい。
意外に、WordPressがどういった仕組みで動いているのかをざっくり書いてくれている記事は少ない気がするので。
WordPressとはなんなのか？
私的には「フレームワークの一つである」と考えた方が良いと思ってます。実際にWordPressのテーマ作りを行なってみた結果、意外にPHPの根本的知識やプログラミング的素養は（ほとんど）必要なかったことがこの答えに対しての理由です。
WordPress関数という便利な機能がセットになっていて、「お作法」を覚えれば一定レベルのものを作ることができる、というのは非常にフレームワーク的だなと思います。
なので、WordPressってなに？と言われたら、主にブログ用なシステムのフレームワークですと答えます。
なんとなく仕組みを理解する
WordPressが実はフレームワークだとして、それでも動作の仕組みが気になるものです。文章だけでは解説が難しいので簡単な図を書きます。
WordPressサイトの表示の仕組み
WordPressにおいて、記事はテキストデータとしてDBに保管されており、画像や動画などのデータはただデータとしてサーバーに保存されています。
これらをウェブサイトとして表示するためにはHTMLが必要になりますが、その雛形となるのがsingle.phpやpage.phpなどのテンプレートファイルです。
記事投稿から閲覧の流れ
どっかからふざけるなと声が飛んできそうなざっくり具合で説明すると、WordPressはこんな感じで動いている。
-
記事が投稿される
-
URL、記事本文と画像など各データとパスがデータベースに記録される
- URLから、どのテンプレートに当てはめるべきかを判別する
-
アクセスのあったURLに関連するデータをテンプレートに当てはめて表示する
WordPressでサイトを作るとはどういう事か？
WordPressでサイトを作る時には、どういった情報分類が必要か？デザインパターンをいくつ作るのか？の整理が重要になってくる。
具体的な問いとしては、過去記事一覧が必要か？カテゴリ毎のメニューが必要か？などがあげられるけれど、問いに対してイエスが増えるたびにテンプレートを増やす可能性も増えていくから。
なので、WordPressで使われるテンプレートをこれまた簡単に紹介しておく。
代表的なテンプレートタイプ
front-page.php
サイトのトップページとして使用するテンプレート。
page.php
固定ページに使用されるテンプレート。single.phpと違い時系列を持たないので、archive.phpに当たるテンプレートを持たない。
single.php
WordPressには「投稿ページ」と「固定ページ」がある。single.phpは投稿ページのためのテンプレート。archive.phpへ、時系列を持って表示させることができる。
archive.php
single.phpがブログの投稿だとして、そのindexページとも言えるページのテンプレート。タイトルだけ出力するのか？サムネイルも表示するのか？その辺りを設定していくことが多い。
テンプレート階層とは？
WordPressは要求されたデータをどのテンプレートに当てはめるべきか？という判断を、各テンプレートへ「優先度」をつけることで自動化しています。それが「テンプレート階層」という言葉の意味するところです。
少し例えを出すと、
ここでは紹介しませんでしたが、category.phpというテンプレートタイプも存在します。
カテゴリーの過去記事を一覧で見たい、というリクエストがあれば、まずはこのcategory.phpのテンプレートを探し、なければarchive.phpで代用する、というようなことをWordPressのコアにおいてプログラムされているのです。
さて、結構な量になってきたのでこの辺で終わります。
WE Projet 4月の振り返り
約一ヶ月ぶりの投稿となってしまった。
最初から言い訳になってしまうのだけど、このひと月は業務外の勉強時間を確保できていない。そのため、勉強したことをブログを書くことは時間的に厳しく、振り返り記事を書くのは精神的に厳しく...。絵に描いたような悪循環だ。
そんな状態でも振り返りを書くのは、このままこの自分への決め事を無くしてしまうのは気がひけるから、というのが大きい。
正直、業務時間以外に勉強するのは中々厳しいことだ。だけど、だからこそ価値があるし、先日36歳になったというのにまだこの業界では二年生だというそんな状態で「自ら学ぶ姿勢」を無くしてしまったらこの先戦い続けることなんて到底不可能だとも思う。
だから、振り返りたくもないこのひと月を振り返る。
というわけで実数値を計測する。
4月の実績値は？
| Activity Type | Duration | Percent |
|---|---|---|
| 読書 | 06:42 | 0.9 |
| 勉強 | 06:28 | 0.9 |
| BLOG | 00:40 | 0.1 |
4月の業務時間が20で、1日あたりの規定労働時間が7時間なので140時間。
28時間が目標時間。実際が14時間弱。
ひどい数値だ。
ただし、積み上げているものはある
そもそもなぜいつものように時間を作れていないのか？ということにも理由はあって、業務において大きなチャレンジをしている、というのがそれに当たる。
当然具体的には書けないのだけど、自分が今年の目標としている「WordPressへの深い理解と構築技術を身につける」ことに繋がっている。
自然、移動中や空き時間に学ぶこともそのことになってしまう。
だから、４月と５月に関してはまあ、多めに見るべきなのかもしれない。
６月には今の案件は終わって、一回り大きく成長しているだろうから。
We Project 3月の振り返り
We Project 3月の振り返り
4月も4日となり、少し遅れてしまったけど3月の振り返りを書いておきたい。早速データを。
Time Entries
| Activity Type | Duration | Percent |
|---|---|---|
| Total | 743:59 | 100.0% |
| 勉強 | 22:48 | 3.1 |
| 勉強 | 22:48 | 3.1 |
| 読書 | 05:09 | 0.7 |
| BLOG | 03:29 | 0.5 |
3月の基本業務時間は22X7＝154X0.2で30.8時間。
勉強（主に技術書を使った自習）が22時間48分
読書（仕事に関わる読書）が5時間9分
当ブログの更新が3時間29扮
合計：31時間26分
かなりぎりぎり・・。もう少し仕事を効率化して自分の時間を作るようにしないと！
3月にやっていたこと
技術書を使った勉強
なかなか思うように進められていなくって、一冊にどんだけかかってるんだよ！と我ながら思うのだけど、3月頭からメインに勉強している技術書はこちら。
- 作者: たにぐちまこと
- 出版社/メーカー: 毎日コミュニケーションズ
- 発売日: 2010/09/14
- メディア: 単行本（ソフトカバー）
- 購入: 43人 クリック: 1,002回
- この商品を含むブログ (54件) を見る
この本の一番の特徴というか、いいところは一番最初の章なんじゃないでしょうか。「プログラムってなんだ？」を、紙とペン、消しゴムを使ったワークを通して理解させてくれます。
仕事の中で学んだこと
他部署から依頼されたサーバー構築を何やかやと3月いっぱいかけてやっていました。相当時間とられたけど、すごく勉強になった。
実はこのサーバー構築、一度作り終わったものをクラッシュさせてしまう、というトラブルに見舞われました。
しかし、このブログで備忘録を残しておいたことで、1か月かかっていたものが半日で完了。カンペを用意しておくって大事だなあ。セキュリティ回りがまだ書けていないのだけど、流れは下の二つにまとめてあるので時間を見つけて書いていきたい。
そのほか
photoshop
デザインはほんとダメでデザイン系ツールも全然使えないんだけど、photoshopのチュートリアルを使って少しづつ勉強を始めたところ。画像の軽微な修正や、色味の調整程度でデザイナーさんに頼むのも気が引けるし、自分でできれば全体としての仕事スピードが上がっていく。いいことずくめだ。
adobeXD
photoshopの勉強の前に、adobeXDを使って簡単なプロトタイプ作成を試してみたりもした。今後、ディレクター業務を行うこともあるだろうし、その時は「みんなに優しいワイヤーフレーム」を書きたいと思っているから。
以上、3月のご報告でした。
Webサーバーの仕組みをざっくりまとめておく
初めてWebサーバを構築するという経験をしたことで、いろいろと分かった部分があったのでまとめておきます。
今後、周囲にwebサーバーってなんなのか？を説明しなければならないことも有るでしょうし。
聞ける相手がいない中での構築はそれなりに大変でしたが、得るものも大きかったです。
なお、この記事の内容は私の個人的解釈ですので、正解は職場の先輩、書籍やgoogle先生などに聞いてください。
Webサーバーを構成するハードウェア
サーバーマシンと呼ばれたりするので、何か専用機器を思い浮かべがちなんですけど実はほとんど普通のPCと同じです。
普段私たちが使うPCと違う点は、記憶容量と処理速度に特化している点です。
一般家庭のPCは色々と用途が色々とありますよね。
- 写真や動画を加工したり保存したりする
- 音楽を聴く、編集する
- オフィスソフトを使う
- ネットサーフィン
など、いろいろな事に使われます。
すると当然、いろいろな能力がバランスよく使えるようにしなければいけません。
ハードウェアで言えば、スピーカーだってディスプレイだって必要です。
反対に、サーバーの役割は求められた処理をしてファイルを返送する、この一点です。
なので、能力値の大半を記憶容量、処理速度に割り当てることが可能になります。
ディスプレイもスピーカーもいりません。
実際は一般用途のPCでも問題なくサーバーとして利用可能です。
ここ数年で発売されたものであれば十分な記憶容量がありますし、処理速度も上がっているので、相当なアクセスや重い処理をするプログラムを仕込んでいるのでなければ実用可能です。
今回、業務で構築したサーバも余り物の事務PCです。
まとめ＝サーバーとPCのハードウェアに違いはない。
Webサーバーのソフトウェア
サーバー管理者などになる予定がないのなら、ハードウェアは乱暴に言ってしまえば気にしなくていい程度の話です。
反対に、ソフト面については知っておくと結構役に立つのではないかと思います。
バックエンドの処理を担当する場合は特にです。
知っておくとさまざまな面で理解が進みやすくなると思います。
まずはLinix
サーバーに少しでも興味を持った時に必ず聞く単語がこの「Linux」。
このLinuxはなんなのかという話をこれまた乱暴に言ってしまうと、コンピューター本体とOSの間に立ってさまざまな処理を引き受けてくれるプログラムです。
そういった存在全般をカーネルといいます。カーネルはwindowsでもMacでも搭載されています。
カーネルとPCについてはざっくりとこんなイメージになります。
まとめ＝linuxはカーネル。カーネルは入出力の受付や連絡、記録をする。
次にOS。
続いて、OSのお話。
カーネルがコンピューター本体との橋渡しをしてくれるものとするならば、OSは人とカーネルの間に立って様々な便利なことを行なってくれるソフトでしょうか。
フォルダを作成するケースでいうと、このような処理が行われています。
- OSにて「フォルダを作成」を入力
- OSからカーネルに対して、フォルダ名や権限などの情報をセットに、記録を依頼
- カーネルで、メモリやハードディスクを使用して領域確保と記録を実行
- 作成されたフォルダを、OSが見た目に反映
CentOSやDebian、Ubuntuなどは全てLinuxカーネルを利用するOSです。
そして、LAMP
LAMPはそれぞれどういった関係性なのか？すっとわからなかったのですが、今回サーバーについて学んだおかげで少し理解することができました。
LAMPとはLinuxにApache、MySQL、PHPをインストールしたもで、それぞれは独立したソフトウェアなんだけど、相互にやり取りができるようになっています。
データベースを使うものであれば処理の流れはこんな感じになります。
- ApacheがHTTPリクエストを受付け
- PHPが使用されているようであればPHPへ処理を依頼
- SQLが使用されていれば、PHPからデータベースへ処理を依頼
- データベースで処理したデータをPHPへ返送
- PHPはデータベースから受け取った情報を反映してHTMLをApacheへファイルを返送
webサーバーって何だ？と問われれば、こんな感じに答えるでしょうか。
今回は結構長々と書いてしまいましたが、ご指摘があれば是非お願い致します！
それでは。
【2017/3/25更新】CentOSのインストールから、wordpressをインストールするまでのメモ
サーバーに遊ばれる一ヶ月
今月は本当にサーバー周りの勉強に終始する一ヶ月でした。
月初のうちは、ドットインストールの学習環境作りのために。
半ばから終わりにかけて、（というか継続中だけど）業務で使うためのwordpressサーバーの構築に。
今回も色々なサイトに助けられて、なんとか形になりできそうです。
というわけで、サーバー構築のためのメモ。
仕様的なもの
今回、業務で作るサーバーはこんな感じでした。
マシン：余り物のwindows機(32bit)
動作させるもの：Wordpress
外部のクライアントが使用する
経緯
まずサーバー構築の本を買ってみたのですが、
CentOS7を対象にした本で、OSインストールからつまづいてしまいました。
USBにlinuxを入れて、インストールする
社内にCentOS32bitのインストールディスクもない、ということで
こちらのサイトを参考に BootalbeUSBを作るところからスタート。
最初は、色々とソフトとか試していたのですが、コマンドでやるのが結局一番簡単でした。
2017/3/24追記
BIOSでの立ち上げ方法のメモも残しておきます。
ほとんどのPCは起動の際にF2を押しておけばOKです。
CentOSの各種設定
その後、CentOSの各種初期設定はこちらを参考に。
依存関係って本当にややこしいし、理解しないまま進めたせいでうまく動作しなかったりしました。
最後はここの設定に従っていけばとりあえずOKとなりましたが、いずれもっと深掘りして学びたいなと思っています。
LAMPの設定
さらに、lampの設定ではこちらのサイトにお世話になりました。
これで、とりあえずLAMP環境はできました。
しかし、この状態だと結構古い環境ですし、メールサーバーの設定はされていないので、まだまだ不完全です。
例えばmbstringがないとか。それについては下記の手順にて。
メール、セキュリティに関する追記と、詳細の追記を順次行なっていきたいと思っています。
postfix（メールサーバー）の設定
wordpressを使用するにあたって、ログイン通知などでメールを飛ばすこともあるのでメールサーバーの設定も行います。
今回は送信だけできればOKだったのでSMTPの設定のみ。基本的な設定はこちらの記事を参考にすれば簡単に終わリます。
unable to look up public/pickup: No such file or directoryってエラーはpostfixが機動していないときに出ます。基本的なことだけど、忘れがち。。
SELinuxの設定変更
上記の記事だと、コマンドラインからのメール送信は成功しますが、wordpressからのメール送信はできないはずです。そこで、SELinuxの設定を変更してWordpressからのメール送信を許可します。
下記の記事が参考になります。
SSLの設定
続いて、SSLを設定していきます。認証キーとかも初めて触れましたが、先輩たちのシェア精神によって簡単に設定できました。ありがたい。
追記１：Postfixを使ってメール送信ができるようにする
参考サイト
SELinuxの設定変更をしないと動きません。
追記２：SSLに対応する
参考サイト
設定手順
証明書のこと
phpMyadminの導入
