xoops123さあ、いっしょに XOOPS はじめましょう!

xoops123

Altsysでテンプレート編集をしよう anchor.png

altsys_image002.jpgXOOPSにおける強力なユーティリティーとして、Altsysがあります。今や必須となっているモジュールで、色々な機能を持っており、その中のひとつにテンプレート管理があります。
このテンプレート管理では、データベース(DB)上のテンプレートが編集できるなど、ブラウザだけでカスタマイズすることが可能となっており、非常に便利です。

Page Top

テンプレートをカスタマイズする場合、次の方法があります。 anchor.png

1 モジュールのテンプレートを直接編集する
2 AltsysでDBテンプレートを編集する
3 テーマ下にカスタマイズしたモジュールのテンプレートを配置する

この場合、1~3の順でオーバーライドされるので、最終的にテーマ下テンプレートがある場合は、1と2でいくら編集しても反映されないので、注意が必要です。
また、テーマのヘッダでCSSが読み込まれる順番にも注意した方が良いでしょう。

picoなどでは、モジュールのCSSもデータベースに読み込まれるので、Altsysでの編集が可能となっているとなているのですが、テーマのヘッダでモジュールヘッダの読み込み後に別途CSSが読み込まれる設定となっている場合は、最後に読み込まれたCSSでオーバーライドされるのです。これを利用すると、そのテーマだけにCSSを適用するということも出来るのですが。。。

私の場合、テーマ下テンプレートを使って、モジュールページについてもテーマの雰囲気に合わせることも多いのですが・・・通常は、Altsysのテンプレート管理機能を利用して、DBテンプレートを変更することでカスタマイズします。この方法の場合、変な状態になってもサクッと元の状態に戻すことができるのでお薦めです。

Page Top

テンプレート管理 anchor.png

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

altsys_image004.jpg

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

altsys_image008.jpg

「オリジナルファイル」というのは、文字通りモジュールが持っているファイルベースのテンプレートで、picoのようなd3モジュールの場合は、

XOOPS_TRUST_PATH/modules/pico/templates

のテンプレート群という訳で、XOOPSでは、テンプレートはファイルのまま利用されるのではなく、キャッシュとして読み込まれてデータベース上で動作する(表現が変かな?)ようになっており、それが「DB-default」ということになります。

つまり、一旦、XOOPSが動作を始めると「DB-default」側が利用され、「オリジナルファイル」をローカルで編集してFTPでアップロードしても、「DB-default」に反映させる動作を行わない限り自動では反映されないということですね。

もし、反映させたいならキャッシュをクリアするか、反映したい「オリジナルファイル」を「DB-default」にコピーするか、です。でも、正直言って、その方法は非常に非効率かつ面倒ですね。

では、どうするのか? といえば・・・
Altsysには、テンプレートを編集できる機能があるので、それを使えば良いのです。

Page Top

カスタマイズ用のテンプレートセットを作る anchor.png

でも、「DB-default」を直接編集するのはお薦めできません。
テンプレートをカスタマイズするなら、別途、カスタマイズ用のテンプレートを用意して、それを編集するのがお薦めです。

altsys_image006.jpg

ここでは、新しく作成するテンプレートセット名を「custom」とします。

altsys_image010.jpg

テンプレート名欄に「DB-custom」が増えました。

altsys_image014.jpg

さて、「DB-custom」を編集しましょうか~ って、実はこれだけではまだダメなんですよね。実は、もうひと手間が必要です。

「互換レンダーシステム」の「テンプレート管理」に移りましょう。

altsys_image016.jpg

テンプレート管理ページを見ると、「テンプレートセット一覧」が表示され、「default」と先ほど作成した「custom」の2つがありますね。

altsys_image018.jpg

altsys_image020.jpgでも、「操作」欄を見ると「default」に緑のマークがついており、現在はこれが利用されていることが判ります。
つまり、このままでは「custom」側をいくら編集しても反映されないということですね。

ということで、サイトで利用されるテンプレートセットを「custom」に変更しましょう。
altsys_image022.jpg「custom」の右端、「操作」欄にある「選択」ボタンを押してください。

はい。これで、データベース上で利用されるテンプレートセットが「custom」に切り替わりました。

altsys_image024.jpg
Page Top

カスタマイズ用テンプレートセットの使い方 anchor.png

