ManagerManager・投稿画面カスタマイズ事例
最終更新日：2011年6月27日 shortlink：http://modx.jp/?id=558
同梱プラグイン「ManagerManager」を用いた、投稿画面カスタマイズのサンプルを紹介します。
サンプル画像の使用については、技術評論社のMODX Revolution連載記事「CMSのポテンシャルを引き出す - MODxで作る商用サイト」でおなじみ「お茶のなかみつ園」の了承をいただきました。当記事はMODX Evolutionのユーザを対象としていますが、なかみつ園ではMODX Revolutionを採用していますのでご注意ください。
ManagerManagerプラグインを使うと、上記のようなカスタマイズが可能です。もともとMODXは「テンプレート変数」を利用することで、入力フィールドを自由に追加して投稿画面をカスタマイズすることが可能ですが、リソース変数など既存の入力フィールドに割り込ませて配置したり、タブの名称を変更したりすることはできません。
ManagerManagerを用いると、より自由度の高いカスタマイズができるようになります。
まず、MODX標準の状態を見てみます。
▲入力項目が多い・・と感じる人もいると思います。「リンク属性」や「要約」などはふだん使いません。
mm_hideFieldsを用いて不要なフィールドを隠し、すっきりしました。
次は複合技です。
- mm_renameTab - 「メイン」など既存のタブの名前を変更
- mm_hideTabs - 「ページ設定」など既存のタブを隠す
- mm_createTab - 「セールの設定」「検索エンジン対策」など新しいタブを作成
- mm_moveFieldsToTab - 「エイリアス」など既存の入力フィールドを他のタブに移動
- mm_renameField - 「リソース名」を「商品名」に変更するなど、既存の入力フィールドの名前を変更
- mm_hideFields - 任意の入力フィールドを隠します
- mm_widget_showimagetvs - 「商品画像」のプレビュー画像を表示します
mm_widget_tagsを用いて、キーワード入力支援ウィジェットを設置。タグをクリックするとキーワードが入力されます。もう一度クリックすると元に戻ります。トグル動作です。
複数のテンプレート変数をタブ内に移動。
mm_widget_colorsでカラーコード入力ウィジェットを設置。<body style="background-color:[*背景色*]">という感じで使うとよいでしょう。
▲セール終了日を過ぎたら「セール中ご来店ありがとうございました」などの文言を表示するスニペットを設置するとよさそうに思います。
▲不動産業にも。実際にMODXで快適に運用しています。
▲MODX 1.0.5J-r1で追加されたmm_widget_googlemapウィジェットを用いると、地図を貼り込むことができます。複数の店舗を持つチェーン店のサイトなどで用いると便利です。投稿画面内で地図を開いて、ポイントをダブルクリックするだけで貼り込めるため簡単です。
http://ascii.jp/elem/000/000/424/424032/
地図の出力に関しては上記サイトなどを参考にしてください。
以下、余談になりますが
https://modx.jp/docs/tips/manager_custom.html
上記で紹介しているテクニックを併用すると、さらに高度なカスタマイズが可能です。
また、MODX 1.0.5からはテンプレート変数の「入力パーツ」のカスタマイズができるようになってますので、
http://www.moongift.jp/2009/03/ajaxzip3/
上記のような入力フォームを設置することも可能です。フォームの入力値チェックなどもできます。
