Logo

Designpattern für ein übersichtliches und flexibles CMS Theme


Mit diesem Design Pattern schreiben Sie gute Themes die Sie auch noch in vielen Jahren weiter Ausbauen können. Erzeugen Sie einfache modulare Komponenten.

Anker Power Expander

Anker Power Expander - DAS ANKER PLUS Schließe dich den über 50 Millionen glücklichen Kunden an. DUALE LEISTUNG Jeweils ein SD und ein microSD Speicherkartensteckplatz machen die Datenübertragung und -verwaltung zum Kinderspiel. BLITZSCHNELLER DATENTRANSFER Genieße dank dem hochmodernen UHS-II Speicherkartensteckplatz eine Datenübertragung mit einer Geschwindigkeit von bis zu 312 MBps. Hinweis

kaufen...
Automad Bludit Coast GetSimple GRAV Handlebars Java PHP Pico Smarty Templating Typemill WonderCMS WordPress yamlCMS

Ein gutes Theme schreiben

Die Übersichtlichkeit des Programmcodes in Themes ist maßgeblich entscheidend für die gute Wartbarkeit und langlebige Pflege des Codes. Ist der Code gut strukturiert, leicht wiederverwendbar und logisch aufgebaut, dann haben Sie lange etwas von diesem Theme und können es leicht über lange Zeit weiterentwickeln.

The Loop - die Zentrale des Theme

Als zentralen Ausgangspunkt für die Entwicklung eines eigenen Theme sollten Sie sich in Ihrem CMS den Loop suchen. Der Loop ist nichts anderes als die zentrale Stelle an der die Beiträge des Posts verarbeitet und angezeigt werden - also das Herz der Content-Darstellung. Als Beispiel habe ich den Loop des Bludit CMS gewählt, da dieser bereits schon gut strukturiert ist.

...  ...
001  <body>
002  
003     <?php include(THEME_DIR_PHP.'navbar.php'); ?>
004  
005     <?php
006         if ($WHERE_AM_I == 'page') {
007             include(THEME_DIR_PHP.'page.php');
008         }
009         elseif ($WHERE_AM_I=='home') {
010             include(THEME_DIR_PHP.'home.php');
011         }
012         elseif ($WHERE_AM_I=='tag') {
013             include(THEME_DIR_PHP.'home.php');
014         }
015         elseif ($WHERE_AM_I=='category') {
016             include(THEME_DIR_PHP.'category.php');
017          }
018     ...

Ich denke, das der oben gezeigte Code Auszug durchaus schon sehr sprechend ist und deutlich macht, was im Theme abläuft. In den Zeilen 006, 009, 012 und 015 ruft das Framework des CMS jeweils ein Sub-Template für die jeweilige Funktion der Startseite (home.php), einer Beitragsseite (page.php), für die Anzeige von Schlagworten (tag.php) und der Anzeige einer Kategorie (category.php) auf.

Bauen Sie Template-Module

Zwar sind diese im CMS Bludit vollständig mit Heading, Navbar, Content und Footer implementiert, jedoch ist dies wenig modular bzw. Komponentenbasiert. Statt dessen sollten Sie kleinere Module bilden und Kopf- und Fußzeilen als einzelne Module ausführen, wie es im folgenden Coding der Fall ist.

001  ...
001  <body>
001  
001     <?php include(THEME_DIR_PHP.'navbar.php'); ?>
001  
001     <?php
001         if ($WHERE_AM_I == 'page') {
001             include(THEME_DIR_PHP.'inc-header-page.php');           // Kopf
001             include(THEME_DIR_PHP.'inc-affiliate.php');             // Affiliate Banner
001             Theme::plugins('pageBegin');                            // Plugins des Hook pageBegin() starten
001             include(THEME_DIR_PHP.'page.php');                      // Der Content
001             include(THEME_DIR_PHP.'inc-sub-post.php');              // Seiten mit enthaltenem Tag
001             include(THEME_DIR_PHP.'inc-relatet-posts.php');         // Seiten die untergeordnet sind
001             Theme::plugins('pageEnd');                              // Plugins des Hook pageEnd() starten
001             include(THEME_DIR_PHP.'inc-about-user.php');            // Avatar und Bio anzeigen
001         }
001         elseif ($WHERE_AM_I=='home') {
001             include(THEME_DIR_PHP.'inc-header-home.php');           // Kopf
001             Theme::plugins('pageBegin');                            // Plugins des Hook pageBegin() starten
001             include(THEME_DIR_PHP.'home.php');                      // Die HOME-Seite
001             include(THEME_DIR_PHP.'inc-taglist.php');               // Liste aller TAGs im CMS
001             include(THEME_DIR_PHP.'inc-slug-banner.php');           // Banner in des betreffenden SLUG
001             Theme::plugins('pageEnd');                              // Plugins des Hook pageEnd() starten
001             include(THEME_DIR_PHP.'inc-about-user.php');            // Avatar und Bio anzeigen
001         }
001         elseif ($WHERE_AM_I=='tag') {
001             include(THEME_DIR_PHP.'inc-header-tag.php');            // Kopf
001             include(THEME_DIR_PHP.'inc-affiliate.php');             // Affiliae Banner
001             Theme::plugins('pageBegin');                            // Plugins des Hook pageBegin() starten
001             include(THEME_DIR_PHP.'tag.php');                       // Liste alle Posts zu diesem TAG
001             Theme::plugins('pageEnd');                              // Plugins des Hook pageEnd() starten
001             include(THEME_DIR_PHP.'inc-about-user.php');            // Avatar und Bio anzeigen
001         }
001         elseif ($WHERE_AM_I=='category') {
001             include(THEME_DIR_PHP.'inc-header-category.php');       // Kopf
001             Theme::plugins('pageBegin');                            // Plugins des Hook pageBegin() starten
001             include(THEME_DIR_PHP.'category.php');                  // Anzeige der Kategorie enthaltenen Posts
001             include(THEME_DIR_PHP.'inc-taglist.php');               // Liste aller TAGs im CMS
001             include(THEME_DIR_PHP.'inc-slug-banner.php');           // Banner in des betreffenden SLUG
001             Theme::plugins('pageEnd');                              // Plugins des Hook pageEnd() starten
001             include(THEME_DIR_PHP.'inc-about-user.php');            // Avatar und Bio anzeigen
001          }
001     ?>
001  
001     <?php include(THEME_DIR_PHP.'footer.php'); ?>
...  ...
001  
001  </body>
001  </html>

