theme(テーマ)がサイトの外観を決める

WordPressで構築されたWebサイトの外観(と内容)を決める雛形を定めているのがthemeです。themeはサイトの内容や外観を定めたファイルから構成されています。WordPress自体の機能やplug-inという機能追加プログラムを組み合わせてバリエーションに富んだWebサイトの挙動や外観が実現できます。

最もシンプルなthemeはstyle.cssとindex.phpだけで動く

WebMatrixでファイルの作業領域を選択しwp-content>themesフォルダを開きます。themesフォルダの中にthemeがインストールされています。画面でtwentyeleveというフォルダとtwentytwelveというフォルダがありますが、この2つのthemeがインストールされているのです。

フォルダの中にはたくさんのファイルがありますが、themeが動くのに最低限必要なファイルはstyle.cssとindex.phpです。試しにkwaというフォルダを作ってその中にstyle.cssとindex.phpのファイルを作ってみます。

themeフォルダを選択した状態で「新規」アイコンをクリックしkwaフォルダを作成します。

新しいthemeのフォルダーを作成

kwaフォルダができたらその中でstyle.cssとindex.phpを作成します。

style.cssとindex.phpを作成する

今度はWebブラウザからWordPressの管理画面のテーマを選んでください。利用可能なthemeとしてkwaが表示されています。WordPressがthemeとして認識したのです。

kwaというthemeが表示された

style.cssはthemeのスタイルシート

styleシートはそのthemeのスタイルシートです。Webの外観の設定ファイルです。

色々なところで無料のスタイルシートが配布されています。気に入ったスタイルシートを採用してWordPressのthemeに作り変えることができます。

index.phpはWebコンテンツを記載するファイル

index.phpにはWebで表示したいコンテンツをhtmlにしたがって記載します。またファイルの末尾が.phpとなっていることからもわかる様にphp言語によるプログラムを埋め込む事もできます。

phpによるプログラムを埋め込む事でWebページの表現や内容を状況に応じて変化させたりWeb閲覧者が入力したデーターをWebサーバーで取り込んだりバラエティーに富んだWebサイトが構築できます。

Hello World

試しにindex.phpファイルを編集して、kwaがどのように表示されるか試してみます。

WebMatrixのファイルの作業領域に戻ってindex.phpをダブルクリックして、Hello Worldと入力し保存します。

index.phpにhello worldと入力

次にWebブラウザに戻ってakwを有効化します。

kawを有効化する

最後にWebMatrixからサイトを表示させると、WebブラウザにHello Worldと表示されました。

WebMatrixからWebサイトを表示

hello worldと表示されてた

次はスタイルシートファイルをカスタマイズしながらWebサイトの構築する手順をご紹介したいと思います。