|
1: 2013-01-14 (月) 15:40:40 marine |
| + | *Altsysでテンプレート編集をしよう [#d37f0774] |
| | | |
| + | XOOPSにおける強力なユーティリティーとして、Altsysがあります。今や必須となっているモジュールで、色々な機能を持っており、その中のひとつにテンプレート管理があります。 |
| + | |
| + | **テンプレート管理 [#x241354c] |
| + | |
| + | ここでは、picoのテンプレートを編集することにします。 |
| + | モジュールの名称を「文書箱」という名称にしています。 |
| + | |
| + | |
| + | 最初は、テンプレートは「オリジナルファイル」とちょっと文字色が黄色で判りにくいけど、「DB-default」の2つがあります。 |
| + | |
| + | 「オリジナルファイル」というのは、文字通りモジュールが持っているファイルベースのテンプレートで、picoのようなd3モジュールの場合は、 |
| + | XOOPS_TRUST_PATH/modules/pico/templates |
| + | のテンプレート群という訳で、XOOPSでは、テンプレートはファイルのまま利用されるのではなく、キャッシュとして読み込まれてデータベース上で動作する(表現が変かな?)ようになっており、それが「DB-default」ということになります。 |
| + | |
| + | つまり、一旦、XOOPSが動作を始めると「DB-default」側が利用され、「オリジナルファイル」をローカルで編集してFTPでアップロードしても、「DB-default」に反映されない限り反映されないということですね。 |
| + | |
| + | もし、反映させたいならキャッシュをクリアするか、反映したい「オリジナルファイル」を「DB-default」にコピーするか、です。でも、正直言って、その方法は非常に非効率かつ面倒ですね。 |
| + | |
| + | では、どうするのか? といえば・・・ |
| + | Altsysには、テンプレートを編集できる機能があるので、それを使えば良いのです。 |
| + | |
| + | |
| + | **カスタマイズ用のテンプレートセットを作る [#ybba4675] |
| + | |
| + | でも、「DB-default」を直接編集するのはお薦めできません。 |
| + | テンプレートをカスタマイズするなら、別途、カスタマイズ用のテンプレートを用意して、それを編集するのがお薦めです。 |
| + | |
| + | ここでは、新しく作成するテンプレートセット名を「custom」とします。 |
| + | |
| + | |
| + | テンプレート名欄に「DB-custom」が増えました。 |
| + | さて、「DB-custom」を編集しましょうか~ って、実はこれだけではまだダメなんですよね。実は、もうひと手間がひつようです。 |
| + | |
| + | 「互換レンダーシステム」の「テンプレート管理」に移りましょう。 |
| + | |
| + | |
| + | テンプレート管理ページを見ると、「テンプレートセット一覧」が表示され、「default」と先ほど作成した「custom」の2つがありますね。 |
| + | |
| + | でも、「操作」欄を見ると「default」に緑のマークがついており、現在はこれが利用されていることが判ります。 |
| + | つまり、このままでは「custom」側をいくら編集しても反映されないということですね。 |
| + | |
| + | ということで、サイトで利用されるテンプレートセットを「custom」に変更しましょう。 |
| + | 「custom」の右端、「操作」欄にある「選択」ボタンを押してください。 |
| + | |
| + | はい。これで、データベース上で利用されるテンプレートセットが「custom」に切り替わりました。 |
| + | |
| + | |
| + | **カスタマイズ用テンプレートセットの使い方 [#k6ce546b] |
| + | |
| + | でも、ちょっと待ってください。先ほど作成した「custom」というテンプレートセットって、空の状態じゃなかったかな? |
| + | |
| + | はい。そのとおり。空です。というか、空の方が良いのです。 |
| + | テンプレートセットが空の場合、自動的に「default」側が利用されるため何も問題はありません。 |
| + | |
| + | そして、「custom」側には編集対象とするテンプレートだけをコピーして編集するのが良いのです。そうすると、「custom」側にあるテンプレートはカスタマイズしたものだけがあるという状態になり、ひと目でカスタマイズしたテンプレートが判りますし、テンプレートをダウンロードする際にカスタマイズしたものだけがダウンロードされるので、非常に効率が良いものとなります。 |
| + | |
| + | |
| + | では、もう一度、Altsysのテンプレート管理に移りましょう。 |
| + | |
| + | 文書箱(pico)を見てみましょう。「DB-custom」が黄色になり、これが使われていることが判ります。(しかし、見にくい色だなぁ~(^_^;) ) |
| + | |
| + | そして、テンプレート欄が空になってますので、現状は「DB-default」が利用されている状態ということですね。 |
| + | |
| + | ***テンプレートを複製・編集する [#q3df8811] |
| + | |
| + | では、ここでpicoの記事本文のテンプレートである「pico_main_viewcontent.html」を「DB-custom」にコピーして、これを編集することにしましょう。 |
| + | |
| + | 「編集」にチェックを入れます。 |
| + | |
| + | 下欄の「行先」にて「custom」をプルダウンから選択し、「コピー実行」ボタンを押してください。 |
| + | |
| + | |
| + | これで、編集したいテンプレート「pico_main_viewcontent.html」が「DB-custom」側にコピーされました。 |
| + | |
| + | 編集する場合は、「編集」リンクをクリックします。編集画面になります。 |
| + | このとき、「互換モジュール」の色が変わっていますが、これは気にしないで・・・ |
| + | テンプレート編集:module:pico_main_viewcontent.html(custom)となっていますね? |
| + | はい。これで大丈夫です。 |
| + | |
| + | じゃあ、これで編集・・・しても良いのですが、この画面のままで編集するのはちょっとやりにくいので、私の場合は、内容を全コピーしてからローカルのエディターに貼り付けて、そこで編集をするようにしています。 |
| + | |
| + | WindowsならCtrl+Aでテンプレート編集枠内の文字列を全選択できるので、Ctrl+Cでコピー。そして、エディターに貼り付けます。 |
| + | |
| + | こんな感じになるので、これを編集すれば良いと言うことですね。(ここでは、Windows用のエディター 秀丸 を使っています。) |
| + | |
| + | あとは編集していけば良いのですが、私の場合は、編集ポイントが判りやすいように<{* marine add *}> のようなコメントを追加しています。(ちなみに、このコメントの書き方の場合は出力されるhtmlには反映しないので、文字数が増えるということもないので良いですね。) |
| + | |
| + | 「更新して編集終了」ボタンを押すと、編集内容が反映されます。 |
| + | |
| + | そうすると、先ほどコピーしたテンプレート部分が緑色に変わり、変更したことがひと目でわかります。 |
| + | |
| + | 今回は、cssも編集するので、同様に作業していきましょう。 |
| + | (ちなみに、picoの場合は、テンプレートセット内にcssがあるので、ここで編集することでウェブ上で変更・反映させることができるのです。便利ですね。) |
| + | |
| + | まずは、テンプレートをコピーします。 |
| + | はい。コピー完了。では、編集しましょう。 |
| + | |
| + | 編集完了です~(^_^)v |
| + | 編集したものだけ色が変わって、判りやすいですね~(*^O^*) |
| + | |
| + | **修正箇所の反映状況 [#mebfc89b] |
| + | |
| + | では、編集した内容を確認してみましょう。 |
| + | 今回は、記事の上に「前へ」「次へ」のような前後記事へのナビゲーションを追加して、記事下に全記事へのリンクをリスト表示、「関連記事」として全記事の表題と記事概要を表示することにしまいた。 |
| + | |
| + | OKです。上手くできましたね。 |