チャレンジ! Movable TypeをCMSとして使ってみよう!

第4回テンプレートモジュールを読み込ませるhead要素の中身を作る

今回は、前回作成したヘッダ領域のテンプレートモジュールとフッタ領域のグローバルテンプレートを各テンプレートに読み込ませる練習をしたあと、head要素の中身もテンプレートやカテゴリに応じて出力内容を変更させ、グローバルテンプレート化してみます。

Movable Type4.2正式公開されましたね!

ほげ山くん:先輩!先日ついに、Movable Type4.2が正式に出荷開始されましたね!

くれま先輩:この連載でもずっと紹介して待っていたから、嬉しいね!注意したいのは、4.2出荷後すぐに、カスタムフィールドと優先アーカイブタイプ関連の問題点を修正した4.21が出荷されていること。まだアップデートしていない人は、必ずアップデートしてくださいね!

ほげ山くん:僕、個人的に、コミュニティ・ソリューションを使って読者が参加できるブログを作りたいんですよねー。

くれま先輩:mixiのIDを使ってMovable Typeで構築されたブログにサインインとコメントできるプラグインも公表されたから、それを組み合わせてさらにいろいろできるかもしれないね!

ほげ山くん:夢が膨らみますねっ。

既存のテンプレートの削除と、新規テンプレートの追加

くれま先輩:さてさて、では、私たちも4.21を新しくインストールして、前回の続きを始めようか。まだ進めた作業は少ないから、アップデートじゃなく新規インストールにしちゃおうっと(笑)

ほげ山くん:はーい。では、前回進めたところまでは、僕が同じことを進めます。作業の前に、4.21のテンプレート一覧画面を確認しておいていいですか。これからどのテンプレートを書き換えるのか、把握しておきたいんです。ちなみに、さっき4.21をインストールしたときに「プロフェッショナルウェブサイト」を選択したので、テンプレート一覧画面はこんな風になってますが…。

図1 Movable Type4.21で「プロフェッショナルウェブサイト」を選択したときのテンプレート一覧画面
図1 Movable Type4.21で「プロフェッショナルウェブサイト」を選択したときのテンプレート一覧画面

くれま先輩:テンプレートを一画面で見られるようになったのは、本当に便利だよね!見たいテンプレートを絞り込みたい時は、右側の「クイックフィルタ」のところをクリックすれば絞り込めるし。

ほげ山くん:お、ほんとだ!

くれま先輩:えーっと、この中には、今回のカスタマイズでは使わないテンプレートが色々あるので、作業前に今から挙げるテンプレートを削除してしまおうか。使わないテンプレートを置いておいても混乱の元になるし、いらないファイルを再構築するのも無駄だしね。

削除するテンプレート一覧
インデックステンプレート
  • アーカイブインデックス
  • ブログのメインページ
  • JavaScript
  • RSD
テンプレートモジュール
  • すべて削除(その後、前回作成した「ヘッダ領域」を作成しておく)

アーカイブテンプレートとシステムテンプレートは、そのままにしておく。

図2 削除するテンプレートのチェックボックスにチェックをつけ、上部の「削除」ボタンをクリックする
図2 削除するテンプレートのチェックボックスにチェックをつけ、上部の「削除」ボタンをクリックする

ほげ山くん:はい、先輩。削除完了しました。

