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.

CMS Workbench Bludit Pico WordPress Smarty Twig Automad PHP
Yottamaster Aluminum 5 Bay (5x16TB) Festplattengehäuse für 2.5 Zoll und 3.5 Zoll HDD & SSD

Yottamaster Aluminum 5 Bay (5x16TB) Festplattengehäuse für 2.5 Zoll und 3.5 Zoll HDD & SSD - Dieser 5 Bay Festplatten Gehäuse unterstützt 5 Festplatten mit einer maximal unterstützten Kapazität von 90 TB und 18 TB für eine einzelne Festplatte. Mit fünf Anzeigelampen zur Überwachung des Arbeitsstatus jeder Festplatte. Plug and Play, Hot Swapping. Perfekt für speicherintensive Anwendungen wie Audio und Videobearbeitung oder digitale Fotografie. (*

kaufen...
Inhaltsverzeichnis
  •   Ein gutes Theme schreiben
  •   The Loop - die Zentrale des Theme
  •   Bauen Sie Template-Module

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.


Coding Pattern Design Loop
22.02.2022
Oliver Lohse

Es wurden noch keine Kommentare verfasst, sei der erste!

Weitere passende Artikel

_____

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.
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.
Die Formularverarbeitung durch PHP ist der beliebteste Standard im Web. Nutzen Sie ein intelligentes Design, können Sie sich viel Arbeit und Stress ersparen.
Werten Sie in eigenen Templates mit der Template-Engine Smarty, Variablen aus und steuern dadurch die individuelle Ausgabe des Content Ihrer Webseite.
Möchten Sie Themes, Layouts und Designs erstellen die auf hohe Akzeptanz beim Besucher stoßen, dann sollten Sie sich zuvor diesen Styleguide durchlesen.
WordPress Easy - Redaktion

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und Markup-Dialekten, z.B. Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.