前回の記事までは、CSSを一切書かないで、CSSのプロパティを書く程度の作業だった。エディタ上でがつがつコードを書いていくのに比べて、楽に作業ができたと思う。今回、WordPressのテンプレートフレームワークのカスタマイズを行なうため、大部分をマウスだけでというわけにはいかないが、「Dreamweaver CS5」の恩恵を受けつつ、作業を進めていきたい。

「Adobe CS5」体験版はこちらから

今回行うのは下記のカスタマイズだ。

・メインコンテンツ部分をmain-wrapperというidをつけたdivで囲う
・ロゴを画像にする

今までWordPressのテンプレートを多少いじったことがある人なら、「なんだそんなこと」と思うかもしれない。例えば、メインコンテンツ部分をdivタグで囲いたい場合は単にdivで囲えばいいし、ロゴを画像にしたければ、既存のロゴのテキスト部分をimgタグで置き換えればいいだけである。こういう処理を行なう場合は、PHPを使用する必要がなく単に直接テンプレートファイルを開き、物理的にタグを追加していけばいい。

ただし、複数の画面が存在するテーマや、頻繁に全体の書き換えが発生する場合は漏れが生じたりしやすい。そこで、テンプレートフレームワークでは、元々あるテンプレートファイルは編集せずに、フックという形で別のファイルからテンプレートファイルを拡張することができる機能を備えている。

ライブビューを使ったWordPressのフック処理反映

WordPressのテンプレートフレームワークを使うと、テーマの編集は最小限の労力で済む。今回のテーマファイルであるthematicsamplechildthemeは、thematicテーマの子という形で存在しており、thematicフォルダには大量にファイルがあるのに、thematicsamplechildthemeには少ししかない。しかし、index.phpをDreamweaver CS5で開いてみるとわかるとおり、大量のファイルを読み込んでいる。

このテンプレートに上書きをしていくことで、同一のファイル名を持つ親テーマの上書きが行なえる。また、親テーマから必要なファイルを子テーマにコピーしてきて拡張して使用するということもできる。

つまり、テンプレートの出力部分を変更するにはfunctions.phpをばりばり変更していくだけで大丈夫というわけだ。構造がわかってしまうといろいろとテンプレートフレームワークの妙味が活かせるが、こればかりは体験して覚えていくほうがいいだろう。

というわけで早速、functions.phpをDreamweaverで読み込んでみよう。とはいえ、Dreamweaver CS5の[ファイル]パネルから普通にfunctions.phpを読み込んだのでは、単にPHPのソースが読み込まれただけで、普通のエディタになってしまう。おまけに左側のライブビューで表示させても真っ白い画面になるだけで、役には立たない。

そこで、index.phpを開いている状態で、[ソースコード]タブよりfunctions.phpを読み込んでみよう。functions.phpは複数読み込まれているので、コメント行(/∗～∗/で囲まれているもの)だけしかないfunctions.phpを開かないといけないので注意が必要だ。

このように、index.phpからfunctions.phpを開くと、左側のライブビューは変わらないままエディタ画面には違うファイルを読み込むことができる。

つまり、いろいろなファイルで構成されているトップページをライブビューで確認しつつ、様々なファイルを編集していくことができるのだ。これはなかなか他のエディタにはない機能といえるだろう。

カスタマイズしていくにあたり、Dreamweaver上でまずやっておきたいことがある。それが、CS5から搭載されたサイト固有のコードヒント表示機能だ。この機能をつかうと、WordPressのタグの入力補完ができるようになる。

使い方はいたって簡単で、[サイト]→[サイト固有のコードヒント]を選択して開き、WrodPress内のディレクトリを指定してDreamweaver CS5に認識させるだけだ。これを行なうと、[CTRL]+[スペース]キーで入力補完ができるようになる。

ではまず、メイン領域をピンクにするというのをやってみよう。メインの領域がCSSのみでピンクにできないのは、この部分を覆う大きな背景がテンプレート上にないからだ。従って‹div id="main"›～‹/div›を‹div id="main-wrapper"›～‹/div›で囲うという処理を書いてみる。

とりあえず、下記のコードをfunction.phpに記述してほしい。面倒ならコピー&ペーストでも大丈夫だ。

/**
* Hook for #main_wrapper
*/
function main_wrapper_begin() {
echo '‹div id="main-wrapper"›';
}
add_action('thematic_belowheader', 'main_wrapper_begin', 20);
function main_wrapper_end() {
echo '‹/div›';
}
add_action('thematic_abovefooter', 'main_wrapper_end', 20);

