Joomla-Template selbst erstellen: Schritt-für-Schritt-Anleitung

Um das Aussehen Ihrer Website zu verändern, bieten sich so­ge­nann­te Frontend-Templates an. Für das Maximum an In­di­vi­dua­li­tät lassen sich solche Joomla-Templates auch selbst erstellen.

Joomla-Template erstellen: Vor­aus­set­zun­gen

Es ist nicht schwer, Ihrer Joomla-Website einen eigenen Look zu verpassen. Im Grunde benötigen Sie nämlich nur drei Dinge, um ein eigenes Template für Ihre Joomla-Website zu erstellen:

• Joomla-In­stal­la­ti­on, Min­dest­ver­si­on 3.9: Sie brauchen eine aktuelle Version des CMS. Alle Versionen ab der 2018er Joomla 3.9.x eignen sich für die Er­stel­lung eigener Templates.
• Grund­le­gen­de HTML- und PHP-Kennt­nis­se: Um der Anleitung folgen zu können, benötigen Sie grund­le­gen­de Kennt­nis­se in HTML und PHP.
• CSS-Kennt­nis­se: Für das Design von Websites ist CSS er­for­der­lich. Unser CSS-Tutorial gibt Ihnen einen guten Einstieg in die Cascading Style Sheets. Auch die wich­tigs­ten CSS-Befehle sollten Sie be­herr­schen, wenn Sie ein Joomla-Template erstellen möchten.

Schritt für Schritt ein Joomla-Template selbst erstellen

Wenn Sie die obigen Vor­aus­set­zun­gen erfüllen, können Sie direkt mit der Er­stel­lung eines eigenen Templates beginnen. Loggen Sie sich hierfür bei Ihrer Joomla-Website ein und folgen Sie dann unserer Schritt-für-Schritt-Anleitung.

Schritt 1: Ord­ner­struk­tur anlegen

In einem ersten Schritt müssen Sie die für Ihr Template er­for­der­li­che Ord­ner­struk­tur anlegen. Das ist in nur wenigen Klicks erledigt. Na­vi­gie­ren Sie hierzu zunächst in den Ordner „templates“, den Sie in der Da­tei­struk­tur Ihrer Joomla-In­stal­la­ti­on finden. In diesem werden alle Ihre Templates auf­ge­lis­tet. Erstellen Sie einen neuen Ordner und benennen Sie ihn. Wir erstellen einen Ordner mit dem Namen „test“, in dem das Template später Platz findet.

Close

Um die Ord­ner­struk­tur zu ver­voll­stän­di­gen, müssen alle für das Template er­for­der­li­chen Dateien angelegt werden. Der Code ori­en­tiert sich dabei an einem Beispiel-Template:

tem­pla­te­De­tails.xml

Zunächst sollten Sie die Datei erstellen, die es Ihnen überhaupt er­mög­licht, ein Template in Joomla zu in­stal­lie­ren: Die Ma­ni­fest­da­tei tem­pla­te­De­tails.xml. In dieser Datei werden alle grund­le­gen­den In­for­ma­tio­nen zu Ihrem Template fest­ge­legt. Hierunter fallen bei­spiels­wei­se der Name oder der Autor bzw. die Autorin Ihres Templates.

Sie müssen kein Profi im Umgang mit der Extended Markup Language sein, um die Code­zei­len der Datei nach­voll­zie­hen zu können. Die wich­tigs­ten Tags der XML-Datei sind die folgenden:

• <name>: Name des Templates
• <creationDate>: Er­stel­lungs­da­tum des Templates
• <author>: Autorin oder Autor des Templates, also Ihr Name
• <authorEmail>: E-Mail-Adresse der Autorin oder des Autors, also Ihre E-Mail-Adresse
• <authorUrl>: URL zu Ihrer Website
• <copyright>: Co­py­right­in­ha­ber des Templates
• <license>: In­for­ma­tio­nen zur Lizenz
• <version>: Aktuelle Version des Templates
• <description>: Be­schrei­bung des Templates
• <files>: Alle Dateien, die mit dem Template in­stal­liert werden sollen
• <positions>: Po­si­tio­nen der Module, die es im Template gibt

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site">
    <name>test</name>
    <version>1.0</version>
    <creationDate>19.10.2022</creationDate>
    <author>Musteruser</author>
    <description>IONOS Joomla Test Template</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>template\_preview.png</filename>
        <filename>template\_thumbnail.png</filename>
        <filename>favicon.ico</filename>
        <folder>css</folder>
    </files>
    <positions>
    <position>menu</position>
    <position>aside</position>
    <position>footer</position>
    </positions>
</extension>

index.php

Die index.php-Datei ist der Ort, an dem das Haupt­lay­out Ihrer gesamten Website fest­ge­legt ist. Zunächst reicht es aus, ein simples HTML-Grund­ge­rüst zu nutzen:

