Bei großen Projekten als Webdeveloper fällt es gelegentlich schwer, den Überblick zu behalten. Die beste Methode, um Fehler zu vermeiden ist die Automatisierung von Aufgaben. In diesem Fall geht es um die Ausgabe des Seitentitels mit Hilfe eines Shortcodes, den Du mit ein paar Zeilen PHP-Code programmieren kannst. Selbstverständlich gibt es auch Plugins, die fertige Shortcodes liefern. Allerdings ist es immer besser, möglichst wenige Plugins zu verwenden und einfache Probleme mit eigenem Code zu lösen.

Voraussetzungen

Um den Shortcode zu benutzen, benötigst Du folgende Voraussetzungen:

1. Eine WordPress-Website, die auf Deinem eigenen Server läuft (Keine WordPress-Installation, die über DomainName.wordpress.com läuft!).
2. Ein aktiviertes Child Theme: Die Benutzung des Child-Themes erlaubt es Dir, Änderungen am Code Deines Themes zu verändern, ohne das dieser bei Aktualisierungen des Themes verloren gehen. Hier erfährst Du, wie Du ganz einfach ein Child Theme erstellen kannst.

Das wars auch schon, jetzt kannst Du mit der Implementierung des Shortcodes beginnen!

Shortcode programmieren

Um den Code für den Shortcode einzubauen, musst Du die functions.php-Datei Deines Child Themes bearbeiten. Du kannst die Datei mit einem FTP-Programm herunterladen, bearbeiten und wieder hochladen. Für diese einfache Anwendung reicht es jedoch, wenn Du den Code in das Backend von WordPress kopierst.

Wie im Screenshot dargestellt, kannst Du die functions.php-Datei über Design → Editor bearbeiten. Nach dem Code am Beginn der Datei, der die Einbindung in das Parent Theme sicherstellt, kannst Du den folgenden Code einfügen:
[php]
function page_title_sc( ){
return get_the_title();
}
add_shortcode( ‚page_title‘, ‚page_title_sc‘ );
[/php]Der return-Befehl in der Funktion weist WordPress an, den Titel der aktuellen Seite auszugeben. Durch den Befehl add_shortcode wird der Shortcode erstellt, wobei das erste Argument 'page-title' den Namen des Shortcodes definiert.

Das wars, Du hast Deinen ersten eigenen Shortcode programmiert!

Ausgabe und Implementierung

Den Shortcode kannst Du nun auf jedem Beitrag und jeder Seite in eckigen Klammer ausgeben: [page_title]. Falls sich der Titel der Seite ändert, passt sich die Titel-Zeile Deiner Seite automatisch an. Hiermit sparst Du Zeit und wirst bei der Wartung Deiner Seite weniger Probleme haben.

Anwendung im Divi Theme

Falls Du das Divi Theme von Elegant Themes benutzt, erweisen sich Shortcodes als sehr mächtiges Tool in der Automatisierung. Divi ist eines der beliebtesten WordPress-Themes und bietet einen vielfältigen visuellen Editor, mit dem Du im Handumdrehen eine professionelle Website bauen kannst.

Besonders praktisch ist die Layout-Funktion des Themes. Hiermit kannst Du Standard-Layouts erstellen und diese bei der Veröffenlichung neuer Seiten einfach implementieren. Stelle Dir vor, Du programmierst die Website für eine Partei mit ungemein vielen Kreisverbänden. Nun braucht jeder Kreisverband seine eigene Unterseite, um seine Veranstaltungen zu veröffentlichen. Die Seiten sind jedoch alle gleich aufgebaut, haben also das gleiche Layout und der Name des Kreisverbands muss immer zu Beginn der Seite im Header ausgegeben werden.

Jetzt kannst im Header des Layouts Deinen Shortcode unterbringen. Wenn Du nun nach und nach alle Unterseiten der Kreisverbände erstellst, wird automatisch im Header der Name des Kreisverbands ausgegeben. Im Bild unten habe ich den Shortcode innerhalb eines h1 Header-Elements eingefügt, sodass der Titel der Seite immer groß angezeigt wird.

Weiterführende Links

Einige der erwähnten Themen musst Du Dir erst erarbeiten, bevor Du Shortcodes bauen kannst. Diese Liste ist eine (halbwegs vollständige) Zusammenfassung wichtiger Seiten:

• WordPress Codex: Child Themes
• Divi Dokumentation: Divi Layouts und Library
• WordPress.org vs. WordPress.com: Selbst gehostete WordPress Website

Warum man Child Themes nutzen sollte

Eines sei von vornherein gesagt: Wenn man Child Themes benutzt, erspart man sich wirklich sehr viel Arbeit im Nachhinein. Denn hat man einmal eine funktionierende Website mit einigen Lesern, sollte man sich diesen Erfolg nicht durch ein zerschossenes Theme kaputt machen. Mit dem Child Theme kannst du wirklich auch jedes kleinste Detail deiner Website modifizieren ohne die ursprünglichen Einstellungen zu verlieren. Es wird ein komplett neue Verzeichnisstruktur erstellt, sodass du einfach über die WordPress-Oberfläche zu deinem alten Theme wechseln kannst.

Los gehts

Ich werde dieses Tutorial anhand des Divi Themes von Elegant Themes erklären. Die Schritte lassen sich so aber auf jedes Theme übertragen.

1. 1. Für dein neues Child Theme erstellst du zunächst lokal auf deinem Computer einen Ordner, z.B. mit dem Namen divi_child_theme.
   2. Erstelle eine style.css Datei in dem Child Theme-Ordner mit folgendem Inhalt:[code language=“css“]</code>
      /*
      Theme Name: Child Theme
      Theme URI: http://www.theme_url.de
      Description: Child Theme
      Author: Hans Otto
      Author URI: http://www.hansotto.de
      Template: Theme
      Version: 1.0.0
      */
      @import url(„../Theme/style.css“);
      /* =Theme customization starts here
      ——————————————————- */
      <code>[/code]
   3. Wichtig sind Template und @import: Template muss exakt dem Namen deines Parent Themes entsprechen. über @import sollte auch der genaue Dateipfad auf deinem Server zur style.css-Datei deines Parent Themes angegeben sein.
   4. Wenn alles korrekt eingetragen wurde, muss man den divi_child_theme-Ordner nur noch zippen (das geht unter Windows direkt mit dem Datei-Explorer und unter Mac mit dem Finder) und bei WordPress hochladen. Dies wird wie bei jedem anderen Theme über Design – Themes – Hinzufügen – Theme hochladen gemacht.

CSS bearbeiten

Mit dem Child Theme sollte deine Webseite genauso wie vorher aussehen. Nun kannst du hinter dem @import-Befehl dein Costum-CSS einfügen. Zunächst lädt WordPress die alte CSS-Datei. Alle neuen Befehle überschreiben automatisch die Alten.

Functions.php bearbeiten

Durch erstellen einer neuen functions.php-Datei im Child Theme-Ordner fügt man der bestehenden PHP-Datei im Parent Theme Funktionen hinzu. Also wird die Originaldatei nicht ersetzt,wie bei der style.css! Ähnlich verfährt man auch, wenn man beispielsweise den footer-Bereich seiner Website über die footer.php-Datei verändern möchte. Hier ist aber Vorsicht geboten: Wenn eine neue  footer.php-Datei erstellt wird, wird die alte ganz überschrieben! Also sollte man vorher immer ein Backup der alten Datei anlegen.

Alles klar soweit? Sonst schau doch mal hier vorbei:

1. Die Anleitung bei Elegant Themes: Wie immer einfach und intuitiv erklärt. Außerdem mit angeschlossenem Kommentaren, die oft sehr nützlich sind!
2. WordPress Codex: Eine ausführliche Anleitung direkt von WordPress
3. One klick Child Theme: Das Plugin erzeugt automatisch ein Child Theme. Habe ich noch nicht ausprobiert, ich bevorzuge den manuellen Weg.