T3 Frameworkは、Joomla!テンプレート販売で有名なJoomlArtが開発しているテンプレートフレームワークです。JoomlArtで販売しているテンプレートは、T3 Frameworkをベースとして作られているようです。レスポンシブレイアウトに対応し、HTMLやCSSの知識がなくてもモジュールの配置やデザインの変更などが可能になっています。ライセンスはGNU/GPL、もちろん無料で利用できます。サイト開発のベースとして非常に強力なテンプレートフレームワークです。
まずT3のインストールから。T3のトップページにある「Download T3」を選択します。
ダウンロードできるファイルが数種類あります。既存のJoomla!サイトへインストールする場合は「T3 Framework Package」をダウンロードします。
GitHubへ移動しますので、最新バージョンのzip形式をダウンロードします。
ダウンロードしたファイルを、通常のテンプレートと同じようにJoomla!にインストールします。インストール後、「t3_blank」テンプレートを標準に設定すると、フロントエンドは以下のように何が何だかわからない状態で表示されるはずです。これは、これまで使用していたテンプレートのモジュールポジション名と、T3のモジュールポジション名が異なるためです。
T3のテンプレート管理画面を開き、「Save」を押して一度保存します。すると少しはまともな感じに表示されるはずです。
テンプレートの管理画面トップページはこんな感じ。T3のアップデートが見つかるとこの画面で通知してくれます。なお「T3 Blank」が実際のテンプレート、「T3 Framework」がフレームワークです。ちなみにT3 Frameworkはプラグインとしてインストールされています。
「General」タブでは、レスポンシブにするか、圧縮したCSSファイルを使用するか、T3のロゴを表示するかなどを変更できます。
「Theme」タブでは、テーマを切替える事や、ロゴに画像を使用するかテキストを使用するかなどが設定できます。例えばThemeを「dark」、Logo Typeを「Text」、Site NameやSloganにそれぞれサイト名とスローガンを入力します。
するとサイトのデザインがダークな感じになり、サイト名もロゴ画像からテキストに変わります。スローガンはサイト名の下側に表示されます。
「Layout」タブでは、モジュールの配置などが指定できます。
例えばmainnavの下にはnoneというポジションがあり、その下に数字が表示されています。ここの3をクリックすると・・・
モジュールが3分割表示になります。
ポジション名の「none」を実際のポジション名に変更します。ポジション名のブロックにマウスを重ねると表示される歯車アイコンをクリックし、ポジション名を選択します。今回は「position-4」に変更します。
その他のポジション名も変更します。
上記のポジションへ実際にモジュールを配置してみると、モジュールが3分割で表示されます。
また「Responsive Layout」タブを開くと、デバイス別にモジュールを表示するかコントロールできます。目のアイコンをクリックすると、そのポジションが非表示になります。例えば以下の設定は、スマートフォンのように画面が小さい場合、position-4を表示しません。
その他、「ThemeMagic」という機能もあります。サイトのプレビュー画面を見ながら、リアルタイムでデザインを変更することができます。
メガメニューを作成することも可能。メガメニューとは、Amazonでも使用されている巨大なメニューです。メニューを複数の列で表示したり、メニューの中に画像を表示したりできます。
例えば以下のように、メニューを2列に分け、さらにメニューの中にモジュールを表示することも可能。今回はログインモジュールを表示していますが、モジュールであればなんでもOK。広告を表示することもできます。
その他Bootstrapのアイコンを簡単に設定できたり、メニューにキャプションを付けることもできます。
テンプレート作成のベースとしてT3を使えば、大幅な時間短縮になるのではないでしょうか。ドキュメントも用意されていますので、詳しく知りたい方はそちらを参照してください。
