HTML テンプレートは、特定のコンテンツが表示されるページの領域 (通常は div ブロック) を定義します。たとえば、通常は中央領域にページのコンテンツが表示されます。サイト所有者/作成者は、このエリアに表示される組み込みの WYSIWYG エディターを使用して記事を作成できます。
また、さまざまなオブジェクトを表示するための領域を HTML テンプレートで定義できます。
一般に、これらはドキュメントのヘッダー (常に上部に表示されるもの)、フッター (下部に表示されるもの)、メニュー領域、側面のいくつかの領域などの領域です。ここでは、すべてがテンプレート作成者の希望に依存します。これらの領域はポジションと呼ばれます。
テンプレートにはその他の機能もありますが、それについては後述します。
モジュール – ページ上の特定の指定された場所に表示できる HTML/PHP/CSS/JavaScript コードを含むオブジェクト。典型的なモデルの例: サイト言語の切り替え、サイト認証ブロック、サイト検索バー、投票など。
プラグインは、ページ コンテンツ内に埋め込むことができる HTML/PHP/CSS/JavaScript コードを含むオブジェクトです。モジュールとの違いはページ上の表示箇所のみです。記事の作成者は、WYSIWYG エディターとして作業するときに、特定のコード (HTML コードと同様) を挿入する機会があります。サイト自体では、このコードはモジュールに似たオブジェクトに置き換えられます。
成分 – 多くの設定を持つグローバル オブジェクト。通常、コンポーネントに加えて、モジュールとプラグインもあります。たとえば、コンポーネントとしては、ゲストブック、オンライン ストア、フォーラムなどが考えられます。これらすべてのオブジェクトには多くの設定があり、別のページに表示できます。
WYSIWYGエディタ – オンライン テキスト エディター (表示されているものがそのまま得られます)。 Microsoft Word や WordPad に似た簡素化されたパネルを使用して、エディターが自動的に HTML コードに変換する記事を作成できます。

モジュール、プラグイン、およびコンポーネントは両方とも拡張機能です。拡張機能の助けを借りて、CMS 自体をインストールすることで、Web サイトをオンライン ストア、ブログ、フォーラムなど、望むものに変えることができます。
すべての拡張機能は zip アーカイブの形式で提供され、管理パネルからサイトにダウンロード/インストールできます。
拡張機能のメインディレクトリは、Joomla 公式 Web サイトのディレクトリです。 http://extensions.joomla.org/
そこからダウンロードすると、拡張機能に悪意のあるコードや広告コードが含まれていないことをある程度確信できます。少なくとも、そのような拡張機能はすべて迅速かつ容赦なくカタログから削除されると信じたいです。多くの人と同様、私も、開発者は評判を重視しているため、人気があり実績のある拡張機能を好みます。
CMS 自体は開発中であり、その開発中に世界的な変更の段階を経た結果、現在システムには複数のバージョンが存在します。これはバージョン 1,5、バージョン 2,5、およびバージョン 3.x です (3.x は、行 3 のバージョンが相互に互換性があることを意味します (3.1、3.2、および 3.3))。
Joomla 2.5 ベースの Web サイトをお持ちの場合、このバージョンの拡張機能のみが適しています。つまり、異なるバージョンの拡張機能には互換性がありません。

拡張機能のインストールや設定方法については考慮しません。賢い学生も、IT とは縁遠い人も、これを理解できます。私は、独自のテンプレートと拡張機能の開発と編集、およびサードパーティの拡張機能のデザインの変更に興味があります。
既製のデザインを備えた数百、さらには数千の有料および無料のテンプレートを見つけて、好みに合わせてカスタマイズできますが、多くの場合、それらにはまったく不要な機能が多数含まれています。より専門的なアプローチは、独自のテンプレートを作成することです。
空のテンプレートはオンラインで簡単に見つけることができます。また、最初から作成することもできます。
テンプレートは、zip アーカイブにアーカイブされたフォルダーです。

フォルダーに必要なファイルは次のとおりです。
index.phpを – ページの構造とデザインを記述するメインファイル
コンポーネント.php – プリンターが受け入れられる形式でページを表示します。
エラー.php – 404 ページを表示
favicon.icoを – 当社ウェブサイトのアイコン
テンプレート_プレビュー.png и template_thumbnail.png – テンプレートのプレビュー画像
templateDetails.xml – テンプレートの説明を含むファイル。
構造を容易にするために、フォルダー内には明確な名前が付いたサブフォルダーもあります。
CSS – スタイル用
画像 – 画像の場合
js – スクリプトの場合
言語 – テキストをさまざまな言語に翻訳した ini ファイル用。
セキュリティ上の理由から、各フォルダーには空のindex.htmlファイルが含まれている必要があることに注意してください。
テンプレート フォルダーには html フォルダーが含まれる場合もあります。このフォルダーには、一部の Joomla コンポーネントの外観の変更 (いわゆるオーバーライド) が含まれています。
一般に、テンプレート構造は Joomla バージョン 1.5、2.5、および 3.x で変更されません。

