Wayfinderの使い方 - Lesson #11

2010年03月17日 15:16

The Almost Complete Guide to Creating Menus in MODx using Wayfinderの拾い読みをメモ。
(自分なりの補足や解釈も加えてあるので注意)

Chapter12 Lesson #11

Lesson #11の概要
Wayfinderが出力するメニューに特定のスタイルシートやJavaScriptを適用する方法について。

関連するパラメータ
&cssTpl
&jsTpl

&cssTpl パラメータ
Webサイトがメインで使用しているスタイルシートの代わりとして、特定のメニューに対し特定のスタイルシートを指定したい場合に、&cssTplを使用する。

ここまで作成してきたサイトのサンプルでは、ページのHEADセクションで設定した外部スタイルシートを共通して参照しているが、Wayfinderでは、内部(埋め込み)スタイルシートや外部スタイルシートを適用することで、出力するそれぞれのメニューに対して異なるスタイルシート設定を割り当てることができる。


このパラメータを使う場合、ページに挿入するスタイルシートまたは参照する外部スタイルシートを記述したチャンクを作成しておく必要がある。
どちらの場合も、各ページのHEADセクションとなる部分を正しく記述しておかなければならない。

メソッド1:内部スタイルシートの形でHEADセクションに挿入する場合
ここではcsstpl1という名前でチャンクを作成し、その中にスタイルシートの設定を記述する。

csstpl1のソースコード例

<style type="text/css">
Your CSS style rules /* this is where you will enter your CSS styles */
/* you need to include the style tags */
</style>



このチャンクの赤字部分に、作成するサイトに応じたスタイル設定を記述する。
サンプルサイトの場合(すでに外部スタイルシートに設定済みという想定なので)、外部スタイルシートの記述をcsstpl1に移動し、設定が重複しないようにする。

チャンクの作成が終わったらスニペットコールを修整する。

メニュー用のスタイルシートを設定する場合のスニペットコール例

[[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &rowTpl=`menuRows` &level=`1` &cssTpl=`csstpl1` ]]



!この方法はあくまでサンプルで実際にはお奨めしない。スタイルシートを適用する方法としては外部スタイルシートを使うことをお奨めする。


※以下、出力されたページとそのソースコードを紹介。HEADセクションには<style>要素としてスタイルシート設定が挿入されている。


メソッド2:ドキュメントのHEADセクション内に外部スタイルシートのパスを挿入する場合
この方法は前のものよりは簡単で、外部スタイルシートを正しく参照したチャンクを作成すればいい。
ここではcsstpl2という名前でチャンクを作成する。

csstpl2のソースコード例

<link rel="stylesheet" href="assets/templates/velito/cssmenucss.css" type="text/css" media="screen" />


href部分のパスやメディアタイプは必要に応じて修整する。

次にメインメニューのスニペットコールをcsstpl2に合わせて次のように修整する。

[[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &rowTpl=`menuRows` &level=`1` &cssTpl=`csstpl2` ]]



※以下、出力されたページのソースコード例を掲載。HEADセクションにはスタイルシート設定ではなく、外部スタイルシートへのリンクが記述されている。

ふたつめのメソッドでは、チャンク内で複数の外部スタイルシートを記述することもできるという点も覚えておきたい。


&jsTpl パラメータ
このパラメータも&cssTplとほぼ同様に動作する。違いはスタイルシートではなくJavaScriptを参照するという点だ。
前項同様にチャンクを作成し、その内容が各ページのHEADセクションに挿入される。

メソッド1:ドキュメントのHEADセクションに内部JavaScriptとして挿入する場合
パラメータの例については前項(&cssTpl)同様のため省略する。
チャンクを作成し、<script>要素を記述すればよい。

&jsTplパラメータで使用するチャンクの記述例

<script language=javascript" type="text/javascript">
Some JavaScript
</script>


language=の部分は必要に応じて修整する。


メソッド2:HEADセクションに外部JavaScriptファイルを設定する
外部スクリプトファイルを正しく設定したチャンクを作成する。

外部スクリプトを指定したチャンクの例

<script src="assets/js/jquery-1.2.1.min.js" type="text/javascript"></script>


この例では、出力されるそれぞれのページのHEADセクション内にJQueryライブラリファイルを参照するという指定が挿入される。
この方法を使えば、複数のJavaScriptファイルをまとめて指定することもできる。


Lesson #11のまとめ
1)&cssTplパラメータは、内部または外部のCSS設定を参照することができる。パラメータで指定したチャンクの内容が、出力されるページのHEADセクションに挿入される。

2)同様に&jsTplは各ページのHEADセクションに、JavaScriptの設定を挿入する。



以上がLesson #11(p93~96)のおおまかな内容。次のレッスンでは上級向けのパラメータ3つを紹介する。
スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://flyingjunk.blog25.fc2.com/tb.php/212-08d9e5a3
    この記事へのトラックバック


    最近の記事

    オンラインアルバム