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

第15回検索結果テンプレートとサイトマップページを完成させる

検索結果テンプレートに検索用の文言が入力されなかったときの処理を追加し、今回で完成とします。その後、サイトマップページを完成させます。

検索用の文言を入力されなかったときの処理

ほげ山くん:先輩。僕、先輩のブログ記事読みましたよ。

くれま先輩:あ、あの記事見てくれたんだ。検索用の文言を入力されなかった時の処理を行うMTNoSearchタグの話だよね。

【参考ページ】
Movable Type4.25で、MTNoSearchタグが復活。|linker journal
http://linker.in/journal/2009/04/movable-type425-mtnosearch.php

ほげ山くん:要するに、Movable Type4.2以降で使えなかったMTNoSearchというタグが、Movable Type4.25から使えるようになったという話なんですよね?これって、前回僕らが作業したテンプレートの中に入れてないですよね。

くれま先輩:そうなのよ!まさか4.25になるタイミングで、MTNoSearchが復活するって予測していなかったんだよねぇ。早速このタグの追加からやっていこうか。前回作成したテンプレートの中に、<mt:NoSearchResults>~</mt:NoSearchResults>っていうサブテンプレートがあるから、その直後に、こんな感じで書いてね。

<mt:NoSearch>
<h1>検索方法の例</h1>
<p>すべての単語が順序に関係なく検索されます。フレーズで検索したいときは引用符で囲んでください。</p>
<blockquote>
    <p>"movable type"</p>
</blockquote>
<p>AND、OR、NOTを入れることで論理検索を行うこともできます。</p>
<blockquote>
    <p>個人 OR 出版</p>
    <p>個人 NOT 出版</p>
</blockquote>
</mt:NoSearch>

ほげ山くん:入れましたー。

くれま先輩:これで、検索用フォームに文言を入力しないで検索ボタンをクリックされたり、直接mt-serch.cgiにアクセスされたりした場合には、mt:NoSearchタグで囲まれた文言が出力されるようになるよ。中の文言をそのサイトなりにアレンジしてもいいね。

ほげ山くん:なるほどです!

オプションで用意されているパラメータについて

くれま先輩:ねぇ、ほげ山くん、いつもmovabletype.jpのドキュメントを読んでる?

ほげ山くん:まぁまぁ読んでるほうだと思いますけど…。

くれま先輩:じゃあ、このページを読んだことあるかな?

【参考ページ】
検索結果ページのカスタマイズ | Movable Type 4 ドキュメント
http://www.movabletype.jp/documentation/designer/customizing
_search_template.html

ほげ山くん:うぅ、何となく見たことあるかも、程度です…。

くれま先輩:このページの一番最後のところに、⁠検索フォームのカスタマイズ」っていうセクションがあるでしょ?今回はこれを説明しようかなって思ってたの。だけど、ほげ山くんに説明する前に自分の環境で試していたら、どうもこのパラメータが4.25で上手く動かなかったのよね。

ほげ山くん:ふむふむ。

くれま先輩:原因が分らなかったから、シックス・アパートさんにお尋ねしたところ、⁠Movable Type 4.2 から、サイト内検索に関する仕様が大幅に変更されたので、CaseSearch、RegexSearch、SearchCutoff、SeachElementのパラメータは利用できなくなりました」というお返事をいただいたの。

ほげ山くん:へぇ、そうなんですか。ちょっと残念ですねぇ。

くれま先輩:ここに挙げられなかったパラメータに関しては、どう使えるかちょっとテストをしているところなの。div="secondly"が空のままで悪いんだけど、検索テンプレートに関しては、いったんここで作業終了とさせてね。後日詳しいことがわかったら、追加で説明をします!

ほげ山くん:はい、わかりました。じゃあ先輩、この段階でどんな感じで動くか試してみていいですか?

くれま先輩:うん、ぜひ。この間、分割された検索結果ページの1ページあたりの件数が20件って話をしたでしょ?あれを試したいから、テスト用に同じキーワードの入ったブログ記事の数を20個以上にしてみてね。

ほげ山くん:はーい。…では試しに、⁠タイトル」という単語をタイトル部分に入れたブログ記事を21個用意してみますね。で、入力フォームに「タイトル」を入力して「検索」をクリック。

くれま先輩:どう?

ほげ山くん:お、検索ページの下部に、ちゃんとページ分割のナビゲーションが出力されてますね!そして、1ページ目には、ちゃんと20件表示されてますよー。

検索ページ下部に出力されたページ分割用ナビゲーション

くれま先輩:このナビゲーションの「1」⁠2」という数字をクリックするのではなく、⁠次 &gt;」のところをクリックした時だけ、Ajaxによるページ分割が行われるので、クリックして試してみてね。

自動で更新するサイトマップページ

ほげ山くん:じゃあ、先輩、このあとはサイトマップのページの解説になるんですよね?これって、ブログ記事を追加したら自動で更新される、ってモノでしたっけ?