くれま先輩:そして、サイトマップのページを作らなきゃいけないのを忘れちゃいけないね。テンプレートの一覧画面で「インデックステンプレートを作成」をクリックして。編集画面上部のテンプレート名入力欄に「サイトマップ⁠⁠、その下の中身は後で書くので空欄のまま、⁠出力ファイル名」「sitemap.html⁠⁠、⁠テンプレートの種類」「カスタムインデックステンプレート⁠⁠、⁠ファイルへのリンク」は空欄、⁠公開」のところは「スタティック(既定⁠⁠」にしてね。

ほげ山くん:4.2から、テンプレートの編集画面で「公開」の設定ができるようになったんですね。

くれま先輩:いろいろな設定ができるんだけど、とりあえず今回のサイトは全部「スタティック(既定⁠⁠」で作ることにするね。それ以外の設定にするメリットは、また今度チェックしていこう。

ほげ山くん:追加作業完了して、前回進めたところまで進めました!

図3 作業終了後のテンプレート一覧画面
図3 作業終了後のテンプレート一覧画面

レイアウト用のdiv要素とモジュール読み込みのMTタグを、テンプレートに記述する

くれま先輩:じゃ、次に進めるね。前回作成したのは、ヘッダ領域をテンプレートモジュール化したものと、フッタ領域をグローバルテンプレート化したものだよね。今日は、それを読み込ませる記述を、以下のテンプレートの中に書き込むよ。

ヘッダ領域とフッタ領域を読み込ませるテンプレート一覧[A]
インデックステンプレート
  • サイトマップ
  • メインページ
アーカイブテンプレート
  • ウェブページ
  • ブログ記事
  • ブログ記事のリスト
システムテンプレート
  • 検索結果

ほげ山くん:了解です!いま名前が挙がったテンプレートでは、全て共通のレイアウト用div要素を使うんでしたよね?前回見たこの図を、思い出しました。

図4 各テンプレート共通で使用するレイアウト用のdiv要素
図4 各テンプレート共通で使用するレイアウト用のdiv要素

くれま先輩:そうそう。この図から読み取れるdiv要素を使いつつ、div#headerとdiv#footerの中に、モジュールを読み込む記述を以下のように書いてみて。図4にはないけど、コンテンツ全体を画面中央に表示させるのに使いたいから、一番外側にdiv#containerを足すようにしたよ。

[A]のテンプレート一覧に、まず最初に書き込んでみる内容
<?xml version="1.0" encoding="<mt:PublishCharset />"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<mt:Include module="head要素" />
</head>
<body>
<div id="container">
	<div id="header">
		<mt:Include module="ヘッダ領域" />
	<!-- end div#header --></div>
	<div id="nav">
	<!-- end div#nav --></div>
	<div id="primary">
	<!-- end div#primary --></div>
	<div id="secondry">
	<!-- end div#secondry --></div>
	<div id="footer">
		<mt:Include module="フッタ領域" />
	<!-- end div#footer --></div>
<!-- end div#container --></div>
</body>

ほげ山くん:mt:Includeタグは3.3の時にはすであったので、わかります。3ヵ所ありますけど、この部分で前回作成したモジュールを読み込むんですね。って、あれ?「head要素」というモジュールは、まだ作っていないですよね?

くれま先輩:うん、それはこの後すぐに作るから、とりあえずこのまま書いておいて。

ほげ山くん:はーい。テンプレートモジュール「ヘッダ領域」には、こんな記述がしてあったので、再構築されれば、吐き出されたHTML内に必要なdiv要素がすべて揃うというわけですか。

<div id="logoArea">
  <mt:If name="main_index">
    <h1><a href="<mt:BlogUrl />"><img src="<mt:BlogUrl />img/logo.gif" alt="<mt:BlogName />" /></a></h1>
  <mt:Else>
    <p id="logo"><a href="<mt:BlogUrl />"><img src="<mt:BlogUrl />img/logo.gif" alt="<mt:BlogName />" /></a></p>
  </mt:If>
  <p><mt:BlogDescription /></p>
<!-- end div#logoArea --></div>
<div id="searchBox">
  <form method="get" action="<mt:CGIPath /><mt:SearchScript />">
    <p><input type="hidden" name="IncludeBlogs" value="<mt:BlogID />" /><input name="search" type="text" id="search" value="<mt:SearchString />" />
    <input name="submit" type="image" src="<mt:BlogUrl />img/btn_search.gif" alt="検索" id="submit" />
    </p>
  </form>
<!-- end div#searchBox --></div>

くれま先輩:そのとおりー。

ほげ山くん:先輩、⁠A]のテンプレート一覧にとりあえず同じ内容を書き込むのは分ったのですが…。⁠ウェブページ」⁠ブログ記事」⁠ブログ記事のリスト」って、アーカイブマッピングの設定をするんじゃなかったでしたっけ?

くれま先輩:ははは。そうそう。最近ほげ山くんがしっかりしてるから、助かるわぁ。じゃ、今回のそれぞれのアーカイブマッピングを指定しておくね。上記のテンプレートを書き込んで保存する前に、テンプレートの編集画面の下の部分に「テンプレートの設定」というリンクがあるので、そこを開いて設定画面を表示させてね。

図5 テンプレートの編集画面の下部にある「テンプレートの設定」をクリックして開いたところ
図5 テンプレートの編集画面の下部にある「テンプレートの設定」をクリックして開いたところ

くれま先輩:以下の3つのテンプレートに関して、アーカイブマッピングの「パス」のプルダウンメニューから、次のように選択してね。今回はアーカイブマッピングで使用する単語間の区切りは「_(アンダースコア⁠⁠」で統一させようか。

変更するアーカイブマッピング一覧
ウェブページfolder_path/page_basemane.html
ブログ記事category/sub_category/entry_basename.html
ブログ記事のリスト(月別)右側のゴミ箱アイコンをクリックして削除
ブログ記事のリスト(カテゴリ)category/sub_category/index.html

ほげ山くん:変更したら、下の「保存」をクリックすればいいんですね。

テンプレートごとに違う内容を出力するhead要素を作成する

くれま先輩:そこまでできたら、次はhead要素を作っていこうか。テンプレートの一覧画面から「メインページ」をクリックしてみて。右側メニューの「インクルードテンプレート」の欄が、こういう風になっているでしょ?

図6 ⁠インクルードテンプレート」の下に、読み込んでいるモジュールの一覧が表示される
図6 「インクルードテンプレート」の下に、読み込んでいるモジュールの一覧が表示される

ほげ山くん:さっき準備していなかった「head要素」の右側だけ、⁠新規作成」というリンクがありますね。ここをクリックするんですか?

くれま先輩:そう、クリックしてみて。そうすると、新規のテンプレートを作成する画面に入るから。テンプレートの名前はもうすでに入っているはずだから、その中に、こんな記述をしてね。

<meta http-equiv="Content-Type" content="text/html; charset=<mt:PublishCharset />" />

<!-- ▼title要素ここから▼ -->
<mt:If name="sitemap"><title>サイトマップ|<mt:BlogName /></title></mt:If>
<mt:If name="main_index"><title><mt:BlogName /></title></mt:If>
<mt:IfArchiveType archive_type="Page"><title><mt:PageTitle />|<mt:BlogName /></title></mt:IfArchiveType>
<mt:IfArchiveType archive_type="Individual"><title><mt:EntryTitle />|<mt:EntryCategory />|<mt:BlogName /></title></mt:IfArchiveType>
<mt:IfArchiveType archive_type="Category"><title><mt:CategoryLabel />|<mt:BlogName /></title></mt:IfArchiveType>
<mt:If name="search_results"><title>タグ「<mt:SearchString />」がついているエントリー | <mt:BlogName /></title></mt:If>
<!-- ▲title要素ここまで▲ -->

<!-- ▼meta要素 descriptionここから▼ -->
<mt:If name="sitemap"><meta name="description" content="<mt:BlogName />のサイトマップです。<mt:BlogDescription />" /></mt:If>
<mt:If name="main_index"><meta name="description" content="<mt:BlogDescription />" /></mt:If>
<mt:IfArchiveType archive_type="Page"><meta name="description" content="<mt:PageExcerpt />" /></mt:IfArchiveType>
<mt:IfArchiveType archive_type="Individual"><meta name="description" content="<mt:EntryExcerpt />" /></mt:IfArchiveType>
<mt:IfArchiveType archive_type="Category"><meta name="description" content="<mt:CategoryDescription />" /></mt:IfArchiveType>
<mt:If name="search_results"><meta name="description" content="<mt:BlogName />の検索結果です。<mt:BlogDescription />" /></mt:If>
<!-- ▲meta要素 descriptionここまで▲ -->

<!-- ▼meta要素 keywordsここから▼ -->
<mt:If name="sitemap"><meta name="keywords" content="<mt:Include module="基本キーワード" />" /></mt:If>
<mt:If name="main_index"><meta name="keywords" content="<mt:Include module="基本キーワード" />" /></mt:If>
<mt:IfArchiveType archive_type="Page"><meta name="keywords" content="<mt:PageKeywords /><mt:Include module="基本キーワード" />" /></mt:IfArchiveType>
<mt:IfArchiveType archive_type="Individual"><meta name="keywords" content="<mt:EntryKeywords /><mt:Include module="基本キーワード" />" /></mt:IfArchiveType>
<mt:IfArchiveType archive_type="Category"><meta name="keywords" content="<mt:CategoryKeywords /><mt:Include module="基本キーワード" />" /></mt:IfArchiveType>
<mt:If name="search_results"><meta name="keywords" content="<mt:Include module="基本キーワード" />" /></mt:If>
<!-- ▲meta要素 keywordsここまで▲ -->

<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<mt:Link template="feed_recent">" />
<link rel="stylesheet" type="text/css" href="<mt:BlogUrl />styles.css " media="screen,print" title="default" />

ほげ山くん:mt:Ifを使って、6種類すべてのテンプレートで出力内容を分けるんですね?あ、mt:IfArchiveTypeも使っているのか…。

くれま先輩:うん。アーカイブテンプレートの「ウェブページ」⁠ブログ記事」⁠ブログ記事のリスト」は、全てmt:IfArchiveTypeによって、指定したアーカイブで出力される場合だけ内容を出力させるようにしてあるのよ。

ほげ山くん:archive_typeモディファイアの値に入っている「Page」「ウェブページ」ですよね?

くれま先輩:そうそう。同じように、⁠Individual」「ブログ記事⁠⁠、⁠Category」「ブログ記事のリスト」の場合だけ、内容が出力されるのよ。

ほげ山くん:なるほど、わかりました。あと先輩、3種類あるmt:Ifの変数の値ですが、まだどこにも書いてないですよね?

くれま先輩:そうなのよ。だから、次の3つのテンプレート内で、<mt:Include module="head要素" />の直前に、それぞれこんな記述を追加してみて。説明上、手順が前後してる感じで、ごめんね!

<mt:Include module="head要素" />の直前の行に追加する変数名
インデックステンプレート
サイトマップ<mt:SetVar name="sitemap" value="1" />
メインページ<mt:SetVar name="main_index" value="1" />
システムテンプレート
検索結果<mt:SetVar name="search_results" value="1" />

ほげ山くん:これを追加すると、全部のテンプレートで、出力される内容が変わってくるんですね。僕、あと3点気になることがあるんですが…。

くれま先輩:なになに?全部言ってみてよ。

ほげ山くん:<mt:Include module="基本キーワード" />と書いてある部分って、全ページに共通するキーワードを記述するテンプレートモジュールを、後で作成するんですよね?

くれま先輩:あたり!だから現段階で再構築してしまうと、モジュールが足りなくてエラーを起こしてしまうので、再構築は次回の作業が終わった段階でやろうね。で、2つめは?

ほげ山くん:この中に出てくるMTタグをリファレンスで調べてたんですけど、mt:CategoryKeywordsというタグってないですよね…?

くれま先輩:一見本当にありそうな名前だけど、実は私が名前をつけたカスタムフィールドのタグなんだよねー(笑⁠⁠。これを使って各カテゴリにキーワードを割り当てていく予定なんだけど、今回も説明が長くなっちゃうから、次回に持ち越すね!で、最後は?

ほげ山くん:Web業界の友人に指摘されたんですけど、Movable Typeでこんな風に条件分岐を沢山使うと、空行が多くなっちゃうじゃないですか…。僕は、それが嫌で…。何か良い方法がないでしょうか?

くれま先輩:うーん。今は説明をわかりやすくするためにこういう書き方をしているけど、サイトのテンプレートを一通り説明したら、最後に空行対策のこともいろいろ考えてみようか?

ほげ山くん:ぜひお願いします!!

くれま先輩:了解!では、今日はここまでにしておこうかな。次回もこの続きを進めていくので、引き続きよろしくね!

次回予告

おすすめ記事

記事・ニュース一覧