2012年9月30日

MODX Evolution CMSのナビゲーションメニュー等の内部リンクの修正

HTMLファイルからMODX Evolution CMSへのテンプレートの組み込みができたら、内部リンクのリンク先の指定方法を修正しておくことをお薦めします。

MODX Evolution CMSでは内部リンクを「リソースID」で指定します。リソースIDで内部リンクを指定するとリンク先のURLが自動生成されます。これによりディレクトリを変えてもリンクが切れなくなります。そこで、ナビゲーションメニューの等の内部リンクはすべて修正します。

テンプレートのリンク先をリソースIDに修正

MODx Evolution CMS管理画面でテンプレートを開いて、リンク先のパスをリソースIDに書き換えます。

リンク先の例

修正前 <a href="privacy.html">
修正後 <a href="[~17~]">

リソースのテンプレートのリンク先をリソースIDに修正

MODX管理画面でリソースを開いて、同様にリンク先のパスをリソースIDに書き換えます。

参考)問い合わせフォーム、便利機能の組み込み

MODXには、問い合わせフォームを作成するスニペットパンくずリストを自動生成するスニペット検索エンジン対応のsitemap.xmlを自動生成するスニペットなどの便利機能があります。

2012年9月16日

MODX Evolution CMSでテンプレートを組み込むためのhead部分の修正

テンプレートに含まれるHTMLをすべてテキストエディタで下表のようにMODX Evolution CMS向けに書き換えます。 これによりブラウザでは正常に表示されなくなりますが、気にしないでください。

項目コード備考
タイトルの修正 <title>[*pagetitle*] | [(site_name)]</title> タイトルに「リソース名」と「サイト名」を併記します。【必須】
テキストエンコーディングの修正 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> SHIFT_JISなどの文字コードをMODx用にUTF-8に直します。【必須】
キーワードの削除 <meta name="keyword" content="[*キーワード*]" /> MODXのテンプレート変数でMETAタグのキーワードを設定した場合にのみ必要。【任意】
説明文の修正 <meta name="Description" content="[*description*]" /> ドキュメントの「説明」を表示します。【必須】
CSSのURLの修正 <link href="[(base_url)]assets/templates/( フォルダ名 )/style.css" rel="stylesheet" type="text/css" /> テンプレートをアップロードしたフォルダを指定します。【必須】
sitemap.xmlの指定 <link rel="alternate" type="apprication/rss+xml" title="Sitemap" href="[(site_url)]sitemap.xml" /> Sitemapスニペットで自動生成したsitemap.xmlのURLを指定します。
【sitemap.xmlの自動生成設定時に必要】
RSSフィードの指定 <link rel="alternate" type="apprication/rss+xml" title="RSS 2.0" href="[(site_url)]rss.xml" /> Dittoスニペットで自動生成したRSSのURLを指定します。(左記は、RSSフィードのファイル名がrss.xmlの場合の例。)
【RSSフィードの自動生成設定時に必要】
ベースURLの設定 <base href="[(site_url)]" /> ベースとなるURLを指定します。【必須】
Javaスクリプトの指定 <script type="text/javascript" src="assets/js/frankensleight.js"></script> MODxに標準搭載されている「IE6で透過PNGに対応するJavaスクリプト」の場所を指定します。【任意】

上記はできるだけそのままコピペしてお使いいただけるように書いていますが、コピペは自己責任でお願いします。

2012年9月2日

MODX CMSのトップページ以外(2階層目以下)のテンプレートの作成

MODX Evolution CMSトップページ用テンプレートの組み込みができたら、必要に応じて他のページも同様の作業をします。<head>~</head>タグ内の修正などは全テンプレート共通です。共通部分については、上記の手順で作成したテンプレートのタグをコピー&ペーストするだけで済ませられます。

ナビゲーションメニュー、サイドバー、レイアウトのパターンに応じて、テンプレートを作成します。

トップページ以外(2階層目以下)のリソース(記事)の作成

HTMLホームページからMODxへの移植の場合は、元のディレクトリ構造と同じかまたはそれに近い構造になるように、先に空のリソースをまとめて作成しておき、あとでHTMLファイルからMODxサイトの[*content*]に相当する部分のコードをコピーして貼り付けると効率的です。

空リソースの作成

MODxでリソースを作成し、元のHTMLファイルの<title>タグの内容を「リソース名」、ファイル名を「エイリアス」に入力して「保存」します。

サブディレクトリがある場合は、そのディレクトリ(フォルダ)にあたるリソースを作ります。

サブディレクトリにあるHTMLファイルのリソースを作成するときは、その置き場になるフォルダを「親リソース」で指定します。

[*content*]相当部分のコードのコピー&ペースト

テキストエディタでHTMLファイルを開き、そこからMODxサイトの[*content*]に相当する部分のコードをコピーして、MODx管理画面でリソースの[*content*]の貼り付けます。

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