Archiv der Kategorie: Templates (Joomla)

WordPress, Joomla und Drupal: Theme-Erstellung im Vergleich

Also, ich hab ja kürzlich das Anlegen eigener Templates/Themes in allen drei CMS ein bisschen angerissen und die Basics zusammengeschrieben. Da bietet es sich an ein Resumee zu ziehen, was ich hiermit versuche. Mein völlig subjektiver Winner ist:

Joomla – so einfach kann es sein

Sobald man den Zusammenhang der definierenden XML-Datei templateDetails.xml und den Modulpositionen in der index.php überrissen hat, kann man schon richtig loslegen. Kein Gewühle in unverständlichem PHP-Code, kein umständliches Einbinden externer Skripte. Dadurch, dass man in Joomla über die Kategorien und Module im Backend nahezu unendliche Konfigurationsmöglichkeiten hat, ist es gar nicht notwendig tiefer in die Template-Logik einzusteigen, man kann fast alles über die Administrationsoberfläche einstellen. Dabei kann man sich allerdings auch ganz schön verzetteln – eine gute Doku ist hier wirklich unabdingbar, sonst kann man nie nachvollziehen warum, wie und weshalb wer an welchen Schräubchen gedreht hat.

Was ein bisschen übersichtlicher sein könnte: die Modulzuordnung in der Admin-Oberfläche. Da fehlt eine Möglichkeit, sich nur die Modulpositionen eines bestimmten Templates anzeigen zu lassen (oder ich hab sie nicht gefunden). So wie es ist muss man sich bei der Modulpositionierung durch eine fusselige Liste aller Templates mit allen Modulpositionen durchscrollen, da sind Fehlklicks vorprogrammiert.

Das wird allerdings beinahe ausgeglichen durch die hervorragende Möglichkeit, sich die Modulpositionen auf der Webseite anzeigen zu lassen. Das geht, indem man im Browser an die URL den Parameter ?tp=1 anhängt, das sieht dann z. B. so aus: http://localhost/jsite/?tp=1, damit kriegt man einen anschaulichen Überblick, wo man auch gleich erkennt wenn am css noch was nicht stimmt.

joomla_tp

joomla_tp

Alles in allem ist die Erstellung eines eigenen Templates in Joomla ein recht vergnüglicher Prozess, das Positionieren der benötigten Module geht recht flott von der Hand und die Feineinstellungsmöglichkeiten über die Adminoberfläche sind sehr weitreichend, ohne dass man in den Templatecode eingreifen muss. Ich kann auch jedem die kurze und knackige Joomla-Dokumentation zum Thema ein einfaches Template erstellen empfehlen, damit geht echt ein Schnellstart!

Ein guter zweiter Platz: Drupal mit Views

Ohne Views geht nämlich nahezu gar nichts, wenn man seine Inhalte auch übersichtlich ausgeben möchte. A propos Inhalte: die selbstdefinierten Inhaltstypen sind eine der grossen Stärken von Drupal, wenn man die vernünftig nutzt spart man sich einen Haufen Template-Gefiddel. Ein eigenes Template anzulegen ist jetzt eigentlich auch nicht weiter schwierig, wenn man als Vorlage die generische page.tpl.php nutzt und keine Scheu davor hat, darin Elemente herumzuschubsen und umzugruppieren. Auch in Drupal kommt einem eine Vorschau der Template-Elemente zu Hilfe, unter Struktur->Blöcke->Blockregionen veranschaulichen kann man schnell überprüfen ob das Layout passt:

blockregionen

blockregionen

Da man alle Views auch als Blöcke definieren und ins Layout einpassen kann, ist man in der Ausgabe der gewünschten Daten nahezu unendlich flexibel, da bleibt so gut wie kein Wunsch offen. Besonders die Multiblog-Funktionalität über die unterschiedlichen Inhaltstypen und Taxonomien ist easy in der Realisierung und macht es einem leicht, die Seite sauber zu strukturieren.