でも、ちょっと待ってください。先ほど作成した「custom」というテンプレートセットって、空の状態じゃなかったかな?

はい。そのとおり。空です。というか、空の方が良いのです。
テンプレートセットが空の場合、自動的に「default」側が利用されるため何も問題はありません。

そして、「custom」側には編集対象とするテンプレートだけをコピーして編集するのが良いのです。そうすると、「custom」側にあるテンプレートはカスタマイズしたものだけがあるという状態になり、ひと目でカスタマイズしたテンプレートが判りますし、テンプレートをダウンロードする際にカスタマイズしたものだけがダウンロードされるので、非常に効率が良いものとなります。

では、もう一度、Altsysのテンプレート管理に移りましょう。

altsys_image026.jpg

文書箱(pico)を見てみましょう。「DB-custom」が黄色になり、これが使われていることが判ります。(しかし、見にくい色だなぁ~(^_^;) )

そして、テンプレート欄が空になってますので、現状は「DB-default」が利用されている状態ということですね。

altsys_image028.jpg
Page Top

テンプレートを複製・編集する anchor.png

では、ここでpicoの記事本文のテンプレートである「pico_main_viewcontent.html」を「DB-custom」にコピーして、これを編集することにしましょう。

altsys_image030.jpg

「編集」にチェックを入れます。

下欄の「行先」にて「custom」をプルダウンから選択し、「コピー実行」ボタンを押してください。

altsys_image032.jpg

これで、編集したいテンプレート「pico_main_viewcontent.html」が「DB-custom」側にコピーされました。

altsys_image034.jpg

編集する場合は、「編集」リンクをクリックします。編集画面になります。
このとき、「互換モジュール」の色が変わっていますが、これは気にしないで・・・
テンプレート編集:module:pico_main_viewcontent.html(custom)となっていますね?
はい。これで大丈夫です。

altsys_image036.jpg

じゃあ、これで編集・・・しても良いのですが、この画面のままで編集するのはちょっとやりにくいので、私の場合は、内容を全コピーしてからローカルのエディターに貼り付けて、そこで編集をするようにしています。

altsys_image038.jpg

WindowsならCtrl+Aでテンプレート編集枠内の文字列を全選択できるので、Ctrl+Cでコピー。そして、エディターに貼り付けます。

altsys_image040.jpg

こんな感じになるので、これを編集すれば良いと言うことですね。(ここでは、Windows用のエディター 秀丸 を使っています。)

あとは編集していけば良いのですが、私の場合は、編集ポイントが判りやすいように<{* marine add *}> のようなコメントを追加しています。(ちなみに、このコメントの書き方の場合は出力されるhtmlには反映しないので、文字数が増えるということもないので良いですね。)

altsys_image042.jpg

編集完了したら、今度は逆にエディターのソースを全選択して、Altsysの編集ボックスに貼り付けます。

altsys_image044.jpg

「更新して編集終了」ボタンを押すと、編集内容が反映されます。

altsys_image046.jpg

そうすると、先ほどコピーしたテンプレート部分が緑色に変わり、変更したことがひと目でわかります。

今回は、cssも編集するので、同様に作業していきましょう。
(ちなみに、picoの場合は、テンプレートセット内にcssがあるので、ここで編集することでウェブ上で変更・反映させることができるのです。便利ですね。)

altsys_image048.jpg

まずは、テンプレートをコピーします。

altsys_image050.jpg

はい。コピー完了。では、編集しましょう。(途中省略)
編集完了です~(^_^)v

altsys_image052.jpg

編集したものだけ色が変わって、判りやすいですね~(*^O^*)

Page Top

修正箇所の反映状況 anchor.png

では、編集した内容を確認してみましょう。

altsys_image054.jpg

今回は、記事の上に「前へ」「次へ」のような前後記事へのナビゲーションを追加して、記事下に全記事へのリンクをリスト表示、「関連記事」として全記事の表題と記事概要を表示することにしました。

altsys_image056.jpg

OKです。上手くできましたね。


新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ

Front page   Freeze Diff Backup Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 11696, today: 1, yesterday: 3
Princeps date: 2013-01-14 (Mon) 15:40:40
Last-modified: 2013-01-18 (Fri) 08:23:54 (JST) (2436d) by marine