CMSのポテンシャルを引き出す─MODxで作る商用サイト

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

この記事を読むのに必要な時間:およそ 4 分

Wayfinderのインストール

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

Wayfinderをさっそく使ってみる

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

    タグを使ってメニューの一覧を記述していましたが,この代わりに

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

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

    図3 自動作成されたメニュー

    図3 自動作成されたメニュー

    また,実際に記述される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の記述もページのヘッダ部分に移動させれば,全体的なデザインは別として,次のように少しリッチなメニューの完成です。

    図4 ナビゲーションメニューの実現

    図4 ナビゲーションメニューの実現

    最後に

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

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

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

著者プロフィール

中満英生(なかみつひでお)

大学時代に出会ったSolarisがきっかけでUNIXの世界へ。その後ホスティングプロバイダ,データセンターで実務経験を積む傍ら,雑誌記事の執筆や技術セミナーの講師を務める。サーバ設定の他,セキュリティに関する著作や技術者エッセイも執筆経験あり。