Joomla Templates erstellen
Bisher haben wir das Design unseres Templates für Joomla mithilfe von Photoshop festgelegt und die Struktur des Templates besprochen. Nun werden wir letzteres in das eigentliche Template für Joomla integrieren.
Das Template besteht aus einer php-Datei mit dem grundlegenden Aufbau eines HTML-Dokumentes zzgl. CSS und Ergänzungen für Joomla.
HTML-Teil des Joomla-Templates
Hier der für die Struktur verantwortliche HTML-Teil:
<body>
<div id="wrap">
<div id="header">Kopfzeile<!-- end #header --></div>
<div id="sidebarLeft">
<ul class="nav">
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a></li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>
<!-- end #sidebarLeft --></div>
<div id="content">
<h1>Inhalt</h1>
<p>mit Text und Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec</p>
<!-- end #content --></div>
<div class="sidebar2">
<h4>rechte Spalte</h4>
<!-- end #sidebar2 --></div>
<div id="footer">
<p>Fußzeile</p>
<!-- end #footer --></div>
<!-- end #wrap --></div>
</body>
Wie man sieht, gibt es hier die id-Anweisungen für die späteren Inhaltsboxen wrap, sidebarLeft, content usw. Diese müssen nun über CSS noch gestaltet werden; sonst würde das Ergebnis jetzt dürftig aussehen:
Design des Templates mit CSS
Das CSS lässt sich direkt in der HTML-Datei unterbringen oder in einer separaten Datei auslagern. Hier wird es erstmal der übersichthalber im head-Bereich des HTML untergebracht (fett und kursiv formatiert):
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
}
#wrap {
width: 960px;
margin: 0 auto;
}
#header { }
#sidebarLeft {
float: left;
width: 200px;
}
#content {
float:left;
width:600px;
}
#sidebarRight {
float: left;
width: 180px;
}
#footer {
padding: 10px 0;
clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div id="wrap"> ...
Wie man sieht, sind nicht alle Id-Elemente mit Anweisungen versehen (die geschweiften Klammern sind leer). Dies wird sich später ändern, wenn wir mit CSS wirklich das Design und nicht nur die Positionierung der Elemente festlegen werden.
Hier das bisherige Ergebnis:
Joomla Template Code mit Joomla-Elementen für den Inhalt
Nun werden in den Code noch die für die Inhalte verantwortlichen Joomla-Teile integriert:
<div id="wrap">
<div id="header"><!-- end #header --></div>
<div id="sidebarLeft">
<jdoc:include type="modules" name="left" style="xhtml" />
<!-- end #sidebarLeft --></div>
<div id="content">
<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="message" />
<jdoc:include type="modules" name="debug" />
<!-- end #content --></div>
<div class="sidebar2">
<jdoc:include type="module" name="search" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
<!-- end #sidebar2 --></div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
<!-- end #footer --></div>
<!-- end #wrap --></div>
Wie man sieht, wurden alle normalen HTML-Inhalte entfernt (Texte und h1, p, ul, li usw.). Diese Inhalte kommen ja später über das CMS und sollen sich von dort steuern bzw. ändern lassen, ohne das Template deswegen ändern zu müssen.
Joomla Template Code mit Joomla-Elementen für den grundlegenden Aufbau
Als letztes für dieses Kapitel werden noch die wichtigsten Code-Elemente integriert, ohne die das Template nicht funktionieren kann. Diese werden vor dem HTML des Dokumentes untergebracht:
<?php
defined('_JEXEC') or die;
/* The following line loads the MooTools JavaScript Library */
JHtml::_('behavior.framework', true);
/* The following line gets the application object for things like displaying the site name */
$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">
<head>
<jdoc:include type="head" />
Wie man sieht beginnt der Code mit php; ab hier müssen wir unser Dokument also als php-Datei sichern. Dies geschieht einfach durch die Ersetzung des Dateityps von .html in .php im Explorer oder durch Speichern im Webdesign-Editor als php-Datei.
Hier gibt es übrigens eine Übersicht von Editoren fürs Webdesign.
Später werden wir noch andere Elemente über php mit der Datei verbinden (z. B. die CSS-Datei und das Logo im header der Seite).
Im nächsten Teil werden wir dann unser einfarbiges Layout in die Farbversion unserer Photoshop-Vorlage mit CSS umwandeln ->