Ich hätte mir höchstens eine einfachere Möglichkeit des Seitendesigns gewünscht als die page.tpl.php anzupassen, die ist doch ein bisschen unübersichtlich und tendiert zum div-Wildwuchs. Und noch etwas, was wirklich nervt: man kommt bei der Template-Entwicklung nicht darum herum, ständig den Cache zu leeren, weil man seine Änderungen sonst im Zweifelsfall erstmal nicht sieht. Das kostet Zeit und nervt, da wäre es wünschenswert, wenn man eine Möglichkeit hätte so etwas wie einen Entwicklermodus einzuschalten, in dem das Caching abgeschaltet werden kann.

Das gute alte WordPress auf Rang drei

Da merkt man halt schon, dass die Software etwas in die Jahre gekommen ist. Mit einem einfachen Seitenaufbau mit einem Kopfbereich, einer Inhaltszone mit ein paar statischen Seiten, einem Blog und einer Sidebar ist man recht schnell dabei, aber wenn man mehr will, gehts gleich ans Eingemachte. Entweder man arbeitet sich selber in die WordPress-API ein (und die ist eine Wissenschaft für sich) oder man verläßt sich auf die Funktionalitäten zusätzlicher Plugins. Von denen gibt es zwar unzählige für jeden Zweck und Geschmack, aber ich kauf nicht so gern die Katze im Sack, und die meisten Plugins sind grottenschlecht bis gar nicht dokumentiert. Da hat man leicht mal eins installiert, das einem die ganze Site lahmlegt oder unerklärliche Fehlfunktionen auslöst, und dann hat man das Gfrett herauszufinden wer denn jetzt wirklich der schwarze Peter war.

Auch eine komfortable Datenbank-Abfragemöglichkeit wie Drupals Views oder eine fein differenzierte Einstellmöglichkeit nahezu aller Parameter für die Anzeige wie in Joomla sucht man vergebens, man muss sich im Zweifelsfall selber in die vorhandenen Theme-Dateien einarbeiten und sie nach eigenem Bedarf anpassen, und eigene Plugins und Widgets entwickeln. Das war vor ein paar Jahren noch akzeptabel, jetzt aber laufen die beiden jüngeren CMS dem alten WordPress da um Längen den Rang ab.

Nur einen nicht so leicht zu schlagenden Vorteil hat WordPress: für kleinere, einfachere Webseiten ist es immer noch das Anwenderfreundlichste, am Leichtesten zu bedienende CMS auf dem Markt. Start Blogging – das ist kein leerer Werbespruch, das ist nach wie vor WordPress‘ grosse Stärke! Für den Einzelunternehmer, Handwerker, Arzt oder Anwalt, der seine Firma mit einer Visitenkarte im Web vorstellen möchte, ist WordPress nach wie vor die ideale Lösung. Auch für mittlere Benutzergruppen wie Vereine, kleinere Behörden und soziale Dienstleister ist es ideal, weil kostengünstig in der Realisierung und leicht zu pflegen. Der Markt für WordPress als „kleine“ Lösung für den Webauftritt ist riesengross und wird es aller Voraussicht nach noch lange bleiben.

Joomla-Template 3: das Styling

Wir arbeiten jetzt mit unserer formate.css, die steckt im durch die erfolgreiche Template-Installation neu angelegten Verzeichnis [joomlainstallation]->templates->evis2014 im Unterverzeichnis css.

Damit das Ganze jetzt dem Vorbild TwentyFourteeen etwas ähnlicher sieht, habe ich zunächst einmal die Schriftarten angepasst und die Überschriften h1 bis h3 auf Kapitälchen gesetzt:

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-size: 14px;    
  font-weight: normal;
  line-height: 24px;
  color: #43473b;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Times;
  font-weight: normal;
  color: #43473b;;
}