<!DOCTYPE html>
<html lang="de" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!—Headerangaben-->
    </head>
    <body>
        <div id="navbar">
            <nav>
                <ul>
                    <li><a href="#">Kategorie 1</a></li>
                    <li><a href="#">Kategorie 2</a></li>
                    <li><a href="#">Kategorie 3</a></li>
                    <li><a href="#">Kategorie 4</a></li>
                </ul>
            </nav>
        </div>
        <div id="content">
            <h1 id="heading">Test-Template</h1>
            <img class="image" src="https://picsum.photos/900/500" alt="Image"/>
            <p>Ein Joomla-Template können Sie in nur wenigen Schritten erstellen. Folgen Sie einfach der Schritt-für-Schritt-Anleitung von IONOS.</p>
        </div>
        <footer id="copyright">
            <div id="footercontent">
                <p>Copyright by IONOS</p>
            </div>
        </footer>
    </body>
</html>

css-Ordner und template.css

Legen Sie als nächstes einen Ordner namens „css“ an, der alle Dateien be­inhal­ten wird, die Einfluss auf das Design Ihres Templates nehmen. In diesem Ordner erstellen Sie direkt die Datei template.css, in der Sie das von Ihnen ge­wünsch­te Layout per Code spe­zi­fi­zie­ren können.

body {
    font-family: "Arial", serif;
    color: black;
    line-height: 150%;
}
#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #003399;
}
#navbar li {
    float: left;
}
#navbar li a {
    display: block;
    font-size: 26px;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}
#navbar li a:hover {
    background-color: white;
    color: #003399;
}
#heading {
    font-size: 48px;
    color:    #003399;
    text-shadow: 0 0 5px #000099;
}
#footercontent {
    float: right;
    padding-right: 10%;
}

Close

Schritt 2: Template in­stal­lie­ren

Im zweiten Schritt in­stal­lie­ren Sie das soeben erstellte Template. Na­vi­gie­ren Sie hierzu im Joomla-Backend zu „System“ > „In­stal­lie­ren“ > „Über­prü­fen“. In der dortigen Übersicht sollten Sie Ihr Template nun unter dem von Ihnen gewählten Namen finden. Mit einem Klick auf das Kästchen links neben dem Namen Ihres Templates können Sie das Joomla-Template in­stal­lie­ren.

Close

Close

Schritt 3: Template ak­ti­vie­ren

Nachdem die In­stal­la­ti­on Ihres Templates ab­ge­schlos­sen ist, müssen Sie es nur noch ak­ti­vie­ren. Auch das ist mit nur wenigen Klicks im Joomla-Backend möglich. Na­vi­gie­ren Sie zu „System“ > „Templates“ > „Site Template Stile“. Durch einen Klick auf den Stern-Button rechts neben dem Namen Ihres Templates legen Sie es als Standard fest.

Close

Schritt 4: Template mit Joomla verbinden

Es ist wichtig, dass Sie Ihr Template mit Joomla verbinden, damit die Dar­stel­lung Ihrer Website im neuen Look ein­wand­frei funk­tio­niert. Hierfür müssen Sie die index.php-Datei be­ar­bei­ten. Um Ihr CSS-Style­sheet ein­zu­bin­den, nutzen Sie folgende Codezeile, die Sie ganz oben in Ihrer index.php-Datei einbinden:

<?php defined('\_JEXEC') or die;
JHtml::\_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
?>

Schritt 5: Hea­der­an­ga­ben laden

Im nächsten Schritt müssen Sie die Header-Angaben in Ihre index.php-Datei einbinden. Auch hierfür können Sie sich PHP bedienen. Ersetzen Sie in der index.php-Datei einfach den Kommentar <!—Hea­der­an­ga­ben–> in Ihrem Head mit folgender Codezeile:

<jdoc:include type="head" />

Auf diese Weise fordern Sie das CMS dazu auf, die re­le­van­ten Hea­der­in­for­ma­tio­nen in Ihre index.php-Datei zu laden.

Im Anschluss können Sie sich Ihr Template in der Vor­schau­ver­si­on Ihrer Joomla-Website anzeigen lassen:

Close

Schritt 6: Module verbinden

Der letzte Schritt befasst sich damit, Ihre Joomla-Inhalte in Ihrem Template aus­zu­ge­ben. Um sich dies in der Praxis einmal bei­spiel­haft an­zu­schau­en, können Sie im Backend Ihrer Website zunächst mehrere neue Me­nü­punk­te mit einem Klick auf „Menü“ > „Neu“ erstellen.

Close

Na­vi­gie­ren Sie nun zu „System“ > „Er­wei­te­run­gen“ > „Side Modules“ und wählen Sie das eben erstellte Menü aus. In den er­wei­ter­ten Ein­stel­lun­gen können Sie das Modul-Tag setzen. Wählen Sie die Option „nav“ aus.

Close

Nun ersetzen Sie in Ihrer index.php das „nav“-Tag durch folgende Codezeile, um Ihr Template ent­spre­chend an­zu­pas­sen:

<jdoc:include type="modules" name="menu" style="xhtml" />