Joomla1.6新機能(デザイナー編1)

まずは、Joomla1.5と同じように、テンレレート内ののhtmlフォルダに、オーバーライドするファイルを作成します。

今回の例では、beez_20テンプレートの下に、mod_login(ログインモジュール)の下に、default.phpとdepon01.php,depon02.phpの3つのファイルを置きました。

Joomla1.5の場合は、default.phpが自動的にオーバーライドされていましたが、Joomla1.6では、モジュール管理の画面から適用するテンプレートを選択できるようになりました。

詳細オプションの代替レイアウトから選択できます。(日本語名称は変更されるかもしれません)

同じように、メニューアイテムの設定画面や、カテゴリーの設定画面からも同じようにレイアウトを選択することができます。

ちなみに、異なるテンプレートからも選択できるので、ログインやメニューだけかっこいいテンプレートを選んで組み合わせることもできます。

【Joomla1.5の場合】

★赤い枠のレイアウトはTABLEタグで作られている。

【Joomla1.6の場合】

★赤い枠のレイアウトはDIVタグで作られている。

Joomla1.5のときでも、テンプレートの独自機能(オーバーライド)でTABLEタグをDIVタグにしていたもの(BEEZとか)があったけど、コア部分(Joomlaの本体部分)で対応してくれたのが新しいところだね。

Bluestork(デフォルト)

基本的にJoomla1.5のテンプレートに似たデザインですね。アイコンが一新されています。Bluestorkの名前のとおり、青を基調にしたデザインですね。

Hathor

シンプルなデザインですね。上のロゴログインユーザーの表示部分が小さくて画面を広く使えそうです。

上はHathorのテンプレートスタイル設定で「ハイコントラスト」を選択した場合のデザインです。

上はHathorのテンプレートスタイル設定で「ブラウン」を選択した場合のデザインです。

また、テンプレートスタイル設定で「サイトタイトル表示」、「太文字表示」をはいにしてみました。左上のJoolmaのロゴイメージの右に「Joomla16テスト」というのがサイトのサイトタイトルになります。

上はHathorのテンプレートスタイル設定で「ブルー」を選択した場合のデザインです。

ちょっとグラデーションがかかっていますね。

ちなみに、これがJoomla1.5の管理画面デザインです。

Joomla1.0から1.5になったときは「垢抜けたなぁ～」と思いましたが、1.6では結構スタイリッシュになりましたね。これで、他のCMSユーザーから「Joomlaはデザインがイマイチ」と言われなくなりそうですね。

新しいテンプレート

テンプレート管理に表示されるスタイルは4種類です。

• Atomic – Default
• Beez5 - Default-Fruit Shop
• Beez2 – Default
• Beez2 - Parks Site

Joomla1.6では同じテンプレートでも、設定値違いで複数のスタイルを作ることができます。

標準でインストールされているテンプレートは「Atomic」「Beez5」「Beez2」と3種類ですが、スタイルの「Beez2 – Default」と「Beez2 - Parks Site」は「Beez2」テンプレートをベースにした設定違いのスタイルですね。

また、「Beez5」は「Beez2」のHTML5対応版になり、デザインは同じものです。なので、実質的なテンプレートは2種類と言う事ですね。

Atomicテンプレート

とてもシンプルなテンプレートです。シンプルというより、なにもありません。

このテンプレートはそのまま使うというより、このテンプレートをベースにしてオリジナルのテンプレートを作るためにあるようですね。

Beez2テンプレート

Beez2 – Default

Joomla1.6のデフォルトテンプレートです。

テンプレートのオプションでロゴ画像や、文字を設定できるのでJoomla1.5の「JA_Purity」に近い感じですね。

デザインもすっきりしていて、蜂のキャラクターや蛙、イモリも表示されないので何もしなくてもオールマイティに使えそうですね。

Beez2 – Parks Site

Beez2のオプションから選択できる、テンプレートカラーを変更したスタイルです。

Beez2のオプションにはテンプレートカラーとして、「パーソナル」と「ネイチャー」があるのですが、これはネイチャーになります。色だけでなく、水平メニューの位置や、検索フォームの位置も変更されていますね。

Beez5テンプレート

デザイン的にはBeez2を基本にして、架空のフルーツショップのサイトを作ってみましたって感じですね。

Beez5の特徴は、HTML5に対応したHTMLを出力できるところです。

HTMLソースをみると、headerタグ(headタグじゃないですよ)やfooterタグ、記事にはarticleタグなどが使われています。

主要なPCブラウザの最新版では、ほとんどがHTML5に対応しているので、将来性を見込んで始めからHTML5で作り始めてもよいかもです。