第6回　効果抜群なスニペット、Wayfinderを活用する

新茶の季節がやってきました

神奈川県産の茶葉から基準値を超える放射性セシウムが検出されるなど、地震や原発における不安がお茶にも影響しつつありますが、なかみつ園の新茶は熊本県産で、現在のところは生産に影響はありません。

大変な時代ではありますが、ぜひ美味しい新茶で一息ついてみてください。

おさらい

これまで5回に分けてMODxの紹介を行ってきましたが、これまでの内容を応用することで、すでに読者のみなさんは簡単なWebサイトをつくることができる状態にあるはずです。

今回は、Wayfinderというスニペットを用いて、さらに便利なサイトづくりにチャレンジしてみましょう。

前回までの内容でリッチテキストエディタであるTinyMCEは導入済みですし、フレンドリーURLやテンプレートについても簡単に解説しているため、今回は次のようなテンプレートやリソースがすでに作成されているものとして話を始めさせてください。

※: ページ分量の都合上、厳密ではないHTML構文を用いています。ご了承ください。

使用するテンプレート

テンプレート名: mytpl

<html>
  <head>
    <base href="[[++site_url]]" />
    <title>[[*pagetitle]] | お茶のなかみつ園</title>
    <link type="text/css" media="screen" rel="stylesheet" href="assets/templates/mytpl/mytpl.css" />
  </head>
<body>

<div id="container">

  <div id="header">
  <p>お茶のなかみつ園のサイト</p>
  </div>

  <div id="left">
    <ul>
    <li><a href="/">Top</a></li>
    <li><a href="/profile.html">会社概要</a></li>
    <li><a href="/products/tea/shogakocha.html">生姜紅茶</a></li>
    </ul>
  </div>

  <div id="right">
    [[*content]]
  </div>

  <div id="footer">
    <p>&copy; お茶のなかみつ園</p>
  </div>

</div>
<!-- container end -->

</body>
</html>

スタイルシート

スタイルシートのパス: /var/www/html/assets/templates/mytpl/mytpl.css

スタイルシートの内容

#container { 
  width: 800px; 
} 

#header { 
  height: 80px; 
  background-color: red; 
} 

#left { 
  float: left; 
  width: 200px; 
  background-color: yellow; 
} 

#right { 
  float:left; 
  width: 600px; 
  background-color: purple; 
} 

#footer { 
  clear: both; 
  background-color: green; 
}

テンプレートを作成したあとは、リソース新規作成時のデフォルトテンプレートを変更するため、「⁠システム⁠」⁠→「⁠システム設定」より、「⁠template」という文字列を検索し、キー名: default_templateの値を「mytpl」に変更しておきます。

引き続き、次のリソースを作成してください。

トップページ

リソースのURL	http://www.example.com/
親リソース	なし
タイトル	トップページ
エイリアス	index
内容	ここはトップページです。

会社概要

リソースのURL	http://www.example.com/profile.html
親リソース	なし
タイトル	会社概要
エイリアス	profile
内容	ここには会社概要が入ります。

商品紹介

リソースのURL	http://www.example.com/products/
親リソース	なし
タイトル	商品紹介
エイリアス	products
内容	空

商品紹介 > お茶

リソースのURL	http://www.example.com/products/tea/
親リソース	商品紹介
タイトル	お茶
エイリアス	tea
内容	空

商品紹介 > お茶 > 生姜紅茶

リソースのURL	http://www.example.com/products/tea/shogakocha.html
親リソース	お茶
タイトル	生姜紅茶
エイリアス	shogakocha
内容	生姜紅茶のページです。

これらのテストリソースを作成した結果、リソースの階層構造やトップページは次のようになっています。

さて、この例では全ページの左側部分で各リソースへのメニューを静的に定義しています。したがって、一部ページのエイリアスが変更になった場合やページの名前が変更になった場合は、そのつどメニュー部分の情報を更新する必要があり、効率性に欠けます。

単一ページへのリンクを考える場合であれば、テンプレート変数を利用して

<a href="[[~リソースID]]">生姜紅茶</a>

という書式を使うのが便利なのですが、この場合でも商品名が変更になった場合は

商品ページ自体を修正して
全体のメニューも修正する

という面倒な手順が発生してしまいます。

このような手間を無くし、既存のリソースコンテンツからメニューを自動作成してくれるのが、今回紹介するWayfinderというスニペットです。

Wayfinderのインストール

スニペットのインストールは、例のごとくパッケージマネージャーから行ってください。Wayfinderは非常に強力なスニペットであり、ダウンロード数からもその人気がうかがえます。

