WordPress Tutorial – Teil 3

In den Teilen 1 und 2 haben wir unsere WordPress Instanz veröffentlicht und über ein Reverse Proxy NGINX mit einem Let’s Encrypt Zertifikat abgesichert. Nun wollen wir ein Theme installieren und haben uns für Hemingway entschieden.

Die Installation ist an sich sehr einfach: Navigation nach Appearance | Themes | Add New | Search themes… und dann Install und Activate. Das Problem ist nur: Wird WordPress danach wieder über Docker-Compose neu installiert, so sind damit auch alle Themes und Plugins weg, denn sie werden direkt in das Filesystem installiert. Man kann sie zwar danach wieder manuell nachinstallieren, das ist aber nicht das, was wir wollen. Folglich suchen wir nun nach einer Lösung, Themes und Plugins automatisch über Docker zu installieren. Hierfür gibt es verschiedene Vorgehensweisen.

WP-CLI im Dockerfile

WP-CLI ist ein Tool zur Automatisierung von Aufgaben die sonst vom Benutzer manuell in der Administrationsoberfläche von WordPress durchgeführt werden. Das Hemingway-Theme kann so etwa wie folgt installiert und aktiviert werden:

wp theme install --activate https://downloads.wordpress.org/theme/hemingway.2.1.0.zip

Der naive Ansatz besteht also darin, das WP-CLI Tool im Dockerfile zu installieren und dort dann das o.g. Kommando aufzurufen. Achtung Spoiler: Das funktioniert so leider nicht, wie wir bald sehen werden.

Zunächst müssen wir uns jedoch von dem Basis-Image lösen und ein eigenes Dockerfile erzeugen. Um die Build-Prozess zu vereinfachen, integrieren wir die Schritte in Docker-Compose, das wie folgt erweitert wird:

  wordpress:
    ...
    build:
      context: ./build
    image: docker.tdm-consult.com:443/docker/com.tdmconsult/wordpress:latest
    ...

Zudem legen wir den Folder build an, in dem wir eine Datei Dockerfile anlegen, zunächst mit einer Zeile: FROM wordpress:latest. Unser Custom-Image können wir nun über docker-compose build bauen.

Nun wird das Dockerfile erweitert: Und zwar installieren wir zunächst WP-CLI und rufen dann weiter unten dass Tool auf, um the Hemingway-Theme direkt herunterzuladen und zu aktivieren:

FROM wordpress:latest

# install wp-cli to be able to install themes and plugins
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
 && chmod +x wp-cli.phar \
 && mv wp-cli.phar /usr/local/bin/wp

# install default theme
wp theme install --allow-root --force --activate https://downloads.wordpress.org/theme/hemingway.2.1.0.zip

Mit diesem Ansatz bekommen wir aber leider eine Fehlermeldung, die aussagt, dass WP-CLI keine gültige WordPress Installation vorfinden würde. Wie kann das sein? Nun das Problem besteht darin, dass das Basis-Image über FROM wordpress:latest nur vorbereitet wird, die eigentliche Installation – etwa das Anlegen der Tabellen für die Datenbank und die Basiskonfiguration – aber erst durch das Script docker-entrypoint.sh erfolgt, das erst mit dem Start des Containers ausgeführt wird, also bei docker-compose up.

Anpassen von docker-entrypoint.sh

Das Aufrufen von wp install theme muss also in die Startphase des Containers verlagert werden. Hierzu gibt es verschiedene Möglichkeiten, etwa auch die, das komplette Script über den COPY Befehl zu ersetzen. Wir entscheiden uns hier aber dafür, das Script selbst zu erweitern. Das wiederum können wir über Deteimanipulation im Dockerfile machen.

Wir wissen, dass der letzte Befehl im Script immer eine Zeile der Form exec "$@" sein wird: Hiermit wird das im Dockerfile unter CMD registrierte Kommando (hier: CMD [„apache2-foreground“]) ausgeführt, also letztlich das Starten der Apache Instanz. Demzufolge fügen wir in das Script vor dieser letzten Zeile Code ein, um die Theme-Installation durchzuführen. Das Dockerfile sieht dann so aus:

FROM wordpress:latest

# to make live more easy
RUN apt-get update \
 && apt-get install -y vim sudo

# install wp-cli to be able to install themes and plugins
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
 && chmod +x wp-cli.phar \
 && mv wp-cli.phar /usr/local/bin/wp

# install required themes on startup
RUN sed -i '/^exec/d' /usr/local/bin/docker-entrypoint.sh \
 && echo "if [ ! -e wp-content/themes/hemingway ]; then" >> /usr/local/bin/docker-entrypoint.sh \
 && echo "wp theme install --allow-root --force --activate https://downloads.wordpress.org/theme/hemingway.2.1.0.zip" >> /usr/local/bin/docker-entrypoint.sh \
 && echo "chown -R www-data:www-data /var/www/html/wp-content" >> /usr/local/bin/docker-entrypoint.sh \
 && echo "fi" >> /usr/local/bin/docker-entrypoint.sh \
 && echo "exec \"\$@\"" >> /usr/local/bin/docker-entrypoint.sh \
 && cat /usr/local/bin/docker-entrypoint.sh

Mit jedem Start von WordPress wird also geprüft, ob das Hemingway-Theme schon installiert ist und wenn nicht, so wird über wp theme install zur Verfügung gestellt. Und genau dies kann man beim ersten docker-compose up auch beobachten.

Die Apache Instanz läuft im Container mit dem User www-data. Der Befehl chown -R www-data:www-data /var/www/html/wp-content sorgt dafür, dass nach der Installation alle Dateien diesem User zugeordnet sind. Dies ist notwenddig, weil docker-entrypoint.sh mit Root-Rechten ausgeführt wird,

Theme konfigurieren

Nachdem das Theme nun installiert ist, kann das weitere Customizing durchgeführt werden. Insbesondere soll das Menüband zwischen Teaser-Bild und dem Hauptbereich eingestellt werden. Zudem werden unter Appearance | Customizing | Colors die Hintergrund- und Accentfarbe angepasst.

Das Menüband zeigt die Überschriften aller verfügbaren Seiten – die haben wir aber aktuell in dem Sinne gar nicht, weil wir nur mit Blogbeiträgen arbeiten wollen. Statt dessen soll das Menüband mit Einträge genauso wie auf unsere Homepage aufgebaut sein. Hierzu definieren wir ein neues Hauptmenü: Appearance | Menus. Unter Menu structure geben wir den Namen „Main“ ein und fügen dann pro Menüeintrag einen Custom Link hinzu. Schließlich wird unter Menu Settings noch die Option Display location: Primary Menu angehakt.

Nun erscheint die Menüleiste wir auf unserer Homepage, allerdings passen die Farbe und einige andere Details noch nicht. Im nächsten Teil soll das Theme weiter an die Corporate Identity angepasst werden.