h1 { font-size: 45px; font-variant:small-caps;}
h2 { font-size: 30px; font-variant:small-caps;}
h3 { font-size: 22px; font-variant:small-caps;}


a { color: #43473b; }
a:hover { color: #fc737b;     }

Da ist weiter nichts dabei, das kann sich jeder selber einrichten wie er es gern hätte. Jetzt kommen unsere Inhalts-Divs dran, damit die auch schön nach unserem dreispaltigen Raster ausgerichtet werden:

#wrap {
width: 1260px;
}
    
#sidebarLeft {
padding: 20px;
float: left;
width: 200px;
}

#content {
float:left;
width:600px;
padding:20px;
}

#sidebarRight {

float: left;
width: 200px;
padding: 20px;
}

Das float: left richtet sidebarLeft, content und sidebarRight innerhalb der wrap nebeneinander aus.

Als nächstes nehme ich mir den Seitenkopf vor, da hätte ich gern unmittelbar unter dem Headerbild den Namen meiner Seite angezeigt. Das sieht in der index.php so aus:

<div id="kopf">
        <div id = "seitentitel" name ="titel">
        <?php $config = JFactory::getConfig();
        echo '<h1>'.$config->get( 'sitename' ).'</h1>';?>
        </div>

        <div id = "oben">
        <jdoc:include type="modules" name="oben" style="xhtml" />
        </div>
</div>

Ich habe das Ganze in eine eigene div namens kopf gepackt, weil es so einfacher war den farbigen Hintergrund ohne Lücken zu stylen. In der div seitentitel steckt eine Joomla-Variable, die uns den Seitentitel als h1 formatiert ausgibt, das mache ich mit der Anweisung:

<?php $config = JFactory::getConfig();
        echo '<h1>'.$config->get( 'sitename' ).'</h1>';?>

Gestylt wird die Ausgabe des Titels einfach so:

#seitentitel{
    display: inline-block;
    width: 1260px;
    height: auto;    
    }

In der div oben hatte ich im Modulmanager mein Main Menu positioniert. Damit es jetzt nicht mehr als Liste untereinander, sondern als horizontales Menü erscheint, musste ich etwas tüfteln. Ich habs schließlich so hingekriegt:

#oben ul li{
    display:inline;
    white-space: normal;
    }

Das klebte jetzt erstmal zusammen und war auch noch nicht schön formatiert, aber immerhin schon mal horizontal:

nebeneinander

nebeneinander

Das liess sich aber schön nachbessern, mit diesen Anweisungen:

#oben ul li a
{
font-family: Times;
font-style: normal;
font-variant:small-caps;
font-size: 24px;
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #89a7cb;
line-height: 2
}

kam Abstand (padding) zwischen die einzelnen Menüeinträge, und die Schrift wurde schöner formatiert.

Jetzt fehlte nur noch ein einheitlicher Hintergrund:

hintergrund_unschoen

hintergrund_unschoen

Deswegen hatte ich ja die umhüllende div kopf:

#kopf{background-color: #89a7cb}

Bingo! Fertig ist das horizontale Menü.

horizontales_menu

horizontales_menu

Und auch unsere dreiteilige Seite sieht gut aus:

fertig_gestylt

fertig_gestylt

Den Footer hab ich jetzt unterschlagen, aber den brauche ich auch nicht wirklich. Ich hab noch ein bisschen an den Feineinstellunggen geschraubt, die Autor-Info aus den Beiträgen rausgenommen und die Print- und Email-Icons verborgen, aber das wars dann auch schon. Das cleane Layout sieht dem Vorbild TwentyFourteen für meine Zwecke ähnlich genug, ich lass es jetzt mal gut sein. Besonders dank des hervorragenden Tutorials von http://joomla-templates-erstellen.de war das jetzt lang nicht so schwierig, wie es sich anfangs anliess, und hat richtig Spaß gemacht.

Nachtrag zum Footer

