Altsysでテンプレート編集をしよう のバックアップソース(No.1) :: xoops123

• 差分^[1] を表示
• 現在との差分^[2] を表示
• XOOPSでWebサイトを作ろう/カスタマイズ/Altsysでテンプレート編集^[3] へ行く。

*Altsysでテンプレート編集をしよう [#d37f0774]

XOOPSにおける強力なユーティリティーとして、Altsysがあります。今や必須となっているモジュールで、色々な機能を持っており、その中のひとつにテンプレート管理があります。

**テンプレート管理 [#x241354c]

ここでは、picoのテンプレートを編集することにします。
モジュールの名称を「文書箱」という名称にしています。


最初は、テンプレートは「オリジナルファイル」とちょっと文字色が黄色で判りにくいけど、「DB-default」の２つがあります。

「オリジナルファイル」というのは、文字通りモジュールが持っているファイルベースのテンプレートで、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」の２つがありますね。

でも、「操作」欄を見ると「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です。上手くできましたね。

• XOOPSでWebサイトを作ろう/カスタマイズ/Altsysでテンプレート編集 のバックアップ一覧^[5]
• XOOPSでWebサイトを作ろう/カスタマイズ/Altsysでテンプレート編集 のバックアップソース(No. All)
  • 1: 2013-01-14 (月) 15:40:40 marine^[6]
  • 2: 2013-01-14 (月) 16:43:19^[7] marine^[6]
  • 3: 2013-01-14 (月) 19:13:51^[8] marine^[6]
  • 現: 2013-01-18 (金) 08:23:54^[9] marine^[6]