Für die Entwicklung von Check Your Chance haben wir WordPress PHP gebraucht und mussten ein Theme erstellen um die Seite zu integrieren. In diesem Post verrat ich euch wie das Funktioniert hat, welche Ressourcen wir gebraucht haben und wie man zusätzlich Custom Widgets erstellt.

Was ist ein WordPress Theme?

Ein WordPress Theme besteht aus einem Unterordner, der sich innerhalb des „wp-content“ Ordners befindet. Dort befindet sich das Blueprint unserer zukünftigen WordPress Seite. Verschiedene PHP Dateien sowie auch Template Dateien und Unterordner für Grafiken, Funktionalitäten, Includes, „The Loop“, Widgets usw. Ein persönlich erstelltes WordPress Theme bietet die Freiheit eine komplett eigene Seite zu erstellen, abgetrennt von der Standard WordPress Funktionalität, was man dazu braucht? – Ein wenig PHP wissen und WP PHP commands. Was mir zu dem geholfen hat waren die unzählige Tutorials die man überall auf YouTube, Bücher, Blogs findet.

Wie ist ein WordPress Theme aufgebaut?

Für ein Theme benötigt man im dezentesten Fall nur ein paar Dateien.

  • index.php
    • Die Hauptdatei des Themes, diese muss vorhanden sein.
  • style.css
    • Das Stylesheet, hier befinden sich alle Stylings, auch eine Obligatorische Datei damit das Theme funktioniert.
  • header.php
    • Der Kopfbereich der Seite wird hier ausgelagert.
  • footer.php
    • Der Fussbereich der Seite wird hier ausgelagert.
  • page.php
    • Diese Datei sorgt für die Ausgabe einzelner Seiten.
  • 404.php
    • Für die 404 Ausgabe bei nicht finden einer Seite.
  • functions.php
    • Zuständig für die Widget-Funktion, auch selbst programmierte Funktionen und File-Einbindungen.
  • sidebar.php
    • Hier werden Seitenleisten der Webseite ausgelagert. Bereiche die über des ganzen Themes den gleiche Inhalt haben, wie Kalender-Widgets, Kategorien usw.
  • sidebar-$slug.php
    • Spezifisch auf eine dynamische Sidebar, wo der $slug den Sidebar-Name darstellt. E.g: diese Sidebar hat ein bestimmtes Wrapper Element, dass für die Anzeige des Widgets vorhanden sein muss, wie etwa ein SliderWrapper.

Include Tags um eine Seite aufzubauen:

  • <?php get_header(); ?>
    • liest und gibt den Inhalt des header.php Files aus.
  • <?php get_sidebar(‚$slug‘); ?>
    • liest und gibt den Inhalt des sidebar.php oder sidebar-$slug.php Files aus, wenn man den $slug mit gibt.
  • <?php get_footer(); ?>
    • liest und gibt den Inhalt des footer.php Files aus.

Wie baut man eine Seite auf?

Eine WordPress Seiten  besteht immer aus mindestens 3 Sachen, Header Include, Content(„The Loop“), Footer Include. Um das besser zu erläutern, hier ein Beispiel einer möglichen WP Seite:

Eine simple Art den Inhalt auszugeben, den man, dann in der WordPress Umgebung einfüllt.

Wenn man ein Page-Builder plugin benutzt, ist die Anwendung des „Loops“ nicht notwendig, da man den Content-Bereich der page.php Datei einfach als “ <?php the_content(); ?> “ angeben kann.

Es ist sehr simple so ein Theme aufzusetzen, mit diesen Grundlagen könnte man schon eine einfache Seite bauen die nur 1 Template besitzt. Aber was passiert wenn für die Seite eine Komponente braucht die WordPress nicht bietet oder Gratis Plugins nicht ermöglichen. An dieser stelle kommen Custom Widgets und auch Sidebars zum Spiel.

WordPress Custom Widgets

Was sind Custom Widgets, was können sie?

Wie schon erwähnt dienen Sidebars als Wrapper Elemente für Blöcke die einen festen Inhalt besitzen wie ein Kalender. Diese Blöcke sind die Widgets, sie stellen einen bestimmten, meistens editierbaren Inhalt aus. Für eine Seite braucht man schnell ein Widget, dass WordPress nicht anbietet. Also muss man das Widget selber bauen.

Wie wird so ein Widget entwickelt?

Ein WordPress Widget besteht Standardmässig aus 1 Klasse die 4 Funktionen beinhaltet. Die Widget-Klasse die „WP_Widget“ extended, Constructor, Form, Widget und Update.

Constructor

Im Konstruktor wird Standardmässig der Name und die Description des Widgets erstellt.

Form

Die Form Funktion stellt dem Admin in der WordPress Oberfläche sein Formular zur Verfügung dieses Formular enthält die bearbeitbaren Felder eines Widgets und ist für die Füllung des Inhalts in die Widget Funktion zuständig.

Widget

Hier ist das Frontend unseres Widgets, auch werden die Daten des Admin’s die er im Formular abgefüllt hat abgespeichert und ausgegeben.

Update

Ist für Aktualisierung der Variablen zuständig die vom Form in die Widget Funktion geladen wird.

Beispiel

Hier ein einfaches Widget, dass ein h1 ausgeben kann.

Fazit

WordPress ist sehr leicht aufzusetzen und für eine erweiterte Entwicklung im mittleren Bereich mit der Komplexität, es ist auch sehr mächtig. Man hat mit Plugins und Custom erstellte Widgets/Sidebars fast unendliche Möglichkeiten. Ich empfiehl es gern weiter. Bei Fragen oder Ideen kann man gern auf mich zukommen.