Tutorial:Creating a basic Joomla! template/ja

出典: Joomla! ドキュメンテーション

Languages Languages: 

English  • 日本語

目次

イントロダクション

このチュートリアルの目的はJoomla!テンプレート作成の手順を提供することです。基本テンプレートの作成に必要な必要不可欠ファイルやコードをカバーしています。記載のコードは変更が必要な場合に応じてカットしてペーストできます。

ディレクトリ構造の設定

最もベーシックなテンプレートを作成するには、"templates" フォルダに新規フォルダの作成します。このフォルダ名を仮に"mynewtemplate"とします。

テキストエディタ(あるいはAdobe Dreamweaverなどの専用のエディタ)で"index.php"と"templateDetails.xml"ファイルを作成します。

整理するために、"images" と "css"という2つのフォルダを作成します。"css"フォルダに"style.css"というファイルを作成します。

"index.php"ファイルの先頭にすべてのCSSコードを直接書いても良いですが、多くのウェブディベロッパーは"link"タグを使って複数のページにリンクすることができるため、CSSコードを別のファイルにして置く事を好みます。 これがもっともベーシックで実用的な設定です。

フォルダとファイル構造のアウトライン:

  • mynewtemplate/
    • css/
      • style.css
    • images/
    • index.php
    • component.php
    • templateDetails.xml


This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment.

If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.

Thank you.


ベーシックな templateDetails.xml ファイルの作成

templateDetails.xmlファイルは必須です。それなしでは、あなたのテンプレートはJoomla!で表示されません。このファイルはテンプレートについての重要な "メタ情報" を保持します。

例を見てみましょう: 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
 "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>mynewtemplate</name>
	<creationDate>2008-05-01</creationDate>
	<author>John Doe</author>
	<authorEmail>john@example.com</authorEmail>
	<authorUrl>http://www.example.com</authorUrl>
	<copyright>John Doe 2008</copyright>
	<license>GNU/GPL</license>
	<version>1.0.2</version>
	<description>My New Template</description>
	<files>
		<filename>index.php</filename>
		<filename>component.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_thumbnail.png</filename>
		<filename>images/background.png</filename>
		<filename>css/style.css</filename>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</install>

ご覧の通り、マークアップタグ( <thing> )の間に1つの情報を持っています。ベストアプローチはこのコードをコピーアンドペーストであなたの"templateDetails.xml"ファイルに貼付け、変更すべき箇所(<name> <author> など)を変更することです。

この <files>の部分はあなたが使用するすべてのファイルを含む必要があります。- おそらくまだあなたはそれらがどのように呼ばれているのか知らないでしょう。 - 心配いりません。後にアップデートします。

ポジションを配置します。 - これらがスタンダードテンプレートから簡単にスウィッチできる共通設定です。

ベーシックな index.php ファイルの作成

index.php ファイルはJoomla!がもたらすすべてのページのコアとなります。本来は(任意のHTMLページのような)頁になりますが、サイトのコンテンツが置かれるべき場所にPHPコードを置きます。以下がコピーアンドペーストして使えるベアボーンとなるコードです。

トップから: 

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >

最初のラインはあなたのコーディングを見て悪事を働くいたずらな人々を、阻止します。2つめはブラウザ(とウェブボット)にどのような種類のページかを伝えます。3つめはそのサイト内にある言語を宣言しています。

ヘッダ: 

<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/style.css" type="text/css" />
</head>

最初のラインでJoomla!は正確なヘッダ情報を取得して表示します。これはページタイトル、メタ情報、同様にJavaScriptも含みます。 残りは2つのシステムスタイルシートとあなたオリジナルのスタイルシート(上の例だとstyle.cssとしてcssフォルダに保存)へのリンクを記述します。


ここからメインボディ: 

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

驚くことに、これだけで十分です！はい、これはとてもベーシックなレイアウトです。しかし、動作します。その他はJoomla!がやってくれます。Note: "top" module positionにジャンプするメニューを設定する必要があります。

最後は - ほんの一行: 

</html>


フルテンプレートソースコード: 

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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/mynewtemplate/css/style.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>

インストール用にテンプレートをパッケージ化

いくつかのばらばらのファイルが入ったディレクトリでは配布に適したパッケージではありません。ですから最終ステップはpackageを作成することです。これはディレクトリ構造とすべてのファイルをを含んだ圧縮されたアーカイブです。パッケージはZIPフォーマット(拡張子は.zip)、TAR-gzipフォーマット(拡張子は.tar.gz)、あるいはTAR-bz2フォーマット(拡張子は.tar.bz2)。

もしあなたのテンプレートのディレクトリがmytemplate/なら、パッケージを作成するにはそのディレクトリに対して以下のようにコマンドを入力します:

  • tar cvvzf ../mytemplate.tar.gz *
  • zip -a -r ..\mytemplate.zip *.*

Mac OS X ユーザの方

Mac OS X システムを利用のテンプレート開発者の方: ファインダーの "圧縮" メニューアイテムは使用可能なZIPフォーマットパッケージを生成します。しかし、同時に AppleDouble フォーマットで"._"で始まるファイル名の余分なファイルを追加生成します。このようにJoomla 1.5.x がたまに誤認識する"._templateDetails.xmlという名前のファイルも追加生成されてしまいます。症状は以下のエラーメッセージで確認できます。"XML Parsing Error at 1:1. Error 4: Empty document"。回避策はコマンドラインから圧縮することです。そして"compress" or "tar"を使用する前に"COPYFILE_DISABLE" という環境変数を "true" に設定します。詳細は AppleDouble の記事を参照。

Macで環境変数を設定するには、「ターミナル」アプリケーション開いて以下を入力: 

export COPYFILE_DISABLE=true

それから同じターミナルウインドウで、テンプレートファイルがある場所にディレクトリを変更し、zipコマンドを実行します。例えば、あなたのテンプレートファイルが、myTemplateというパーソナルディレクトリのフォルダ内にあるなら、以下のようにします。: 

cd myTemplate
zip -r myTemplate.zip *

コンクルージョン

動作するテンプレートが作成できました。まだまだのように見えます。これからすべき事はレイアウトを考えることです。

"http://docs.joomla.jp/Tutorial:Creating_a_basic_Joomla!_template/ja" より作成