Geekly Articles each Day

Joomla 1.5用のクリーンなCSSテンプレートの作成-パート4、最後

これは、Joomla 1.5テンプレートに関する一連の記事の最後の部分です。

前のパーツ：
標準によるJoomlaテンプレートの作成-パート1
標準でJoomlaテンプレートを作成します-パート1（続き）
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.1
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.2
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.3
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.4
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート3

高度なテンプレート機能


Joomla 1.5は、本質的に機能を拡張する多くの高度なテンプレート機能を提供します。 このシリーズの記事の例の1つをすでに見てきました。「クロム」またはモジュールのカスタマイズされた表示を作成する可能性です。

次の関数を考えてみましょう。


テンプレートオプション

Joomla 1.5は新しい機能を追加します-テンプレートのオプション。 これにより、管理インターフェースのテンプレートに渡される変数に値を割り当てることができます。

テンプレートでパラメーターを使用するための比較的単純なオプションを使用できます。 templateDetails.xmlファイルで、次を追加します。

 <params>
 <param name = "template_width" type = "list" default = "fluid" label = "Template Width" description = "テンプレートの幅スタイル">
 <option value = "fluid">最大および最小の流体</ option>
 <option value = "medium">中</ option>
 <option value = "small">小</ option>
 </ param>
 </ params>


テンプレートフォルダーにparams.iniファイルも必要です。 空の場合もありますが、Joomlaは設定を保存するために必要です。 たとえば、上記の例の.iniファイルは次のようになります。

 template_width = 2


サーバーがパラメーター値を保存できるように、書き込み許可を設定する必要があります。 また、このファイルをtemplateDetails.xmlのファイルのリストに追加する必要があります。

テンプレートマネージャーでは、図に示すように、パラメーターのオプションが表示されます。



これは、3つの選択肢がある単純なリストであることがわかります。

 <param name = "template_width" type = "radio" default = "0" label = "Template Width" description = "テンプレートの幅設定の変更">
 <option value = "0"> 800x600 </ option>
 <option value = "1"> 1024x756 </ option>
 <option value = "2">流体（FFおよびIE7では最小/最大、IE6では80％）</ option>
 </ param>


その後、index.phpのbodyタグを次のように変更します。

 <body class = "width _ <？php echo $ this-> params-> get（ 'template_width'）;？>">


CSSファイルに次の行を追加します。

 body.width_0 div＃wrap {
幅：760px;
 }

 body.width_1 div＃wrap {
幅：960px;
 }

 body.width_2 div＃wrap {
最小幅：760px;
最大幅：960px;
幅：auto！重要;
 }

 #wrap {
テキスト揃え：左;
マージン：0自動;
 }


これらはすべて、3つのオプションを提供します：固定の狭いページ、固定の広いページ、および拡大されたページ。

テンプレートパラメータを使用すると、サイト管理者がほとんどすべてのテンプレート要素（幅、色など）を柔軟に設定できるようになります。これらはすべて、CSSスタイルを設定するPHP条件式を使用して制御されます。

テンプレートのオーバーライド

おそらく、Joomla 1.5の最も強力な新機能は、カーネル出力を簡単にオーバーライドする機能です。 これは、コンポーネントとモジュールのビューのレイアウトに対応する新しい出力ファイル（テンプレートファイル）を使用して行われます。 Joomlaは、テンプレートフォルダーに対応するファイルが存在するかどうかを毎回確認し、存在する場合は、標準ファイルの代わりに出力に使用します。

再定義構造

すべての表示レイアウトとカーネルテンプレートは、/ tmpl /フォルダーにあります。 モジュールのマッピングは実際には1つしかないため、コンポーネントとモジュールのレイアウトはわずかに異なります。 例：

モジュール/ mod_newsflash / tmpl /
モジュール/ mod_poll / tmpl /
コンポーネント/ com_login / views / login / tmpl /
コンポーネント/ com_content / views / section / tmpl /


すべてのコンポーネントとモジュールの基本構造は、表示>レイアウト>テンプレートです

