REDLINE MAGAZINE | MODx チャンクを使ってみるREDLINE MAGAZINEトップページへ

すべてのエントリを見る

MODx チャンクを使ってみる

チャンクって何だろう?

複数ページ内で同じ文言なんかを挿入したい際に、その部分をパーツ化しておくといろいろと効率がいい場合がある。チャンクとはソースをパーツ化しておき、テンプレートやドキュメント内からそのチャンクを呼び出せば簡単にソースを挿入できる仕組みの事。ここでピンとくる人はもうピンときてると思う。ピンとこなかった方はフォーラムのこちらのページにチャンクの使用方法について書かれてましたのでご参考に。

>>MODXフォーラム - チャンクの使用方法。。。

MTにもモジュールってありますよね。多分そんな感じ。チャンクはテンプレート内でもドキュメント内使用できる。

チャンクの作成

MODx管理画面の「リソース > リソース管理 > チャンク」でチャンクの作成。

画面キャプチャ・MODxチャンクの作成

チャンク名はテンプレートやドキュメントから呼び出すときの名前になる。チャンクの説明は自分で後で分かりやすいように。カテゴリは設定してもしなくても問題ないと思うけど、前回テンプレートを作った際に今回のサンプルサイト関連用に「MODx-Sample」というカテゴリを作っていたのでそれを選択。チャンクコードにソースを入れたら「保存」をクリック。

画面キャプチャ・MODxチャンクの作成

チャンクの挿入

上で作ったチャンクを実際に呼び出してみる。上でも書いたとおり、チャンクはテンプレート内でもドキュメント内でも使えるということなので、先日作ったサンプルサイトのテンプレート部分とドキュメント部分、両方に突っ込んでみます。

ちなみに今の状態、こんな感じ。コンテンツ部分、なーんもCSSで装飾してないので、ただ内容が入ってるだけだけど、実験サイトなのでそんなの関係ない。テンプレート部分である左カラム部分とドキュメント部分である右カラムにそれぞれ挿入してみます。
画面キャプチャ・MODxサンプルサイト

チャンクの呼び出しはチャンクタグを使う。チャンクタグは {{チャンク名}} こんな感じ。先ほどチャンクの作成時につけたチャンク名を「 {{ 」と「 }} 」で囲むだけ。上で「link_mysite」という名前のチャンクを作成したので、チャンクタグは「{{link_mysite}}」となる。それをテンプレートファイルとドキュメントに記述します。

テンプレート部分
画面キャプチャ・MODxチャンクの挿入

ドキュメント部分
画面キャプチャ・MODxチャンクの挿入

それぞれ保存してプレビューしてみます。
画面キャプチャ・MODxサンプルサイト

ちゃんと任意の場所にチャンク登録したソースが入りました。バッチリ。

チャンクソースの変更

チャンクの中身を変更したい場合はチャンクを作成した時同様、「リソース > リソース管理 > チャンク」から変更したいチャンクを選択。

画面キャプチャ・MODxチャンクの変更

チャンクコードを書き換えます。

画面キャプチャ・MODxチャンクの変更

保存してプレビューしてみます。

画面キャプチャ・MODxサンプルサイト

これでオッケーの模様。やっほー。

チャンク雑感

チャンクの使いどころなんだけど、上の方に書いたフォーラムのページ内の解説にもあったとおり、いろいろ使いどころはありそう。テンプレートで指定した方がいい部分とチャンク使ったほうが効率いい部分の使い分けを自分で考えるのもまた楽しいな。

フォーラムのページ内に長大になりがちなCSSをチャンクで複数のパートに分けて見渡しよくするというアイデアも。と書かれていたけど、これは個人的にすごく便利だと感じる。普通にサイトを作っているとCSSをパーツごとに分ける時、@importとかlinkで複数のCSSファイルを読み込んだりするけど、読み込むのは1つのCSSファイルで中身はチャンクでパーツごとにモジュール化されてるみたいな感じ。(日本語おかしい?)管理しやすそう。

<< 実際にMODxでサイトを作ってみる | MODx スニペットを使ってみる >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/164

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。