LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Wiki

CustomizeManual

Page Top

概要 anchor.png

XOOPSにおいて、テーマがサイトデザインの外枠を担当するのに対して、テンプレートは実質上のコンテンツ部分を担当します。たとえば、フォーラムモジュールでの「見出し」「題名」「投稿日時」の配置やそこにどのようなデザイン要素を絡めるかなどです。

XOOPSでは各モジュールごとに数枚から数十枚のテンプレートファイルを持っています。それらは「小分け」にされたHTMLの形式で記述され、ページ出力時にテーマ内に組み込まれることにより、ページ全体で1枚のHTMLとして成立するようになっています。そのため<head></head>や<body></body>などは無く、いきなり通常のタグで始まっています。

また、名称からその使用場所を判断でき、blockが名称に入っている場合、それはblock用テンプレートであることが想像できます。

システム用テンプレートはXOOPS2.0ではシステムモジュール内に、XOOPS Cube Legacy2.1では互換(legacy)モジュールやユーザーモジュール内にこれを持ちます。

これらの編集は管理画面から行うのが普通ですが、ローカルPC内で編集した物をアップロードするやり方も選択できます。XOOPS2.0ではシステム管理>テンプレートマネージャー、XCLでは互換レンダーシステム>テンプレート管理から編集できますが、altsysなどのテンプレート・ブロック編集に特化した管理モジュールを利用する方が使いやすくお勧めです。

Page Top

テンプレート編集の進め方 anchor.png

Page Top

XOOPS2.0.xの場合 anchor.png

【直接ブラウザ上で編集】
1)管理画面「システム管理」>「テンプレート(セット)・マネジャー」を開きます。最初は「default」テンプレートセットしかない筈ですが、これは直接変更はできません。まず、右にある「複製」をクリックしてテンプレートセットを複製し、適当な名前をつけておきます。
そのあと、一度「システム管理」>「一般設定」に行き新しく作成したテンプレートセットを「デフォルトのテンプレート・セット」に設定してください。これで準備が整いました。

2)再度「テンプレート・マネジャー」に戻ってください。複製した方のテンプレートセットに現在インストール済みのモジュールのリストが表示されていると思います。ためしにその中の「システム管理」右にある「一覧」をクリックしてください。上段にフルページ用テンプレート、下段にブロック用テンプレートが並びます。実際に編集するには、該当テンプレートの「アクション」欄にある「編集」をクリックします。すると編集フォーム画面になりますので、そのソースを書き換えた後に「送信」ボタンを押すと適用されます。実際に書き換わったかどうかはブラウザでそのページを表示して確かめてください。

【ローカルで編集後サーバ上に適用】
直接ブラウザで編集するのは結構しんどいことも多いです。また、Dreamweaverなどの作成ツールも使用できませんし、いざ送信しようとしたらタイムオーバーで勝手にログアウトされていたという泣くに泣けない場合もあります。そういった場合はローカルPCで編集してから該当ソースをサーバーアップするという方法があります。
1)テンプレートセットを複製後、「テンプレート・マネジャー」に行きテンプレートをローカルPCにダウンロードします。テンプレートセット全体をダウンロードすることもできますし、モジュール別画面に行って単体のテンプレートを1枚だけダウンロードすることもできます。
セット全体をダウンロードした場合、.tar.gzという形式で圧縮されていますので、それに対応したツールを使ってください。
※ここで勘違いしてはいけないのですが、XOOPSの場合テンプレートはモジュールインストール時にデータベースに格納されます。即ちFTPでアップロードしたモジュールディレクトリ内にある「ファイル」としてのテンプレートと、実際にXOOPSに適用されているテンプレートは別の物です。テンプレートマネージャー上で編集しても、それがモジュールディレクトリ内にあるテンプレートファイルにも適用されている訳ではないので注意が必要です。あくまでも現在適用中のテンプレートをファイルとして落とすにはテンプレートマネージャー(またはAltsys)から行ってください。

2)ローカルに落としたテンプレートファイルはお好みのツールで編集してください。ただしEUC-JPに対応していることが条件です。よってWindowsのメモ帳は使えません。また、初心者向けホームページ制作ソフトによっては勝手に色んなHTMLタグを補完してしまう物がありますので注意してください(Smarty変数の部分を書き換えてしまう場合があります)。予めそれらの機能は切っておいてからファイルを開いてください。
Dreamweaverの場合はMyXoopsExtensionsなどXOOPS用に便利なエクステンションがあります。
また、ホームページ作成ソフトのWYSIWYG機能(実際にブラウザで表示されているように見せながら編集できる機能)はCSSや画像リンクが切れるため、ほとんど使えないと思っていいでしょう。