次の表に例を示します。 モジュールにはマッピングが1つしかないことに注意してください。

ディスプレイレイアウトパターン
カテゴリーBlog.phpblog_item.php
blog_links.php
カテゴリーdefault.phpdefault_items.php
（ニュースフラッシュモジュール）default.php
horz.php
vert.php
_item.php


通常、特定のレイアウトを担当するテンプレートファイルがいくつかあります。 これらのファイルには共通名があります。

ファイル名説明例
layoutname.php基本レイアウトテンプレートblog.php
layoutname_templatename.phpメインから呼び出される子レイアウトテンプレートblog_item.php
blog_links.php
_templatename.phpさまざまなレイアウトで使用される汎用レイアウトテンプレート_item.php


モジュールのオーバーライド

各モジュールには、テンプレートが配置されているtmplという新しいフォルダーが含まれています。 その中には、出力を担当するPHPファイルがあります。 例：

 /modules/mod_newsflash/tmpl/default.php
 /modules/mod_newsflash/tmpl/horiz.php
 /modules/mod_newsflash/tmpl/vert.php
 /modules/mod_newsflash/tmpl/_item.php


最初の3つのファイルはNewsflashモジュールの3つのレイアウトで、モジュールが選択されたオプションに応じて使用されます。_item.phpファイルは、3つのオプションすべてで使用される一般的なレイアウトテンプレートです。 このファイル内には次のものがあります。

 <？php //直接アクセスが定義されていない（ '_ JEXEC'）またはdie（ '制限付きアクセス'）;  ？>
 <？php if（$ params-> get（ 'item_title'））：？>

 <table class = "contentpaneopen <？php echo $ params-> get（ 'moduleclass_sfx'）;？>">
 <tr>
 <td class = "contentheading <？php echo $ params-> get（ 'moduleclass_sfx'）;？>" width = "100％"> <？php if（$ params-> get（ 'link_titles'）&& $ item- > linkOn！= ''）：？>
 <a href="<?php echo $item-> linkOn;？> "class =" contentpagetitle <？php echo $ params-> get（ 'moduleclass_sfx'）;？> "> <？php echo $ item-> title ;？> </a>
 <？php else：？>
 <？php echo $ item-> title;  ？>
 <？php endif;  ？>
 </ td>
 </ tr>
 </ table>
 <？php endif;  ？>
 <？php if（！$ params-> get（ 'intro_only'））：echo $ item-> afterDisplayTitle;  endif;  ？>
 <？php echo $ item-> beforeDisplayContent;  ？>
 <table class = "contentpaneopen <？php echo $ params-> get（ 'moduleclass_sfx'）;？>">
 <tr>
 <td valign = "top" colspan = "2"> <？php echo $ item-> text;  ？> </ td>
 </ tr>
 </ table>
 <？php if（isset（$ item-> linkOn）&& $ item-> readmore）：echo '<a href="'.$item-> linkOn。' "> '。JText :: _（' Read more ' ）。 '</a>';  endif;  ？>


テーブルを削除してコードをアクセスしやすくすることで、ファイルを変更できます。

 <？php //直接アクセスが定義されていない（ '_ JEXEC'）またはdie（ '制限付きアクセス'）;  ？>
 <？php if（$ params-> get（ 'item_title'））：？>

 <div class = "contentpaneopen <？php echo $ params-> get（ 'moduleclass_sfx'）;？>">
 <div class = "contentheading <？php echo $ params-> get（ 'moduleclass_sfx'）;？>">
 <？php if（$ params-> get（ 'link_titles'）&& $ item-> linkOn！= ''）：？>
 <a href="<?php echo $item-> linkOn;？> "class =" contentpagetitle <？php echo $ params-> get（ 'moduleclass_sfx'）;？> "> <？php echo $ item-> title ;？> </a>
 <？php else：？>
 <？php echo $ item-> title;  ？>
 <？php endif;  ？>
 </ div>
 </ div>
 <？php endif;  ？>
 <？php if（！$ params-> get（ 'intro_only'））：echo $ item-> afterDisplayTitle;  endif;  ？>
 <？php echo $ item-> beforeDisplayContent;  ？>
 <div class = "contentpaneopen <？php echo $ params-> get（ 'moduleclass_sfx'）;？>"> <？php echo $ item-> text;  ？>
 </ div>
 <？php if（isset（$ item-> linkOn）&& $ item-> readmore）：echo '<a href="'.$item-> linkOn。' "> '。JText :: _（' Read more ' ）。 '</a>';  endif;  ？>


