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

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

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

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

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

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

おさらい

これまで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」に変更しておきます。

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

トップページ

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

会社概要

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

商品紹介

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

商品紹介 > お茶

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

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

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

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

図1 ここまでの設定状況(リソース階層)

図1 ここまでの設定状況(リソース階層)

図2 作成したトップページ

図2 作成したトップページ

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

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

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

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

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

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

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

著者プロフィール

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

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

コメント

コメントの記入