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

2012年5月11日

MODX Evolution CMSのフレンドリーURLの設定

MODX Evolution CMSには静的なHTMLサイトのように拡張子.htmlで終わるURLにするフレンドリーURLの機能があります。この機能を使うには、予め.htaccessの設定が必要です。

管理画面にログインしてから「ツール」→「グローバル設定」→「フレンドリーURL」を開き、「フレンドリーURLの使用」を「はい」にします。

フレンドリーURLの設定項目が表示されたら、以下の項目を設定して、「保存」します。

項目設定備考
個別の拡張子表現 はい CSSやXMLなどHTML以外のリソースに必須
エイリアスパスを使用 はい
フレンドリーURL

この設定後は、リソースの「エイリアス」がHTMLのファイル名のように機能し、「サイトのドメイン+エイリアス+.html」というURLになります。

2012年4月11日

MODXインストール直後のグローバル設定

MODX Evolutionのインストール後に管理画面にログインして、基本設定を済ませます。ウェブサイトのURLの末尾に/manager をつけたもの(例: http://###.#######.###/manager )が、管理画面のURLです。インストール後にMODX管理画面にログインし、「ツール」メニューの「グローバル設定」をクリックして、修正します。

サイト

項目設定説明
サイト名 サイトの名称に変更します。【必須】
言語 Japanese-utf8 【必須】
サイトスタート トップページにするリソースID。デフォルトは1。
エラーページ 404 not foundを表示するリソースID。デフォルトは1。
公開デフォルト はい 保存後すぐ公開する場合
デフォルトでキャッシュを有効 いいえ Mobile Template Switcherでスマホ(スマートフォン)対応にする場合

フレンドリーURL(検索エンジン対応)

サイトのURLを「####.html」で終わる形にカスタマイズするには、「ツール」メニューの「グローバル設定」の「フレンドリーURL」をクリックします。詳細は、フレンドリーURLの設定をご参照ください。

セキュリティ

項目設定説明
ログイン失敗を許容する回数 5~10 その回数分パスワードを間違えると、そのアカウントは60分ロックされ、ログインできなくなります。デフォルトは3回ですが、3回ぐらい間違えることはよくあるため、不便です。多少増やしておくことをお薦めします。
CAPTCHAコードを使用 はい 管理画面に画像認証がついて安心です。「ログイン失敗許容回数」を増やしてセキュリティが甘くなった分をCAPTCHAコードを使用してカバーしましょう。

インターフェースとその他の機能

リソース編集画面やQuickEditの設定を変更します。

項目設定備考
相対パスを渡す はい 将来的にURLまたはドメインの変更、サーバの引越しをする可能性が多少なりとも想定される場合
フロントエンドエディタの言語 Japanese_UTF8

ファイル管理の設定

項目設定備考
アップロードサイズの上限 10485760~ デフォルトでは、1048576 (1MB)しかありません。末尾に0を加えて10MBにするなど適度なサイズに。PHP4.2.3以降ではプログラム側でサーバ側のアップロード上限値を超える設定は無効になります。例えば、アップロード上限値が32MBに設定されているサーバでは、33554432 (32MB)を超える数値を設定しても無効になります。アップロード上限容量の変更には、.htaccessの設定が必要です。
新ディレクトリのアクセス許可 0707または0757 MODX上で画像をアップロードする際に、新しいディレクトリ(フォルダ)を作ることができます。このとき、デフォルトの755のままではディレクトリを作れても画像をアップロードすることができません。

必要な設定が終了したら、「保存」をクリックします。

パーミッションの設定

manager/includes/config.inc.php のパーミッションを404に変更します。

2012年3月11日

MODX Evolution CMS導入のための準備

HTMLホームページがMODxに適しているかどうかのチェック

HTMLサイトをMODxに移行するためには、元のHTMLサイトがHTML+CSSで書かれていること(フレーム不使用であること)が条件になります。

MODXの導入に必要な環境

  • PHP4.4.1以上、MySQL4.1以上がインストールされているサーバ(ともに5以上を推奨、.htaccessに関する制限がないか確認が必要)
  • ブロードバンドでインターネットに接続できる環境
  • FTPソフト
  • HTMLエディタまたはテキストエディタ
  • 画像加工ソフト
  • ウェブサイトのデータ一式(HTML、CSS、画像ファイル)
  • MODx Evolutionのプログラム

HTMLサイトのMODX化の流れ

1.MODX EvolutionのダウンロードとZIPアーカイブの展開

2.データベースの設定

3.HTMLサイトのデータ一式の移動

ローカル上のMODxのディレクトリのassets/templatesの下にディレクトリ(以下、assets/templates/###)を作り、HTMLサイトのデータ一式を移動します。

4.MODxのインストールとグローバル設定

3のデータを含むMODxデータ一式をサーバにアップロードし、インストールします。インストール後には、グローバル設定も済ませておきましょう。

5.トップページの仮テンプレートの作成

HTMLサイトをMODxに移植するときは、テンプレートとリソース(記事)の作成を同時進行します。HTMLサイトは、もともとテンプレートとリソースにわかれていません。このため、MODxに移植するときは、これらを切り分けながら作業し、都度、現サイトと同様に表示されるか確認していきます。

(ア) 画像とCSSのパスの修正

MODxではページからCSSへのパスが assets/templates/###/###.css に変わります。このため、テキストエディタの置換機能を使って、画像とCSSへのパスを一気に書き換えます。

(イ) テンプレートの仮組込

(ア)の状態のままテンプレートをMODxサイトに組み込みます。ただし、(ア)の状態では、テンプレートとリソース(記事)の切り分けができていないため、あくまでも仮の組み込みです。

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

7.トップページ以外のテンプレートとリソース(記事)の作成

トップページが終わったら、上位階層のページから6と同様の作業をします。上位階層のページから順に着手するのは、下位階層のページでは上位階層のテンプレートが使えるケースが多いためです。

8.ナビゲーションメニュー等の内部リンクの修正

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

9.問い合わせフォームの移植

現サイトに問い合わせフォームがある場合は、MODxのeFormスニペット用にカスタマイズします。

10.便利機能の組み込み

MODXには、パンくずリストを自動生成するスニペット、検索エンジン対応のsitemap.xmlを自動生成するスニペット、著作権年次を自動更新するスニペットなどの便利機能があります。

2012年2月11日

MODX Evolution CMSテンプレート用HTMLおよびCSSの条件

MODX Evolution CMSのテンプレートとして利用可能なHTMLおよびCSSの条件は、以下の通りです。

  1. フレームを使用していないこと
  2. スタイルの指定がCSSに集約されていること(HTML内でスタイルを指定しないこと)
  3. 固定の領域とページによって変わる内容(content)の領域が明確に分かれていること(下図参照)

2012年1月15日

MODXなどのCMSで?(クエスチョンマーク)に文字化けしたら

MODXなどのCMSで、MySQLデータベースの照合順序が ujis_japanese_ci になっていると、改行、記号、特殊文字などが「?(クエスチョンマーク)」に文字化けする場合があります。このサイトではMySQL4のサーバからMySQL5のサーバに引っ越した後に、この問題が発生しました。
ここでは、データベースの照合順序を ujis_japanese_ci から utf8_general_ci に変更する方法をまとめます。
  • この方法は、このサーバのphp MyAdminの画面に即しています。お使いのものとは異なる場合がありますので、十分にご注意ください。
  • 誤操作により、データベースが壊れ、ウェブサイトが表示できなくなるリスクがあります。この操作は自己責任でお願いします。