上記では、ヘッダーの後とフッターの手前にdivの始まりと終わりを挿入するという処理が書かれている。もはやWordPressのテンプレートタグというよりは、単なるPHPのプログラムのようになってしまっている。

add_actionというのが独特で、テンプレート内の特定のエリアに対して何かをするということができるものだが、これについては後ほど詳しく説明する。

コードを挿入したあとで、実際に出力されたHTMLを確認できるライブコードの機能で現状のHTML出力を確認してみよう。[ライブコード]ボタンを押すと‹div id="main"›～‹/div›が‹div id="main-wrapper"›～‹/div›で囲われるようになっているのがわかるはずだ。

続いて、style.cssを同じように[ソースコード]タブから選んで読み込み、CSSのルールを一つ追加しよう。これを行なわないと、実際にメインコンテンツエリアがピンクにならない。

#main-wrapper {
background-color:pink;
}

以上の変更でコンテンツ部分の背景がピンクになったのがわかるはずだ。

WordPressタグ挿入機能でブログタイトルを画像に変える

続いて、ロゴの置き換えを行なってみよう。今回はロゴ画像の保存場所として、子テーマ内に「images」というディレクトリを置き、そこにlogo.pngというファイルを置く。このファイルは透過処理を施したPNGで、幅は300px、高さは71pxある。自分のロゴなどをサンプルとして使ってみよう。ここでは筆者の屋号のロゴを使ってみた。

テキストで表されていたロゴを画像ロゴにするにあたりやることとしては、既存のテキストロゴを出す機能を打ち消し、画像を出力する機能を付与するという作業がある。

ということで、再びfunction.phpを開き、まずは、下記のコードを打ち込んでみよう。

/**
* common script
*/
function get_child_theme_url () {
return dirname( get_bloginfo('stylesheet_url') );
}

今度はコピー&ペーストすると、Dreamweaver CS5の便利な機能が味わえないので、是非手で打ってみてほしい。そして、「get_bloginfo～」と打ち込む時に途中で[ctrl]+[space]を押してみてほしい。

すると、コード補完の機能が働いて、コードの候補が出る。ちなみに、get_bloginfoという命令はWordPressに搭載されている独自タグで、PHPに標準で入っているものではない。つまり、DreamweaverがWordPress内を解析して、コードの補完を出してくれているのだ。ちなみにこの命令を使うと、ブログの情報を呼び出してくれる。ここではスタイルシートの場所を読み込むように記述している。これは、ヘッダに画像ロゴを出力する際に必要になるからだ。その他、WordPressで使えるタグはたいていこの方法で呼び出すことができ、全てを覚えていなくても入力補完が可能だ。是非この機能を積極的に使ってみてほしい。

続いて、既存のテキストロゴを消す命令を書こう。ここはコピー&ペーストでも良い。

/**
* Unhook default Thematic functions
*/
function unhook_thematic_functions() {
remove_action('thematic_header', 'thematic_blogtitle', 3);
}
add_action('init','unhook_thematic_functions');

ここでは、打ち消したい処理を記述している。要約すると、「thematic_blogtitle」というブログタイトルを出す機能を「thematic_header」つまりヘッダから取り除く(remove_actionする)という処理が書かれている。こういう書き方をすると、テンプレートファイルをいじらなくても不要なものを削除することができるのだ。

次の行からは、

/**
* Hook for header image
*/
function mytest_blogtitle() {
echo '‹div id="blog-title"›';
echo '‹a href="';
bloginfo('url');
echo '/" title="';
bloginfo('name');
echo '" rel="home"›';
echo '‹img src="' . get_child_theme_url() .'/images/logo.png" width="300" height="71" alt="';
bloginfo('name');
echo '" /›';
echo '‹/a›‹/div›';
}
add_action('thematic_header','mytest_blogtitle',2);

と書く。これは、mytest_blogtitleという画像ロゴのHTMLを出す処理をヘッダ内に挿入するという処理が書かれている。Thematicでは、上記のような感じで、ある特定の場所にある何かをなくしたり、新しく挿入したりすることが簡単にできるように作られている。

あとは、CSSインスペクタなどを利用して細かな文字色の調整やマージンやパディングを調節したら完成だ。

是非Dreamweaver CS5のCSS、そしてCMS関連機能を利用して、高度なサイトをがんがん作成していってほしい。