1: 2013-01-14 (月) 15:40:40 marine  |
2: 2013-01-14 (月) 16:43:19 marine |
| | *Altsysでテンプレート編集をしよう [#d37f0774] | | *Altsysでテンプレート編集をしよう [#d37f0774] |
| | | | |
| - | XOOPSにおける強力なユーティリティーとして、Altsysがあります。今や必須となっているモジュールで、色々な機能を持っており、その中のひとつにテンプレート管理があります。 | + | &ref(site://uploads/elfinder/altsys_image002.jpg,left,mw:195,mh:195);XOOPSにおける強力なユーティリティーとして、Altsysがあります。今や必須となっているモジュールで、色々な機能を持っており、その中のひとつにテンプレート管理があります。 |
| | + | |
| | + | **テンプレートをカスタマイズする場合、次の方法があります。 [#pb1f18f0] |
| | + | １ モジュールのテンプレートを直接編集する |
| | + | ２ AltsysでDBテンプレートを編集する |
| | + | ３ テーマ下にカスタマイズしたモジュールのテンプレートを配置する |
| | + | |
| | + | この場合、１～３の順でオーバーライドされるので、最終的にテーマ下テンプレートがある場合は、１と２でいくら編集しても反映されないので、注意が必要です。 |
| | + | また、テーマのヘッダでCSSが読み込まれる順番にも注意した方が良いでしょう。 |
| | + | |
| | + | picoなどでは、モジュールのCSSもデータベースに読み込まれるので、Altsysでの編集が可能となっているとなているのですが、テーマのヘッダでモジュールヘッダの読み込み後に別途CSSが読み込まれる設定となっている場合は、最後に読み込まれたCSSでオーバーライドされるのです。これを利用すると、そのテーマだけにCSSを適用するということも出来るのですが。。。 |
| | + | |
| | + | 私の場合、テーマ下テンプレートを使って、モジュールページについてもテーマの雰囲気に合わせることも多いのですが・・・通常は、Altsysのテンプレート管理機能を利用して、DBテンプレートを変更することでカスタマイズします。この方法の場合、変な状態になってもサクッと元の状態に戻すことができるのでお薦めです。 |
| | | | |
| | **テンプレート管理 [#x241354c] | | **テンプレート管理 [#x241354c] |
| | | | |
| - | ここでは、picoのテンプレートを編集することにします。 | + | ここでは、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) |
| | | | |
| - | 最初は、テンプレートは「オリジナルファイル」とちょっと文字色が黄色で判りにくいけど、「DB-default」の２つがあります。 | |
| | | | |
| | 「オリジナルファイル」というのは、文字通りモジュールが持っているファイルベースのテンプレートで、picoのようなd3モジュールの場合は、 | | 「オリジナルファイル」というのは、文字通りモジュールが持っているファイルベースのテンプレートで、picoのようなd3モジュールの場合は、 |
| - | XOOPS_TRUST_PATH/modules/pico/templates | + | XOOPS_TRUST_PATH/modules/pico/templates |
| | のテンプレート群という訳で、XOOPSでは、テンプレートはファイルのまま利用されるのではなく、キャッシュとして読み込まれてデータベース上で動作する（表現が変かな？）ようになっており、それが「DB-default」ということになります。 | | のテンプレート群という訳で、XOOPSでは、テンプレートはファイルのまま利用されるのではなく、キャッシュとして読み込まれてデータベース上で動作する（表現が変かな？）ようになっており、それが「DB-default」ということになります。 |
| | | | |
| | では、どうするのか？ といえば・・・ | | では、どうするのか？ といえば・・・ |
| | Altsysには、テンプレートを編集できる機能があるので、それを使えば良いのです。 | | Altsysには、テンプレートを編集できる機能があるので、それを使えば良いのです。 |
| - | | |
| | | | |
| | **カスタマイズ用のテンプレートセットを作る [#ybba4675] | | **カスタマイズ用のテンプレートセットを作る [#ybba4675] |
| | でも、「DB-default」を直接編集するのはお薦めできません。 | | でも、「DB-default」を直接編集するのはお薦めできません。 |
| | テンプレートをカスタマイズするなら、別途、カスタマイズ用のテンプレートを用意して、それを編集するのがお薦めです。 | | テンプレートをカスタマイズするなら、別途、カスタマイズ用のテンプレートを用意して、それを編集するのがお薦めです。 |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image006.jpg,center,mw:589,mh:589) |
| | | | |
| | ここでは、新しく作成するテンプレートセット名を「custom」とします。 | | ここでは、新しく作成するテンプレートセット名を「custom」とします。 |
| | | | |
| | + | #ref(site://uploads/elfinder/altsys_image010.jpg,left,mw:201,mh:201) |
| | | | |
| | テンプレート名欄に「DB-custom」が増えました。 | | テンプレート名欄に「DB-custom」が増えました。 |
| - | さて、「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」の２つがありますね。 | | テンプレート管理ページを見ると、「テンプレートセット一覧」が表示され、「default」と先ほど作成した「custom」の２つがありますね。 |
| | | | |
| - | でも、「操作」欄を見ると「default」に緑のマークがついており、現在はこれが利用されていることが判ります。 | + | #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」側をいくら編集しても反映されないということですね。 |
| | | | |
| | ということで、サイトで利用されるテンプレートセットを「custom」に変更しましょう。 | | ということで、サイトで利用されるテンプレートセットを「custom」に変更しましょう。 |
| - | 「custom」の右端、「操作」欄にある「選択」ボタンを押してください。 | + | &ref(site://uploads/elfinder/altsys_image022.jpg,left,mw:72,mh:72);「custom」の右端、「操作」欄にある「選択」ボタンを押してください。 |
| | | | |
| | はい。これで、データベース上で利用されるテンプレートセットが「custom」に切り替わりました。 | | はい。これで、データベース上で利用されるテンプレートセットが「custom」に切り替わりました。 |
| | | | |
| | + | #ref(site://uploads/elfinder/altsys_image024.jpg,center,mw:588,mh:588) |
| | | | |
| | **カスタマイズ用テンプレートセットの使い方 [#k6ce546b] | | **カスタマイズ用テンプレートセットの使い方 [#k6ce546b] |
| | | | |
| | では、もう一度、Altsysのテンプレート管理に移りましょう。 | | では、もう一度、Altsysのテンプレート管理に移りましょう。 |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image026.jpg,center,mw:589,mh:589) |
| | + | |
| | | | |
| | 文書箱（pico）を見てみましょう。「DB-custom」が黄色になり、これが使われていることが判ります。（しかし、見にくい色だなぁ～(^_^;) ） | | 文書箱（pico）を見てみましょう。「DB-custom」が黄色になり、これが使われていることが判ります。（しかし、見にくい色だなぁ～(^_^;) ） |
| | | | |
| | そして、テンプレート欄が空になってますので、現状は「DB-default」が利用されている状態ということですね。 | | そして、テンプレート欄が空になってますので、現状は「DB-default」が利用されている状態ということですね。 |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image028.jpg,center,mw:589,mh:589) |
| | | | |
| | ***テンプレートを複製・編集する [#q3df8811] | | ***テンプレートを複製・編集する [#q3df8811] |
| | | | |
| | では、ここでpicoの記事本文のテンプレートである「pico_main_viewcontent.html」を「DB-custom」にコピーして、これを編集することにしましょう。 | | では、ここでpicoの記事本文のテンプレートである「pico_main_viewcontent.html」を「DB-custom」にコピーして、これを編集することにしましょう。 |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image030.jpg,center,mw:589,mh:589) |
| | | | |
| | 「編集」にチェックを入れます。 | | 「編集」にチェックを入れます。 |
| | | | |
| | 下欄の「行先」にて「custom」をプルダウンから選択し、「コピー実行」ボタンを押してください。 | | 下欄の「行先」にて「custom」をプルダウンから選択し、「コピー実行」ボタンを押してください。 |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image032.jpg,center,mw:400,mh:400) |
| | | | |
| | | | |
| | これで、編集したいテンプレート「pico_main_viewcontent.html」が「DB-custom」側にコピーされました。 | | これで、編集したいテンプレート「pico_main_viewcontent.html」が「DB-custom」側にコピーされました。 |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image034.jpg,center,mw:588,mh:588) |
| | | | |
| | 編集する場合は、「編集」リンクをクリックします。編集画面になります。 | | 編集する場合は、「編集」リンクをクリックします。編集画面になります。 |
| | テンプレート編集：module:pico_main_viewcontent.html(custom)となっていますね？ | | テンプレート編集：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でコピー。そして、エディターに貼り付けます。 | | WindowsならCtrl+Aでテンプレート編集枠内の文字列を全選択できるので、Ctrl+Cでコピー。そして、エディターに貼り付けます。 |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image040.jpg,center,mw:588,mh:588) |
| | | | |
| | こんな感じになるので、これを編集すれば良いと言うことですね。（ここでは、Windows用のエディター 秀丸 を使っています。） | | こんな感じになるので、これを編集すれば良いと言うことですね。（ここでは、Windows用のエディター 秀丸 を使っています。） |
| | | | |
| | あとは編集していけば良いのですが、私の場合は、編集ポイントが判りやすいように<{* marine add *}> のようなコメントを追加しています。（ちなみに、このコメントの書き方の場合は出力されるhtmlには反映しないので、文字数が増えるということもないので良いですね。） | | あとは編集していけば良いのですが、私の場合は、編集ポイントが判りやすいように<{* 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も編集するので、同様に作業していきましょう。 | | 今回は、cssも編集するので、同様に作業していきましょう。 |
| | （ちなみに、picoの場合は、テンプレートセット内に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 | | 編集完了です～(^_^)v |
| | + | |
| | + | #ref(site://uploads/elfinder/altsys_image052.jpg,center,mw:589,mh:589) |
| | + | |
| | 編集したものだけ色が変わって、判りやすいですね～(*^O^*) | | 編集したものだけ色が変わって、判りやすいですね～(*^O^*) |
| | | | |
| | | | |
| | では、編集した内容を確認してみましょう。 | | では、編集した内容を確認してみましょう。 |
| - | 今回は、記事の上に「前へ」「次へ」のような前後記事へのナビゲーションを追加して、記事下に全記事へのリンクをリスト表示、「関連記事」として全記事の表題と記事概要を表示することにしまいた。 | + | |
| | + | #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です。上手くできましたね。 | | OKです。上手くできましたね。 |
ページへ戻る