新しいファイルは、htmlサブフォルダーのテンプレートフォルダーに配置する必要があります。

テンプレート/ templatetutorial15bold / html / mod_newsflash / _item.php


Newsflashモジュールからテーブルを削除しましたが、簡単でしたね。

コンポーネントのオーバーライド

コンポーネントはほぼ同じように機能しますが、多くのコンポーネントに対応するいくつかのマッピングがあります。

com_contentフォルダーを見ると、viewsサブフォルダーが表示されます。

 /コンポーネント/ com_content /ビュー/
 /コンポーネント/ com_content /ビュー/アーカイブ
 /コンポーネント/ com_content /ビュー/記事
 /コンポーネント/ com_content /ビュー/カテゴリ
 /コンポーネント/ com_content /ビュー/セクション


これらのフォルダは、アーカイブ、記事、カテゴリ、セクションの4つのコンテンツ表示に対応しています。 各ディスプレイ内には、複数のレイアウトを含むことができるtmplフォルダーがあります。

カテゴリフォルダを見ると、次のように表示されます。

 /components/com_content/views/category/blog.php
 /components/com_content/views/category/blog_item.php
 /components/com_content/views/category/blog_links.php
 /components/com_content/views/category/default.php
 /components/com_content/views/category/default_items.php


com_contentコンポーネントの場合、default.phpレイアウトは標準バージョンを担当し、記事はリンクとして表示されることに注意してください。

blog_item.phpを開くと、現在テーブルが使用されていることがわかります。 この出力をオーバーライドする場合、必要なものをテンプレート/ htmlフォルダーに配置する必要があります。次に例を示します。

テンプレート/ templatetutorial15bold / html / com_content / category / blog_item.php


これは比較的単純なプロセスです。マッピングを/ components /および/ modules /フォルダーからtemplates / yourtemplate / htmlフォルダーにコピーして貼り付けます。

オーバーライド機能は、テンプレートを使用してJoomlaサイトをカスタマイズするための強力なメカニズムを提供します。 SEO、アクセシビリティ、または特定の顧客ニーズに焦点を合わせた出力テンプレートを作成できます。

知っておくべきこと

Joomla 1.5は、開発者がJoomla上のWebサイトのコードと表示を完全に制御できるテンプレートの新しい機能を提供します。

テーブルレスJoomla

JoomlaディストリビューションにはBeezテンプレートが含まれていますが、これはテンプレートオーバーライドの動作例です。 Design and Accessibilityチームは、htmlフォルダーに含まれるオーバーライドの完全なセットを作成しました。 最後の例は、これらのオーバーライドを使用してJoomla出力からすべてのテーブルを削除するテンプレートです。

CSSTemplateTutorialStep4

そのため、デザインに基づいて作成されたテンプレートがあります。 フォントデザインを追加しましたが、さらに重要なことは、動的に格納可能な列と便利なショートカットメニューを備えたクリーンなCSSテンプレートを作成したことです。 次に、テーブルを使用しないようにJoomlaの出力を再定義しました。 ライブラリにあるインストール可能なテンプレートを作成しました[翻訳者注：このマニュアルのすべてのテンプレートは、 www.compassdesigns.net / downloads / file / 21-csstemplatetutorials1-4.html ]からダウンロードできます。

まとめ


この一連の記事では、4つのサンプルテンプレートを使用して、徐々に複雑にし、機能を追加しました。


Source: https://habr.com/ru/post/J47792/

More articles:


All Articles