Wayfinderをさっそく使ってみる

Wayfinderにはさまざまなオプションが用意されていますが、まずはオプションを最低限に記述してスニペットを使ってみます。これまではmytplテンプレート中の左側メニュー部分に

[[!Wayfinder? &startId=`0`]]

と記述してみてください。いかがでしょうか？ブラウザで確認すると、メニューが自動的に作成されていることに気がつくはずです。

また、実際に記述されるHTMLは次のとおりです。便宜上改行やスペースを加えています。

Wayfinderにより記述されるHTML

<ul> 
  <li class="first active"><a href="http://www.example.com/" title="トップページ" >トップページ</a></li> 
  <li><a href="profile.html" title="会社概要" >会社概要</a></li> 
  <li class="last"><a href="products/" title="商品紹介" >商品紹介</a> 
  <ul> 
    <li class="first"><a href="products/tea/" title="お茶" >お茶</a> 
    <ul> 
      <li class="first"><a href="products/tea/shogakocha.html" title="生姜紅茶" >生姜紅茶</a></li> 
    </ul> 
    </li> 
  </ul> 
  </li> 
</ul>

このように、HTMLの内容を確認すると、丁寧にスタイルシート用のクラスが定義されていますので、組み合わせ次第ではさまざまな表示が可能です。

Wayfinderのオプションを設定する

Wayfinderにはさまざまなオプションが用意されており、最新のドキュメントはMODxアドオンのページにて公開されています。

なかみつ園でよく用いているオプションのひとつは、表示の階層数を指定するための&levelというオプションです。

今回の例で言えば、以下のようにすると、トップから見て2つめの階層までしかメニュー表示されません。つまり、生姜紅茶という項目が表示されなくなります。

[[!Wayfinder? &startId=`0` &level=`2`]]

また、場合によっては特定のリソースをメニューに加えたくない場合があります。実際、なかみつ園のサイトのページ上部にあるナビゲーションバーはWayfinderにより実現していますが、この中にはトップページという項目が存在しません。そのような設定は

[[!Wayfinder? &startId=`0` &excludeDocs=`0,11,15`]]

という形で、表示させたくないリソース番号をカンマ区切りで記述していきます。

ナビゲーションバーの実現

Wayfinderによって実現しているなかみつ園のページ上部にあるナビゲーションバーですが、前述のテストと比べると見た目が少し違いリッチです。簡単にですがその種明かしをしておきます。

まず、テンプレート中のWayfinderの記述は非常にシンプルで、次のようにしています。

ナビゲーションバー部分の記述

<div id="navi">
<div id="myslidemenu" class="jqueryslidemenu">
[[Wayfinder?&startId=`0` &level=`3` &excludeDocs=`除外するリソースIDの一覧`]]
</div>
</div>

次に、各スタイルシートに関してですが、クラス名から想像できるよう、jQueryを使用しています。

具体的な手順を説明すると、jQueryのサイトよりjquery-1.6.min.jsをダウンロードし、/var/www/html/assets/templates/mytpl/以下に保存しておきます。

同様に、スライドメニューを実現するためのプラグインを導入するため、jQuery CSSライブラリの記述に従い、jqueryslidemenu.cssとjqueryslidemenu.jsもダウンロードしておきます。また、画像ファイルであるright.gifとdown.gifは/var/www/html以下にダウンロードしておくか、必要に応じてjqueryslidemenu.js内のパスを変更しておいてください。

最後に、それらをロードするため、テンプレート中のの間に

<script type="text/javascript" src="assets/templates/mytpl/jquery-1.6.min.js"></script>
<script type="text/javascript" src="assets/templates/mytpl/jquery-1.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/templates/mytpl/jqueryslidemenu.css" />

という記述を行い、Wayfinderの記述もページのヘッダ部分に移動させれば、全体的なデザインは別として、次のように少しリッチなメニューの完成です。

最後に

なかみつ園のページソースを見れば想像できるかもしれませんが、当サイトでは基本的にページ上部のナビゲーション、左側メニュー、右側メニューにてWayfinderを使用しており、いずれの場合も、パフォーマンス向上を少しでも期待するため、キャッシュを有効にして、つまり[[スニペット名]]という形でスニペットを呼び出しています。

また、ツリー表示を実現するために、jquery.treeview.jsというjqueryのプラグインを現時点で使用しています。興味がある方は、ぜひさまざまなjqueryプラグインやCSSとの組み合わせにチャレンジしてみてください。

Wayfinderは奥の深いスニペットのひとつですので、次回以降も機会があればもう少し細かい設定も紹介出来ればと考えています。それでは次回をお楽しみに。