ディテールにこだわる今日からあなたもテーマ職人テーマ作成は面白いテーマの作り方テーマ作成前に用意するもの3分でできるテーマ改造もう少し、見た目を変更してみる。(準備編)3カラム対応に改造する試しに左ブロック表示を消してみるテーマファイル内での記述の意味3カラム対応に改造するには?色々と試してみる。ディレクトリごとに違うヘッダーとロゴ画像表示できます。ディレクトリごとに違うヘッダーとロゴ画像表示できます。»プロWEB制作者向けXOOPS基礎実習Section4:デザインコンシャスな商用サイトを作る(実践編-3:テンプレートの編集)テーマセットを変えれば、XOOPSのデザインは一新されます。デザインを変えたくなるでしょう。そのためにはモジュールやシステムにあるテンプレートファイルに対して修正をしなければなりません。レートファイルはHTML形式なので、HTMLを理解している人間にとっては容易に修正ができるはずです。くのモジュールを入れると増えます)、その手間はかなりのものです。いのは、プログラム部分とともにこうした理由でもあります。(Cube)の公式サイトをウォッチしていると、月に数度はテンプレートの更新に対する質問があります。テンプレートファイルを修正した筈なのに適用されない。毎度同じ質問と回答が繰り返されます。公式サイトの住人たちも、相も変わらず過去ログを読まないこうした人たちの質問にはウンザリしている人が多いでしょうから、冷たくあしらわれる場合もあるかもしれません。XOOPS本には必ず書いてあることですから、これを読んでいる皆さんは、是非ともこんなことで公式には書き込まないようにお願いします。新しいテンプレートを作る前に必ず行う「儀式」があります。テンプレートの複製・登録まず最初にデフォルトテンプレートを「複製」しなければなりません。います(できない訳ではありません)。なってしまった時に、管理画面でテンプレートをデフォルトに戻すことにより、正常な状態に一時的に戻せる為だといわれています。admin」の登場によって、デフォルトテンプレートを容易に書き換え可能になりました。テンプレートの扱いがまったく変わりました(おかげで私もこの章を書くのに苦労しています)。adminについては後ほど追記して行きたいと思っております。管理画面の「システム管理」>「テンプレートマネージャー」と進んでください。新しいテンプレートセット名を入力して「送信」ボタンを押してください。新しいテンプレートセットができているのを確認して、「システム管理」>「一般設定」に行きます。新しいテンプレートセットができている「デフォルトのテンプレートセット」で新しいテンプレートを選択、「送信」を押して適用させます。再度「テンプレートマネージャー」に戻って、右のチェックマークが新しいテンプレートセットに移動していれば準備完了です。ここでデフォルトと新しい方を開けて見比べて欲しいのですが、各モジュール名の右にある「一覧」を押してください。「参照」と「ダウンロード」しかありません。どちらもここから変更を加えることはできません。ダウンロード」そして「参照」ボタンがあります。テンプレートの編集にはここからいろいろなことが行えます。テンプレートを変更するにはいくつかの方法があります。編集フォームが開きますので、これを直接編集します。編集が終わったら送信ボタンを押して適用されているかを確認します。場合XOOPSで「プレビュー」ボタンはあまり役に立ちません)お手軽で簡単な方法ですが、大掛かりにテンプレートを編集するには向きません。フォームの中のHTMLを編集するなんてぞっとします。した微調整、文言の編集などには十分役に立ちます。■ダウンロードしたテンプレートファイルに編集を加えた後テンプレートマネージャーでアップロードする。安全で一般的な方法です。「テンプレートマネージャー」で修正を加えたいテンプレートをダウンロードします。押して、ローカルにある編集を加えたテンプレートを選択し、リストの一番下にある「アップロード」ボタンを押します。ひとつずつしかできませんが、アップロードは複数できます。もどり、テンプレートセット右のダウンロードボタンを押すと.tar.gz圧縮されたテンプレートセット全てが手に入ります。この方法の利点は落ち着いてゆっくり編集が行えることと、Dreamweaverなどの優れた編集ツールを使ってHTMLを扱えることです。失敗が少なく、テーブル構造などを理解しながら編集ができます。アップロードも多くの場合すぐに反映できます。■ローカルにあるモジュールディレクトリのテンプレートファイルに編集を加えた後FTPでアップロードする。これは既にサーバ上にXOOPSが上がっている場合によく行われる事ですが、ローカルにおいてもアップロードがないだけで、同じ方法で適用できます。ローカル環境のXOOPSのモジュールディレクトリ内にあるテンプレートファイルに対してDreamweaverなどで修正をします。サーバ上の該当ディレクトリにアップします。(ローカル環境の場合は、Xaioなどの中に入っているファイルを編集するのですからそのままです。アップロードする場合は必要以外のファイルを誤ってアップロードしないように気をつけてください。それによるトラブルも多いですので。)ファイルが正常にあがったのを確認したら、「システム管理」>「モジュール管理」で該当モジュール右にある「アップデート」アイコンをクリックします。正常にアップデートが終われば適用されているはずです。方法の利点は、Dreamweaverなどを利用できることに加えて、一括して大量のテンプレートファイルを処理できることです。本番サーバ上に編集の終わったテンプレートセットを適用させる場合などに便利です。キャッシュファイルを一度クリアする必要がある場合もあります。他にもいくつか方法はあるのですが、それはもっとXOOPSに慣れてからにしましょう。上記の三つの方法を臨機応変に使い分けることで、十分目的は達せられます。ブロックテンプレートを編集するHTMLとCSSを読み取る。テンプレートもHTMLとCSSで書かれていますので、ソースを見て読み取れば(該当のスタイルも含めて)編集は容易です。テンプレートにはブロック用テンプレートと、コンテンツ部用テンプレートの二種類があります。(fig4-7)fig4-7:テンプレートマネージャではブロック用とコンテンツ用のテンプレートが分けて表示される。小ぶりで扱いがブロック用テンプレートの方から話をしましょう。■ブロックタイトルを画像にする。(テーマセットでの話の続き)商用サイトでは見栄えを良くするために、見出しをテキストではなく画像にするということが良くあります。そのために前章で、theme.htmlにブロックタイトルを非表示にする仕掛けをしました。「none」の付いたブロックはタイトルが非表示になります。その画像はどこに配置すれば良いかというと、ブロックテンプレート内に埋め込んでしまいます。次の画像はテンプレートマネージャーにおける、bluesbbの新着トピック用のブロックテンプレートの編集画面です。(bluesbb_new_all2.html)一番最初にブロックタイトル画像が記述されています。前にも言ったように、私は画像を全て第一階層の/imgディレクトリに格納していますので、そこからの絶対パスにしてあります。この手法はモジュールブロックだけでなく、カスタムブロックや、コンテンツテンプレートにおいても同様です。ロックタイトル画像を敷くと言うことも可能ですが、私はもっぱら自由度やブラウザ表示の確実性などの点で上記の泥臭い方法を使うことが多いです。■メニューをいじくるXOOPSの見栄えを考えた時に、最初に何とかしたいと思うのはメニューブロックではないでしょうか。先にそこに目が向くのではないでしょうか。このメニュー部分もブロックテンプレートになっていますので、容易に編集できます。CSSだけで何とかする手もありますが、その部分のソース自体を編集してしまうことで、まったく異なる見栄えにすることもできます。system_block_mainmenu.htmlがメインメニューのテンプレートです。system_block_mainmenu.htmlのソースを見てみましょう。--></td></tr></table>とても簡単に書かれているのが分かると思います。要点は(1)テーブルで書かれていること、(2)一番上のセルが「ホーム」に固定されていること、(3)2番目以降が前章で説明したforeach文で繰り返しになっていることです。テーブルで書かれていることが気に入らない方は、divやliやpで書くことも可能です。何度も言っているように「Smarty変数」を「どうやって配置すれば良いか」と言う考え方で、たまたまデフォルトがテーブルレイアウトだっただけです。href="<{$sublink.url}>"><{$sublink.name}></a><{/foreach}><{/foreach}>だけが必要なパーツで、後は飾りのようなものです。テーマデザインの方向性により、ブロック的な考え方を必要としないならば、これをtheme.htmlに直書きすることも可能です。Smarty変数の名称を見ると、主メニューとサブメニューの記述が分かると思います。主メニューしか表示させないようにしたり、逆にサブメニューの表示のみにすることもできます。ンツ内にページリンクを置いたりして、ページ遷移を補完させるといいでしょう。「製品紹介ページ」右にある「サブメニュー」と言うのは、実はこのメインメニューのテンプレートをサブメニューの部分だけにしたものです。コンテンツのテンプレートを編集する最初にどう変更するかの計画を立ててからコンテンツ部のテンプレートは、ブロック用テンプレートに比べてかなり複雑にできています。ように、複雑なSmartyやPHPコードが絡み合っているものもあります。XOOPS自体が停止してしまったりしかねません。最初に、どういったデザインにしたいのか、何を削除するかなど、設計をしてから作業に取り掛かりましょう。標準状態のテンプレートも必ず保存しておきましょう。