logo
 

HTMLテンプレートをMODX用にカスタマイズする方法(2)

HTMLテンプレートのMODX向けカスタマイズの続きです。

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階層目以降のページ用テンプレートも組み込みましょう。

関連記事

MODXとは

新着情報

 
RSS