このチュートリアルでは、Joomla テンプレートを最初から作成するために必要な手順を説明します。詳細をすべて説明しますので、始めましょう。
このチュートリアルは、ピアソンが提供する最近リリースされた「Joomla! 1.6: ユーザー ガイド」からの抜粋です。
ゲームプラン
Joomla テンプレートとは何ですか? Joomla テンプレートの特徴は何ですか? CMS にコンテンツのないテンプレートとコンテンツが追加されたテンプレートの違いは何ですか?
ローカル ホストの設計プロセスは、静的 HTML Web ページの設計プロセスとどのように異なりますか?
Joomla におけるテーブルレス設計の影響は何ですか? W3C 標準、ユーザビリティ、アクセシビリティの間にはどのような関係がありますか?
Joomla テンプレートはどのようなファイルで構成され、どのような機能を実行しますか?
テーブルの代わりに CSS を使用して、ソース順に 3 列のレイアウトを作成するにはどうすればよいですか?
Joomla で使用する必要がある基本的な CSS スタイルと、Joomla コアで使用されるデフォルトのスタイルは何ですか?
モジュールを配置してスタイルを設定するにはどうすればよいですか?角を丸くするための新技術とは何ですか?
JavaScript で開発されたメニューの効果を模倣する、必要最低限の CSS メニューを作成するための簡単な戦略は何ですか?
コンテンツが存在しないときに列を表示するタイミングと非表示にするタイミングを制御するにはどうすればよいですか?
Joomla 1.6 テンプレートを作成する正しい手順は何ですか?
Joomla! テンプレートとは何ですか?
Joomla テンプレートは、コンテンツのレンダリングを制御する Joomla CMS の一連のファイルです。
Joomla テンプレートは、コンテンツのレンダリングを制御する Joomla CMS の一連のファイルです。 Joomla テンプレートは Web サイトではなく、Web サイトです。また、これは完全な Web サイトのデザインとはみなされません。テンプレートは、Joomla Web サイトを表示するための基本的なデザインです。 「完全な」Web サイトの効果を生み出すために、テンプレートは Joomla データベースに保存されているコンテンツと密接に連携します。
テンプレートは、コンテンツが挿入されると、リンク スタイル、メニュー、ナビゲーション、テキスト サイズや色など、テンプレートで定義されたスタイルシートからスタイルを自動的に継承するようにスタイル設定されます。
Joomla と同様、CMS テンプレートの使用には多くの利点があります。
Joomla は、コンテンツをページに配置するすべての作業を実行します。新しい投稿を入力するだけで、既存のブログ ページに新しい情報を追加できます。テンプレートとその CSS により、サイト上の残りのコンテンツとスタイルが一貫していることが保証されます。
特に (index.php ファイル内のテーブルを使用する代わりに) CSS がレイアウトに使用される場合、コンテンツとプレゼンテーションは完全に分離されます。これは、Web サイトが最新の Web 標準を満たしているかどうかを判断するための主な基準の 1 つです。標準に準拠したサイトでは、表の HTML マークアップは、ページを列にレイアウトするのではなく、表形式のデータを表示するために予約されています。
新しいテンプレートをすぐに適用して、Web サイトの外観を新しくすることができます。これには、色やグラフィックだけでなく、コンテンツやモジュールをさまざまな場所に配置することが含まれる場合があります。
ローカルホストの設計プロセス
Joomla を利用した Web サイトで表示される Web ページは静的ではなく、データベースに保存されているコンテンツに基づいて動的に生成されます。データベース内のコンテンツが変更されると、そのコンテンツを表示するすべてのページが即座に変更されます。表示されるページは、データベースにクエリを実行するテンプレート内のさまざまな PHP コマンドによって作成されます。テンプレートはコンテンツではなくコード行のように見えるため、設計段階でいくつかの問題が発生します。
Web ページを作成する「正しい方法」はありません。
現在では、Dreamweaver などの「表示されているものがそのまま得られる」(WYSIWYG) HTML エディターを使用するのが一般的になっており、HTML コードを記述する必要はありません。ただし、WYSIWYG エディターは動的ページを表示および編集できないため、Joomla テンプレートの設計中にそのようなエディターを使用することはできません。したがって、テンプレートとその CSS を手動でコーディングし、変更が行われると頻繁に更新されるサービス ページで PHP の出力ページを表示する必要があります。接続が十分に速い場合、これは Web サーバーである可能性がありますが、ほとんどの設計者は、コンピューター上でローカル サーバーまたはローカルホスト (第 1 章 2 で説明したローカルホスト設定など、コンピューター上で Web ページを提供するソフトウェア) を使用します。 「Joomla をダウンロードしてインストールしてください!」
Web ページを作成する「正しい方法」はありません。どのように作成するかは、あなたのバックグラウンドによって異なります。グラフィックを好む人は、グラフィック プログラム (Photoshop など) でページの「画像」を作成し、Web で使用するためにその画像を分割する (スライス アンド ダイシングと呼ばれます) 傾向があります。テクノロジーベースのデザイナーは、多くの場合、直接 CSS に飛び込み、フォント、境界線、背景のコーディングを開始します。ただし、先ほど述べたように、Joomla テンプレートのデザイナーは、同じエディターでコーディングの効果をすぐに確認できないという制限があります。したがって、次の変更された設計フローを使用できます。
localhost サーバーにバックグラウンドで実行されているものをロードして、Joomla を「実行」させます。
エディターを使用して HTML と CSS を編集し、変更をサーバーに保存します。
編集の影響を受けるページを Web ブラウザで表示します。
ローカルホスト サーバー オプション
このチュートリアルを続けるには、WampServer をインストールする必要があります。まだインストールを行っていない場合は、インストールを続行します。ここで待ちます。
ホストされた Web サーバーでは、ブラウザの別のタブでフロントエンドを開いているときに、バックエンドで HTML テンプレートと CSS ファイルを編集できます。変更を保存するときに、フロントエンド ビューを更新するだけで影響を確認できます。
localhost 設定を使用すると、より簡単にファイルに直接アクセスし、選択したエディタで編集できるようになります。変更を保存した後、エディターを閉じることなく、ブラウザーでフロントエンド ビューを更新し、その影響を確認できます。
W3C とテーブルレス デザイン
ユーザビリティ、アクセシビリティ、検索エンジン最適化 (SEO) はすべて、今日インターネットで高品質の Web ページを説明するために使用されるフレーズです。実際、ユーザビリティ、アクセシビリティ、SEO の間にはかなりの重複があり、これらの特性のいずれかを示す Web ページは、多くの場合、3 つすべてを示します。これら 3 つの目標を達成する最も簡単な方法は、W3C Web 標準で指定されているフレームワークを使用することです。
たとえば、視覚障害のある人は、スクリーン リーダーを使用すると、HTML セマンティクスを使用して構築された Web サイトを簡単に読むことができます。検索エンジンのスパイダーによっても簡単に読み取られる可能性があります。実際、Google はスクリーン リーダーを使用するのと同じように、Web サイトの読み方についてはまったく知りません。
Web 標準は、すべての Web ブラウザが Web ページを表示するために使用する共通の「ルール」セットを確立します。これらの標準を推進している主要な組織は W3C で、そのディレクターである Tim Berners-Lee は 1989 年に Web を発明したとされています。
Web 標準がどこから来たのかを理解するには、少しの歴史を知ることが役立ちます。多くの Web ページは実際には古いブラウザー向けに設計されています。なぜ？ World Wide Web の誕生以来、ブラウザは進化を続けてきました。世代ごとに新しい機能が導入され、メーカーはそれに対して異なる、場合によっては独自のラベル (名前) を考案しました。各ブラウザには、同じ基本的な HTML 言語を実装しても、異なる構文または「方言」や癖がある傾向があります。新しいブラウザが登場し、いくつかの古いブラウザは姿を消しました (Netscape を覚えていますか?)。
現在の W3C 標準は、同じ言語を読み取り、より一貫してページを表示できる、より互換性のあるブラウザのリリースをメーカーに後押しして、デザイナーが単一の共通プラットフォーム上でデザインをターゲットにできるようにするのに役立ちます (できれば)。
もう 1 つの複雑な要因は、歴史的に、さまざまなブラウザ メーカー (Microsoft など) が、ブラウザで HTML をわずかに異なる方法で解釈する傾向があることです。したがって、Web デザイナーは、新しいブラウザではなく古いブラウザをサポートするように Web サイトを設計する必要があります。デザイナーや Web サイトの所有者は、Web ページがこれらの「古い」ブラウザーで正しく表示されることが重要であると考えることがよくあります。 Web ページ コードの W3C 標準は、一貫性を実現するために開発されました。 W3C Web 標準を組み込んだ Web サイトには、アクセスしやすく、使いやすく、検索エンジン向けに最適化するための優れた基盤が備わっています。これらを家の建築基準と考えてください。これらを使用して構築された Web サイトは、より強力で安全で、ユーザーの期待に沿ったものになります。 W3C の HTML 検証サービス (validator.w3.org) を使用してページをチェックできます。シンプルかつ無料です (コードを検証するときは、必ず正しい DOCTYPE を使用するようにしてください。最も単純な場合、W3C 検証を満たす Web サイトでは、セマンティック HTML を使用し、CSS を使用してコンテンツとプレゼンテーションを分離することもあります。
5 人のデザイナーに Web 標準とは何かと尋ねると、5 つの異なる答えが得られます。しかし、Web 標準は、最新バージョンの標準で規定されているように、HTML (またはそれ以外) の有効なコードの使用に基づいていることにほとんどの人が同意します。指定された方法。
意味的に正しいコード
意味的に正しいとは、Web ページ内の HTML タグが表現ではなくコンテンツのみを記述することを意味します
前に述べたように、意味的に正しいとは、Web ページ内の HTML タグがコンテンツのみを記述し、プレゼンテーションを記述していないことを意味します。特に、これは、H1 タグ、H2 タグなどの構造化された編成を意味し、テーブルは目的にのみ使用されます。レイアウト用ではなく、表形式のデータ Joomla テンプレートのデザイナーが純粋にセマンティックな正確さに関して若干妥協している領域の 1 つは、2 列または 3 列のレイアウトの左と右の列に、セマンティックではなく「左」と「右」という名前を付けることです。これらがテンプレート PHP で使用されている単なる場所名である場合、それらは技術的に正しいです。HTML および CSS で一致するクラスを定義するためにも使用されている場合は、表示ページとの一貫性が保たれます。名前を付けるのは、許容できる便宜です。または、左の列に関連するすべてを左として分類します。以下の例では、左側の位置がクラス サイドバーを使用してスタイル設定されており、右側の位置がサイドバー 2 であることがわかります。これは意味的に正しいコードです。
カスケード スタイル シート (CSS)
コードを意味的に正しくすることと密接に関係しているのは、CSS を使用して Web ページの外観とレイアウトを制御することです。CSS はスタイルを追加するための単純なメカニズムです (例:
CSS は HTML コードと並行して存在するため、コンテンツ (コード) とプレゼンテーション (CSS) の分離を完全に分離できます。
これを実際に確認するには、CSS ファイルを変更するだけで同じ HTML コンテンツを異なる独自の方法で表示する Web サイトである CSS Zen Garden をチェックしてください。結果として得られるページは非常に異なって見えますが、本質的には同じです。
現在、Joomla を利用した Web サイトのデザインは、検証基準を満たす上でかなりの課題に直面しています。
現在、Joomla を利用した Web サイトのデザインは、検証基準を満たす上でかなりの課題に直面しています。 Joomla バージョンの最初のシリーズである 1.0.X では、コードはページを出力するために多くのテーブルを使用していました。これは実際には CSS の使用方法のデモンストレーションではなく、意味的に正しいコードを生成するものでもありません。この問題は、コンポーネントやモジュールの多くのサードパーティ開発者が依然としてテーブルを使用してレイアウトを生成しているという事実によってさらに悪化します。
幸いなことに、Joomla コア開発チームは Joomla のこの問題を認識していました。 Joomla 1.5 では、テンプレート設計者はコアの出力 (ビューと呼ばれる) を完全にオーバーライドし、テーブルを削除したり、レイアウトを任意の方法でカスタマイズしたりできます。
テンプレートを作成するときは、アクセスしやすい (スケーラブルなフォント サイズなど)、使いやすい (明確なナビゲーション)、検索エンジン用に最適化されている (ソートされたソース コード) ことを確認するために、依然として注意が必要です。
単純なテンプレートを作成する: ステップ 1
テンプレートの内容を理解するために、まず空の Joomla テンプレートを確認します。
テンプレート ファイル コンポーネント
このセクションでは、テンプレート ファイルを手動でセットアップするプロセスについて説明します。通常、これらすべての手順を実行する Joomla インストーラーを使用してテンプレートをインストールします。
独自のテンプレートを構築する場合は、複数のファイルとフォルダーを調整して設定する必要があります。テンプレートにはさまざまなファイルやフォルダーを含める必要があります。これらのファイルは、Joomla インストールの /templates/ ディレクトリに配置する必要があり、各ファイルはそのテンプレートに指定されたフォルダーに配置されます。 Element と Voodoo という名前の 2 つのテンプレートをインストールした場合、ディレクトリは次のようになります:
/templates/element
/templates/voodoo ログイン後にコピー
テンプレートのディレクトリ名はテンプレートの名前と同じである必要があることに注意してください (この場合は element と voodoo)。これらの名前では大文字と小文字が区別され、スペースを含めることはできません。
テンプレート ディレクトリには 2 つの重要なファイルがあります:
/element/templateDetails.xml
/element/index.php ログイン後にコピー
これらのファイル名と場所は、Joomla コア スクリプトによる呼び出し方法であるため、正確に一致する必要があります。 1 つ目はテンプレート XML ファイルです。
これは、このテンプレートを使用する Web ページを読み込むときに他のファイルが必要であることを Joomla に伝える XML 形式のメタデータ ファイルです。 (大文字の D に注意してください。) また、作成者、著作権、およびテンプレートを構成するファイル (使用されている画像を含む) についても詳しく説明します。
このファイルの最後の用途は、管理バックエンドで拡張機能インストーラーを使用するときにテンプレートを解凍してインストールすることです。
2 番目のキー ファイルは、ページを生成するためのメイン テンプレート ファイル、index.php です。
このファイルは、Joomla テンプレートの中で最も重要なファイルです。これはサイトをレイアウトし、Joomla CMS にさまざまなコンポーネントとモジュールを配置する場所を指示します。 PHPとHTMLを組み合わせたものです。
ほとんどすべてのテンプレートは追加のファイルを使用します。ここで Element という名前のテンプレートに示されているように、それらに名前を付けて配置するのが慣例です (ただし、Joomla コアでは必須ではありません)。
/element/template_thumbnail.png
/element/params.ini
/element/css/template.css
/element/images/logo.png ログイン後にコピー
これらは単なる例です。テンプレート内の一般的なファイルの一部は次のようになります。
/element/template_thumbnail.png -- テンプレートの Web ブラウザーのスクリーンショット (通常は幅約 140 ピクセル、高さ 90 ピクセルに縮小されます)。テンプレートがインストールされると、プレビュー イメージとして機能し、Joomla Admin Template Manager に表示されます。
/element/params.ini -- テンプレートが持つパラメータの値を保存するために使用されるテキスト ファイル。
/element/css/template.css -- テンプレートの CSS。フォルダーの場所はオプションですが、index.php ファイルでその場所を指定する必要があります。好きな名前を付けることができます。通常は表示名が使用されますが、他の CSS ファイルを使用することにも利点があることが後でわかります。
/element/images/logo.png – テンプレートに付属する任意の画像。また、整理上の理由から、ほとんどのデザイナーは画像フォルダーに画像を配置します。ここでは例として、logo.png という画像ファイルがあります。
templateDetails.xml templateDetails.xml ファイルは、テンプレートの一部であるすべてのファイルまたはフォルダーのリストを含むマニフェストまたはパッキング リストとして機能します。著者や著作権などの情報も含まれます。これらの詳細の一部は、Template Manager の管理バックエンドに表示されます。 XML ファイルの例を次に示します:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN"
"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<install version="1.6" type="template">
<name>960TemplateTutorialStep1</name>
<creationDate>1/10/10</creationDate>
<author>Barrie North</author>
<authorEmail>contact@compassdesigns.net</authorEmail>
<authorUrl>http://www.compassdesigns.net</authorUrl>
<copyright>Copyright (C) 2005 - 2010 Barrie North</copyright>
<license>GPL</license>
<version>1.6.0</version>
<description>The first of 4 tutorial templates from
Joomla 1.6 - A User's Guide</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumbs</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
<position>debug</position>
</positions></p>
<p> <config>
<fields name="params">
<fieldset name="basic">
<field
name="colorVariation"
type="list"
default="white"
label="Color Variation"
description="Base Color of template">
<option
value="blue">blue</option>
<option
value="red">red</option>
</field>
</fieldset>
</fields>
</config>
</install></p> ログイン後にコピー
いくつかの行の意味を見てみましょう:
960TemplateTutorialStep1 模板中使用的内容使用 和 标签进行布局，如下所示：
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files> ログイン後にコピー
“文件”部分包含所有通用文件，例如模板的 PHP 源文件或模板预览的缩略图。本节中列出的每个文件都由 tags 括起来。您还可以使用 标记包含整个文件夹，例如图像文件夹。
index.php 内每个列出的职位生成内容的 PHP 代码精确匹配。index.phppindex.php 文件中到底有什么？它是 HTML 和 PHP 的组合，决定了页面布局和呈现的所有内容。
让我们看一下实现有效模板的关键部分：index.php 文件顶部的 DOCTYPE。这是每个网页顶部的一段代码。在我们页面的顶部，将其放入模板中：
<?php
/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ログイン後にコピー
第一个 PHP 语句仅显示版权/许可证，并确保文件不会被直接访问以确保安全。
网页 DOCTYPE 是浏览器如何显示网页的基本组成部分之一 - 如何处理各种 HTML 标记，更重要的是，浏览器如何解释 CSS。 A List Apart 的以下观察应该可以澄清一些事情：
您可以使用多个 DOCTYPE。基本上，DOCTYPE 告诉浏览器使用什么版本的 HTML 来设计页面，是否有一些遗留代码或还包含 XML，以及如何解释页面。
这里开始出现“严格”和“过渡”一词（通常为 float:left 和 float:right），以指示是否包含遗留代码。本质上，自从 Web 诞生以来，不同的浏览器对各种 HTML 标签和 CSS 版本都有不同程度的支持。例如，Internet Explorer 6 或更低版本将无法理解用于设置最小页面宽度的 min-width 命令。要复制效果以使其在所有浏览器中显示相同的效果，有时必须在 CSS 中使用特定于浏览器的“技巧”，以弥补每个浏览器遵守已发布标准的缺陷。
严格意味着 HTML 将完全按照标准的规定进行解释。过渡性 DOCTYPE 意味着该页面将允许与标准存在一些商定的差异（例如，继续使用已停止使用的标签）。
让事情变得复杂的是，有一种叫做“怪癖”模式的东西。如果 DOCTYPE 错误、过时或不存在，浏览器将进入怪异模式。这是向后兼容的尝试，因此 Internet Explorer 6 会像 Internet Explorer 4 一样呈现页面。
不幸的是，人们有时会意外地陷入怪癖模式。它通常以两种方式发生：
他们直接使用来自 WC3 网页的 DOCTYPE 声明，链接最终为 DTD/xhtml1-strict.dtd，这是 WC3 服务器上的相对链接。您需要完整路径，如前面所示。 Microsoft 设置了 Internet Explorer 6，以便您可以拥有有效的页面，但处于怪异模式。当您将 xml 声明放在 DOCTYPE 之前而不是之后时，就会发生这种情况。 接下来是一个 XML 语句（在 DOCTYPE 之后）：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > ログイン後にコピー
我刚刚向您提供的有关 Internet Explorer 6 怪异模式的信息非常重要。在本教程中，您仅针对 Internet Explorer 6 及更高版本进行设计，并且需要确保它在标准模式下运行，以最大程度地减少您稍后必须执行的操作。
我们看一下index.php文件头的结构；您希望它尽可能小，但仍然足以满足生产站点的需要。您将使用的标头信息如下：
<?php
/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/template.css" type="text/css" />
</head> ログイン後にコピー
这一切意味着什么？
我们已经讨论了 index.php 文件中 DOCTYPE 语句的含义。 <?php echo $this->语言; ?< 代码从全局配置中的站点语言设置中提取语言。
$app = Jfactory::getApplication(); 是一个变量，允许您获取各种参数（例如站点名称）并在模板中使用它们。下一行用于包含更多标头信息：<jdoc :include type="head" />
此代码片段将在生成的页面（即您的前端）中插入全局配置中设置的所有标头信息。在默认安装中，它包括此处显示的标签：
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="rights" content="" />
<meta name="language" content="en-GB" />
<meta name="description" content="Joomla! -
the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.6 -
Open Source Content Management" />
<title>Home</title>
<link href="/Joomla_1.6/index.php?format=feed&type=rss" rel="alternate"
type="application/rss+xml" title="RSS 2.0" />
<link href="/Joomla_1.6/index.php?format=feed&type=atom"
rel="alternate" type="application/atom+xml" title="Atom 1.0" /> ログイン後にコピー
大部分标题信息都是即时创建的，特定于某人正在查看的页面（文章）。它包括许多元标记和任何 RSS 源 URL。
标题中的最后几行提供了 Joomla 生成的页面的 CSS 文件链接，以及此模板中的 CSS 文件：
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/template.css" type="text/css" /> ログイン後にコピー
前两个文件，system.css 和general.css，包含一些通用的 Joomla 样式。最后一项是模板的所有CSS，这里称为template.css。 PHP 代码 template ?> 返回当前模板的名称。以这种方式编写而不是编写实际路径会使代码更加通用。当您创建新模板时，您只需复制此行（以及整个标题代码）即可，而不必担心编辑任何内容。
模板 CSS 可以包含任意数量的文件，例如针对不同浏览器和不同媒体（例如打印）的条件文件。例如，以下代码检测并添加一个针对 Internet Explorer 6 怪癖的附加 CSS 文件（我们将在此处将其排除在工作示例之外）：
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css"
rel="stylesheet" type="text/css" />
<![endif]--> ログイン後にコピー
下一个示例是使用模板参数的技术的一部分。在本例中，在模板管理器中选择作为参数的颜色方案正在加载与所选颜色同名的 CSS 文件：
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/<?php echo $this->params-
>get('colorVariation'); ?>.css" type="text/css" /> ログイン後にコピー
它可能会生成以下内容：
<link rel="stylesheet" href="/templates/960TemplateTutorialStep1/css/red.css"
type="text/css" /> ログイン後にコピー
Joomla!页面正文 仍然在 index.php 文件中，现在页面的 <head> 部分已设置，我们可以继续处理 body 标记。创建您的第一个模板将会很容易！准备好了吗？
要创建模板，您所需要做的就是使用 Joomla 语句插入主体内容以及您想要的任何模块：
<body>
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="debug" />
</body> ログイン後にコピー
ログイン後にコピー
该模板包含以下内容，按合理的逻辑查看顺序排列：
网站名称 顶级模块 左侧模块 面包屑栏 主要内容 正确的模块 页脚模块 调试模块 此时（如果您预览它，请确保它是默认模板），该网站看起来不太令人惊叹。
您希望尽可能接近语义标记。从网络的角度来看，这意味着任何人都可以阅读页面——浏览器、蜘蛛或屏幕阅读器。语义布局是可访问性的基石。
请注意，您使用了 Joomla 特有的多个命令中的第一个来创建此输出：
<body>
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="debug" />
</body> ログイン後にコピー
ログイン後にコピー
PHP echo 语句只是从 configuration.php 文件中输出一个字符串。在这里，您使用站点名称；您可以轻松地使用以下内容：
The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();?> ログイン後にコピー
jdoc 语句插入来自模块或组件的各种类型的 HTML 输出。
该行插入组件的输出。它是什么组件将由链接的菜单项确定： <jdoc:include type="component" />
此行插入模块位置的输出：<jdoc:include type="modules" name="right" />
该行为所有位置设置为右侧的模块生成内容。为这些模块生成的内容按照模块管理器的顺序列中设置的顺序放置在页面中。这是完整的语法：
<jdoc:include type="modules" name="location" style="option" /> ログイン後にコピー
ログイン後にコピー
使用 CSS 创建无表格布局：CSS 模板教程 - 步骤 2 在本节中，您将使用纯 CSS 为 Joomla 模板制作三列布局。您还将使其成为“fixed”布局。网页layouts主要有三种类型——fixed、fluid和jello——它们都是指如何控制页面的宽度。
fixed 布局的宽度设置为某个 fixed 值。fluid 布局可以根据浏览器窗口增大和缩小。果冻布局是 fluid 但介于一些最小值和最大值之间。 几年前，fluid 宽度模板风靡一时。辅助功能人员喜欢它们，抓住浏览器窗口的一角并看到所有内容滑动真是太酷了。
但是现在，我不制作fluid模板，而是专注于fixed宽度模板。我坚信它们最适合当今的网络。四年前，很多人还在使用 800px 宽度的屏幕。 fluid 宽度的要点是，您可以拥有一个在 1024px 屏幕中看起来不错的网页，但仍然可以缩小到仍在使用的较小屏幕。
现在，屏幕的趋势却相反。人们正在使用巨大的屏幕； 32% 的浏览 Joomlahack.com 的人使用的分辨率超过 1024px。
有了这些大屏幕和 960px 宽度布局，你会遇到一个新问题——可读性。研究表明，当您浏览 960px 时，屏幕上的可读性会下降。所以 fluid 的宽度会填满那个大屏幕，并且 a) 看起来很愚蠢，b) 会减慢你的阅读速度。
典型的设计可能使用表格来布局页面。表格作为一种快速解决方案非常有用，因为您只需将列的宽度设置为百分比即可。然而，表格也有一些缺点。例如，与 CSS 布局相比，表格有很多额外的代码。这会导致加载时间更长（冲浪者不喜欢）和搜索引擎性能较差。代码的大小大约可以加倍，不仅可以使用标记，还可以使用“间隔 GIF”，即放置在表格的每个单元格中的 1x1 透明图像，以防止单元格折叠。即使是大公司有时也会陷入桌子陷阱。
基于表格的布局问题 它们很难维护。要更改某些内容，您必须弄清楚所有表标记（例如 tr 和 td）正在做什么。使用 CSS，只需检查几行。 内容无法按来源订购。许多网络冲浪者不会在浏览器上看到网页。使用文本浏览器或屏幕阅读器查看的用户从左上角到右下角阅读页面。这意味着他们首先查看标题和左列（对于三列布局）中的所有内容，然后再到达重要内容所在的中间列。另一方面，CSS 布局允许“按源排序”内容，这意味着可以在代码/源中重新排列内容。也许您最重要的网站访问者是 Google，它出于各种目的使用屏幕阅读器。 当谈到 CSS 布局时，出现了一种使用新框架的趋势。这个想法是使用一组一致的 CSS 来创建布局，然后维护该组以解决浏览器兼容性等各种问题。对于此模板，我们将采用 Nathan Smith 开发的 960 网格系统。它仍然不是很令人兴奋，但让我们看看不同部分的含义。
使用 960 网格系统，您只需用一个类指定您想要的网格有多大。在此示例中，我使用 12 列网格，因此要使标头横跨 960px 的整个宽度，请在 index.php 中使用：
<div id="header" class="container_12"></div> ログイン後にコピー
对于我们的三列，我们在容器内添加网格，如下所示：
<div id="content" class="container_12">
<div id="" class="grid_3 ">
<jdoc:include type="modules" name="left" />
</div>
<div id="" class="grid_6">
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
</div>
<div id="" class="grid_3">
<jdoc:include type="modules" name="right" />
</div>
</div> ログイン後にコピー
请注意，具有 10px 列间距（通常称为装订线）的内容已经有了一些喘息空间。这一切都是由聪明的 960 CSS 网格框架自动完成的，并且所有浏览器问题（是的，我们指的是您，Internet Explorer）都得到了处理。
index.php主要代码如下：
<body>
<div id="header" class="container_12">
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
</div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules" name="left" />
</div>
<div id="maincolumn" class="grid_6">
<jdoc:include type="modules" name="breadcrumbs" /
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_3">
<jdoc:include type="modules" name="right" />
</div>
</div>
<div id="footer" class="container_12">
<jdoc:include type="modules" name="footer" />
</div>
<jdoc:include type="modules" name="debug" />
</body> ログイン後にコピー
在此示例中，我将 CSS 文件重命名为 layout.css。使用 960 网格框架，我们很少需要接触这个文件，并且可以尽可能地压缩它。 layout.css 文件的关键部分如下所示：
.container_12 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.alpha {
margin-left:0 !important;
}
.omega {
margin-right:0 !important;
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,
.grid_10,.grid_11,.grid_12,.grid_12 {display:inline;
float:left;
position:relative;
margin-left:10px;
margin-right:10px;
}
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
} ログイン後にコピー
很简单，所有内容都向左浮动，并且各种网格大小根据其所需的宽度设置。它是一个 12 列的网格，因此，例如 grid_6 表示六列，即 460 像素 - 全宽度减去填充。这个简单的布局非常适合学习如何在 Joomla 中使用 CSS，因为它显示了 CSS 相对于基于表格的布局的两个优点：代码更少，并且更易于维护。
按源排序的布局对于 SEO 效果更好。
但是，这个简单的布局是按照您在屏幕上看到内容的顺序在代码中排序的。将最重要的内容放置在生成的 HTML 源代码的开头，但在屏幕上仍具有相同的按查看器排序的外观，即左侧列显示在中心列之前（即左侧），这不是“源排序” .
按源代码排序的布局比重要内容出现在代码后期的布局更适合 SEO。从 Joomla 网站的角度来看，重要的内容是来自主体组件的内容。目前，为了保持 CSS 简单，我们将坚持使用这种按查看器排序的布局，并在本文后面更改为按源排序的布局。许多商业模板（例如 Joomlahack 的模板）进一步发展了这种按源排序的概念。
默认CSS 到目前为止，所有 CSS 都只是关于布局，这使得页面变得简单。因此，让我们添加一些格式，将 CSS 放置在名为typography.css 的新文件中。记得将其添加到index.php文件中！
当您开始使用 CSS 进行排版时，您应该设置一些整体样式并包括一个简单的全局重置：
/*Compass Design typography css */
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
} ログイン後にコピー
全局重置的目的是覆盖每个浏览器中不同的默认设置，并获得一个干净、一致的起点，无论页面显示在哪个浏览器上。
所有内容都被赋予零边距和填充，然后所有块级元素都被赋予底部和底部边距。这有助于实现浏览器的一致性。 （上面的第一个 CSS 选择器称为星形选择器，即使在 Internet Explorer 6 中，它也可以充当通用选择器。）您可以在此处和此处阅读有关全局重置的更多信息。
您将字体大小设置为 76% 以尝试在各个浏览器中获得更一致的字体大小。然后在 ems 中设置所有字体大小。设置 line-height:1.3 有助于提高可读性。当您在 ems 中设置字体和行高时，页面将更易于访问，因为查看者将能够根据自己的喜好调整字体大小，并且页面将重排并保持可读。此处将对此进行进一步讨论。
如果您要向标题、侧边栏和内容容器添加一些背景颜色，您会看到如下所示的内容。
请注意，侧栏未到达页脚。这是因为它们仅延伸到其内容；如果左侧和右侧的空间为白色，则侧列不存在。
如果您的模板的所有三列都是白色背景，那么这没有问题。您将使用这种方法，并且模块周围会有方框。如果您想要彩色或带有方框的等高列，则必须使用某种技术使列具有相同的高度。一种常见的解决方案是使用 JavaScript 脚本来动态计算和设置高度。
模板中的模块 当在 index.php 文件中调用模块时，有多种显示方式的选项。语法如下：
<jdoc:include type="modules" name="location" style="option" /> ログイン後にコピー
ログイン後にコピー
样式是可选的，在 templates/system/html/modules.php 中定义。目前，默认的 modules.php 文件包含以下布局选项：table、horz、xhtml、rounded 和 none。让我们简要了解一下每个选项所需的代码行：
OPTION="table" (默认显示)模块显示在一列中。如果我们使用 "table" 选项，下面显示了 Joomla 的输出。请注意，PHP 语句将被实际内容替换：
<table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params-
>get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<tr>
<th valign="top">
<?php echo $module->title; ?>
</th>
</tr>
<?php endif; ?>
<tr>
<td>
<?php echo $module->content; ?>
</td>
</tr>
</table> ログイン後にコピー
OPTION="horz" 使模块水平显示。每个模块都在包装器表的单元格中输出。如果我们使用 "horz" 选项，以下显示了 Joomla 的输出：
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top">
<?php modChrome_table($module, $params, $attribs); ?>
</td>
</tr>
</table> ログイン後にコピー
OPTION="xhtml" 使模块显示为简单的 div 元素，标题位于 H3 中
标签。如果我们使用 "xhtml" 选项，以下显示了 Joomla 的输出：
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div> ログイン後にコピー
OPTION="rounded" 使模块以允许可拉伸圆角等的格式显示。如果使用 $style，则 div 名称从 moduletable 更改为 module。如果我们使用 "rounded" 选项，以下显示了 Joomla 的输出：
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
</div>
</div> ログイン後にコピー
OPTION="none" 使模块显示为不包含任何元素和标题的原始输出。
如您所见，CSS 选项（xhtml 和 rounded）的代码更加简洁，这使得设计网页样式变得更加容易。除非绝对需要，否则我不建议使用选项（后缀）表（默认）或 horz。
如果您检查前面显示的 modules.php 文件，您将看到模块中存在的所有这些选项。添加您自己的内容很容易；这是 Joomla 1.6 新模板功能的一部分。
要开发模板，您可以将模块样式xhtml放在index.php中的所有模块上：
<body>
<div id="header" class="container_12">
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<div class="clear"></div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div>
<div id="maincolumn" class="grid_6">
<jdoc:include type="modules" name="breadcrumbs" style="xhtml"
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_3">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div class="clear"></div>
<div id="footer" class="container_12">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<jdoc:include type="modules" name="debug" />
</body> ログイン後にコピー
让我们从布局 div 中删除背景，并添加一些 CSS 来设置模块的样式，其中包含模块标题的边框和背景。
我们将以下内容添加到排版中。您的 CSS 文件现在应该如下所示：
#header{
font-size:2em;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/
ul.actions li{
float:right;
list-style:none;
border:0;}
ul.actions li a img{
border:0;} ログイン後にコピー
在这里，您为使用 style="xhtml" 生成的模块添加了特定的样式规则，因此每个模块都生成了 .moduletable 类的 <div>，并且模块的标题显示在该 <div> 内的
标记中。 您创建的排版 CSS 现在会产生如下所示的结果。
模板中的菜单 同样，使用 CSS 列表而不是表格可以减少代码并简化标记。将 CSS 用于菜单的其他优点之一是，各种 CSS 开发人员网站上都有大量示例代码。让我们看一下其中一个并看看如何使用它。
maxdesign.com 的网页有三十多个菜单可供选择，所有菜单都使用相同的底层代码。它被称为Listamatic。您必须更改代码才能使这些菜单适应 Joomla。
这些基于列表的菜单使用以下通用代码结构：
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div> ログイン後にコピー
这意味着有一个名为 navcontainer 的封闭 <div>，并且 <ul> 有一个 id of navlist。要在 Joomla 中复制此效果，您需要某种封闭的 <div>。您可以通过使用模块后缀来实现这一点。回想一下，带有 style="xhtml" is 的模块的输出如下：
<div class="moduletable">
<h3>...Module_Title...</h3>
...Module_Content...
</div> ログイン後にコピー
如果添加一个名为 menu 的模块后缀，它将被添加到 moduletable 类中，如下所示：
<div class="moduletablemenu">
<h3>...Module_Title...</h3>
...Module_Content...
</div> ログイン後にコピー
因此，从 Listamatic 中选择菜单时，您需要将 CSS 中的 navcontainer 类样式替换为 moduletablemenu。
模块类后缀的使用很有用。只需简单更改模块类后缀即可使用不同颜色的框。
对于您的网站，假设您想要使用 Mark Newhouse 的列表 10（请参见此处）。你的 CSS 看起来像这样：
.moduletablemenu{
padding:0;
color: #333;
margin-bottom:1em;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
border-bottom:1px solid #fff;
}
.moduletablemenu ul{
list-style: none;
margin: 0;
padding: 0;
}
.moduletablemenu li{
border-bottom: 1px solid #ccc;
margin: 0;
}
.moduletablemenu li a{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #333;
border-right: 10px solid #9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body .moduletablemenu li a {
width: auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
} ログイン後にコピー
您需要将模块后缀菜单（在本例中没有下划线）添加到您想要使用这组 CSS 规则设置样式的菜单的任何模块中。这会生成如下所示的菜单
隐藏列 到目前为止，您的布局始终具有三列，无论这些列中是否有任何内容。从 CMS 模板的角度来看，这并不是很有用。在静态网站中，内容永远不会改变，但您希望网站管理员能够将内容放入任何列中，而不必担心编辑 CSS 布局。您希望能够自动关闭某列，或者在没有内容显示的情况下将其折叠。
Joomla 1.6 提供了一种简单的方法来计算为特定位置生成内容的模块数量，以便您可以添加对这些计数的一些 PHP 测试并隐藏任何空列或类似的未使用的 div 容器，并相应地调整布局。 PHP if 模块测试语法如下：
<?php if($this->countModules('condition')) : ?>
do something
<?php else : ?>
do something else
<?php endif; ?> ログイン後にコピー
有四种可能的情况。例如，我们来统计一下图 9.7 中的模块数量。您可以将此代码插入到index.php中的某个位置：
left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?> ログイン後にコピー
因此，如果我们将此代码插入到模板中，我们可能会通过示例 Joomla 内容获得以下结果：
countModules('left') - 返回 3，因为左侧有 3 个模块。 countModules('left and right') - 返回 1，因为左侧和右侧位置都有一个模块。两个测试都是正确的（>0）。 countModules('left or right') - 返回 1，因为左侧或右侧位置有一个模块。两个测试都是正确的（>0）。 countModules('left + right') - 返回 4，因为它将左侧和右侧位置的模块加在一起。 在这种情况下，您需要使用允许您对特定位置（例如右列）中存在的模块进行计数的函数。如果右栏没有发布内容，您可以调整栏大小来填充该空间。
有多种方法可以做到这一点。您可以将条件语句放在正文中以不显示内容，然后根据其中的列使用不同的内容样式。我们将利用网格系统，并根据一些计算简单地传递网格的大小。
在标头中，我们定义几个变量以确保它们具有默认值。
$leftcolgrid= "3";
$rightcolgrid= "3"; ログイン後にコピー
在模板的 HTML 中，我们可以使用这些变量来设置网格类：
<div id="content" class="container_12">
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div>
<div id="maincolumn" class="grid_<?php echo
(12-$leftcolgrid-$rightcolgrid);?>">
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div> ログイン後にコピー
您会注意到我们正在回显 colgrid 值，然后进行简单的计算来查找主列，因为我们知道它们的总数必须为 12。
然后我们可以使用 countModules 函数来查找一些值。在我们的头脑中我们插入：
<?php
if ($this->countModules('left') == 0):?>
<?php $leftcolgrid = "0";?>
<?php endif; ?>
<?php
if ($this->countModules('right') == 0):?>
<?php $rightcolgrid = "0";?>
<?php endif; ?> ログイン後にコピー
请注意，我们正在检查左右位置是否有零个模块，因为我们已经将默认网格大小设置为 3。我们也可以通过真/假检查而不是数值来完成此检查（零）。
您已经完成了一半，但现在您已经扩展了中心列的宽度以容纳任何空的（即将隐藏）侧列。
隐藏模块代码 创建可折叠列时，最好将模块设置为在没有内容时不生成。如果不这样做，页面中将包含空 div，这可能会导致跨浏览器问题。
为了不生成空 div，请使用以下 if 语句：
<?php if($this->countModules('left')) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div>
<?php endif; ?> ログイン後にコピー
当您使用此代码时，如果left位置没有发布任何内容，则<div id="sidebar">;此外，其中的所有内容都不会包含在生成的页面中。
对左列和右列使用这些技术，您的 index.php 文件现在如下所示：
<head>
<?php if($this->countModules('left')) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div>
<?php endif; ?>
countModules('right')) : ?>
