IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Joomla! / Joomla!(7)テンプレートを自作する -最もシンプルなテンプレート-

Joomla!(7)テンプレートを自作する -最もシンプルなテンプレート-

2015/11/17 Joomla!

Joomla! は CMS ですのでテンプレートを使ってページを生成します。ブログのようにひとつのサイトにひとつのテンプレートということはなく、すべてのページを違うテンプレートで作ることもできます。そんな極端なことはしないにしても、見た目はサイト作成の重要ポイントですので、デザインの可能性が広がることは優位性があります。

で、テンプレートの作り方ですが、

  1. デフォルトテンプレートをカスタマイズする
  2. 有料、または無料で手に入れたテンプレートをカスタマイズする
  3. 一から自作する

のいずれかになります。

3.の「一から自作」なんてとても大変と思われるかもしれませんが、1.にしても 2.にしても、結局カスタマイズするためにはテンプレートの基本を理解していないとできないことですので、一から作ってみようと思います。

とは言いつつも、Joomla! は日本語情報が少ないですので英語サイトの情報を探しつつやっていくことになります。

  • 最もシンプルなテンプレート構成
  • templateDetailes.xml
  • index.php
  • テンプレートのインストール
  • テンプレートの適用
  • template.css

最もシンプルなテンプレート構成

Creating a basic Joomla! template – Joomla! Documentation

こちらのサイトや Joomla!3 のデフォルトテンプレート protostar を参考にして進めましょう。
テンプレート名を mytemplate としますと次のディレクトリ構成とファイルが最低必要になります。

mytemplate/
├ css/
│ └ template.css
├ index.php
└ templateDetails.xml

templateDetailes.xml

まず、templates ディレクトリにテンプレート名(mytemplate)でディレクトリを作り、上のディレクトリ構成と空ファイル template.css、次の templateDetailes.xml を作成します。

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="template">
    <name>mytemplate</name>
    <creationDate>2015-11-17</creationDate>
    <author>ausnichts</author>
    <authorEmail></authorEmail>
    <authorUrl>http://www.imuza.com</authorUrl>
    <copyright>Copyright (C) 2015 - IMUZA.com All rights reserved.</copyright>
    <license>GNU/GPL</license>
    <version>0.0.1</version>
    <description>My Template</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
    </files>
    <positions>
        <position>breadcrumb</position>
        <position>left</position>
        <position>right</position>
        <position>top</position>
        <position>footer</position>
    </positions>
</extension>

index.php

次に、同様に index.php を作成します。

<?php
defined('_JEXEC') or die;
?>


<!DOCTYPE html>
<html 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/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<header>
    <jdoc:include type="modules" name="top" /> 
    <jdoc:include type="modules" name="breadcrumbs" />
</header>
<main>
    <div id="left">
        <jdoc:include type="modules" name="left" /> 
    </div>
    <jdoc:include type="component" />
    <div id="right">
        <jdoc:include type="modules" name="right" /> 
    </div>
</main>
<footer>
    <jdoc:include type="modules" name="footer" />
</footer>
</body>
</html>

テンプレートのインストール

エクステンション > エクステンション管理 > 探すで上の探すボタンをクリックすると作成したテンプレート mytemplate が現れますので、チェックしてインストールをクリックします。

テンプレートの適用

エクステンション > テンプレート管理 で標準列の ☆ をクリックすると色が変化しテンプレートに mytemplate が適用されます。

template.css

どうなっているかサイトをプレビューしてみましょう。テンプレート > モジュール管理 でそれぞれモジュールの表示位置を top, breadcrumbs, left, right, footer に指定して、右上のサイト名をクリックしてください。

ただコンテンツが並んでいるだけですね。css でブロック位置を調整してみましょう。template.css に次のスタイルを追加してください。

#left,
#right {
  width: 25%;
  float: left;
  box-sizing: border-box;
  border: 2px solid red;
}
#content {
  width: 50%;
  float: left;
}
footer {
  border: 2px solid green;
  clear: both;
}


.breadcrumb li {
    display: inline-block;
}
header img {
    display: block; /* 画像の下の空白を取るため */
    width: 100%; /* わかりやすくするため画像を拡大 */
    height: 180px;
}

こうなります。

ということで、基本は意外と簡単です。

position 名は自由に決められますので、希望のものを templateDetails.xml に追加し、index.php でレイアウトを決め、template.css で整形するという流れになります。

ということなんですが、もう少しハードルを低くするために、次は bootstrap を入れてみましょう。

Joomla!(6)JCE エディタのインストール
Joomla!(8)テンプレートを自作する -Bootstrapを導入する-
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com