Der hat in der index.php eine eigene div gekriegt, nach den anderen Elementen und vor dem schliessenden Tag der div wrap:

    <div id="footer">
    Ich bin dein Footer.
    <jdoc:include type="modules" name="footer" style="xhtml" />
    <!-- end #footer --></div>

<!-- end #wrap --></div>

Damit er jetzt wirklich unten erscheint und nicht auf der Seite klebt, ergänzen wir die formate.css um folgenden Eintrag:

#footer {
padding: 10px 0;
clear: both; 
background-color:#89a7cb;

}

Das clear: both macht den Unterschied! Damit werden die floatenden Elemente beendet, es erscheint der Footer dann auch wirklich erst unterhalb der anderen Inhalts-divs. Eine anschauliche Erklärung  dazu findet man bei mediaevent.de.

Joomla-Template 2: die index.php

Das Grundgerüst für den Seitenaufbau: die index.php

Diese kann man sich bei einem anderen Template mopsen, oder eine der vielen Online-Vorlagen kopieren und modifizieren, z.B. bei joomla templates erstellen (Template-Installation) als zip-Datei herunterladen oder in der Joomla-Doku nachlesen. Meine index.php ist ein kleiner Bastard, den ich aus mehreren Vorlagen zusammenkopiert habe. Der Dateiheader sieht folgendermassen aus:

<?php

defined('_JEXEC') or die;


