Joomla-テンプレートの作成

この章では、Joomlaで*テンプレートを作成する*方法を学びます。

テンプレートを作成する

以下は、Joomlaでテンプレートを作成する簡単な手順です-

ステップ1 *- *Joomla → Templates フォルダー内に MyFirstTemplate というフォルダーを作成します。 MyFirstTemplate フォルダー内に、_images_およびCSSという名前のフォルダーをさらに2つ作成して、すべての画像とCSSファイルを保存します。

Joomla Creating Template

ステップ2 *- *MyFirstTemplate フォルダー内で、 templateDetails.xml というファイルを作成します。このファイルがないと、テンプレートはJoomlaに表示されません。

*templateDetails.xml*

<?xml version = "1.0" encoding = "utf-8"?>

<extension version = "3.0" type = "template">
   <name>Tutorials Point</name>
   <creationDate>2015-06-13</creationDate>
   <author>Tutorials Point</author>
   <authorEmail>tutorials@example.com</authorEmail>
   <authorUrl>http://www.example.com </authorUrl>
   <copyright>Jack 2015</copyright>
   <license>GNU/GPL</license>
   <version>1.0.2</version>
   <description>My First Template</description>

   <files>
      <filename>index.php</filename>
      <filename>templateDetails.xml</filename>
      <folder>images</folder>
      <folder>css</folder>
   </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>

</extension>

コードの詳細

<files> - MyFirstTemplate フォルダー内の使用可能なファイルとフォルダーが含まれています。
<folder> - MyFirstTemplate フォルダー内の使用可能なフォルダー全体を取得します。

ステップ3 *- *index.php というファイルを作成します。これは、すべてのJoomlaページの実行に役立ちます。

*index.php*

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >

   <head>                                        //head section
      <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>

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

</html>

?>

コードの詳細

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >

このコードは、使用されているhtmlページのタイプをブラウザに伝えるために使用され、Webサイトで使用されている言語を記述することでHTMLドキュメントを開始します。

<head>                                        //head section
   <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>

これらの行は、Joomlaのテンプレートのさまざまなスタイルシートをリンクするために使用されます。

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

ここのbodyセクションでは、 jdoc を使用して、Joomlaシステムの一部からの出力をJoomlaに含めます。 name = "top" は、上部のメニューを設定するために使用されます。

ステップ4 *-これら2つのファイルを作成した後、Joomlaにログインし、 *Extension → Extension Manager をクリックすると、次のページが表示されます。

Joomla Creating Template

ステップ5 *-上記のページで、 *Discover リンクをクリックすると、次のページが表示されます。

Joomla Creating Template