templateDetails.xml の簡略版の内容を見てみましょう。
キャップの後

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

メインタグの後に続きます:

<extension version="2.5" type="template" client="site">

次に、テンプレートの説明を含むヘッダーがあります。

<name>blanktemplate</name><!--имя вашего шаблона -->
    <creationDate>2014-12-20</creationDate><!--дата шаблона -->
    <author>your name</author><!--имя разработчика-->
    <copyright>Copyright © 2014 alexalex.ru</copyright><!--автор шаблона-->
    <authorEmail>admin@alexalex.ru</authorEmail><!-- ваш e-mail -->
    <authorUrl>http://www.alexalex.ru</authorUrl><!-- ваш сайт -->
    <version>1.0.0</version><!--номер версии шаблона -->

次に、通常、HTML を使用してフォーマットできるテンプレートの説明が続きます。

<description><![CDATA[ 
        <h1> Мой шаблон </h1>
        <p>Создано <a href="http://www.alexalex.ru" target="_blank">Это самый простой из шаблонов!</a>.</p>
    ]]></description>

テンプレートに必要なすべてのファイルは templateDetails.xml に記述されている必要があります

<files>
        <folder>css</folder>
        <folder>images</folder>
        <folder>js</folder>
        <folder>language</folder>
        <filename>component.php</filename>
        <filename>error.php</filename>
        <filename>index.php</filename>
        <filename>index.html</filename>
        <filename>template_preview.png</filename>
        <filename>template_thumbnail.png</filename>
        <filename>favicon.ico</filename>
        <filename>templateDetails.xml</filename>
    </files>

忘れていない場合は、私たちのウェブサイトのページが部分 - 位置に分かれています。
位置は通常、div ブロック内にあります。 joomla.org サイトからポジションを配置する方法の例:

これらの位置は、テンプレートの説明にも指定する必要があります。ポジション数はご希望に応じます。独自の名前を付けることも、標準の名前に従うこともできます。

   <positions>
    <position>top</position>
    <position>footer</position>
    <position>debug</position>
    </positions>

多言語サイトをお持ちの場合は、使用する言語を説明する必要があります

<languages folder="language">
        <language tag="en-GB">en-GB/en-GB.tpl_blanktemplate.ini</language>
        <language tag="ru-RU">ru-RU/ru-RU.tpl_blanktemplate.ini</language>
    </languages>

この説明では、言語フォルダー内に、翻訳付きのファイルを含む 2 つのサブフォルダー en-GB と ru-RU があることを前提としています。これらのファイルには、「KEY=value」形式のテキストが含まれています。また、キー名は大文字で入力する必要があります。
たとえば、次のように
DEMOTEXT="テキスト例"

また、テンプレートには、テンプレート設定を変更するためのさまざまなスイッチを記述することができます。これは、単純なユーザーまたはサイト管理者 (プログラマではない) によって変更できます。 Web サイトでは、スイッチは次のように表示されます。

たとえば、色を設定する可能性を考えてみましょう。スイッチの 1 つを作成しましょう。これを行うには、次のコードを追加します。

<config>
    <fields name="params">
    <fieldset name="basic">
    <field name="templateBGColor" class="" type="color" default="#FFFFFF"
    label="Цвет фона темы" description="Это цвет фона страницы" />
    </fieldset>
    </fields>
</config>

この色の意味をページ上に表示できます。これを行う方法については、以下をお読みください。

次に、index.php ファイルを見て、レイアウトを試してみましょう。
ファイルの先頭に php コードを追加します。

<?php defined( '_JEXEC' ) or die; // эта строка из соображений безопасности запрещает прямой доступ

$doc = JFactory::getDocument(); // переменная, которая хранит ссылку на документ
$tpath = $this->baseurl.'/templates/'.$this->template; // переменная с относительным адресом шаблона

// добавляем стиль css с помощью такой вот конструкции
$doc->addStyleSheet($tpath.'/css/template.css.php');

// добавляем javasript
$doc->addScript($tpath."/js/custom.js");

?>

次は標準のページヘッダーです。

<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">

<head>
    <jdoc:include type="head" />
</head>

ここ典型的なヘッダータグがタイトルに追加されます。たとえば、説明を含むメタ タグ、キーワード、拡張子で接続されたその他のファイル、スクリプト、スタイルなどです。

body タグで、スイッチの色の出力をスタイル値に追加します。これにより、CSS に慣れていないサイト管理者でも管理パネルからページの背景色を変更できます。

<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">

