いよいよ突入したWebの“王道”WordPress編。Vol.28ではWordPressを実際にインストールしていただいた。ここでは以前に作成したレスポンシブWebサイトのテーマを、WordPressのテーマとしてテンプレートファイル化していく作業から始めていく。レスポンシブWebサイトのテーマのダウンロードは下記から。
　

「style.css」を「index.html」と同じ階層に

まずは前回までに作成したテーマ「sample」フォルダを開くと下のようなファイルとフォルダから構成されているのが分かるだろう。
　

　
まずは「css」フォルダ内にある「style.css」と「style-page.css」を「index.html」と同じ階層に移動してほしい。作成時には分かりやすいようにあえて「css」フォルダに入れたが、WordPressに存在する「テンプレートタグ」の関係があるので、「sample」フォルダ直下に移動してほしい。尚、「テンプレートタグ」については次回Vol.30で説明する。
　

　
次に「index.html」と「page.html」のスタイルシート読み込みのパスを変更してやる。
　
「index.html」

<link rel="stylesheet" href="style.css">

　
「page.html」

<link rel="stylesheet" href="style-page.css">

　
続いて「index.html」の拡張子を「index.php」に変更。同じように「page.html」を「page.php」に変更する。そして style.css の冒頭に、以下のようなコメントを入れる。
　
「style.css」

/*
Theme Name: テーマの名前
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

テーマの名前は必須なので、必ずいれておいてほしい。ここでは「Mono Press」とする。あとは任意となっているのだが、配布するテーマであれば、ライセンスなどを入れておく。
　
後は「sample」フォルダ名を任意の名前に変更する。ここでは今後作成していくサイト名である「mono-press」としておく。ちなみに半角英小文字数字のみで空白は認められないのでご注意を。
　

WordPressの「Themes」フォルダに移動する

FTPソフトから、アップロードしたWordPressの wp-content/themes フォルダに作成した「mono-press」フォルダを入れてやる。
　
WordPressにログインして、[外観]→[テーマ]を見てみると…。
　

　
スクリーンショット画像はないが、テーマとして認識されているのが分かる。WordPressでは「index.php」と「style.css」があればテーマとして認識してくれるのだ。
　

スクリーンショットを入れる

とりあえずトップ画面のキャプチャ画像をスクリーンショットとして入れておこう。いつでも変更できるので、サイトが完成したら差し替えよう。推奨される画像サイズは640 x 480px以下。拡張子をpngとして「screenshot.png」という名前で保存し、「mono-press」フォルダ内、「index.php」と「style.css」と同じ階層にアップする。すると下の画像のようにスクリーンショットが現れる。
　

テーマを有効化

テーマをマウスオーバーで「有効化」をクリック。管理画面左上のサイト名が表示されている部分をマウスオーバーして「サイトを表示」をクリックすると…。
　

　
上記のようにスタイルシートが有効でない状態で表示されるはずである。CSSだけでなく画像のパスも通ってないのがお分かりだろう。
　
実はWordPressではCSS内を除き、基本的に各ファイルへのパスに、相対パスは使用できないのだ。そこで登場するのが「テンプレートタグ」。次回はWordPressの「テンプレートタグ」について説明していく。
　

Tweet