Module beginnen in diesem Codebeispiel mit INC-xxx, da sie im wesentlichen als Include genutzt werden

Für die Anzeige des Headers der Seite wurde ein eigenes Modul (inc-XXX.php) entwickelt - es hat nur eine Hand voll Zeilen. Dieses Modul ist jedem Start einer Seite, einer Kategorie oder der Tag-Liste vorgeschaltet. Im Anschluss daran folgt ein Affiliate-Modul, die Plugins des CMS werden eingebunden und dann der eigentliche Content wie es auch im originalen Loop im Abschnitt davor zu sehen war.

Nach Anzeige des eigentlichen Content endet die Seite unterschiedlich mit Tagliste, Banner und den Plugins die am Ende der Seite gestartet werden sollten.

Wenn Sie sich den Code oben ansehen, haben Sie sehr schnell einen guten Überblick über den Aufbau des Themes. Sie wissen sehr genau was passiert, wenn ein Leser eine Kategorie anklickt, oder einen Beitrag liest. Die Struktur der Anzeige steht übersichtlich in nur wenigen Zeile Code Ihres Themes.

Aufgaben sind modularisiert und können leicht umgestellt oder deaktiviert werden. Sie haben das Theme auf diese Art und Weise stärker abstrahiert und erledigen Aufgaben durch Module bzw. Komponenten die leicht wiederverwertet werden können.

Die Programmstruktur ist imens wichtig wenn Sie ein gutes Theme schreiben wollen. Ordnen Sie den Code nach FUnktionsgruppen, bilden Module mit weiderkehrenden Aufgaben für die mehrfache Verwendung an verschiedenen Stellen. Bevor Sie zu große Programmblöcke schreiben, überlegen Sie, ob sich dieser nicht besser in mehrere Module oder Komponenten zerteilen lässt.

Passend:


Standardisiertes PHP Formular Designpattern entwickeln

Die Formularverarbeitung durch PHP ist der beliebteste Standard im Web. Nutzen Sie ein intelligentes Design, können Sie sich viel Arbeit und Stress ersparen.

Ein eigenes Theme für Bludit CMS leicht entwickeln

So steuern Sie die Templatevorgabe in Beiträgen mit dem CMS Bludit. Sie können den Tamplatenamen bei der Erstellung von Beiträgen im Backend angeben.

Templating 3 ein einfaches Layout für das CMS GetSimple anlegen

Teil 3 - Ein GetSimple Template erstellen. In Verbindung mit dem freien und beliebten CSS-Framework Bootstrap eine leichte Sache auf dem Weg zum eigenen Blog.

Styleguide für Webseiten - das sind die Standards

Möchten Sie Themes, Layouts und Designs erstellen die auf hohe Akzeptanz beim Besucher stoßen, dann sollten Sie sich zuvor diesen Styleguide durchlesen.

Der Beitrags Loop zeigt alle Posts und Beiträge im CMS GetSimple

Lesen Sie im GetSimple CMS alle Posts und Beiträge auf der Startseite mit dem Beitrags-Loop einzeln aus, der Beitrag zeigt Ihnen wie einfach das geht.

Der Loop Counter index.loop in Twig Templates des Pico CMS

Der aktuelle Index des Pico Loops kann für die Steuerung unterschiedlicher Formate abgefragt werden, nutzen Sie das Tag loop.index der Twig Template Engine.

Schleifen und Beitrags Loops im Smarty Template Parser

Werten Sie in eigenen Templates mit der Template-Engine Smarty, Variablen aus und steuern dadurch die individuelle Ausgabe des Content Ihrer Webseite.


Meta: Instagram CMSWorkbench.de GIMP-Handbuch.de Kontakt Impressum Datenschutz