1: 2013-01-14 (月) 15:40:40 marine[5] [6] | |||
---|---|---|---|
Line 1: | Line 1: | ||
+ | *Altsysでテンプレート編集をしよう [#d37f0774] | ||
+ | XOOPSにおける強力なユーティリティーとして、Altsysがあります。今や必須となっているモジュールで、色々な機能を持っており、その中のひとつにテンプレート管理があります。 | ||
+ | |||
+ | **テンプレート管理 [#x241354c] | ||
+ | |||
+ | ここでは、picoのテンプレートを編集することにします。 | ||
+ | モジュールの名称を「文書箱」という名称にしています。 | ||
+ | |||
+ | |||
+ | 最初は、テンプレートは「オリジナルファイル」とちょっと文字色が黄色で判りにくいけど、「DB-default」の2つがあります。 | ||
+ | |||
+ | 「オリジナルファイル」というのは、文字通りモジュールが持っているファイルベースのテンプレートで、picoのようなd3モジュールの場合は、 | ||
+ | XOOPS_TRUST_PATH/modules/pico/templates | ||
+ | のテンプレート群という訳で、XOOPSでは、テンプレートはファイルのまま利用されるのではなく、キャッシュとして読み込まれてデータベース上で動作する(表現が変かな?)ようになっており、それが「DB-default」ということになります。 | ||
+ | |||
+ | つまり、一旦、XOOPSが動作を始めると「DB-default」側が利用され、「オリジナルファイル」をローカルで編集してFTPでアップロードしても、「DB-default」に反映されない限り反映されないということですね。 | ||
+ | |||
+ | もし、反映させたいならキャッシュをクリアするか、反映したい「オリジナルファイル」を「DB-default」にコピーするか、です。でも、正直言って、その方法は非常に非効率かつ面倒ですね。 | ||
+ | |||
+ | では、どうするのか? といえば・・・ | ||
+ | Altsysには、テンプレートを編集できる機能があるので、それを使えば良いのです。 | ||
+ | |||
+ | |||
+ | **カスタマイズ用のテンプレートセットを作る [#ybba4675] | ||
+ | |||
+ | でも、「DB-default」を直接編集するのはお薦めできません。 | ||
+ | テンプレートをカスタマイズするなら、別途、カスタマイズ用のテンプレートを用意して、それを編集するのがお薦めです。 | ||
+ | |||
+ | ここでは、新しく作成するテンプレートセット名を「custom」とします。 | ||
+ | |||
+ | |||
+ | テンプレート名欄に「DB-custom」が増えました。 | ||
+ | さて、「DB-custom」を編集しましょうか~ って、実はこれだけではまだダメなんですよね。実は、もうひと手間がひつようです。 | ||
+ | |||
+ | 「互換レンダーシステム」の「テンプレート管理」に移りましょう。 | ||
+ | |||
+ | |||
+ | テンプレート管理ページを見ると、「テンプレートセット一覧」が表示され、「default」と先ほど作成した「custom」の2つがありますね。 | ||
+ | |||
+ | でも、「操作」欄を見ると「default」に緑のマークがついており、現在はこれが利用されていることが判ります。 | ||
+ | つまり、このままでは「custom」側をいくら編集しても反映されないということですね。 | ||
+ | |||
+ | ということで、サイトで利用されるテンプレートセットを「custom」に変更しましょう。 | ||
+ | 「custom」の右端、「操作」欄にある「選択」ボタンを押してください。 | ||
+ | |||
+ | はい。これで、データベース上で利用されるテンプレートセットが「custom」に切り替わりました。 | ||
+ | |||
+ | |||
+ | **カスタマイズ用テンプレートセットの使い方 [#k6ce546b] | ||
+ | |||
+ | でも、ちょっと待ってください。先ほど作成した「custom」というテンプレートセットって、空の状態じゃなかったかな? | ||
+ | |||
+ | はい。そのとおり。空です。というか、空の方が良いのです。 | ||
+ | テンプレートセットが空の場合、自動的に「default」側が利用されるため何も問題はありません。 | ||
+ | |||
+ | そして、「custom」側には編集対象とするテンプレートだけをコピーして編集するのが良いのです。そうすると、「custom」側にあるテンプレートはカスタマイズしたものだけがあるという状態になり、ひと目でカスタマイズしたテンプレートが判りますし、テンプレートをダウンロードする際にカスタマイズしたものだけがダウンロードされるので、非常に効率が良いものとなります。 | ||
+ | |||
+ | |||
+ | では、もう一度、Altsysのテンプレート管理に移りましょう。 | ||
+ | |||
+ | 文書箱(pico)を見てみましょう。「DB-custom」が黄色になり、これが使われていることが判ります。(しかし、見にくい色だなぁ~(^_^;) ) | ||
+ | |||
+ | そして、テンプレート欄が空になってますので、現状は「DB-default」が利用されている状態ということですね。 | ||
+ | |||
+ | ***テンプレートを複製・編集する [#q3df8811] | ||
+ | |||
+ | では、ここでpicoの記事本文のテンプレートである「pico_main_viewcontent.html」を「DB-custom」にコピーして、これを編集することにしましょう。 | ||
+ | |||
+ | 「編集」にチェックを入れます。 | ||
+ | |||
+ | 下欄の「行先」にて「custom」をプルダウンから選択し、「コピー実行」ボタンを押してください。 | ||
+ | |||
+ | |||
+ | これで、編集したいテンプレート「pico_main_viewcontent.html」が「DB-custom」側にコピーされました。 | ||
+ | |||
+ | 編集する場合は、「編集」リンクをクリックします。編集画面になります。 | ||
+ | このとき、「互換モジュール」の色が変わっていますが、これは気にしないで・・・ | ||
+ | テンプレート編集:module:pico_main_viewcontent.html(custom)となっていますね? | ||
+ | はい。これで大丈夫です。 | ||
+ | |||
+ | じゃあ、これで編集・・・しても良いのですが、この画面のままで編集するのはちょっとやりにくいので、私の場合は、内容を全コピーしてからローカルのエディターに貼り付けて、そこで編集をするようにしています。 | ||
+ | |||
+ | WindowsならCtrl+Aでテンプレート編集枠内の文字列を全選択できるので、Ctrl+Cでコピー。そして、エディターに貼り付けます。 | ||
+ | |||
+ | こんな感じになるので、これを編集すれば良いと言うことですね。(ここでは、Windows用のエディター 秀丸 を使っています。) | ||
+ | |||
+ | あとは編集していけば良いのですが、私の場合は、編集ポイントが判りやすいように<{* marine add *}> のようなコメントを追加しています。(ちなみに、このコメントの書き方の場合は出力されるhtmlには反映しないので、文字数が増えるということもないので良いですね。) | ||
+ | |||
+ | 「更新して編集終了」ボタンを押すと、編集内容が反映されます。 | ||
+ | |||
+ | そうすると、先ほどコピーしたテンプレート部分が緑色に変わり、変更したことがひと目でわかります。 | ||
+ | |||
+ | 今回は、cssも編集するので、同様に作業していきましょう。 | ||
+ | (ちなみに、picoの場合は、テンプレートセット内にcssがあるので、ここで編集することでウェブ上で変更・反映させることができるのです。便利ですね。) | ||
+ | |||
+ | まずは、テンプレートをコピーします。 | ||
+ | はい。コピー完了。では、編集しましょう。 | ||
+ | |||
+ | 編集完了です~(^_^)v | ||
+ | 編集したものだけ色が変わって、判りやすいですね~(*^O^*) | ||
+ | |||
+ | **修正箇所の反映状況 [#mebfc89b] | ||
+ | |||
+ | では、編集した内容を確認してみましょう。 | ||
+ | 今回は、記事の上に「前へ」「次へ」のような前後記事へのナビゲーションを追加して、記事下に全記事へのリンクをリスト表示、「関連記事」として全記事の表題と記事概要を表示することにしまいた。 | ||
+ | |||
+ | OKです。上手くできましたね。 |
(This host) = https://xoops123.com