着せ替えMovable Type

March 30, 2005

出力ファイルをphpにする、またはダイナミックパブリッシングを利用すれば動的ページが作れるので、訪問者がテンプレートを着せ替えられるシステムを導入できます。

css の着せ替えではなく、テンプレートの着せ替えです。

プラグインを使用しているわけではないので、面倒くさいかもしれませんし、楽かもしれません。サンプルはこの blog のトップへ。

基本となるアイデアはダイナミックパブリッシングとphp拡張子の差異で得ることができます。

1. phpへ移行しよう

phpへの移行がすんでいない方はダイナミックパブリッシングとphp拡張子の差異のまえがきを見て、 Main Index, Individual Entry Archive, Date-Based Archive, Category Archive テンプレートを移行してください。

php拡張子移行の場合は、Main Index はテンプレート管理画面で、他の３つのArchive テンプレートが吐き出すファイルはウェブログ設定のほうで変更します。

ダイナミックパブリッシング移行の場合はテンプレート管理画面で、「テンプレート毎に個別に選択」をチェックし、それぞれのテンプレートで、ダイナミックパブリッシングをするように選択してください。

ここではそれらの事前準備が済んでいるものとして話を進めるので php への移行に関してこれ以上の説明はしません。

2. テンプレートモジュールを使おう

現存のテンプレートをテンプレートモジュールに移しておきます。メインのテンプレートにはただの切り替え処理を行わせ、本処理はテンプレートモジュールでさせるとクールかと思います。

Template 管理ページの下のほうにあるテンプレートモジュール(Template Modules) で新しいモジュールを例えば、「DefaultMainIndex」とでも名づけて Main Index テンプレートの内容をコピーしてください。

他のテンプレートも同様に移行します。

Main Index → DefaultMainIndex
Category Archive → DefaultCategoryArchive
Date-Based Archive → DefaultDate-BasedArchive
Individual Entry Archive → DefaultIndividualEntryArchive

と移行したとします。

3. 切り替えPHPテンプレートを作ろう

php 拡張子の場合は、Main Index の内容を

<?php
$MTBlogURL = "<MTBlogURL>";
$url = parse_url($MTBlogURL);
$path = $url['path'];
if($theme = $_GET['theme']) {setcookie('theme', $theme, 0, $path);} 
else if($theme = $_COOKIE['theme']) {} 
else {$theme = "Default";}
?>
<?php if($theme == "Default") { ?>
<$MTInclude module="DefaultMainIndex"$>
<?php } else if($theme == "Hogehoge") {?>
<$MTInclude module="HogehogeMainIndex"$>
<?php } ?>

のようにします。これによって

http://あなたのサイト名/?theme=Default http://あなたのサイト名/?theme=Hogehoge

とすることでテンプレートを選べるようになります。 Default の場合は「DefaultMainIndex」を、Hogehoge の場合は「HogehogeMainIndex」を読み込むことになります。用意してない場合は真っ白になると思います。

Category Archive、Date-Based Archive、Individual Entry Archive などに関しても同様のことを行います。この切り替えテンプレートの「MainIndex」の部分を「CategoryArchive」のように置き換えます。

ダイナミックパブリッシングの場合、もう少し工夫して、次のようにできます。

<?php require_once(SMARTY_DIR . 'core' . DIRECTORY_SEPARATOR . 'core.load_plugins.php');
smarty_core_load_plugins(array('plugins' => array(array('function', 'MTInclude', 'mt:24', 9, false),array('function', 'MTBlogURL', 'mt:24', 10, false),)), $this);?>
<?php
$MTBlogURL = smarty_function_MTBlogURL(array(), $this);
$url = parse_url($MTBlogURL);
$path = $url['path'];
if($theme = $_GET['theme']) {setcookie('theme', $theme, 0, $path);}
else if($theme = $_COOKIE['theme']) {} 
else {$theme = "Default";}
echo smarty_function_MTInclude(array('module' => ($theme)."MainIndex"), $this);
?>

動作的な違いは、if 文がなくなったことです。こちらのほうが編集しなおさずにすむためテーマの追加が楽ですね。

4. 切り替えメニューを作ろう

簡単に切り替えられるようにするため、メニューを作りましょう。

<form action="" method="get">
<select name="theme" onchange="submit();" size="3">
<option value="Default">Default</option>
<option value="Hogehoge">Hogehoge</option>
</select>
</form>

を「Default Main Index」など Main Index 系テンプレートモジュールの適当なところ(sidebar など)に配置します。
余談ですが、これ自体もテンプレートモジュール化してそれぞの Main Index 中で

<$MTInclude modules="TemplateMenu"$>

のように呼び出すのもまたありです。

5. あとがき

5.1 スタイルシート

スタイルシートも同様に切り替えることは理論上可能ですが、やめたほうがよさそうです。ファイル名が同じなためか、IE が変化していない同じスタイルシートだと誤認してしまいます。よって、単純に default.css, hogehoge.css のように別々のファイルにしてしまい、「DefaultMainIndex」で default.css を「HogehogeMainIndex」では hogehoge.css を読み込む、のようにテンプレートを編集したほうがよいです。

5.2 php 拡張子の場合はファイルサイズが肥大化する

php 拡張子の場合、生成される php ファイルには MTInclude module で指定したテンプレートがすべて展開されています。それを php の if 文で無視させているだけです。なので３つのテンプレートがあれば、通常の３倍の容量の php ファイルになるでしょう。ユーザーに転送されるデータ量は if 文のおかげで通常と同じだけですが、ハードディスクが圧迫されます。 php 拡張子時は、可能ではありますが、おすすめしません。