Im letzten Teil haben wir ein Theme installiert und erste Anpassungen vorgenommen. Nun geht es darum, den Blog an das Corporate Design der Homepage anzupassen. Auch hier gibt es verschiedene Ansätze, die auch davon abhängen, wir umfangreich unsere Änderungen am Design werden sollen.

Zunächst soll nur die Gestaltung des Menübandes geändert werden, in dem wir im letzten Teil ja die einzelnen Einträge hinzugefügt haben. Um dieses Ziel zu erreichen müssen wir eigene CSS Styles in die Seite einbringen. Hierfür gibt es verschiedenste Möglichkeiten:

  • Installation eines für CSS spezialisiertes Plugin.
  • Über den Theme Editor, der unter Appearance | Themes | Theme Editor erreichbar ist.
  • Über Appearance | Themes | Customize | Additional CSS

Der Theme Editor ist sehr nützlich, um herauszufinden, welche Styles es eigentlich gibt und welche demzufolge überschrieben werden können. Die Syles für das Menüband sind dort ab Zeile 650 unter 5. Navigation zu finden. Erweiterungen fügen wir als Additional CSS hinzu.

.bg-dark {
	background-color: #000033!important;
}

.navigation.section {
  border-top: 2px solid white;	
  border-bottom: 10px solid #6699cc;	
}

.blog-menu > li + li:before {
	content: "";
}

.blog-menu a {
	padding: 10px 15px;
	font-weight: bold;
	color: #fff;
	font-size: 13px;
	font-family: "Helvetica Neue",sans-serif!important;
}

.blog-menu li:hover > a { 
	color: #6699cc; 
}

Schön an der Lösung ist, dass alle Änderungen sofort online im Browser angezeigt werden, so dass man den Effekt sofort erkennen kann. Zudem werden diese Styles in der Datenbank gespeichert, so dass sie auch mit einen Datenbanksicherung erhalten bleiben, auch dann, wenn das Theme neu installiert und aktualisiert wird.

Eigenes Theme aufbauen

Allerdings sind die Änderungen auf Styles beschränkt. Möchte man größere Änderungen durchführen, etwa das Menüband über das Teaser-Image verschieben, dann geht das – ohne recht aufwändige CSS-Tricks – nicht. Um mittelfristig mehr Möglichkeiten zu haben, soll hier deshalb noch ein anderer Weg beschritten werden, nämlich das Erzeugen eines eigenen Themes.

Dazu gehen wir schrittweise vor: Zunächst soll das Hemingway-Theme nicht mehr von remote installiert, sondern über Docker-Compose als Mount eingebunden werden. Weil damit auch diese Dateien nach Git übernommen werden, haben damit auch zugleich alle Vorteile der Versionsverwaltung. Nun können wir sukzessive Änderungen an dem Theme vornehmen und daraus sukzessive unser eigenes Theme erzeugen.

Mit Docker vorbereiten

Docker-Compose wird nun zunächst so erweitert, dass das Theme-Verzeichnis „von außen“ als Mount zur Verfügung gestellt wird. Für Plugins machen wir dasselbe, auch wenn wir das jetzt noch nicht benötigen. Der Vorteil ist aber, dass so auch alle installierten Plugin in die Versionsverwaltung mit eingecheckt werden können.

  wordpress:
    depends_on:
      - db
    build:
      context: ./build
    image: docker.tdm-consult.com:443/docker/com.tdmconsult/wordpress:latest
    ports:
      - "80:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      HTTP_X_FORWARDED_PROTO: https
    volumes:
      - ./volumes/plugins:/var/www/html/wp-content/plugins
      - ./volumes/themes:/var/www/html/wp-content/themes

Das volumes Verzeichnis erzeugen wir auf dem Server und kopieren dort den Hemingway Theme-Folder hinein. Außerdem übernehmen wir die Dateien wp-config.php und docker-entrypoint.sh in den Files-Subfolder. Die Struktur sieht dann so aus:

+- build
|  +- files
|  |  +- docker-entrypoint.sh
|  |  +- wp-config.php
|  +- Dockerfile
+- volumes
|  +- plugins
|  |  +- index.php
|  +- themes
|     +- index.php
|     +- hemingway
+- docker-compose.yml

Auch das Dockerfile wird angepasst, um unnötige Plugins und Themes vor der Installation zu entfernen:

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

# fix some base configurtaion
COPY files/wp-config.php /var/www/html
COPY files/docker-entrypoint.sh /usr/local/bin
RUN chmod +x /usr/local/bin/docker-entrypoint.sh

# remove unwanted plugins and themes to avoid installation
RUN rm -rf /usr/src/wordpress/wp-content/plugins/akismet \
 && rm -f /usr/src/wordpress/wp-content/plugins/hello.php \
 && rm -rf /usr/src/wordpress/wp-content/themes/twentynineteen \
 && rm -rf /usr/src/wordpress/wp-content/themes/twentytwenty \
 && rm -rf /usr/src/wordpress/wp-content/themes/twentytwentyone

Nun das Image neu bauen und starten:

docker-compose build
docker-compose up

Der Blog sollte wieder verfügbar sein und alle bisherigen Customizings intakt.

Mit Git versionieren

Sofern noch nicht gemacht, wird nun ein Git Repository angelegt und alle Files in die Versionsverwaltung eingecheckt:

$ git init
$ git add --all
$ git commit -m "Initial Commit"
$ git remote add origin ssh://git@your-origin/doc/docker_wordpress.git
$ git push -u origin master

Im Bitbucket wurde zuvor im Projekt DOC das Repository docker_wordpress angelegt. Zudem Git für SSH konfiguriert sein.