はい、今日はWordPressを始めるための手順と気をつけるべきポイントまとめの続きです。

WordPressを使ってWEBサイトを作ろうとするときに、一番最初に困惑するのが、必要な言語の多さだと思います。 HTMLから始まり、CSS・PHPと続き、さらにはJavascriptなる言語まで出てくる。 厳密にはHTMLとCSSはプログラミング言語には入らないと思うのですが、そんなことは初学者にとってはどうでもいい話で、学ぶべき対象が4つもあることには変わりません。

そしておそらくですが、はじめは何が何だか分からず、ものすごく混乱すると思います。 今日はそれがスッキリわかるように、どの言語がどういった役目をもっているのかについてまとめてみました。

HTML - 骨組みをつくる

サイトの骨組みをつくるのがHTMLの主な仕事です。

当ブログを例にすると、サイト上部にはメニュー用の区画を用意して、中心部分を2カラムにし、そして一番下にちょっとしたメニューを配置できるようにしています。 極々標準的な構成ですね。

とはいえ、こういったことはHTMLにしかできない仕事なんですね。 ただHTMLでそのように書いたとしても、実際にはCSS側でデザインを施さなければ想像通りの見た目にはならない、というのがこのWEB製作におけるデザインの難しいところかもしれません。

例えば、今言った骨組みを即興で書いてみると下のようなコードになります。

<html>
<head>
</head>
<body>
<header>ページ上部</header>
<article><section>左カラム</section><section>右カラム</section></article>
<footer>ページ下部</footer>
</body>
</html>

これをindex.htmlという名前でファイル保存すれば、実際にブラウザで見れるのですが、間違いなくガッカリすると思います。

というのも、これはあくまで骨組みであって、「各要素の縦や横のサイズをどうするか?」とか、「色について」といったことについては、CSSを用いなければならないからです。 だからこれを表示させてみても、「ただ文字が並んでいるだけ」ということになります。

また実際には、headerの内側には幾つかdiv要素を組み合わせる必要があったりして、このHTMLをCSSだけでこのサイトと同様の見た目にするのは少々むずかしいというのが本当のところです。

CSS - デザイン担当

CSSはHTMLの各要素に対して、デザインを施すことができます。

先程の例のページ上部にあたるheader要素を再度例にすると、縦の長さを指定したり、背景色をグラデーションにしてみたり、文字フォントを他とは別のものにしてみたり、などなど。 基本的に、デザインに関することはCSS側で操作するのです。

さらに最新のCSS3では、ちょっとしたアニメーションもできるようになっていて、CSSでできるデザインの幅が非常に増えました。

Javascript - みんなのブラウザ上で動く縁の下の力持ち

HTMLとCSSだけではできないことがあります。 一番分かりやすいのは動きのあるデザインです。 既にCSS3の登場でちょっとしたアニメーションが使えるようになったと言いましたが、逆に言えば、それまではJavascriptがなければアニメーションは使えなかったということです。

例えばGoogleMapのような「画面上でグリグリ動かせるもの」なんかは、Javascriptを使った例としてかなり分かりやすいです。 TwitterやYoutubeの埋め込みやリアルタイムで動くグラフ、ブラウザ上でできるゲームなどもそうです。 こういったシステマチックなものがJavascriptの領域になります。

僕の所見ですが、個人ブログレベルではJavascriptを書く必要性はほぼないと思います。 もし使う必要があったとしても、たいてい何らかの形(プラグインとか)で第三者が提供してくれているパターンが多いです。

基本的にはブラウザの中で活躍するのがJavascriptですが、最近ではnodejsという技術が台頭し、これまでPHPが担当していたサーバーの領域にも進出し始めています。

PHP - それはサーバーで動く

僕らが当たり前と思っている、ログインするシステムのWEBサイトはどうやって作ってると思いますか? すごく簡潔に書くと、各ユーザーが自分のログインIDとパスワードをサーバー側に送ると、それに応じて、各ユーザーに適切な画面を構築しては送信しています。

PHPというのは、まさにそうしたサーバー側の処理を担当する言語です。

ちなみにWordPressはPHPで作られています。 そのためWordPressで作られたブログは、一見すると動的な処理がなさそうであったとしても、アクセスするたびにWordPressはページを再構成して送信するようになっているのです。 (実際には毎回そうするのは無駄が多いので、それを効率的に回す仕組みを用意するのがセオリーです。)

その構成の際には、ベースとなるHTMLに必要な情報を埋め込むパターンもあれば、アクセスする人の属性によって全く別のページが表示されるようにするなど、できることの範囲が広いのが特徴です。

ただし、Javascriptのようにユーザー側のブラウザ上でグリグリと動かせるプラグラムは領域外です。

まとめ

HTMLとCSSだけでもWEBページは作れます。 しかし、アクセスする人によって表示する情報を変えたりするにはPHPのようなサーバーサイドで動くプログラムがあった方がいいし、GoogleMapのようなブラウザ上でユーザーが自由に動かせるプログラムを提供するならJavascriptが必要なんだな、ということが理解できれば十分です。

あとは実際にWordPressを使っているうちに勝手に覚えていくと思いますし、その方が圧倒的に身につくのも早いです。