Schon lange entwickelt kaum jemand mehr Web-Anwendungen auf der Basis von reinem PHP, JavaSript und HTML. Ich selbst habe mich auch lange dagegen gewehrt, ein Framework zu verwenden. Als Einzelkämpferin in einer Intranet-Umgebung auf die nur PCs zugreifen war dies lange Zeit auch gut so. Außerdem gefällt es mir nicht, wenn ich viel unnötigen Ballast in meine Anwendungen importieren muss. Nun mag ich aber mehr und mehr auch im Internet tätig sein – und da stoße ich an meine Grenzen.
Template Frameworks wie WARP, T3 oder HELIX unterstützen Webworker bei der Erstellung immer komplexer werdender Webseiten. Weil mir die mithilfe von WARP erstellten Templates gut gefallen, habe ich mir WARP 7 mal angesehen.
Voraussetzungen
Du solltest dich mit HTML, JavaScript, PHP und CSS etwas auskennen, wenn du von diesem Beitrag profitieren willst. Außerdem solltest du dich im Backend von Joomla! zurecht finden und zum Beispiel wissen, wie du einen Beitrag erstellst und diesen einem Menüpunkt zuordnest. Ich gehe davon aus, dass du dich mit Webdesign Tools wie dem Inspektor von Mozilla oder den Chrome Entwicklertoolsauskennst. Wenn du WARP schon kennst, ist dieser Beitrag sicherlich nicht so interessant für dich. Du bist aber gerne eingeladen, deine Erfahrungen in den Kommentaren beizusteuern.
Zielsetzung
Das Ziel dieses Beitrages ist es nicht, dass am Ende ein fertiges Template steht. Du solltest am Ende aber verstanden haben, wie die Joomla! Template Erstellung mithilfe des WARP Frameworks verläuft und solltest dir eine eigene Meinung zu WARP bilden können. Wenn du dem Beitrag folgen kannst, kannst du das Template, welches im Rahmen dieses Beitrages bearbeitet wird, nach deinen individuelle Wünschen fertig stellen.
Scheue dich nicht, eigene Ideen umzusetzen. Gerade unterschiedliche Herangehensweisen garantieren - trotz Framework - eine heterogene Template-Landschaft und du siehst, wie flexibel das Framework wirklich ist und ob es zu dir passt. Diese Anleitung setzt eine ganz frische Joomla! 3.x Installation voraus. Ich mag Demo Inhalte nicht, deshalb installiere ich die nicht. Ich mache mir meine eigenen Beispielbeiträge. Wenn du lieber Demoinhalte nutzt und das als zeitsparender empfindest, installiere sie mit. Hier siehst du, wie Joomla! unmittelbar nach der Installation mit meinen Testbeiträgen aussieht.
Das Template, das standardmäßig nach einer Installation aktiv ist, ist das Protostar Joomla! Template. Dieses Template werden wir erst einmal durch das WARP Master 2 Template ersetzen. Kopiere dir dafür das Master 2 Template. Du findest es hier. Installiere das heruntergeladene Template mit dem Namen yoo_master2_j3.zip über den Extension Manager im Joomla! Administrationsbereich (Backend). Nach erfolgreicher Installation aktivierst du das yoo_master2-Default Template über den Template Manager als Standard Template.
(Hinweis der Redaktion: Die ** auf den Screenshots werden nur angezeigt, wenn der Joomla Debug-Modus aktiviert ist.)
Ich deinstalliere dann auch immer sofort alle anderen Frontent-Templates (Site), die ich gerade nicht brauche. So kann es mir nicht passieren, dass ich aus Versehen eine Template-Position auswähle, die es in meinem aktuellen Template nicht gibt.
Die Website hat sich nun stark verändert. Wie sie nun aussieht, kannst du dir auch auf den nachfolgenden Abbildungen ansehen. Im Vergleich zur Ansicht im Protostar-Template hat sich schon eine ganze Menge geändert!
Das ist aber noch nicht genug. Du siehst nicht einmal eine Navigation. Wahrscheinlich bist du nun erst einmal enttäuscht. Gib aber nicht zu früh auf. Vielleicht ist WARP ja doch etwas für dich? Dieses Master 2 Template ist eigentlich nichts anderes als eine Template-Grundlage. Auf dieser Basis kannst du dein eigenes individuelles Template erstellen! Du musst dir keine grundlegenden Gedanken über Dinge wie Browser-Kompatibilität, Flexibilität oder das Raster machen. All das erbt dein Template vom Framework. Wenn es dir leicht fällt, dich auf diese Funktionalitäten zu verlassen, dann kannst du dich ganz auf die schönen Dinge des Webdesigns konzentrieren. Ich wollte das einmal ausprobieren. Vielleicht willst du das auch?
WARP Overrides
Wie und weshalb wir gleich Anpassungen durchführen werden, verstehst du am besten, wenn du den Override Ansatz des WARP Frameworks nachvollziehen kannst. Was Template Overrides in Joomla! sind, sollten du als Joomla! Template Entwickler wissen. Falls nicht, verweise ich gerne auf die Dokumentation Joomla! Overrides. Wie funktioniert das also mit den Overrides beim WARP Framework? Sieh dir dazu zunächst einmal die nachfolgende Grafik an.
Die WARP Framework Ebene stellt als tiefste Ebene alles Grundlegenden bereit. Sie kümmert sich um all die unangenehmen Dinge wie Browser-Kompatibilität, flexible Menüs und Module, das Raster und vieles andere, welche du so nie - oder nur selten – selbst anpassen musst.
Die Template-Ebene steht für dein Template. Hier steht sie für das aktuelle Template, nämlich das Master 2 Template. Diese Ebene beinhaltet alles was speziell dein Template betrifft.
Meiner Meinung nach die spannendste Ebene ist die Custom Styles Ebene. Mit den Styles kannst du nicht nur das gesamte Erscheinungsbild deiner Website verändern, du kannst sogar neue Funktionen anbieten.
Was steckt hinter dieser Struktur?
/css: Hier liegen CSS-Dateien der Template-Ebene.
/fonts: Hier liegen Schriften der Template-Ebene.
/html: Im Grunde genommen liegen hier Content Overrides der Template-Ebene.
/images: Hier liegen Bilddaten der Template-Ebene.
/js: Hier liegen Javascript-Dateien der Template-Ebene. In der Regel liegt hier nur eine Datei. Ignoriere das Verzeichnis am besten.
/layouts: Eines der wichtigsten Verzeichnisse. Hier liegen PHP-Dateien der Template Ebene. Unter anderem liegt hier die index.php Ihres Templates (nur dass sie template.php heißt).
/styles: Wie der Name schon sagt, liegen hier die Styles deines Templates, also die dritte Ebene. Innerhalb des Style-Verzeichnisses können weitere Verzeichnisse liegen.
/warp: Hier liegt das WARP Framework. Verändere nie Dateien in diesem Verzeichnis!
Du hast nun zwei Möglichkeiten dein eigenes Template zu entwerfen. Ein Weg wäre, das aktuelle Template abzuändern. Das heißt, du würdest die CSS Dateien im Verzeichnis /css einfach nach deinen Wünschen abändern. Ich lasse aber, wenn ich schon auf anderem aufsetzte, lieber immer alles vorhandene unangetastet. Eigentlich erstelle ich dann nur einen eigenen Style.
Ein neuer Style. Ich nenne ihn "rural"
OK, womit fangen wir an? Am besten mit etwas Einfachem - lösche die Standardabstände deines Templates indem du dem <body>-Element eine entsprechende CSS Eigenschaft gibst. Aber wie und wo machst du das genau? Du hattest dich entschieden, genau wie ich, einen eigenen Style zu erstellen, oder. Also musst du zunächst die geänderten Eigenschaft des Elementes dem WARP Framework bekannt machen. Erstelle dafür zunächst das /styles Verzeichnis (falls es nicht schon vorhanden ist). im /styles Verzeichnis erstellst du einen Ordner mit dem Namen /rural. Hier wird sich dein Design nun Stück für Stück entwickeln.
Wechsele, sobald du den Ordner angelegt hast, in das Joomla! Backend und dort in den Template Manager. Hier klickst du nun auf das yoo_master2 - Default Template um es als Standard zu setzten.
Wie du siehst, gibt es hier schon eine ganze Menge an Einstellmöglichkeiten. Im Moment interessiert uns aber nur das Register Optionen. Dort wechseln wir nun den Style von Default auf rural und speichern das Ganze ab.
Im Frontend bemerkst du hiervon natürlich noch nichts. Bisher hast du ja nur einen leeren Ordner /rural angelegt. Als nächstes musst du diesen Ordner füllen.
In WARP 7 ist es dir möglich, schnell eigene individuelle CSS Anpassungen vorzunehmen. Hierzu legst du einen Ordner /css im Style-Ordner an. Darin erstellst du eine Datei mit dem Namen custom.css. Trage hier die CSS-Eigenschaft für den Abstand ein.
body {margin: 0; }
Falls du Eigenschaften der Template-Ebene übernehmen willst, also nicht alles neu festlegen willst, kannst du die theme.css des Templates in dein Style kopieren.
Wenn du nun die Seite neu lädst, gibt es keine Abstände mehr. Das sieht zwar jetzt sehr gedrückt aus, aber: Glückwunsch! Du hast gerade dein erstes WARP Override erstellt.
Wenn du aber nicht alles selbst neu machen willst, kannst du die theme.css des Templates in deinen Style importieren. Schreibe dazu einfach an den Beginn:
@import url(../../../css/them.css);
Noch einmal zusammengefasst: Du hast die Datei theme.css im Verzeichnis /styles/rural/css neu angelegt und hierin die Außenabstände für dein body-Element mit 0 festgelegt. Damit hast du ein Override für die Datei css/theme.css erstellt. Das WARP Framework nutzt nun, da dein Style rural als default ausgewählt wurde, nicht mehr die theme.css im Verzeichnis /css, sondern die im jeweiligen Style-Verzeichnis.
Modulpositionen
So, nun wird es spannend. Die CSS Anpassung war einfach, oder? Platziere nun deine Module so, dass deine Website eine individuelle Note bekommt. Verschaffe dir dafür zunächst einen Überblick zu denn Modulpositionen, die dir WARP von Hause aus schon bietet. Du musst ja nicht für alles das Rad neu erfinden.
Wie du siehst, hast du so schon sehr viele Möglichkeiten, Module zu platzieren. Natürlich kannst du zusätzlich noch eigene Modulpositionen über das Template einbauen. Außerdem lassen sich einige Positionen noch weiter unterteilen. Beschränke dich aber zunächst einmal auf die schon vorhandenen Positionen. Damit alles etwas anschaulicher wird, wechseln wir nun ins Backend in den Module Manager und platzieren ein paar Module. Versichere dich, dass du die Position auch im richtigen Template belegst. Momentan ist, wenn du mir bisher gefolgt bist, das Yoo_Master2 aktiv. Beim Testen achte ich immer darauf, dass die Module auf allen Seiten sichtbar und öffentlich sind.
Platziere zum Beispiel das Hauptmenü/Main Menu auf der Position menu,
das Breadcrumbs Modul auf Position breadcrumbs,
ein Login-Module auf Position sidebar-a, ein Suchmodul auf der Postion search und ein Footer Modul auf der Postion footer.
So, das waren erst einmal die wichtigsten Module. Wenn du bisher alles so wie ich gemacht hast, sollte deine Seite nun wie in der nachfolgenden Abbildung aussehen:
Zugegeben, mit diesem Template wirst du noch keinen Preis gewinnen. Es geht hier aber ja auch nur um das Prinzip.
Die Konfiguration des Templates
Sehen wir uns als nächstes die vorhandenen Template Parameter an. Mithilfe von Template Parametern kannst du das Aussehen und gewisse Funktionalitäten deines Templates über das Backend konfigurieren. Wechsele nun in den Template Manager und klicken dort auf das Master 2 Template.
Falls das Register Optionen bei dir nicht automatisch geöffnet wird, öffne dieses nun. Nun siehst du die selben Einstellungen wie im folgenden Bild.
Den Bereich Optionen kennst du schon. Hier hatten wir im Bereich Layouts unter dem Punkt Styles bereits unseren neu angelegtes Style rural ausgewählt.
Was ist nun aber ein Layout genau?
Unter dem Begriff kannst du dir eine individuelle Auswahl der angebotenen Einstellungen vorstellen. In der Regel hat ein selbst erstelltes Template nur das Default Layout. Wenn du aber ein Template erstellen willst, das deinem Kunden mehr Freiheit gibt, dann kannst du mehrere Styles erstellen, die vom Kunden verschiedenen Layouts zugewiesen werden können. Stelle dir nun vor, deine Webseite hat einen Menüpunkt, der auf eine Seite führt, auf der der Inhalt der Seitenleiste links erscheinen soll. Außerdem ist der Inhalt der Seitenleiste auf dieser einen Unterseite wichtiger und soll deshalb den gleichen Platz wie der eigentliche Beitragsinhalt einnehmen. Diese Aufteilung soll aber, anders als auf dem Rest der Website, nur für diese eine Unterseite gelten. Dies kannst du deinem Kunden mit einem extra hierfür erstellten Layout ermöglichen.
Vielleicht magst du auch auf bestimmten Positionen bestimmen, was passieren soll, wenn hier mehrere Module angezeigt werden. Im Template kannst du bestimmte Positionen mit double, parallel oder stack einstellen. Probieren es doch direkt einmal aus!
Double bedeutet, dass die Breite des ersten beziehungsweise letzten Moduls in der Position verdoppelt wird.
Stacked bedeutet, dass die Module übereinander gestapelt werden.
Und parallel teilt den Bereich horizontal gleich auf.
Modul Styles
Das WARP Framework nutzt Modul Klassen Suffixe für die individuelle Formatierung von Modulen. Welche Suffixe angeboten werden, kannst in der /layouts/widget.php herauslesen.
/* * Theme params */
foreach (array('suffix', 'panel', 'title_size', 'center', 'class', 'badge', 'icon', 'display') as $var)
{ $var = isset($params[$var]) ? $params[$var] : null; }
Auf dem nächsten Bild siehst du, wo du das Suffix im Administrationsbereich von Joomla! für das Module eintragen kannst.
Dieser Eintrag ändert den Quellcode deiner Website.
<footer id="tm-footer">
<a data-uk-smooth-scroll href="#"></a>
<div>
<div>Copyright © 2016 Name der Website. All Rights Reserved.</div>
<div>
<a href="https://www.joomla.org">Joomla!</a> is Free Software released under the <a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License.</a></div>
</div>Powered by <a href="http://www.yootheme.com">Warp Theme Framework</a>
</footer>
wird zu
<footer id="tm-footer">
<a data-uk-smooth-scroll href="#"></a>
<div>
<div>Copyright © 2016 Name der Website. All Rights Reserved.</div>
<div>
<a href="https://www.joomla.org">Joomla!</a> is Free Software released under the <a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License.</a></div>
</div>Powered by <a href="http://www.yootheme.com">Warp Theme Framework</a>
</footer>
Siehst du den Unterschied?
Das Framework bindet die neue Variable so in das ausgebende HTML, dass es von einem Webworker sinnvoll eingesetzt werden kann. Dann setzen wir es einmal sinnvoll ein. Erweitere die eben erstelle theme.css (in unserem rural Style!) um folgende Zeilen:
.footer1class-test {
background-color: #CF8B3F; }
.footer2class-test {
background-color: #6B9EDF;
}
Nicht schön, aber selten ... So, nun weißt du, wie du über ein Modulsuffix Module stylen kannst. Mehr Informationen zu Layouts findest du in Dokumentation des WARP-Frameworks.
Ein eigenes Modul Template
So, das Vorhandene kannst du nun stylen. Nun willst du aber etwas Neues hinzufügen, weil die vorhanden Modulpositionen alle schon für etwas vorgesehen sind. Bei der neuen Postion wünschst du dir auch zusätzliche Funktionalitäten: Du willst, dass der Website-Besucher die Position ein- und ausblenden kann. Kopiere hierfür aus dem /layouts Ordner die Datei theme.php nach /styles/rural/layouts/.
Früher hieß die theme.php einmal template.php. Schade, aber Wordpress hat wohl größeren Einfluss auf das WARP-Framework, als Joomla!.
Suche hier in der Datei /styles/rural/layouts/theme.php den Eintrag:
<main id="tm-content"> <?php if ($this['widgets']->count('breadcrumbs')) : ?> <?php echo $this['widgets']->render('breadcrumbs'); ?> <?php endif; ?>
<?php echo $this['template']->render('content'); ?>
</main>und ändere diesen wie folgt:
<main id="tm-content"> <?php if ($this['widgets']->count('breadcrumbs')) : ?>
<?php echo $this['widgets']->render('breadcrumbs'); ?> <?php endif; ?> <?php if ($this['widgets']->count('info')) : ?> <?php echo '<div id="info">'; ?> <?php echo $this['widgets']->render('info'); ?> <?php echo '</div>'; ?> <?php endif; ?> <?php echo $this['template']->render('content'); ?>
</main>
Nicht schön, aber richtig! Was jetzt fehlt, ist etwas Style und die Möglichkeit des Ausblendens. Fangen wir mit dem Style an. Deine Position wird von einem Bereich umschlossen, den du über die ID info ansprechen kannst.
Den Style kannst du somit in der theme.css verändern. Füge folgenden Text in diese Datei ein und der Info-Bereich erhält einen grauen Hintergrund. Hier geht es nicht um CSS, deshalb style ich nicht weiter. Du hast sicher eine Menge Ideen, oder?
#info { background-color: #EEEEEE; }Als nächstes möchte ich mir ansehen, wie ich eine Funktionalität in ein WARP Template einbauen kann. Der Inhalt auf Position info soll ein- und ausklappbar sein. Dazu brauche ich JavaScript (JS) und das packe ich in die Datei theme.js. Diese Datei finde ich im Verzeichnis /js Order. Ich will das Vorhandene aber nicht abändern, sondern überschreiben. Ich erstelle wieder ein Override in meinen rural Style. Willst du das auch tun? Lege dann das Verzeichnis /styles/rural/js/ an und kopiere die Datei /js/theme.js in das Verzeichnis, also in /styles/rural/js/.
Nur um es dir noch einmal bewusst zu machen. Wenn du meinen Schritten gefolgt bist, hast du nun ein Template Javascript, welches nur bei dem rural Style geladen wird. Wenn du in der Template Konfiguration einen anderen Style aktivierst, wird die theme.js aus dem jeweiligen Unterordner geladen - /styles/?/js/. Und falls kein spezieller Style ausgewählt ist, also falls du das default Style aktivierst, ist das die Datei /js/theme.js.
Soweit so gut. Die von dir kopierte Datei /styles/rural/js/theme.js beinhaltet schon jQuery Anweisungen. Diese kannst du so stehen lassen. Ergänze die Datei um folgenden fett dargestellten Text:
/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */
jQuery(function($) {
var config = $('html').data('config') || {};
// Social buttons
$('article[data-permalink]').socialButtons(config);
$(document).ready(function () {
$('#info').click(function () {
$(this).toggleClass("small");
});
}); });Die jQuery Dokumentation findest du hier und speziell die Dokumentation zu toggleClass findest du hier.
Werden deine Anweisungen einfach ignoriert? Wenn mir das passiert, finde ich oft den Grund bei einem Blick in die JS-Console meines Browsers. Die jQuery Funktion toggleClass() ergänzt, beziehungsweise löscht die Klasse eines Elementes. In unserem Fall die Klasse small, und die müssen wir nun noch anlegen. Dies tun wir in der Datei /style/rural/theme.css
#info.small { width: 100px; height: 20px; overflow: hidden; }Damit wird dein Modul nun 100px mal 20px klein angezeigt, wenn du auf dieses Klickst. Ein weiterer Klick auf den kleinen Bereich bringt die Info wieder in die Originalgröße.
In diesem Zusammenhang ist es sicher auch interessant, eine Position nur in bestimmten Ansichten anzuzeigen. Nur als Gedankenanstoß: Wenn die Info nur in der Komponente Content in der Kategorie-Ansicht und dem Layout Blog angezeigt werden soll, hilft dir dieser Code-Schnippsel vielleicht.
$jinput = JFactory::getApplication()->input;
$option = $jinput->getCmd('option');
$view = $jinput->getCmd('view');
$layout = $jinput->getCmd('layout');
if ($option == 'com_content' && $view == 'category' && $layout == 'blog')
{
// Hier anzeigen
}Eigene Template-Parameter
Jetzt würde ich gerne dem Template-Nutzer ermöglichen, selbst zu bestimmen, ob eine Info angezeigt werden soll – oder nicht. Das mache ich am besten mit einem Parameter. Diesen erstelle ich in der Datei config.xml im Hauptverzeichnis des Templates. Also nicht in dem Styles-Unterordner. Die config.xml kannst du nicht überschreiben. Hier musst du die Originaldatei abändern. Ich bauen ganz am Ende folgenden XML-Code ein:
<fields name="Zeige Info" icon="uk-icon-info-circle">
<field name="info" type="radio" default="0" label="Info anzeigen" description="Magst du eine Information anzeigen?">
<option value="0">Nein</option>
<option value="1">Ja</option>
</field>
</fields>Im Programmcode sieht das so aus:
So, nun kannst du den Parameter aktivieren! Im Administrationsbereich findest du den Parameter hier:
Nun wechseln wir noch einmal in die Datei /styles/rural/layouts/theme.php und ergänzen den eben erstellten Text um die im folgenden fett dargestellten Zeilen.
<?php if ($this['config']->get('info', true)) : ?>
<?php if ($this['widgets']->count('info')) : ?>
<?php echo '<div id="info">'; ?>
<?php echo $this['widgets']->render('info'); ?>
<?php echo '</div>'; ?>
<?php endif; ?>
<?php endif; ?>
Steht der Parameter auf „nein“. Ist die Info nicht sichtbar.
Fertig
Ich habe nun einen Einblick in das, was ich mit dem WARP Framework machen kann. Falls WARP 7 für dich auch neu ist, hoffe ich, dass du den nun auch hast. Alle, die tiefer in WARP drin stecken, dürfen gerne Tipps und Meinungen in den Kommentaren beisteuern.
