2012年9月2日

HTMLテンプレートをMODX Evolution CMS用にカスタマイズ

HTMLテンプレートをMODX Evolution CMSテンプレートに加工する手順は、以下の8ステップです。

1.テンプレートのダウンロード

自作HTML+CSSの場合

「トップページ(1階層目のページ)」と「2階層目(以降)のページ」をご用意ください。

既存(市販)テンプレートの場合

HTMLテンプレートをダウンロードしたら、ダウンロードしたZipファイルを展開し、以下の2点を確認しましょう。
  • 説明書(ReadMe)があるかどうか(説明書があれば、読んでおきましょう。)
  • テンプレート(HTML)が何種類あるか(トップページ用、記事ページ用など)

2.必要に応じて、画像、HTML、CSSを修正、確認

ロゴやボタンなどの画像を修正します。画像の修正に合わせて、HTML、CSSも修正します。この状態でブラウザに表示して確認します。

3.HTMLテンプレートをMODXディレクトリ下のassets/templates/下に移動

テンプレートのフォルダをassets/templates/下に移動します。

4.HTMLテンプレートのアップロード

「説明書で除外するように指定されているファイル」や「ファイル名が日本語のファイル」をフォルダの外に移動します。FTPソフトでテンプレートをフォルダごと、サーバ上のassets/templates/下にアップロードします。

5.MODxテンプレート化のための画像パスの修正

テンプレートのディレクトリをassets/templates/下に移動したことに伴って画像パスをテキストエディタの置換機能を使って置換します。
これによりブラウザでは画像が表示されなくなりますが、気にしないでください。
置換前(例)置換後(例)
images/ assets/templates/テンプレートのディレクトリ名/images/
#####.css assets/templates/###/#####.css

6. MODxテンプレート用の<head>部分の修正

HTMLをMODxテンプレートに組み込むために<head>部分をカスタマイズします。この段階では、テンプレートとリソース(記事)の切り分けはしません。
方針BeforeAfter
<head> <head>
リソース名+サイト名に【必須】 <title>DreamTemplate.com</title> <title>[*pagetitle*] | [(site_name)]</title>
METAタグ 文字コードをUTF-8に【必須】 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
リソースの説明(description)を読み込むように <meta name="Description" content="[*description*]" />
CSSのパスをテンプレートの場所に修正【必須】 <link href="style.css" rel="stylesheet" type="text/css"> <link href="[(base_url)]assets/templates/###/style.css" rel="stylesheet" type="text/css" />
<base href="[(site_url)]" />
</head> </head>

7. テンプレートの仮組込

MODx管理画面の「エレメント」メニューの「テンプレート」タグを開き「テンプレートの作成」をクリックします。
テンプレート名を半角英数字で入力します。特徴や使用箇所がわかるような名称にしましょう。「テンプレートコード」には、前述のHTMLファイルをテキストエディタで開いてまるごとコピーしたコードを貼り付けて「プロパティ」タブを開きます。
説明」にテンプレートの用途がわかるような補足説明を書き入れて、「更新」します。
この状態では、テンプレートとリソース(記事)の切り分けができていないため、あくまでも仮の組み込みです。そこで、テンプレートの組み込みに成功しているかどうかを確かめるために、ページを作ってみましょう。管理画面左側のリソースツリー上のツールバーからリソースの投稿」ボタンをクリックします。
リソース名」に元のHTMLファイルのタイトルを入力、「使用テンプレート」で直前に作成したテンプレートを選んで、「更新」します。 管理画面左側のリソースツリー上でこのリソースを右クリックして、プレビューします。元通りに表示できることを確認します。

8. テンプレートとリソース(記事)の切り分け

MODX管理画面で仮組込したテンプレートを開きます。テンプレートのコードの中から、MODx管理画面のリソース(記事)の「内容」で管理したい可変部分をカットします。(ここの誤操作は致命傷になります。慎重に。
カットした箇所に [*content*]と入力して、保存します。
テンプレートの仮組込のときに作ったリソースを開き、リソースの「内容」の「使用エディタ」を「なし」にします。先ほどカットしたコードをリソースの「内容」欄に貼り付けて、リソースを「更新」します。
同様にプレビューして、元通りに表示できることを確認します。元通りに表示できたら、テンプレートとリソースの切り分けは成功です。ここからは、自由にリソースを作成、編集することができます。
  • <h1>タグ内にページのタイトルを表示させたいときには、同様の手順で、テンプレート内の<h1>タグ内を [*longtitle*] と書き換えます。これで、<h1>タグ内にリソースの「タイトル」が読み込まれます。
  • トップページと2階層目以降のページでレイアウトが変わる場合は、2階層目以降のページ用テンプレートも組み込みましょう。

0 件のコメント:

コメントを投稿