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>部分をカスタマイズします。この段階では、テンプレートとリソース（記事）の切り分けはしません。| 方針 | Before | After |
|---|---|---|
| <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> |
- この作業により、HTMLファイルはブラウザで正常に表示できなくなります。心配な方は、元のHTMLファイルを複製して作業しましょう。
- <head>タグの詳しい編集方法は、「MODXにテンプレートを組み込むためのhead部分の修正」のページをご参照ください。
7. テンプレートの仮組込
MODx管理画面の「エレメント」メニューの「テンプレート」タグを開き「テンプレートの作成」をクリックします。テンプレート名を半角英数字で入力します。特徴や使用箇所がわかるような名称にしましょう。「テンプレートコード」には、前述のHTMLファイルをテキストエディタで開いてまるごとコピーしたコードを貼り付けて「プロパティ」タブを開きます。
「リソースの投稿」ボタンをクリックします。「リソース名」に元のHTMLファイルのタイトルを入力、「使用テンプレート」で直前に作成したテンプレートを選んで、「更新」します。 管理画面左側のリソースツリー上でこのリソースを右クリックして、プレビューします。元通りに表示できることを確認します。
8. テンプレートとリソース(記事)の切り分け
MODX管理画面で仮組込したテンプレートを開きます。テンプレートのコードの中から、MODx管理画面のリソース（記事）の「内容」で管理したい可変部分をカットします。（ここの誤操作は致命傷になります。慎重に。）カットした箇所に [*content*]と入力して、保存します。
同様にプレビューして、元通りに表示できることを確認します。元通りに表示できたら、テンプレートとリソースの切り分けは成功です。ここからは、自由にリソースを作成、編集することができます。
- <h1>タグ内にページのタイトルを表示させたいときには、同様の手順で、テンプレート内の<h1>タグ内を [*longtitle*] と書き換えます。これで、<h1>タグ内にリソースの「タイトル」が読み込まれます。
- トップページと2階層目以降のページでレイアウトが変わる場合は、2階層目以降のページ用テンプレートも組み込みましょう。
0 コメント
匿名希望の方は、このブログ末尾のプライバシーポリシーをお読みください。