Altsysでテンプレート編集をしよう をテンプレートにして作成 :: xoops123

開始行:
*Altsysでテンプレート編集をしよう &ref(site://uploads/elfinder/altsys_image002.jpg,left,mw:... このテンプレート管理では、データベース（DB）上のテンプレ... &br; **テンプレートをカスタマイズする場合、次の方法があります。 １　モジュールのテンプレートを直接編集する ２　AltsysでDBテンプレートを編集する ３　テーマ下にカスタマイズしたモジュールのテンプレートを... この場合、１～３の順でオーバーライドされるので、最終的に... また、テーマのヘッダでCSSが読み込まれる順番にも注意した方... picoなどでは、モジュールのCSSもデータベースに読み込まれる... 私の場合、テーマ下テンプレートを使って、モジュールページ... **テンプレート管理 ここでは、picoのテンプレート編集を題材に説明することにし... モジュールの名称を「文書箱」という名称にしています。 #ref(site://uploads/elfinder/altsys_image004.jpg,center,m... 最初は２つのテンプレートセットがあります。「オリジナルフ... #ref(site://uploads/elfinder/altsys_image008.jpg,center,m... 「オリジナルファイル」というのは、文字通りモジュールが持... XOOPS_TRUST_PATH/modules/pico/templates のテンプレート群という訳で、XOOPSでは、テンプレートはファ... つまり、一旦、XOOPSが動作を始めると「DB-default」側が利用... もし、反映させたいならキャッシュをクリアするか、反映した... では、どうするのか？　といえば・・・ Altsysには、テンプレートを編集できる機能があるので、それ... **カスタマイズ用のテンプレートセットを作る でも、「DB-default」を直接編集するのはお薦めできません。 テンプレートをカスタマイズするなら、別途、カスタマイズ用... #ref(site://uploads/elfinder/altsys_image006.jpg,center,m... ここでは、新しく作成するテンプレートセット名を「custom」... #ref(site://uploads/elfinder/altsys_image010.jpg,left,mw:... テンプレート名欄に「DB-custom」が増えました。 #ref(site://uploads/elfinder/altsys_image014.jpg,center,m... さて、「DB-custom」を編集しましょうか～　って、実はこれだ... 「互換レンダーシステム」の「テンプレート管理」に移りまし... #ref(site://uploads/elfinder/altsys_image016.jpg,left) テンプレート管理ページを見ると、「テンプレートセット一覧... #ref(site://uploads/elfinder/altsys_image018.jpg,center,m... &ref(site://uploads/elfinder/altsys_image020.jpg,left,mw:... つまり、このままでは「custom」側をいくら編集しても反映さ... ということで、サイトで利用されるテンプレートセットを「cus... &ref(site://uploads/elfinder/altsys_image022.jpg,left,mw:... はい。これで、データベース上で利用されるテンプレートセッ... #ref(site://uploads/elfinder/altsys_image024.jpg,center,m... **カスタマイズ用テンプレートセットの使い方 でも、ちょっと待ってください。先ほど作成した「custom」と... はい。そのとおり。空です。というか、空の方が良いのです。 テンプレートセットが空の場合、自動的に「default」側が利用... そして、「custom」側には編集対象とするテンプレートだけを... では、もう一度、Altsysのテンプレート管理に移りましょう。 #ref(site://uploads/elfinder/altsys_image026.jpg,center,m... 文書箱（pico）を見てみましょう。「DB-custom」が黄色になり... そして、テンプレート欄が空になってますので、現状は「DB-de... #ref(site://uploads/elfinder/altsys_image028.jpg,center,m... ***テンプレートを複製・編集する では、ここでpicoの記事本文のテンプレートである「pico_main... #ref(site://uploads/elfinder/altsys_image030.jpg,center,m... 「編集」にチェックを入れます。 下欄の「行先」にて「custom」をプルダウンから選択し、「コ... #ref(site://uploads/elfinder/altsys_image032.jpg,center,m... これで、編集したいテンプレート「pico_main_viewcontent.htm... #ref(site://uploads/elfinder/altsys_image034.jpg,center,m... 編集する場合は、「編集」リンクをクリックします。編集画面... このとき、「互換モジュール」の色が変わっていますが、これ... テンプレート編集：module:pico_main_viewcontent.html(custo... はい。これで大丈夫です。 #ref(site://uploads/elfinder/altsys_image036.jpg,center,m... じゃあ、これで編集・・・しても良いのですが、この画面のま... #ref(site://uploads/elfinder/altsys_image038.jpg,center,m... WindowsならCtrl+Aでテンプレート編集枠内の文字列を全選択で... #ref(site://uploads/elfinder/altsys_image040.jpg,center,m... こんな感じになるので、これを編集すれば良いと言うことです... あとは編集していけば良いのですが、私の場合は、編集ポイン... #ref(site://uploads/elfinder/altsys_image042.jpg,center,m... 編集完了したら、今度は逆にエディターのソースを全選択して... #ref(site://uploads/elfinder/altsys_image044.jpg,center,m... 「更新して編集終了」ボタンを押すと、編集内容が反映されま... #ref(site://uploads/elfinder/altsys_image046.jpg,center,m... そうすると、先ほどコピーしたテンプレート部分が緑色に変わ... 今回は、cssも編集するので、同様に作業していきましょう。 （ちなみに、picoの場合は、テンプレートセット内にcssがある... #ref(site://uploads/elfinder/altsys_image048.jpg,center,m... まずは、テンプレートをコピーします。 #ref(site://uploads/elfinder/altsys_image050.jpg,center,m... はい。コピー完了。では、編集しましょう。（途中省略） 編集完了です～(^_^)v #ref(site://uploads/elfinder/altsys_image052.jpg,center,m... 編集したものだけ色が変わって、判りやすいですね～(*^O^*) **修正箇所の反映状況 では、編集した内容を確認してみましょう。 #ref(site://uploads/elfinder/altsys_image054.jpg,center,m... 今回は、記事の上に「前へ」「次へ」のような前後記事へのナ... #ref(site://uploads/elfinder/altsys_image056.jpg,center,m... OKです。上手くできましたね。

終了行:
*Altsysでテンプレート編集をしよう &ref(site://uploads/elfinder/altsys_image002.jpg,left,mw:... このテンプレート管理では、データベース（DB）上のテンプレ... &br; **テンプレートをカスタマイズする場合、次の方法があります。 １　モジュールのテンプレートを直接編集する ２　AltsysでDBテンプレートを編集する ３　テーマ下にカスタマイズしたモジュールのテンプレートを... この場合、１～３の順でオーバーライドされるので、最終的に... また、テーマのヘッダでCSSが読み込まれる順番にも注意した方... picoなどでは、モジュールのCSSもデータベースに読み込まれる... 私の場合、テーマ下テンプレートを使って、モジュールページ... **テンプレート管理 ここでは、picoのテンプレート編集を題材に説明することにし... モジュールの名称を「文書箱」という名称にしています。 #ref(site://uploads/elfinder/altsys_image004.jpg,center,m... 最初は２つのテンプレートセットがあります。「オリジナルフ... #ref(site://uploads/elfinder/altsys_image008.jpg,center,m... 「オリジナルファイル」というのは、文字通りモジュールが持... XOOPS_TRUST_PATH/modules/pico/templates のテンプレート群という訳で、XOOPSでは、テンプレートはファ... つまり、一旦、XOOPSが動作を始めると「DB-default」側が利用... もし、反映させたいならキャッシュをクリアするか、反映した... では、どうするのか？　といえば・・・ Altsysには、テンプレートを編集できる機能があるので、それ... **カスタマイズ用のテンプレートセットを作る でも、「DB-default」を直接編集するのはお薦めできません。 テンプレートをカスタマイズするなら、別途、カスタマイズ用... #ref(site://uploads/elfinder/altsys_image006.jpg,center,m... ここでは、新しく作成するテンプレートセット名を「custom」... #ref(site://uploads/elfinder/altsys_image010.jpg,left,mw:... テンプレート名欄に「DB-custom」が増えました。 #ref(site://uploads/elfinder/altsys_image014.jpg,center,m... さて、「DB-custom」を編集しましょうか～　って、実はこれだ... 「互換レンダーシステム」の「テンプレート管理」に移りまし... #ref(site://uploads/elfinder/altsys_image016.jpg,left) テンプレート管理ページを見ると、「テンプレートセット一覧... #ref(site://uploads/elfinder/altsys_image018.jpg,center,m... &ref(site://uploads/elfinder/altsys_image020.jpg,left,mw:... つまり、このままでは「custom」側をいくら編集しても反映さ... ということで、サイトで利用されるテンプレートセットを「cus... &ref(site://uploads/elfinder/altsys_image022.jpg,left,mw:... はい。これで、データベース上で利用されるテンプレートセッ... #ref(site://uploads/elfinder/altsys_image024.jpg,center,m... **カスタマイズ用テンプレートセットの使い方 でも、ちょっと待ってください。先ほど作成した「custom」と... はい。そのとおり。空です。というか、空の方が良いのです。 テンプレートセットが空の場合、自動的に「default」側が利用... そして、「custom」側には編集対象とするテンプレートだけを... では、もう一度、Altsysのテンプレート管理に移りましょう。 #ref(site://uploads/elfinder/altsys_image026.jpg,center,m... 文書箱（pico）を見てみましょう。「DB-custom」が黄色になり... そして、テンプレート欄が空になってますので、現状は「DB-de... #ref(site://uploads/elfinder/altsys_image028.jpg,center,m... ***テンプレートを複製・編集する では、ここでpicoの記事本文のテンプレートである「pico_main... #ref(site://uploads/elfinder/altsys_image030.jpg,center,m... 「編集」にチェックを入れます。 下欄の「行先」にて「custom」をプルダウンから選択し、「コ... #ref(site://uploads/elfinder/altsys_image032.jpg,center,m... これで、編集したいテンプレート「pico_main_viewcontent.htm... #ref(site://uploads/elfinder/altsys_image034.jpg,center,m... 編集する場合は、「編集」リンクをクリックします。編集画面... このとき、「互換モジュール」の色が変わっていますが、これ... テンプレート編集：module:pico_main_viewcontent.html(custo... はい。これで大丈夫です。 #ref(site://uploads/elfinder/altsys_image036.jpg,center,m... じゃあ、これで編集・・・しても良いのですが、この画面のま... #ref(site://uploads/elfinder/altsys_image038.jpg,center,m... WindowsならCtrl+Aでテンプレート編集枠内の文字列を全選択で... #ref(site://uploads/elfinder/altsys_image040.jpg,center,m... こんな感じになるので、これを編集すれば良いと言うことです... あとは編集していけば良いのですが、私の場合は、編集ポイン... #ref(site://uploads/elfinder/altsys_image042.jpg,center,m... 編集完了したら、今度は逆にエディターのソースを全選択して... #ref(site://uploads/elfinder/altsys_image044.jpg,center,m... 「更新して編集終了」ボタンを押すと、編集内容が反映されま... #ref(site://uploads/elfinder/altsys_image046.jpg,center,m... そうすると、先ほどコピーしたテンプレート部分が緑色に変わ... 今回は、cssも編集するので、同様に作業していきましょう。 （ちなみに、picoの場合は、テンプレートセット内にcssがある... #ref(site://uploads/elfinder/altsys_image048.jpg,center,m... まずは、テンプレートをコピーします。 #ref(site://uploads/elfinder/altsys_image050.jpg,center,m... はい。コピー完了。では、編集しましょう。（途中省略） 編集完了です～(^_^)v #ref(site://uploads/elfinder/altsys_image052.jpg,center,m... 編集したものだけ色が変わって、判りやすいですね～(*^O^*) **修正箇所の反映状況 では、編集した内容を確認してみましょう。 #ref(site://uploads/elfinder/altsys_image054.jpg,center,m... 今回は、記事の上に「前へ」「次へ」のような前後記事へのナ... #ref(site://uploads/elfinder/altsys_image056.jpg,center,m... OKです。上手くできましたね。

ページ名: