作り方ここでは、ウェブサイトのhtmlをMODXのテンプレートして登録する手順の初歩を解説します。参考サイトhttp://ringo-site.com/template/free/hptemplatecom/top-body.htmlhttp://chibinowa.net/modx/tutorial/newtemplate/http://modx.jp/blog/20141212.html初めに解説にあたり、以下のようなデザインのページをテンプレートとして用意しました。このページは以下の4つのエリアに分かれています。ヘッダ(サマリー、キービジュアルとキャッチコピー)メニューメインコンテンツ(記事が入るエリア)フッターそれでは、このhtmlをMODXのデザインテンプレートとして利用してみましょう。サンプルファイル(htmlのサンプルテンプレート)MODXのテンプレートのもとになるサンプルhtmlを用意しました。サンプルファイルは以下のリンクからダウンロード可能です。htmlファイル・cssファイル、画像の3点が含まれています。再配布を行わない限り自由に使って頂いてかまいません。サンプルファイル一式(sample_ja.zip)をダウンロードダウンロードファイルには下記のファイルが含まれています。modx_sample_ja.htmlmodx_sample_ja02.htmlcssフォルダstyle.cssstyle02.cssimgフォルダ各種画像ファイルMODX_sample_ja02.htmlとcss/style02.cssはキービジュアルだけが違うバージョンです。解説中は特に触れませんが、好みに合わせてこちらを使っていただくこともできます。htmlをMODXテンプレートとして修正するhtmlファイルは、以下のようなソースとなっています。このページの下のコードをコピーしてエディタにペーストするか、ダウンロードしたMODX_sample_ja.htmlをエディタで開いてください。このファイルを元にhtmlをMODX化(MODXのテンプレートを作成)します。<h1>MODXはデザインの自由度が高いオープンソースCMSです。class="midashi"><span>見出しテキスト(class="midashi"でこの形になります。<p>MODX用サンプルテンプレートです。href="http://d-sity.com/">THR</a>によって制作されました。/>MODXのテンプレートの使い方を解説する為に作成しました。再配布などをしなければ、ご自由にご利用ください。最初に、head要素のmeta要素の下に次の1行を付け加えます。/>これは、画像などを探すために使われるベースURIで、MODXをインストールしたディレクトリを指します。baseタグを使うのはMODXの特徴のひとつですが、使わなくてもサイトは構築できます。その代わりMODXの大きな特長であるリンクタグが使いづらくなるため、baseタグを記述することをおすすめします。次に、titleタグを下のコードに置き換えます。リソースの作成/編集で入力するタイトルが表示されます。[(site_name)]</title>次に、head要素の中のcssファイルへのリンクを変更します。テンプレートHTMLのhead要素の中のlink行を次のコードに置き換えます。この例では、assets/templates/tutorial/css/style.cssを参照します。後ほどCSSをこの場所へアップロードする必要があります。/>スタイルシートをMODXのリソースとして管理する方法もあります。この場合は、下の手順でリソースを新規に作成してからCSSファイルの内容をコピーしてください。チェックコンテントタイプ:text/cssスタイルシートをリソースとして管理する場合、リンクを以下のコードに置き換えます。/>以下は、スタイルシートをファイルで管理することを前提に説明します。end-->を次のコードに置き換えます。Valiables,TV)」といいます。変数といっても数字ではなく、各リソースの入力項目に対応したタグのようなものです。[*content*]には、投稿画面の「内容(content)」が表示されます。テンプレート変数には、MODXがあらかじめ用意しているものが幾つかありますが、ユーザーが独自に追加することもできます。次にフッターをパーツ化します。htmlファイルの中ほどにあるdiv要素を下の要領で置き換えます。-->これは「cach_copy」というチャンク(共通部品)を作成し、チャンクを変更することですべてのページの内容を一度に変更することが目的です。テンプレートをサイトへ反映させるMODX化したサイトテンプレート完成したMODXのテンプレートがこれです。<h1>MODXはデザインの自由度が高いオープンソースCMSです。--></body></html>テンプレートを作成する作成したテンプレートを登録するために、このHTMLをMODXに保存します。MODXマネージャにログインします。"リソース"をクリックします。下の段のタブから"リソース管理"をクリックします。テンプレートをクリックします。"テンプレートの作成"をクリックします。テンプレート作成画面で以下の要領で操作します。テンプレートを分類するためのカテゴリーを選びます。既存のカテゴリに分類したいカテゴリが見つからない場合に任意の名前を入力することでカテゴリが追加されます。上記のコードを貼り付けます。"保存"ボタンをクリックしてテンプレートを保存します。テンプレートに使うファイルをサーバーへアップロードテンプレートに必要なファイルをサーバ上にアップロードします。FTPソフトでMODXをアップロードしたサーバーに接続します(例えば、"/public_html/ドメイン名/")。(MODXをインストールしたディレクトリ)/assets/templates/に移動します。templatesフォルダの中に新しいフォルダを作成します(例えば、"tutorial")。tutorialフォルダの中に2つの新しいフォルダを作成します("css"フォルダと"img"フォルダ)。"img"フォルダに、サンプルファイルのimgフォルダ内のすべてのファイルをアップロードします。"css"フォルダに、style.cssをアップロードします。cssファイルをMODXのリソースとして管理している場合は、style.css内の画像ファイルへのパスを変更する必要があります。テンプレートの指定変更それでは、今までの作業をもう一度確認してみましょう。行って、次の情報を入力しましょう。今回作成したテンプレートをすべてのリソースに反映させる場合はチェック一番上までスクロールして保存ボタンをクリックチャンクとはチャンクとは、MODXを使用する際に、Webページの指定した場所に挿入、表示できるコード/HTMLのパーツのことです。チャンクを利用することにより、長大な記述になりがちなテンプレートをすっきりと構造化することができます。MODX以外の多くのCMSでも、ヘッダやフッタをパーツとして管理する仕組みがあると思いますが、MODXではチャンクがこれに相当します。以下の手順でチャンクを作成します。リソース->リソース管理->チャンク->チャンクの作成チャンク名:catch_copyチャンクの説明:キャッチコピーカテゴリ:既存の候補を選ぶか新しいカテゴリを入力して作成HTMLの断片をコピーし、"チャンクコード(html)"にペーストします。今回はタグに囲まれたエリアにチャンクを挿入しているので、下記のようにキャッチコピー部分に表示させたい文字を入力してから保存します。チャンクには通常htmlを入力しますが、今回作成したcatch_copyチャンクは<span></span>に既に囲まれているのでタグを記入していません。あなたの好きなキャッチコピーチャンクを利用すると、ヘッダーやサイドバーなど、ウェブサイトの各ページで共通に使用したい箇所を独立して管理することができます。ウェブサイト内で複数のテンプレートを使用する場合(例えば2カラムのページと3カラムのページが混在するサイトなど)、チャンクを利用すれば、一箇所を修正するだけで作業が完了します。ウェブサイトの管理がとても便利になります。順で操作し、以下の項目を入力します。タイトル[*pagetitle*]:ページのタイトルを入力します。エイリアス[*alias*]:ページのアドレスを入力します。「index.html」などの時は「index」と入力。使用テンプレート:使用するテンプレートを選びます。今回作ったテンプレート(tutorial)であることを確認します。内容(MODXタグ)[*content*]:このページのコンテンツ(内容)を入力します。コンテンツがWISYWIG(TinyMCE)エディタで表示されている場合は、右上の「HTML」ボタンをクリックして張り付けるか、ページ設定タブの「リッチテキストで編集」のチェックを外して一旦保存し、生のHTMLにしてから貼り付けます。class="midashi"><span>見出しテキスト(class="midashi"でこの形になります。)</span></h2><p>MODX用サンプルテンプレートです。href="http://d-sity.com/">THR</a>によって制作されました。/>MODXのテンプレートの使い方を解説する為に作成しました。再配布などをしなければ、ご自由にご利用ください。</p>(クリックで拡大)これで、サイトテンプレートの反映とリソースの入力が終わりました。さぁ、実際にサイトを見て確認してみましょう。前の章で作ったリソースをプレビューします。管理画面の左側ツリーの中から作成したリソースを右クリック(MACユーザはアイコンをクリック)プルダウンメニューの中から「プレビュー(別窓)」をクリックいかがでしょうか?上記のようなデザインになっていれば、テンプレートの変更は成功です。このページでは、「テンプレートの作成」「チャンク」「リソースの作成」といったMODXの基本操作を説明しました。あなたのMODXで、あなたが使いたいhtmlデザインファイルをテンプレートとして登録してみてください。