Altsysでテンプレート編集をしよう のソース :: xoops123

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

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

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

**テンプレートをカスタマイズする場合、次の方法があります。 [#pb1f18f0]
１　モジュールのテンプレートを直接編集する
２　AltsysでDBテンプレートを編集する
３　テーマ下にカスタマイズしたモジュールのテンプレートを配置する

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

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

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

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

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

#ref(site://uploads/elfinder/altsys_image004.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image008.jpg,center,mw:589,mh:589)


「オリジナルファイル」というのは、文字通りモジュールが持っているファイルベースのテンプレートで、picoのようなd3モジュールの場合は、
 XOOPS_TRUST_PATH/modules/pico/templates
のテンプレート群という訳で、XOOPSでは、テンプレートはファイルのまま利用されるのではなく、キャッシュとして読み込まれてデータベース上で動作する（表現が変かな？）ようになっており、それが「DB-default」ということになります。

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

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

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

**カスタマイズ用のテンプレートセットを作る [#ybba4675]

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

#ref(site://uploads/elfinder/altsys_image006.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image010.jpg,left,mw:201,mh:201)

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

#ref(site://uploads/elfinder/altsys_image014.jpg,center,mw:588,mh:588)

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

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

#ref(site://uploads/elfinder/altsys_image016.jpg,left)


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

#ref(site://uploads/elfinder/altsys_image018.jpg,center,mw:589,mh:589)

&ref(site://uploads/elfinder/altsys_image020.jpg,left,mw:68,mh:68);でも、「操作」欄を見ると「default」に緑のマークがついており、現在はこれが利用されていることが判ります。
つまり、このままでは「custom」側をいくら編集しても反映されないということですね。

ということで、サイトで利用されるテンプレートセットを「custom」に変更しましょう。
&ref(site://uploads/elfinder/altsys_image022.jpg,left,mw:72,mh:72);「custom」の右端、「操作」欄にある「選択」ボタンを押してください。

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

#ref(site://uploads/elfinder/altsys_image024.jpg,center,mw:588,mh:588)

**カスタマイズ用テンプレートセットの使い方 [#k6ce546b]

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

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

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


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

#ref(site://uploads/elfinder/altsys_image026.jpg,center,mw:589,mh:589)


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

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

#ref(site://uploads/elfinder/altsys_image028.jpg,center,mw:589,mh:589)

***テンプレートを複製・編集する [#q3df8811]

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

#ref(site://uploads/elfinder/altsys_image030.jpg,center,mw:589,mh:589)

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

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

#ref(site://uploads/elfinder/altsys_image032.jpg,center,mw:400,mh:400)


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

#ref(site://uploads/elfinder/altsys_image034.jpg,center,mw:588,mh:588)

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

#ref(site://uploads/elfinder/altsys_image036.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image038.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image040.jpg,center,mw:588,mh:588)

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

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

#ref(site://uploads/elfinder/altsys_image042.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image044.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image046.jpg,center,mw:589,mh:589)

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

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

#ref(site://uploads/elfinder/altsys_image048.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image050.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image052.jpg,center,mw:589,mh:589)

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

**修正箇所の反映状況 [#mebfc89b]

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

#ref(site://uploads/elfinder/altsys_image054.jpg,center,mw:589,mh:589)

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

#ref(site://uploads/elfinder/altsys_image056.jpg,center,mw:589,mh:589)

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

• XOOPSでWebサイトを作ろう/カスタマイズ/Altsysでテンプレート編集 のバックアップ一覧^[4]
• XOOPSでWebサイトを作ろう/カスタマイズ/Altsysでテンプレート編集 のバックアップソース(No. All)
  • 1: 2013-01-14 (月) 15:40:40^[5] 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 marine^[6]