MODXをレスポンシブにするMobile Template Switcher(1)

このウェブサイトには、MODX  Evolution CMSでPCとスマートフォン(以下、スマホ)のテンプレートを振り分けるMobile Template Switcherというプラグインが使われています。

Mobile Template Switcherは同じURLでレスポンシブ・デザイン(マルチスクリーン対応)にするプラグインで、レスポンシブにURLを切り替えるものではありません。

Mobile Template Switcherを使ったレスポンシブ化のフローは下記のとおりです。

  1. スマートフォン用テンプレートを作成
  2. スマホ用テンプレートの組み込み・テスト
  3. すべてのリソースのキャッシュ制御を無効(OFF)に設定
  4. Mobile Template Switcherの組み込み

ここから上記の項目ごとにページを分けて、MODX CMSのレスポンシブ化の手順をまとめます。

スマホ用テンプレートの作成

レスポンシブ対応スマホ用テンプレートの作り方のページをご参照ください。

スマホ用テンプレートの組み込み・テスト

スマホ用にデザインしたHTMLとCSSをassets/templatesフォルダにアップロードして、そのHTMLをMODX用にカスタマイズしておきます。

MODXの管理画面にアクセスし、「エレメント」→「テンプレート」→「テンプレート作成」を開きます。

Mobile Template Switcher

MODX用にカスタマイズしたHTMLのコードをコピー&ペーストして「保存」します。

Mobile Template Switcher

スマートフォン版テンプレートのテスト用にリソースを作成します。「使用テンプレート」をスマホ版テンプレートにし、「メニュー表示」のチェックを外します。

Mobile Template Switcher

ページ設定」タブの「検索対象に含める」と「キャッシュ制御を行なう」のチェックを外しておきます。

Mobile Template Switcher

上記のテスト用リソースを使ってスマートフォンでの表示を確認しましょう。スマートフォンでの表示が確認できたら、次はすべてのリソースのキャッシュ制御を無効(OFF)に設定します。

関連記事

MODXとは

新着情報

Published on
CORESERVER.JPCORESERVER.JP