くれま先輩:うん、そうそう。CMSを使っていなかった時代って、ページが増えるたびにサイトマップを手動で更新していて、面倒くさかったなぁ…。って思い出しちゃったりして。まぁそれはそれとして、前に作ったインデックステンプレートの「サイトマップ」の編集画面を開いてみてね。

ほげ山くん:上部メニューの[デザイン→テンプレート]を選択して、インデックステンプレートのセクションの「サイトマップ」をクリック…と…。

くれま先輩:そうしたら、<div id="primary">の中の<mt:Include module="パンくずナビゲーション" />の直後に、以下のサブテンプレートを追加してね!

<mt:Include module="パンくずナビゲーション" />直後に追加するサブテンプレート
<mt:TopLevelCategories sort_method="SortCatFld::Sort">
<mt:SubCatIsFirst>
<ul>
</mt:SubCatIsFirst>
<li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
<mt:IfNonZero tag="categorycount">
<ul>
<mt:Entries>
<li class="page"><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
</mt:Entries>
</ul>
</mt:IfNonZero>
<mt:SubCatsRecurse />
</li>
<mt:SubCatIsLast>
</ul>
</mt:SubCatIsLast>
</mt:TopLevelCategories>
<mt:Pages>
<mt:PagesHeader>
<ul>
</mt:PagesHeader>
<li><a href="<mt:PagePermalink />"><mt:PageTitle /></a></li>
<mt:PagesFooter>
</ul>
</mt:PagesFooter>
</mt:Pages>

ほげ山くん:ふむふむ。大きく分けて、2つのサブテンプレートに分かれるんですね。<mt:TopLevelCategories>と<mt:Pages>。

くれま先輩:その通りだね!<mt:TopLevelCategories>で最上位の親カテゴリからリストアップさせるでしょ。<mt:SubCatIsFirst>で<ul>の開始タグを出力、<mt:SubCatIsLast>で閉じタグを出力だね。

ほげ山くん:<a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>の部分で、カテゴリーアーカイブページへのリンクを生成しているんですね。

くれま先輩:うん。で、その次の<mt:Entries>によって、カテゴリごとのブログ記事一覧を出力してる。<mt:TopLevelCategories>の中に<mt:Entries>が入れ子になっているから、そうなるわけだ。

ほげ山くん:「sort_method="SortCatFld::Sort"」は、藤本壱さんのカテゴリの並べかえのためのモディファイアでしたね。

くれま先輩:うんうん。グローバルナビゲーションの部分なんかと、カテゴリの並び順を合わせたいからねー。⁠sort_method="SortCatFld::Sort"」を入れておけば、管理画面で指定したカテゴリの並び順になるでしょ。

ほげ山くん:そうですね。

くれま先輩:あとは、<mt:Entries>の外側に<mt:IfNonZero tag="categorycount">があるのは、何のためか分かる?

ほげ山くん:ちょっと待ってください、それは前にもやったような…。あ、もしカテゴリ内にブログ記事が1件もない場合に、空の<ul></ul>を出力させないためでしたよね。

くれま先輩:うんうん。それで<mt:SubCatsRecurse />は、カテゴリの中にサブカテゴリがあるときに、階層化させて表示させるためのもの、だったよね。あとは、<mt:Pages>で、存在するウェブページを全てリストアップさせるようにしたら、このテンプレートは完成だよ!ページ下部の「保存と再構築」をクリックしたあと、右上の「公開されたテンプレートを確認」をクリックすると、出力されたページを見ることができるよ!

Google Sitemaps用のXMLファイルもMovable Typeで作成できる

くれま先輩:「サイトマップ」ってよく言うけど、実は検索エンジンにページを効率良くインデックスしてもらうためのXMLファイルのことも「サイトマップ」って言うのよね。

ほげ山くん:そうですよねぇ。Googleのウェブマスターツールのページに、色々解説が載ってますよね。

【参考ページ】
Google ウェブマスター ツール
https://www.google.com/webmasters/tools/docs/ja/protocol.html

ほげ山くん:先輩、このXMLファイルも、Movable Typeにテンプレートを追加して作成できそうな気がするんですけど。

くれま先輩:うん、そうだね!Movable Typeはテキストで表現できるファイルだったらCSVだってSVGだって書き出せるし、もちろんXMLファイルだって作ることは可能でしょ。だから、トータルWEBさんのサイトで解説されているGoogle Sitemaps用のXMLファイルの生成に、挑戦してみるといいと思うよ!

【参考ページ】
Google SitemapsをMovableTypeで自動作成 :ビジネスブログのホームページ制作
http://www.total-web.jp/technical/000064.php

ほげ山くん:おぉ。これはすぐにでもやってみたいですね!

くれま先輩:でしょ!ところでほげ山くん、次回でこの連載で必要なテンプレートが全部完成するって気づいてた?

ほげ山くん:そうですよね!そういえば!!

くれま先輩:というわけで、次回は最終回です!デフォルトの「最新記事のフィード」テンプレートを確認した後、サンプルサイトとテンプレートセットの配布に関してご紹介しますので、お楽しみに!

次回予告

おすすめ記事

記事・ニュース一覧