Ja:ビギナーズガイド
From MODx Wiki
Main > Category:Ja:HOWTOW > ビギナーズガイド
MODxの使い方を直感的に理解することができるラッキーな人でもない限り、インストール後、最初に直面するのは「すばらしいCMSだ！ところで、どうやって使うの？」ということでしょう。
このチュートリアルは、MODxを素早く習得するために、あなたが感じるいくつかの疑問に答え、MODxの習得にかかる負担を軽減するための道しるべとなります。
注意: このチュートリアルは、MODxの使い方に関するものですが、Webサイト構築に関するいくつかの項目を含んでいます。ですから、あなたがWebサイト構築に関して経験豊富であるなら、いくつかの項目は読み飛ばしてしまって構いません。
このチュートリアルでは、カスケーディングスタイルシート(CSS)を使って、Webページのテンプレートを作成する全てを行います。もし、CSSを知らないなら、将来性のある技術ですから、是非、それを学んでください。このチュートリアルではCSSの使い方をいくつか紹介します。CSSファイルに変更を加えるときは次のようなことに注意してください。作業はゆっくりと進め、自分が行ったことを確認してください。CSSに間違いがあると、Webページのレイアウトは簡単に崩れてしまいます。CSSファイルに何か変更を加える前には、正しく動作している内にCSSファイルのバックアップをとってください。
ブラウザで表示することができるテンプレートがあれば、テキストエディタでCSSファイルを編集することができます。CSSファイルを保存したら、ブラウザでF5キーを押してページを更新すれば、CSSを変更した結果をすぐに見ることができます。
それでは、始めましょう。
Contents |
MODxをインストールする前に
いくつかの前提条件があります:
- MODxのテンプレートを作成するために、Webページを持っているのがベストです。注:Webサイト全体を必要とはしません。Webサイトのようなレイアウトを持つ1ページだけで構いません。MODxは、基本的に動的にページを作成します。もし、完全に自由に使えるWebサイト用のテンプレートなどがあればそのソースコードを見てみましょう。HTMLとスタイルシートがあれば、あなた自身のMODxテンプレートを作成するための第一歩としてそのソースコードを使うことができます。
- Webサーバへアクセスできなければなりません。ローカル(localhost)でもリモート(ホスティングサービスから借りているサーバ)のどちらでも構いません。
- もしローカルサーバを持っていなければ、Webサイトを簡単に構築・テストするためのシンプルなサーバを用意するべきでしょう。あなたはApache(広く使われているサーバウェア)について多くを知る必要はありません。ただ、Apache Friendsへ行き、あなたのコンピュータにXAMPPをインストールするだけです。
- MySQLデータベースへアクセスできなければなりません。XAMPPのインストールにはMySQLが含まれています。ゆくゆくは(リモートの)MySQLサーバへのデータベースアクセスが必要になるでしょう。詳細はホスティングプロバイダ(ISP)に相談してください。また、Create the modX databaseを参照してください。
- さあ、あなたはMODxをインストールすることができます。インストールでは、インストールのオプションで全てのスニペットをインストールしてください。それらは後で必要になります。
Mac OS Xでの注意: OS XはUnixシステムであり、Apacheを持っています。一旦、ターミナルを起動すれば、それはLinuxとほぼ同じです。「共有」のコントロールパネルで「Web共有」を有効にしてください。
http://www.entropy.ch/software/macosx/php/ で最新のPHPモジュールをダウンロードすることができます。どうか、Apacheを安全な環境で立ち上げてしてください！ http://www.entropy.ch/software/macosx/mysql/ でMySQLモジュールをダウンロードできます。
一つの便利な方法はMAMPを使うことです。(MAMPは次の略から来ています: Macintosh, Apache, MysqlとPHP. 数回のマウスのクリックだけで、すぐにMac OS X用のApache, PHPとMySQLをインストールすることができます！ MAMPは、PowerBookやiMacであるかに関わらず、ローカルサーバ環境をあっという間にあなたのMac OS Xにインストールします。WindowsとLinuxの同様のパッケージのように、MAMPは無料で利用できます。)ここからダウンロードしてください: http://mamp.info/en/home.php
テンプレートの作成
完全なWebページの準備
良い素材を準備するために: 素材はあなたのWebページから持ってきます。Webページを持っていない？そういう場合は:
- WebデザイナにWebページを作ってもらいます。ドル・ポンド・円・ユーロなどと交換で。
- CSSで作られたあなたの好きなWebページから借してもらいます。(CSSDrive:http://www.cssdrive.com/ や他のフリーテンプレートを配布しているWebサイトなど、何百ものWebページがあるでしょう。ただし、Webページが無制限な使用を許可するライセンスで配布されているのでもない限り、ダウンロードしたWebページを使うためにはデザイナの許可を取ってください。)
- あるいは、MODxのリポジトリから簡単に使えるテンプレートを手に入れます。しかし、このチュートリアルで学べることは多くはなくなるでしょう。
- あるいは、すぐに開始することができるように、私がこのチュートリアルで記載した基本的なウェブページを使用してください。
あなたが、次のような知識を少しでもかじったことがあるのなら、理解の助けになるでしょう: (X)HTML、CSS、またはJavaScript (スニペットを作りたいと思っているならPHPも)
もし、なければ、本を買うか借りるかして準備し、行き詰まったときにはそれらを参考にしてください。他の機能しているXHTMLとCSSからのカット&ペーストも、他の人がどのようにそれを行ったかがわかる良い教材です。
ハンドコーディング vs 自動的なコード生成
このチュートリアルでは、あなたがHTMLエディタを使うことを想定しています。もし、あなたがそれをもっていなくても、フリーの素晴らしいコーディングエディタがいくつかあります。
Windowsユーザには:
- Crimson Editor ( http://www.crimsoneditor.com/) それから
- Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm)
Macユーザ(とWinユーザ)には;
- Nvu (http://www.nvu.com/index.php)
- Textwrangler – Macのみ (http://www.barebones.com/products/textwrangler/)
私がこのチュートリアルで推奨するのは、DreamweaverやGolive、あるいは似たようなWebオーサリングソフトを使わないということです。ハンドコーディングはより多くのことを知ることができるでしょうし、それはそれほど難しいことでもありません。ただし、MODxへコピー&ペーストした際に、いくつかのケースでそのコードを破壊することがあるという理由で、MS WriteやOOo Writer、Word Perfectなどは使わないでください。
テンプレートに何が起こったのか？
MODxの初心者の多くが質問し続ける疑問です: ファイルはどこにありますか？ ほとんどのドキュメントは、あなたが見ることができないMySQLデータベースの中に存在します。(例えば、テンプレート、ドキュメント/ページ、スニペット、チャンク、そしてテンプレート変数) いくつかのファイルは、あなたが見ることができるサーバ上にあります。(例えば、画像、CSSファイル、音声ファイル、動画など)
サンプルページ
このチュートリアルのために使うことができるサンプルページは、わたしが始めたページデザインですが、全く使っていません。プレーンで2カラム、固定幅のWebページです。
このページには以下のものがあります:
- ブランディングエリア (一般的にヘッダーと呼ばれるもの)
- 2/3から1/3の比率の2カラムのコンテンツ
- サイドメニューとトップメニュー
- サイト情報ボックス (一般的にフッターと呼ばれるもの).
このページは、テーブルを使うことなく、純粋なCSSによって作成されています。このチュートリアルでは、あなたが達成したことがよくわかるようにできるだけ無駄のない1ページを使用します。ロゴの写真はメキシコのマサトランのリゾートで撮りました。そして、ロゴは私のサイトからです。もし、同じくらいのサイズのもっと良い画像があれば、それを使ってください: 少なくとも、790ピクセルの幅と240ピクセルの高さ。画像のファイルサイズを読み込みが遅くならない程度に抑えてください。
HTMLマークアップの開始
完成後には、作成したページは以下の画像のようになるでしょう。
それでは、不要なマークアップを削除して、MODxテンプレートへの改装を始めましょう。 改装を始めるために、Firefoxで上記のページを表示することができる完全なマークアップ(CSSではありません)がここにあります。このチュートリアルのために、このページの以下のコードをコピーして、あなたのエディタにペーストしてください。
ノート: どこへもリンクはされていませんが、それ以外は機能するWebページです。メニューも機能します。
Head要素の修正
最初に、head要素のmeta要素以下に次の1行を付け加えます:
<base href="[(site_url)]"/>
これは、画像などを探すために使われるベースURIを設定しています。URIは、あなたがMODxの設定で入力したMODx / Access / templates / の情報から取得されます。
それから、"title"タグで囲まれているテキストを削除して、2つのMODxタグに置き換えます。
<title> [*pagetitle*] | [(site_name)]</title>
これはページタイトルとサイト名をそれぞれ取得します。ドキュメントの"作成/編集"で入力する"タイトル"と、ツール->MODx設定で設定するサイト名です。(これは後でもっとすっきりすることを約束しますから、少し待ってください。)
次に、あなたのCSSファイルを参照するために、テンプレートHTMLのhead要素の中に次の行を追加します。
<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/tutorial/css/style.css" />
ナビゲーションの修正
次のナビゲーションのためのdiv要素内のコードを全て削除します。
<div id="navigation"> <ul> <li class="active"><a href="/home" title="Home" >Home</a></li> <li><a href="/blog" title="Blog" >Blog</a></li> <li><a href="/services" title="Services" >Services</a></li> <li><a href="/search" title="Search" >Search</a></li> <li><a href="/misc" title="Misc." >Misc.</a></li> <li><a href="/about" title="About" >About</a></li> <li class="last"><a href="/login" title="Login" >Login</a></li> </ul> </div><!-- end of navigation -->
そして、次のように置き換えてください。
<div id="navigation"> [!Wayfinder? &startId=`0`!] </div><!-- end of navigation -->Wayfinderについて説明します: これはスニペットです。そして、次のパラメータを持っています: startid=`0`
これは、Wayfinderに、ドキュメントID 0のドキュメントからメニューを始めるように伝えています。もし、指定したドキュメントIDがなければ、次に大きな数字のドキュメントIDがデフォルトになります。そうして、ドキュメントを表示するためのメニューボタンを作成します。(ドキュメントツリーで薄く表示されているものは含まれません。)
あなたはこう考えていることでしょう: "メニューはどのようにして以前と同じように見えるのでしょうか？" もし、改装前に、ナビゲーションメニューがCSSでスタイリング・配置されていた場合、Wayfinderスニペットは、そのCSSをそのまま使ってメニューを作成します。メニューは、ドキュメント / ページ(MODxのドキュメントツリーから見ることができます)の"メニュータイトル"をもとにしたメニューのタイトルとリンクから作られます。(#The MODx Managerも参照してください。) 全てのパラメータが書かれた完全なドキュメントがあります: Wayfinder homepage
[edit]より複雑なナビゲーションの修正
とても素晴らしいと思ったならば、それはたしかにそうでしょう。 しかし、あなたが魔法の杖(magic wand)を振ってみても、魔法が使えないということもあります。 Wayfinderは、MODxの管理コントロールパネルでチャンクとして登録されているいくつかのテンプレートをもとに、整形したテキストを出力します（ほとんどの場合、順不同リスト=ul要素です）。 運が良ければ、Wayfinderはそのままで動作しますが、チャンクとWayfinderのスニペットコールに少しの変更が必要になる例があります。 ここに、このスニペットがどのように動作するかの理解を助ける二つの例があります：
選択された(現在、見ているページの)メニューのクラスをclass="active"ではなく、class="selected"にするには？これは簡単です。 新しいクラス名を指定するためのパラメータをWayfinderのスニペットコールに追加するだけです：
[!Wayfinder? &startId=`0` &hereClass=`selected`!]メニューを順不同リストで、それぞれ異なるクラスまたはIDを持たせるには？ あるいは、順不同リストを全く使わないようにするには？ MODxのマネージャからリソース->リソース管理->チャンクと進み、次のようなチャンクを新規に作成するか、複製して作成します。
チャンク名: my.OuterTpl<ul class="my_style"> [+wf.wrapper+] </ul>チャンク名: my.InnerRowTpl
<li[+wf.classes+]> <a href="[+wf.link+]" title="[+wf.title+]"><em>[+wf.linktext+]</em> </a>[+wf.wrapper+] </li>チャンクの名前は何でも構いません。ただ、私はWayfinderのパラメータ名に合った名前にするようにしています。 何が起こるかここで説明しておくと、my.OuterTplチャンクは[+wf.wrapper+]を含んでいますが、これはmy.InnerRowTplチャンクに置き換えられます。テンプレートの中に存在するテンプレートと言えます。
Wayfinderのデフォルトの動作では、メニューの生成にはWayfinder自身が持つテンプレートを使用しますが、その代わりにチャンクを使うように指示することができます：
[!Wayfinder? &startId=`0` &hereClass=`selected` &outerTpl=`yui.OuterTpl` &rowTp=`my.InnerRowTpl`!]&outerTplと&rowTpパラメータで、使用するチャンクの名前を指定することに注意してください。 最初は、このような仕組みをなんとも不思議に感じるかもしれません。しかし、ここで挿入したスニペットを動作させてみれば、この仕組みが多くの柔軟性をもたらしてくれることがわかるでしょう。 このように、多くのメニュー・スタイル（例えばテーブル、その他のクラスなど）のためにチャンクを作ることができます。そして、それら全ての出力のためにWayfinderを使うことができます。
[edit]メニューの並び方
以下は、CSSファイル"style.css"の中にあるdiv#menuとdiv#navigation用のCSSスタイルです。
"style.css"はこのページの一番下にあります。
水平メニュー:
#menu ul li { display: inline; }と垂直メニュー:
#navigation ul { display: block; }基本的に、水平メニューと垂直メニューの違いは、ul要素のCSSスタイルにあります。水平メニューのul要素は"display: inline;"です。そして、垂直メニューのul要素は"display: block;"です。（実際には、デフォルトのままでブロックボックスとして表示されます。） これがメニューにどう影響するかを見るために、スタイルの一部を変えて遊べるように、私はファイル"style.css"にコメントを入れておきました。 （CSSに精通していない限りは、どうか値を変えるだけにしておいてください。）
ここでの基本的な使い方以外に、Wayfinderが何をするものか確かめるためにWayfinderのパラメータでも遊んでみても構いません。 これはメニューを開かなければなりません。Wayfinderのドキュメントはここにあります: http://wiki.modxcms.com/index.php/Wayfinder インストールされたMODxのデモ・サイトを見れば、各ページを確かめることができます（MODxマネージャーの左側にあるドキュメント/フォルダ・ツリーで確認できます。例えば、「Home」、「Blog」、「Design」、「Register with us」など）
[edit]バックアップ
バックアップ,バックアップ,バックアップ,バックアップ,バックアップしましょう!
ベストのコード(作り直すのには時間がかかることでしょう)を上書き/消去/削除したとしても、それを復活させるようなOSモーメントはありません(もし、OSモーメントを知らなければ、私にプライベート・メッセージで知らせてください。)。(変更を取り消すためにCtrl+Zは試してみましたか？)
このチュートリアルで使われるすべてのMODxタグの名前と構文については解説しません。 MODxサイトにオンライン・ドキュメントがあるので、後で、あなたはそれらを吟味できます。
[edit]MODxマネージャ
少し、寄り道をしましょう。 これは、一見しただけでは気づかない、MODxマネージャのドキュメント・ツリーのいくつかの特徴を説明する良い機会です。 ページ・タイトルの横にある括弧内の数字は、MODxで作成されたドキュメントに付けられるドキュメントIDです。これは、リンクなどのためにそのページを特定するユニークな(固有の)ものです。 ちなみに、ドキュメントの編集ページの"メニュー・タイトル"で入力したメニュー・タイトルは、Wayfinderでのメニューの作成などに使われます。
いくつかのページ・タイトルがグレーアウトされている(薄く表示されている)ことに気づくかもしれません。 ドキュメントを作成するとき、ドキュメントの“作成/編集”ページには“メニューに表示”のチェックボックスがあります。 グレーアウト表示は、色々な理由でこのドキュメントをメニューへは表示しない設定であることを意味します。
このドキュメントの“作成/編集”画面は、いくつかの方法で開くことができます;
MODxマネージャーで新しいドキュメントを作成するには、 MODxマネージャ->サイト->ドキュメントの作成を選びます。 あるいは、ツリーのドキュメント名を右クリックして表示されるコンテキスト・メニューから"ドキュメントの編集"を選びます。（ドキュメントのページでも表示されます。これは既存のドキュメントを編集するのにも使われます。）
すぐに改装に戻ります; どこまで進んでましたっけ？ ああ、ナビゲーションを修正したところでしたね。次はコンテンツです！
[edit]コンテンツの修正
表示される内容を含むdiv要素の中身を全て削除します。どうやってコンテンツの中身を作成していくかは、まだ気にしないでください。後で説明します。そうしたら、次のコードのように、削除した部分をテンプレート変数(TV)の[*content*]に置き換えます。
<div id="content-main"> [*content*] </div> <!-- end content-main -->
ほら！とっても簡単だったでしょう？コンテンツ！！！ "どうやって戻すの？どこにいったの？ページがちゃんとマークアップされていたとしたら、それは削除しなくてもよかったんじゃなかったの…コンテンツはそういう部分だったよね"
相棒、心配は無用だ！すぐにやってくるよ。
[edit]サイト情報の修正
さて、サイト情報です。(ところで、私はWeb 2.0的なセマンティック・マークアップを始めるために、ベストをつくしていました。セマンティック・マークアップは、部分、部分で(その意味を表すのに)最も適した言葉・要素を記述することでマークアップしていきます。"Header"、"leftColumn"、"footer"は配置を表す名前ですが、"branding"、"content-sub"、"site-info"はそれらが何なのかを表す名前です。これらはアクセシビリティやスクリーン・リーダーに配慮する面でも重要です。もし、あなたがWeb 2.0的なアクセシビリティやセマンティック・マークアップに興味があれば、Andy Clarkeのページで続きを読んでみてください: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
もし、Andy Clarkeが誰だか知らないなら、グローバルなWebの世界に注意を払っていなかったのでしょう。さらには本屋でも。コンピュータコーナーでAndy Clarkeの"Transcending CSS"を探してみてください。2006/2007年の冬、もっともホットに売れたコンピュータの本です。
オーケー、さあサイト情報(site-info: かつてのフッター、footer)です。オペ、開始:
<div id="site-info"> <p>Copyright© 2007 CixDegrees.com - Powered by MODx - Hosted by (mt)MediaTemple</p> </div> <!-- end of site-info --> </body> </html>次のように修正します:
<div id="site-info"> {{cixfooter}} </div> <!-- end of site-info --> </body> </html>
待って。実際の情報はどこへ行ってしまったの？
はい、そのいくつか(各ドキュメントで共通の情報)はチャンクへの移植手術を施しました。
チャンク？チャンクとはコード/HTMLの断片です。MODxで、Webページの指定した場所に挿入、表示したいコード/HTMLです。 なぜかって？Webページのコード/マークアップをページの内容から切り離すことができるからです。たとえば、cixfooterチャンクは、次のようなマークアップから成ります：
<p>Copyright © 2007 CixDegrees.com Design by hjd <a href="http://www.cixdegrees.com">cixdegrees.com</a> Powered by MODx Hosted by (mt) Media Temple</p>テンプレートに残したらどう？
そうすることもあるし、それは見通しも良いでしょう。ただ、唯一の問題は、いくつかの異なるサイトを持っていて、ドキュメント（ページ）とサイト情報の変更が必要になった場合に、どんな些細な変更であったとしても、個々のドキュメントのサイト情報を修正しなければならなくなることです。
このようなチャンクを使う方法なら、一つのサイト情報のチャンクを持って、それを呼び出すだけで済みます。たとえドキュメントの変更が必要になったとしても、一カ所(チャンク)を変更するだけで済みます。
いつでも、すっきり(Neat)
それはMODxの全てについて言えることです。 もちろん、あなたがテンプレートを作るときは、全ての変数はあなたのサイトの構造に合わせて作ることになるでしょう。(例えば、
{{cixfooter}}を{{yourfooter}})へ読み変えるなど。)
以下の手順でチャンクを作成します: リソース->リソース管理->チャンク->チャンクの作成 チャンクの名前に"cixfooter"と入力します。(ダブルクォーテーションは不要です) 説明を入力して、チャンクのカテゴリを選択します。それから、先ほどのHTMLの断片をコピーし、"チャンクコード(html)"にペーストします。保存をクリックします。
今のところは、必要なチャンクはこれで全てです。
[edit]結果
完成したMODxのWebページテンプレートがこれです。(ドラムロール、プリーズ) MODxのタグを強調して表示しています(訳注: このWikiではされていません)。
そんなに多くありませんね？後で追加するものがいくつかあります。でも、今のところは、これが全てです。あなたに必要なのは、それが動作するか、どのように見えるのかという"概念の試し刷り"です。
そうしたら、ここへコンテンツを戻していきましょう。
[edit]アルフィーに関するなにか？ プレイスホルダ(訳注: ???)
ここではMODxで使われるタグの一部を紹介します。MODxで使われるタグについての完全なリファレンスはPlaceholders_used_by_MODx_Pages_and_Templatesを参照してください。
- [(site_url)] - MODxのインストール時に決めたサイトURLに置き換わるセッティングタグです。
- [*pagetitle*] - マネージャの"ドキュメント設定"で入力したページのタイトルに置き換わる“Template Variable”(テンプレート変数)です。
- [(site_name)] - MODxのイントール時に決めたサイトの名前に置き換わるセッティングタグです。
- [(base_url)] - MODxのインストール時に決めたサイトのベースURLに置き換わるセッティングタグです。
- [!Wayfinder? &startId=`0` &level=`1`!] - 上の方で説明しました。
- [*content*] - リッチテキストエディタを(TinyMCEやFCKEditor)を使って入力することができるドキュメントの内容に置き換わるテンプレート変数です。内容はテキスト、HTML、画像、様々なメディアなどで構成することができます。
- [!Wayfinder? &startId=`0`!] - Wayfinder は上でも説明したように、ナビゲーションのためのメニューを生成するスニペットです。
- {{cixfooter}} - これはchunk(チャンク)です。その場所に整形されたテキストやHTMLを挿入します。
[edit]動かす準備をしてみよう
テンプレートを作るために、上の方で修正したHTMLを持ってきて、それをMODxに保存します。その方法はこうです:
MODxマネージャにログインします。マネージャを開くと上部にタブが表示されます。
- "リソース"をクリックします。
- 下の段のタブから"リソース管理"をクリックします。
- テンプレートをクリックします。
- "テンプレートの作成"をクリックします。
以降、私は次のように書くことにします: リソース->リソース管理->テンプレート->テンプレートの作成
あなたのコーディングエディタから、テンプレートをコピーして、"Template code (html)"と書かれている部分にペーストします。まだ保存しないでください。
少し上の"テンプレート名:"の部分にテンプレートの名前を入力します。私は"チュートリアル"にしました。なんでもあなたの好きな名前にして構いません。 " "説明:"の部分になんでも好きな説明を入力します。私はこのように入力しました: "遊ぶためのチュートリアルのテンプレート"。 それから、テンプレートを分類するためのカテゴリーを選びます。私は分類したいカテゴリが見つからなかったので、"カテゴリ作成:"に"テンプレートのデモ"と入力しました。 さあ、"保存"ボタンをクリックします。
次に、サーバ上のMODxのルートフォルダへ行く必要があります。(リモートサーバ上なら次のようになるでしょう: /public_html/ドメイン名/。ローカルサーバー上なら次のようになるかもしれません: xampp/htdocs/modx-0.9.6.1p2/).
それから次のように進みます: ドメイン名(MODx-0.9.6.1.p2)/assets/templates/。そして、templatesフォルダの中に新しいフォルダを作成します(例えば、"tutorial"という名前のフォルダです)。それから、このtutorialフォルダの中に2つの新しいフォルダを作成します; "css"フォルダと"images"フォルダです。
画像フォルダ(assets/templates/tutorial/images)の中にロゴ画像、cixlogo-tropic.pngをコピー/転送します
ここから保存してください: Media:cixlogo-tropic.png
CSSファイルをコピーします: あなたのコーディングエディタにあるstyle.cssです。
ここから保存してください:Media:style.css
MODxがロゴ画像を見つけることができるように、CSSファイルを修正する必要があるかもしれませんが、もし、あなたが私が提案したフォルダ名と画像を使っているのなら、なにも修正する必要はありません。
CSSフォルダの外にあるロゴ画像を、CSSファイルから呼び出して反映させるために、相対的なURLに修正しなくてはなりません:
/* ===== BRANDING ===== */ div#branding{ height:250px; background: url(../images/cixlogo-tropic.png) no-repeat 0 0; }(1つのドット(.)はcssフォルダを指しますが、さらに一つ上のtutorialフォルダを参照するためにもう1つのドット(.)を書いています。それから、imagesフォルダを参照するために、最終的に2つのドットとスラッシュになります。)
"style.css"ファイルをコピーして、assets/templates/tutorial/css/の中へ"style.css"としてペースト/転送します。 CSSファイルを洗練して、きれいにするための多くの作業が必要になることがあるかもしれません。でも、それはそのままでも動作します。
[edit]フライト前のチェックリスト
今、私たちがいる場所: オーケー、すでに私たちのMODxのなかにはテンプレートがあります。
- テンプレートHTMLの中にはstyle.cssへのリンクがあることを確認しました。
[(base_url)]assets/templates/tutorial/css/style.css
- tutorial/cssフォルダの中にstyle.cssをコピー/転送したことを確認しました。
- tutorial/imagesフォルダの中にcixlogo-tropic.pngをコピー/転送したことを確認しました。
- MOdxにサイト情報チャンクを作成して、それをcixfooterという名前にしたことを確認しました。
さあ、マネージャ->ツール->MODx設定へ行って、次の情報を入力しましょう;
- 画面の上のほうにあるサイト名: サイトの名前を入力します。
- それから、下へスクロールしてデフォルトテンプレートへ行き、ドロップダウンリストからTutorialテンプレートを選びます。
- それから、全てのドキュメントが既定のテンプレートを使用するようにリセットするのラジオボタンを選びます。
- 一番上までスクロールして保存ボタンをクリックします。
サイトタブをクリックしましょう。
[edit]テンプレートを動かす
- さあ、飛び立とう、モニターを飛び越えて、3回転、かかとをタッチ！
- それから、プレビューボタンをクリックだ
ジャジャーン! 生きているんだなあ! 見事なサイトだ！
みすぼらしい栄光だ、コンテンツエリアにはまだ何もないじゃないか。でも、メニューを見てみて！メニューをクリックすれば、MODxの全てのデモページへ連れて行ってくれることに気づくでしょう。見るべきものはまだ多くはありません。でも、これはスタートです。メニューを楽しみましょう。– いくつかのページが壊れていることに気づくかもしれません。CSSファイルをそれらのページのために洗練しなければいけないでしょう – あるいは、ひょっとしたら、まだstyle.cssにそれらのためのスタイリング情報がないのかもしれません – でも、それは柔軟です。
大事なことは: 私たちは、今、動くテンプレートを持っていて、どうやってそれをしたかを知っていることです。
[edit]MODxマネージャ入門
MODxマネージャー(以後、マネージャーと言います)を開きます。ドキュメント・ツリーから、"ホーム"をクリックして、ポップアップ・メニューから"ドキュメントの編集"を選びます。 このページの情報を見て、入力フィールド/テキストエリア内のテキストの全体または一部を変えても構いません。
ページ上にいくつかの項目があるのに気付きます;
一つは"テンプレート"です。このページで使うテンプレートを選択するためのものです。 必要ならば、それぞれのページで異なるテンプレートを選ぶことができますが、サイト全体のデザインの統一性はなくなるでしょう。 今のところ、すべてのページのテンプレートは"tutorial"です。ツール->MODx設定で、テンプレートを選ぶ際に"全てのドキュメントが既定のテンプレートを使用するようにリセットする"を選んだのを覚えているでしょう(思い出してください)。
"メニュータイトル"はメニュータイトルです。このページへのメニューボタンのタイトルになります。
"メニューインデックス"は、メニューでのドキュメントの表示順を設定します。 それぞれのドキュメントを開いて、この数字を変えることで、メニューの順番を変更できます。 ホームは通常#1です。
"メニューに表示"は、ドキュメントがメニュー中に表示するかどうかを設定します。 例えばメニューで表示する必要がないドキュメントがあります; サンキューページや404 Not foundページです。チェックボックスにチェックがついていないことを確認してみてください。
“Document parent” Where in the tree do you want the document to be? For organizational reasons you will probably need to change the “Parent” document for this document and you do it here. There are two ways to select the parent doc, just accept the default parent or click on the button and then in the tree click on the doc you want to be this doc's parent. Simple. You can later change the parent if it suits your needs.Now drop down below the text entry box to “Editor to use” On a default install of MODx you will probably only find “None” and “Tiny MCE” . What the MODx install documentation neglects to tell you is that you should download and install the powerful FCKEditor (all one word – looks slightly obscene doesn't it?) Get it here: http://www.fckeditor.net/ (it's free)
After it is installed you will find the FCKEditor in the drop-down list as well. It is a nice editor, with very nice content insertion features. It can take a while to learn all the ins and outs of it. The TinyMCE editor has some nice features to use during site development; it allows you to edit content from the web. For this tutorial select the FCKEditor editor.
Now for the Pièce de résistance! While you have the document edit screen open, note the tabs at the top of the page. We have been working in the “General” tab. Go to the “Preview” tab and note how Quick Edit has placed small gray buttons at various places on the page view. When you click on them, they allow you to edit content directly. For example click on the gray button labeled “content”. (there are two places you could do that; at the top of the page in the QE button bar, and lower down on the page note the button place at the end of the current content text labeled “<< edit content”.
Clicking on the top button will present you with a list of options you could want to edit, while the button near the text will directly open a pop-up window with a rich text editor. Just in-case you are wondering on how to get the Quickedit menu off your page – go to the Quickedit bar and click on the right side “Go” and take the “logout” item from the menu. Good bye Quickedit. Start entering your content. Type, type, type. Come on you wanted “content”! - keep typing.
How to get your content looking like you want it: In the document tree, right click on the document you want to work on the content of an select “edit” from the context menu. Use the formatting features of FCKeditor to enter text, images, media and some html markup. You will have to read up on the editor tool bar and then experiment with it. Later additions to the tutorial will include demonstrations of content entry.
[edit]CSS
I will also do some elementary css stuff; showing how to change the space around paragraphs, images, position menus etc. by adjusting the margins and padding. The css file is heavily commented for your edification and enjoyment.
[edit]Wisdom and Learning
Now is a good time to pause from our labors in the fields of Webdom and go to the MODx site and look up, and read some of the relevant documentation on what we have done so far.
Now that you can see it work, the docs will make more sense. Here is your homework:
- Research what [(site_url)] is for and what kind of MODx tag & it's syntax is. (a Setting)
- Research what [*pagetitle*] is for and what kind of MODx tag & it's syntax is.
- Research what [(site_name)] is for and what kind of MODx tag & it's syntax is.
- Research what [*content*] is for and what kind of MODx tag & it's syntax is.
- Research what [!Wayfinder? &startId=`0`!] is for and how it works & what it's syntax is. Look up the options we could have used. Experiment.
- Research what {{footer}} is for and what kind of MODx tag & it's syntax is.
For additional study (and you thought you were done!) look up, and read the documentation on the following subjects:
- Wayfinder (the menu snippet)
- Ditto (used for part of blogging)
- NewsPublisher (same)
- Jot (keeps blog comments in order.)
- AJAX Search (duh!)
- Breadcrumbs (track present page location and show it for your user.)
- Maxi Gallery (images on your site)
- Maxi gallery Solo (same)
- SmoothGallery (same)
- Sitemap (search in the forum) (for Google spider help)
- See Friendly URLs Guide (same)
- See Basic Blog (just to know how)
[edit]Adding Features
OK on with the show! How about adding some breadcrumbs (are we there yet?). Simple. Copy some code from the Breadcrumbs documentation and there we are.
<div id="breadcrumb">[!Breadcrumbs? &maxCrumbs=`2` &showCrumbsAtHome=`0`!]</div>and paste it into the template.html so it will show up some place, for example, up high on the page. Looking at the page in the browser, it looks like there is room at the top of the branding div above the logo image. Here is what I mean by that; if you look in style.css at the “branding” div:
div#branding{ height:250px; background: url(../images/cixlogo-tropic.png) no-repeat bottom; }You will note that the height is 250 pixels but the logo image is only 240 pixels high giving us 10 px at the top to play with.
If you are not yet familiar with css, what this div (think of it as a box) tells us is: it has a height of 250 pixels and since the image it contains is 770px wide, it is by default 770px wide also. The background of this div, is set to an image ( cixlogo-tropic.png), it doesn't repeat, and is placed at the bottom of the div box.
Let's put the breadcrumbs there and see if it works.
<div id="branding"> [!Breadcrumbs? &maxCrumbs=`2` &showCrumbsAtHome=`0`!] </div> <!-- end of branding -->It is a snippet, and the call is to build a breadcrumbs trail for a maximum of two levels deep (a page and it's first child level) and do not show crumbs when on the home page. OK? There are plenty more breadcrumbs parameters for you to play with in the breadcrumbs documentation. Click on Preview and . . . Hmmmmm! That's ugly!.
The font is too large, and it pushed everything down when it displayed. We can cure that. Let's surround the breadcrumbs call with a div so that we can style it with css. First add the following markup (breadcrumbs div) in bold to tutorial.html:
<div id="branding"> <div id="breadcrumbs"> [!Breadcrumbs? &maxCrumbs=`2` &showCrumbsAtHome=`0`!] </div> <!-- end of breadcrumbs --> <div id="menu">we will copy some styling script from another document that works and append it onto the end of the style.css file.
/* ===== Breadcrumb ===== */ #breadcrumbs { width: auto; /* makes the div the entire width of the surrounding container.*/ height: 0.6em; font-size: .6em; color: Black; }Save the css file and then do an F5 to reload the page in the browser and – It works! Quickedit is in the way but you can see the breadcrumbs behind it. The css needs to be tweaked for position and font size and perhaps color – but it works. Now go read the Breadcrumbs docs and see what else you can do with it.
[edit]Still more additions
We are beginning to dress out the page now. Let us add something into the content-sub div under the navigation. Perhaps some blog summaries, or news headlines. Copy the code below.
<h3>Stuff</h3> <p>[[Ditto? &summarize=`3` &total=`3` &startID=`2` &tpl=`news`]] </p> </div> <!-- end of content-extra -->And paste it in the template just under the end of the "navigation" div.
What do you know? I works! The text that shows up for "summarize" in the Ditto call is whatever you typed into the "Summary (introtext)" box of the create/edit document->general screen.
Now we are on the way to finishing this page. Obviously there are some warts to be taken care of and I hope to show how to fix most of them.
[edit]Conclusion
This should answer most of your questions about how to get started with MODx and further enhancing the page is left for an exercise for you.
Enjoy MODx.