/* 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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/formate.css" type="text/css" />

Im einleitenden PHP-Teil wird das Joomla-Applicationobject geladen, damit wir auf Systemvariable wie z.B. den Namen der Website zugreifen können. Dann folgt ein HTML-Header (hab ich auch so aus der Joomla-Doku kopiert) mit Einbindung unseres Stylesheets. Die Zeile:

<jdoc:include type="head" />

erzeugt einen kompletten Header, das kann man sich im Seitenquelltext anschauen, hier mal ein Ausschnitt:

head

head

Jetzt wirds dann aber interessant, denn jetzt kommen die Inhalte. In der Joomla-Doku ist ein sehr basic gehaltenes Beispiel gezeigt:

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

Erstaunlich, aber das reicht für den Anfang.

  • In der zweiten Zeile wird eine Modulposition namens „top“ erzeugt und Joomla mitgeteilt, dass es hier Module laden kann.
  • In der dritten Zeile wird die Component geladen, das ist der Kern der Seite und enthält den relevanten Beitrag.
  • In der vierten Zeile wird eine zweite Modulposition namens Bottom erzeugt.

Das Ganze passiert innerhalb des body-tags und reicht schon aus, um eine simple Seite anzuzeigen. Das ganze müssen wir jetzt auf die Modulpositionen anpassen, die wir in unserer templateDetails.xml definiert haben. Kurz zur Erinnerung, das sah im ersten Ansatz so aus:

<positions>
 <position>oben</position>
 <position>left</position>
 <position>breadcrumb</position>
 <position>search</position>
 <position>right</position>
 </positions>

Wir packen das Ganze noch in einen div namens wrap, der hat nichts anderes zu tun als die Breite auf 1260px zu setzen, und dann sieht unser body erstmal so aus:

<div id="wrap">
<div id="header">
<a href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.jpg" alt="Logo" /></a>
<!-- end #header -->
</div>

    <div id = "oben">
    <jdoc:include type="modules" name="oben" style="xhtml" />
    </div>


    <div id="sidebarLeft">
    <jdoc:include type="modules" name="left" style="xhtml" />
    <!-- end #sidebarLeft --></div>

    <div id="content">
    <jdoc:include type="component" />
    <jdoc:include type="message" />
    <jdoc:include type="modules" name="debug" />
    <!-- end #content --></div>
    
    <div id="sidebarRight">
    <jdoc:include type="module" name="search" style="xhtml" />
    <jdoc:include type="modules" name="right" style="xhtml" />
    <!-- end #sidebar2 --></div>

<!-- end #wrap --></div>

Nicht irritieren lassen, ich hab die breadcrumbs und den footer einfach weggelassen.

Aber ansonsten ist der Aufbau eigentlich eher einfach. Erst definiere ich mir eine header-div, die tut nichts anderes als mein Headerbild aufnehmen und einen Link auf die Startseite setzen, das passiert mit der Zeile:

<a href=“<?php echo $this->baseurl ?>“><img src=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.jpg“ alt=“Logo“ /></a>

Hab ich aus der Joomla-Doku so kopiert und nur Pfad und Namen zur Bilddatei angepasst.

Dann gibt für jede Modulposition eine div, und der wird mitgeteilt wie sie heisst und was sie zu tun hat. Wir fangen oben an:

<div id = "oben">
    <jdoc:include type="modules" name="oben" style="xhtml" />
    </div>

Hier setze ich später mein Modul für das Hauptmenü rein, darüber nachher mehr.

Die linke Seitenleiste kriegt den Platz für meine neuesten Beiträge reserviert, das ist ebenfalls ein Modul.

<div id="sidebarLeft">
    <jdoc:include type="modules" name="left" style="xhtml" />
    <!-- end #sidebarLeft --></div>

In der Mitte ist Platz für unseren Seiteninhalt, die überaus wichtige Component, und für Fehlermeldungen:

<div id="content">
    <jdoc:include type="component" />
    <jdoc:include type="message" />
    <jdoc:include type="modules" name="debug" />
    <!-- end #content --></div>

In der rechten Seitenleiste platzieren wir das Suchformular und eine weiter Modulposition, in die kommt nachher meine Liste mit den Rezeptkategorien.

<div id="sidebarRight">
 <jdoc:include type="module" name="search" style="xhtml" />
 <jdoc:include type="modules" name="right" style="xhtml" />
 <!-- end #sidebar2 --></div>

Das wars auch schon. Jetzt könnten wir unser (noch komplett ungestyltes) Template schon mal anschauen.

Die Installation

Wir packen jetzt den gesamten Inhalt unseres Arbeitsordners in eine ZIP-Archiv:

zip-datei-erzeugen

zip-datei-erzeugen

Dann gehen wir im Kontrollzentrum unter Erweiterungen->Verwalten->Installieren->Paketdatei hochladen und laden unser ZIP-Archiv. Ich hatte beim ersten Versuch einen Fehler, weil in der templateDetails.xml eine falsche Dateieendung für das Logo angegeben war, bitte gegebenenfalls korrigieren:

<filename>images/logo.jpg</filename>

Das sollte es aber gewesen sein, unter Erweiterungen->Templates->Stile sollte jetzt unser neues Template auftauchen, und wir können es als Standard setzen.

standard-setzen

standard-setzen

Wenn wir jetzt unsere Webseite anschauen, kommt das natürlich noch sehr traurig weil komplett ungestylt daher:

ungestylt

ungestylt

Aber darum kümmern wir uns gleich. Zuerst schauen wir uns mal an, was wir auf welche Modulposition geladen haben, das ist nämlich gar nicht viel:

modulpositionen

modulpositionen

Auf left sitzen die neuesten Beiträge, auf oben das Main Menü, und auf right die Rezeptkategorien. Die Suche ist hier leider nicht mit im Bild, die sitzt auf Position search. Das wars auch schon!

Jetzt gehen wir dran, unseren Seitenaufbau zu stylen. Was jetzt noch kommt ist fast reines CSS , und dafür gibt es einen neuen Beitrag.

Ein einfaches Joomla-Template erstellen

Eine hervorragende Anleitung zum Erstellen eines einfachen Joomla-Templates findet man hier bei http://joomla-templates-erstellen.de, und auch die Joomla-Doku gibt einiges her zm Thema Understanding Joomla Templates. Ich versuche hier trotzdem einmal eine Zusammenfassung der absoluten Basics, damit man mal einen kurzen Überblick bekommt.

Die Vorlage: ein TwentyFourteen-Scribble

Mein Template soll am Ende so aussehen wie mein geliebtes WordPress-Theme Twenty-Fourteen, das ist schön schlicht und ohne Schnickschnack. Das Layout ist simpel:

scribble

scribble

Die Inhalte leihe ich mir mal beim Inselfisch-Kochbuch. Das Logo = Headerbild soll die gesamte Breite von 1260 px einnehmen, darunter kommt der Titel der Seite, evtl. auch der Untertitel = Slogan. Ich habe nur ein einfaches lineares Menü ohne Untermenüs. In die rechte Seitenleiste sollen die neuesten Beiträge, in die linke Seitenleiste meine Rezeptkategorien. In die Mitte kommt der jeweilige Content, der Footer schliesst die Sache nach unten ab. Das war schon alles, auf wieterführende Features wie Breadcrumb Navi oder sekundäres Menü verzichte ich großzügig, der Übersicht halber.

Schritt 1: Die Verzeichnisstruktur erstellen

Zunächst geht das erstmal im Trockenkurs, es gibt einiges an Vorarbeit zu erledigen, ehe man sich die Ergebnisse auch wirklich in Joomla anschauen kann. Wir fangen mal mit dem leichten Teil an: zwei Screenshots von unserem Templateentwurf für die Vorschau im Template-Manager. Einen nenne ich template_preview.png, 400x300px, den zweiten template_thumbnail.png, 200×50 px. Beide kommen in mein Template-Verzeichnis, das hat den Arbeitstitel Evis2014.

template_preview

template_preview

Dann lege ich noch einen Unterordner namens css und einen zweiten namens images an. Das wäre schonmal die komplette Verzeichnisstruktur.

verzeichnisstruktur

verzeichnisstruktur

Die erste Template-Datei: templateDetails.xml

Dreh- und Angelpunkt unseres neuen Templates ist die definierende xml-Datei. Wie die für die einzelnen Joomla-Versionen aussehen sollte, ist hier bei joomla-templates hervorragend dokumentiert, dort ist vor allem auch erklärt welche Komponenten Pflicht sind und welche nur kann.

Meine templateDetails.xml ist sehr schlicht gehalten, Den Header habe ich mir bei joomla-templates kopiert:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="3.0" type="template" client="site">

Darauf folgen die persönlichen Informationen über Templatenamen und Author:

<name>Evis2014</name>
<author>Evi Leu</author>
<creationDate>30. März 2018</creationDate>
<description>Mein Joomla-Nachbau des WordPress-Templates Twenty Fourteen</description>

Jetzt wirds gehaltvoller: man muss Joomla mitteilen, welche Dateien mit im Spiel sind (die Liste werden wir nachher noch abspecken):

<files>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>offline.php</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>

<filename>css/formate.css</filename>
<filename>images/logo.png</filename>

</files>


Die Dateien existieren natürlich noch gar nicht alle, aber wir werden sie jetzt der Reihe nach anlegen.

Der letzte Abschnitt: die Template Positions (eine Arbeitsversion, das wird sich später noch etwas ändern:

<positions>
<position>oben</position>
<position>left</position>
<position>breadcrumb</position>
<position>search</position>
<position>right</position>
<position>footer</position>
</positions>

Fehlt noch das schliessende Tag für die Extension:

</extension>

Das wars erstmal, und jetzt gehen wir dran, unsere Dateien auch anzulegen.

Die weiteren Template-Dateien

  • index.html: eine leere HTML-Seite
  • component.php, error.php, offline.php : kann man sich von einem anderen Joomla-Template kopieren oder auch weglassen (dazu später mehr)
  • css/formate.css legen wir zunächst als leere Datei im Ordner css an
  • images/logo.png wird unser Headerbild, das sollte 1260px breit sein.

Das sollte für den Anfang mal genügen. Für die index.php, das Grundgerüst unserer Seite, gibts einen neuen Beitrag.