次に、テンプレートを div にレイアウトできます。
HTML5 div またはセマンティック ブロック内の位置の出力は次のようになります。

<div>								
        <?php if ($this->countModules( 'footer' )) : ?>
        <jdoc:include type="modules" name="footer" /> 
        <?php endif; ?>
</div>

このコードは、特定のフッター位置にモジュールを表示する必要があるかどうかをチェックし、表示する必要がある場合は、モジュールのコンテンツを表示します。もちろん、チェックをスキップして、単に表示することもできます。

<jdoc:include type="modules" name="footer" /> 

別のポジションを表示するには、フッターを別のポジションの名前に置き換えるだけです。

タグは、ページのメインコンテンツを表示するために使用されます。

<jdoc:include type="message" />
<jdoc:include type="component" />

また、それらを目的の div 内に配置します。

テンプレートのデザイン例として、いくつかの例を示します。
忘れていない場合は (忘れている場合は、数段落前に戻ってください)、翻訳ファイルを含む 2 つのフォルダー en-GB と ru-RU があります。例として XNUMX つの言語のテキストを含めました。このテキストはコードワード DEMOTEXT で指定されます。 PHP コードを使用してこのテキストを表示できます。

<?php echo JText::_( 'DEMOTEXT' ) ?>

さらに、このテキストはパラメータ値 (タイトルや alt など) に挿入したり、段落のコンテンツとして挿入したり、リンク URL に挿入したりすることもできます。

テンプレート内の画像は通常、images ディレクトリにあります。画像を表示するために、テンプレートが配置されているフォルダーへのパスを表示する小さな php コードも使用します。

<?php echo $tpath; ?>

ページの最初で $tpath 変数を宣言したので、画像がテンプレートのどのサブフォルダーにあるかがわかります。
ロゴ画像の表示例：

<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="sayHelloHabr()">

ここで、onclick="sayHelloHabr()" は、スクリプトとともに外部ファイルとして含めたcustom.js ファイルから関数を起動します。

シンプルなテンプレートの完全なコード:

<?php defined( '_JEXEC' ) or die; // эта строка из соображений безопасности запрещает прямой доступ

$doc = JFactory::getDocument(); // переменная, которая хранит ссылку на документ
$tpath = $this->baseurl.'/templates/'.$this->template; // переменная с относительным адресом шаблона

// добавляем стиль css
$doc->addStyleSheet($tpath.'/css/template.css.php');

// добавляем javasript
$doc->addScript($tpath."/js/custom.js");

?>

<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">

<head>
    <jdoc:include type="head" />
</head>
  
<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">
    
<p><?php echo JText::_( 'DEMOTEXT' ) ?></p>
    
    <header class="header">
                    
    <img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="sayHelloHabr()">
        
        <nav class="navtop" role="navigation">		
            <?php if ($this->countModules( 'top' )) : ?>
            <div class="top">
            <jdoc:include type="modules" name="top" /> 
            </div>
            <?php endif; ?>			
        </nav>
        
    </header>

            <main class="content">		
        <jdoc:include type="message" />
           	 <jdoc:include type="component" />	
            </main>

        <footer class="footer">								
            <?php if ($this->countModules( 'footer' )) : ?>
            <jdoc:include type="modules" name="footer" /> 
            <?php endif; ?>
        </footer>

<jdoc:include type="modules" name="debug" />

</body>
</html>

最終結果はリンクからダウンロードできます - シンプルなテンプレート.
フロントエンド開発者はもちろん、レイアウトデザイナーでも美しいデザインを作るのは難しいことではありません。

ウェブサイトのテンプレートは基本的に、 プレゼンテーション MVC パターンから (モデル ビュー コントローラー = モデル ビュー コントローラー)。つまり、情報の出力とデザインを担う部分です。ほとんどのモジュールとコンポーネントは同じ原則に従います。
モジュールの外観を変更する必要がある場合は、その表現を取得し、ニーズに合わせて HTML コードを変更できます。
多くの場合、モジュール コードは更新されます。いくつかのエラーは修正されています。モジュールが更新されるたびにビューのタイプを変更しないようにするために、オーバーライドを作成できます。これはテンプレート フォルダーに配置される 1 つまたは複数のファイルで、モジュールの外観を決定します。
これは、次のパスに沿って管理パネルで実行できます。
拡張機能 – テンプレートマネージャー – テンプレート
– テンプレートをクリックして (テンプレートのオンライン エディターにアクセスします)、[オーバーライドの作成] タブに移動します。
オーバーライドを作成すると、ファイルまたはフォルダーが html フォルダーに追加されることがわかります。これらのファイルを含む html フォルダーを zip テンプレートに直接配置し、一部のモジュールの外観がすでに変更されている既製のテンプレートをサイトにインストールできます。

http://habrahabr.ru/post/246061/