3)編集が終わったら(その前にローカルなどに置いたテスト環境で適用させてみることが望ましいです)、サーバ上のXOOPSに適用します。テンプレートセット丸ごとをアップしたい場合は事前に.tar.gz形式に圧縮しておいてください。
セットの場合、サイト上の「テンプレート・マネジャー」トップにある「テンプレートセットをアップロードする」から、単体の場合はモジュール別画面の該当テンプレート右にある「アクション」欄の「参照」で適用ファイルを選択し、最下部の「アップロード」ボタンで適用します。
また、ローカル上で開いたファイルのソースを、直接テンプレート編集画面のフォーム内にペーストしても大丈夫です。

Page Top

XOOPS Cube Legacy 2.1.xの場合 anchor.png

【直接ブラウザ上で編集】
【ローカルで編集後サーバ上に適用】

Page Top

Altsysを利用の場合 anchor.png

Altsysでテンプレート編集を行う場合、テンプレート編集は、「テンプレート管理」画面で行います。

まず最初に現状のテンプレートセットの状態を確認しましょう。 「オリジナルファイル」と「DB-default」だけの状態なら、新規にテンプレートセットを作成することから始めます。 (オリジナルファイルとは、文字通り各モジュールのディレクトリ配下にある「実態のあるファイル」のことです。

「DB-default」とは、オリジナルファイルを読み込んでデータベースに収納されたもので、Xoopsでは「DB-default」が実際の表示に利用されると考えてください。 (いや、実際の表示は、「DB-default」のテンプレート情報を元にコンパイルされたキャッシュファイルということになりますが・・・)

いずれにしても、各モジュールのディレクトリ配下にあるテンプレートファイルを編集しても、そのままでは、実際の表示には反映されないということになります。

そこで、Altsysを使って編集を行う訳ですが、「DB-default」を編集せずに新規テンプレートセットを作成して、そこに目的とするテンプレートデータをコピーの上、編集を行うという方法が推奨されます。 これは、もし何かあっても新規テンプレートセットにコピー・編集したテンプレート情報を削除するだけで、簡単に元に戻るからです。

では、作業を始めましょう。 まずは、新規テンプレートセットの作成です。

多分、「テンプレート管理」を開くと、最初は「テンプレート操作対象モジュール : ALTSYS」の一覧が表示されていることでしょう。 その一覧の左下に「新規にテンプレートセットを作成する」という項目がありますので   ベース:(空)を選び   セット名:半角英数で任意の名前を入力  (例: DB-mydata  など) して、「新規作成」ボタンを押してください。 (ここでは、新しいテンプレートセットを DB-mydata という名称で作成したとの前提で話を進めます。)

「DB-default」の右側に、新しく「DB-mydata」の欄が出来たことと思います。

次に、テンプレートを編集したいモジュール名を上部の一覧から選ぶと、そのモジュールのテンプレート一覧が表示されますので、テンプレート一覧から編集対象となるテンプレート名の「DB-default」欄の□にチェックを入れて、一番下にある「行先」のプルダウンからDB-mydata」を選び、「コピー実行」ボタンを押してください。 右横の「DB-mydata」の欄にテンプレートがコピーされたことと思います。

次に、「DB-mydata」にコピーされたテンプレート欄の「編集」をクリックすることで、テンプレート編集画面になります。

あとは、テンプレートを編集して、「更新して編集継続」または「更新して編集終了」ボタンを押すと編集内容が反映されます。 なお、初期表示される編集画面は、編集領域(ウィンドウサイズ)が結構狭くなっていますが、編集領域の右下部分をドラッグすることで任意のウィンドウサイズに広げることが可能です。

しかし、お奨めは、編集ウィンドウに表示されているソースを全コピーしてエディターに貼り付け、エディターでじっくりと編集する方法です。 特に、最近のエディターはソースをカラー表示してくれるものもあることから、分かりやすくて便利です。

Altsysを使ってテンプレートの編集を行うコツは、空のテンプレートセットを新規作成して、編集対象となるテンプレートだけを新規作成したセットにコピー・編集するということで、新たに作成したテンプレートセットには、編集したテンプレートだけが存在するというのが正解です。 (このようにしておくと、編集したテンプレートだけをダウンロードして取得するということも可能。また、編集したテンプレートがどれであるのかも一目瞭然です。でも、ローカルのエディターで編集するなら、そこでバックアップを取る方法も簡単かと。)

Page Top

どのテンプレートを編集したら良いか分からない場合 anchor.png

Altsysの「テンプレートの高度な操作」にて、テンプレート名をコメントとして埋め込むの「送信」ボタンを押して見てください。 暫くすると完了の通知が出ると思いますが、これは Altsys が 「コンパイル済テンプレートキャッシュ」にテンプレート名をhtmlコメントとして書き込んでくれるもので、htmlのソース内容を見ることで、利用されているテンプレート名を知ることが可能となります。

htmlのソースを見る方法はご存じかと思いますが、ブラウザの画面で右クリックして「ソースを表示」を選ぶか、メニューから「表示 > ソースの表示」 などにより確認することが出来ると思います。 ソースを確認する場合、そのまま見ても結構ですが、ソースをエディタに貼り付けて見た方が見やすいでしょう。

ソースを見ると、

<!-- begin altsys_tplsadmin db:d3downloads_main_viewcontent.html -->

などという begin altsys_tplsadmin から始まるコメントが埋め込まれています。

これは、d3downloads の main_viewcontent.html というテンプレートが使われている部分になります。 つまり、Altsys でそのテンプレートを編集すると、望む表示コントロールが出来るという訳です。 もちろん、そのモジュールが独自CSSを持っているなら、CSSの編集も必要となることは言うまでもありませんが。

Page Top

テーマ下テンプレートを利用の場合 anchor.png

ホダ塾ディストリビューションに実装された プリロード HdXoopsTplHook.class.php を使うことにより、テーマ下テンプレートの実現およびSmartyプラグインフォルダの追加が可能となります。

テーマ下テンプレートとは、通常、各モジュールのディレクトリ配下にあるテンプレートを、テーマ下に作成した templates フォルダにコピーすると、HdXoopsTplHook.class.php プリロードによってテーマ下にあるテンプレートが最優先となり、これを編集することで、そのテーマ用のモジュールテンプレートとして利用できるという優れものです。 (テーマ下テンプレートは、XCLデフォルトのテンプレート編集やAltsysによるDBテンプレート編集よりも優先されるとのこと。)

Altsys等によるDBテンプレートの編集を行うと、テーマを変更した場合でも同じテンプレートが使われるため、色彩や表示サイズ等々がテーマと合わなくなることが往々にしてあります。

その場合、プリロード HdXoopsTplHook.class.php を使ってテーマ下テンプレート機能を追加し、テーマ下に templates フォルダを作成のうえ、各モジュールのテンプレートのうち、変更したいテンプレートファイル(実ファイル)をコピーして編集することにより、そのテーマを利用している時だけの表示コントロールを行うことが可能となります。 (もし、モジュールが専用の独自CSSを利用している場合、CSSの記述内容をテーマの style.css に取り込んで編集するか、モジュール用のCSSファイルを作ってテーマに合わせた編集を行ったうえで、テーマで読み込ませる記述をする必要があります。

利用に際しては、各モジュールの「編集したい」テンプレートを templates フォルダにコピーして編集するだけですが、実際のサイトで行うことは現実的ではありません。 xammp や WARP のようなローカル環境を利用して、自分のパソコンのローカル環境下で行うことが必須です。

d3モジュールの場合は、「公開側ディレクトリ名」+ 「テンプレートファイル名」 のテンプレートとなりますので、 templates フォルダにコピーしたテンプレートファイル名の頭に「公開側ディレクトリ名」と _ を付ける必要があります。

ただし、この方法の場合、同じd3モジュールを複製して利用している場合、「公開側ディレクトリ名」ごとのテンプレートファイルが必要となってしまうことから、もしもそのd3モジュールでの表示を同じものとする場合、テーマ下 templates フォルダの下にd3モジュールの「trust」側のディレクトリ名(例えば、d3forum であれば d3forum)と同じフォルダを作成し、そこにテンプレートファイルをコピーすることで、複製して利用している各モジュール共通のテンプレートとすることが可能となります。

Page Top

テンプレート編集でできること anchor.png

テンプレートにはデータベースから数値や文言を読み込むためのSmarty変数やPHP関数なども組み込まれていて、それらの位置を変更することにより出力時のレイアウトを変化させることができます。また新たなCSSセレクタを組み込んだり、テンプレートに直接画像を配置したりすることにより、よりデザイン方向に振ったカスタマイズが可能です。
既にテンプレートに組み込まれているCSSセレクタは、多くの場合他のモジュールと共通でテーマのstyle.cssに記述されている場合が多いですが(メニュー関連やテーブルセルに適用される.outer .head .even .oddなど)、モジュール独自のCSSをモジュールディレクトリ内に持つものもあります。
また、新たにCSSセレクタを作る場合は、プロパティはstyle.cssに書き込むのが一般的です。

Page Top

テンプレート編集でできないこと anchor.png

特に標準モジュールなど古いモジュールなどではテンプレートを持たずにPHPファイルにHTMLごと直書きしている場合があります。その場合は、テンプレートマネージャーによる編集はできません。また、ひとつのページのHTML要素が1枚のPHPファイルにまとまっているとは限らないため(むしろそのケースは少ない)、PHPプログラムの知識を持たないユーザが変更を加えることは非常に困難です。

XOOPS2.0においてはコメント入力フォームや標準の投稿フォーム、そしてユーザ登録フォームなどはシステム側で持ち、モジュールはそれを呼び出す形で表示されます。これらはPHPで書かれており、テンプレート編集はできません。


トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 9399, today: 2, yesterday: 1
初版日時: 2008-01-31 (木) 02:48:01
最終更新: 2014-01-13 (月) 22:06:01 (JST) (1196d) by fabi
Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities