Wordpress

Installation & Einrichtung

Download per SSH

Die Wordpress-Website aufsuchen und im Downloadbereich den Link für die .tar.gz-Distribution in die Zwischenablage kopieren:

Anmelden am Server per SSH (Kitty) und ins Wordpress-Verzeichnis wechseln. Anschließend das Wordpress-Archiv herunterladen (Einfügen des URL in der Zwischenablage durch Rechtsklick ins KiTTY-Fenster) und mit tar entpacken:

x
cd public_html/wordpress
wget https://de.wordpress.org/latest-de_DE.tar.gz
tar -xf latest-de_DE.tar.gz

Wenn du dir anschließend den Verzeichnisinhalt zeigen lässt (ls -1), solltest du neben dem Archiv einen Ordner wordpress finden:

xxxxxxxxxx
latest-de_DE.tar.gz
wordpress

Wir schließen die Installation ab, indem wir das Downloadarchiv löschen, die Inhalte des Verzeichnisses wordpress ein Verzeichnis weiter nach oben holen und abschließend das dann leere Verzeichnis wordpress entfernen:

xxxxxxxxxx
rm latest-de_DE.tar.gz
mv wordpress/* .
rmdir wordpress

Der Download und die Vorbereitung der Wordpress-Quellen ist damit abgeschlossen.

Datenbank

Bereite im Hetzner-Backend eine neue / leere Datenbank für die Wordpress-Installation vor. Wähle dazu linkerhand Einstellungen › MySQL und füge dann im rechten Bereich eine neue Datenbank hinzu. Wähle am besten einen Datenbank- und Benutzternamen, dem man ablesen kann, dass es sich um die Datenbank für deine Wordpress-Installation handelt, z.B. <deinbenutzername>_wp. Im untenstehenden Beispiel wurde jkphla_wp für beides eingegeben.

Nach dem Anlegen der Datenbank siehst du einen Überblick über alle Informationen, die zu zur Verbindung deiner Wordpress-Instanz mit der Datenbank benötigst. Halte die Seite am besten im Browser geöffnet.

Stelle sicher, dass deine Domain (bzw. Wordpress-Subdomain) wordpress.<deinedomain>.de auf das public_html/wp-Verzeichnis geroutet wird. Bitte richte dich darauf ein, dass bis zu 24 Stunden vergehen können, bis diese Einstellung greift.

Einrichtung & Anmeldung

Rufe nun deine Domain im Browser auf. Du solltest den Wordpress-Installationsassistenten gezeigt bekommen:

Spiele den Assistenten bis zum Schluss durch und ergänze deine Datenbank-Zugangsdaten aus dem Hetzner-Backend:

Gib deiner Website im letzten Schritt einen Namen, lege einen ersten Backendbenutzer an (Passwort merken / herauskopieren!) und verhindere gegebenenfalls, dass Suchmaschinen deine Website indizieren können:

Ab sofort kannst du dich an deiner Wordpress-Instanz anmelden:

Gleichzeitig solltest du unter deiner Domain auch die erste Frontend-Ausgabe sehen können, zunächst mit dem aktuellen Standard-Theme, das mit Wordpress zusammen ausgeliefert wird:

Aufräumen & Vorbereiten

Entwicklungseinstellungen

Durch die Wordpress-Installation wurde auf dem Server eine Verzeichnisstruktur angelegt (Auszug). Untersuche die Verzeichnisstruktur, indem du in PHPStorm unter Tools > Deployment > Browse Remote Host eine FTP-Verbindung zum Hetzner-Server herstellst, ins Wordpress-Verzeichnis public_html/wp wechselst und dort die Inhalte studierst:

xxxxxxxxxx
├── wp-admin
├── wp-content
│ ├── languages
│ ├── plugins
│ ├── themes
│ ├── upgrade
│ └── uploads
├── wp-includes
├── ...
├── wp-config.php
└── ...

Neben der zentralen Konfigurationsdatei wp-config.php, die direkt im Wurzelverzeichnis liegt, sind für uns das Verzeichnis wp-content und sein Inhalt am wichtigsten.

Während ihr an eurem Wordpress-Theme arbeitet, solltet ihr den Entwicklermodus aktivieren, um aussagekräftige Fehlermeldungen zu erhalten. Öffne dazu die Konfigurationsdatei wpconfig.php und setze die bereits vorhandene WP_DEBUG-Konstante auf true (ziemlich weit am Ende der Datei):

xxxxxxxxxx
define('WP_DEBUG', true);

Vergiss nicht, die Datei nach jeder Veränderung wieder auf den Server zu übertragen!

Theme-Entwicklung

Anlegen eines neuen Themes

Wordpress-Themes liegen stets im Unterverzeichnis wp-content/themes. Beginne die Entwicklung deines Themes, indem du dort ein leeres Verzeichnis für dein Theme anlegst, z.B. mytheme. Der gewählte Verzeichnisname entspricht dem internen Theme-Namen.

PHPStorm-Projekt einrichten

Richte dir zunächst ein PHPStorm-Projekt mit automatischem Datei-Upload ein, sodass du Dateien nicht nach jeder Änderung manuell übertragen musst. Eine Anleitung zur Projekteinrichtung findest du im PHPStorm-Skript.

Theme-Grundlagen

Ein gültiges Wordpress-Theme benötigt mindestens 2 Dateien in diesem Verzeichnis:

1. index.php: Dies ist das ultimative Standard-Template, das zum Rendering aller Beiträge ("Posts") verwendet wird, für das kein spezielleres Template verfügbar ist.
2. style.css: Dies ist das (Haupt-)Stylesheet des Templates, das gleichzeitig auch Metainformationen über das Theme transportiert.

Lege zunächst diese beiden Dateien in deinem Template-Verzeichnis an.

Das Haupt-Stylesheet

Wordpress erwartet einen Kommentarblock am Anfang des Haupt-Stylesheets, um Angaben zum Theme zu extrahieren. Die Mindestangaben, die hier enthalten sein müssen, sind:

xxxxxxxxxx
/*
Theme Name: My Custom Theme
Author: Joschi Kuphal
Description: Custom wordpress theme for educational purposes
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mycustomtheme
*/

Mögliche weitere Angaben findest du auf der Wordpress Developer Website. Sog. Child-Themes — also Ableitungen von bestehenden Themes — benötigen dagegen nur die Angaben Theme Name und Template (Name des Themes, von dem sie ableiten).

Das Haupt-Stylesheet deines Themes wird automatisch immer geladen, sobald dein Theme aktiviert wurde und ein Beitrag im Frontend geladen wird. Nach dem initialen Kommentarblock fügst du ins Haupt-Stylesheet also das CSS ein, das für das Rendering deiner Website benötigt wird.

• Du kannst dein CSS bei Bedarf in einzelne, kleinere CSS-Dateien organisieren und per @import ins Haupt-Stylesheet laden. Um überflüssige HTTP-Requests zu vermeiden, bietet es sich allerdings an, z.B.
• einen Taskrunner (Gulp, Grunt, etc.) zu verwenden, um @imports im Hintergrund automatisch aufzulösen und alle einzelnen CSS-Dateien zum zentralen style.css zusammenzufassen.

Du solltest dein Theme im Wordpress-Backend nun unter Design > Themes finden. Wenn du zusätzlich eine Bilddatei mit den Namen screenshot.png in dein Template-Verzeichins legst, wird dir dieses als Vorschau angezeigt. Aktiviere dein Theme.

Das Template für Standard-Posts

Ein minimaler Inhalt für dein Standard-Template index.php könnte etwa so aussehen:

​x
<?php

    // Einbinden des Partials für den Kopfbereich
    get_header();

?>
    <main>
        <?php
    
        // Wenn es Beiträge gibt
        if (have_posts()) {
            
            // Durchlaufen aller Beiträge
            while (have_posts()) {

                // Ausgeben des Beitrags
                the_post();
            }
            
        } else {
            
            // Hinweismeldung
            ?><p>Leider gibt es noch keine Beiträge</p><?php
                
        }
        ?>
    </main>
<?php
            
    // Einbinden des Partials für den Fußbereich
    get_footer();

• Das Template besteht — wie bereits besprochen — aus einer Kombination aus HTML-Markup und eingewirkte PHP-Programmblöcken.
• Das Template macht intensiv Gebrauch von Funktionen, die Wordpress automatisch zur Verfügung stellt. Man spricht hier vom Wordpress Advanced Programming Interface (API). Die einzelnen Befehle wie get_header(), get_footer() und have_posts() nennt Wordpress Template Tags. Niemand kennt alle Template-Tags auswendig, dafür sind sie unter https://developer.wordpress.org/reference/functions/ dokumentiert. Eine intensivere Einführung zur Verwendung findest du unter https://developer.wordpress.org/themes/basics/template-tags/.

Aktivieren deines Themes

Sobald du die beiden oben genannten Dateien in deinem Theme-Verzeichnis angelegt hast, sollte das Theme im Wordpress-Backend unter Design > Themes werden:

Ab diesem Moment solltest du die Ausgabe deines Themes auch im Frontend sehen können:

Wenn du zuvor den Debug-Modus aktiviert hast (siehe oben), zeigen die Fehlermeldungen im Frontend an, dass empfohlen wird, dass dein Template auch über die beiden Dateien header.php und footer.php verfügen sollten. Diese werden von den Template-Tags get_header() und get_footer() erwartet sollen den Kopf- bzw. Fußbereich deiner Website liefern.

Entfernen nicht genutzter Themes

Es wird empfohlen, alle nicht genutzten Themes aus der Wordpress-Instanz zu löschen, da deren Präsenz Wordpress einerseits ein wenig unnötige Energie kostet, andererseits sollte es möglichst nie "toten Code" geben, da dieser allenfalls Sicherheitsprobleme mit sich bringen könnte. Lösche überflüssige Themes, indem du entweder die jeweiligen Theme-Verzeichnisse per FTP löschst, oder indem du im Wordpress-Backend in die jeweiligen Theme-Details gehst und rechts unten auf "Löschen" klickst:

Theme-Entwicklung

Eine gelungene Einführung in den Aufbau eines eigenen, einfachen Wordpress-Themes bietet das Video-Tutorial von Mr. Digital: https://www.youtube.com/watch?v=pFMgAWkrk8o (englisch). Steige am besten bei etwa 2:50 Minuten ein, um an so ziemlich der Stelle zu stehen, an der dein neues Theme derzeit ist:

https://youtu.be/pFMgAWkrk8o?t=170