Meine genutzten WordPress Plugins

Nachfolgend die von mir auf dieser Seite genutzten WordPress Plugins. Ich werde versuchen diesen Beitrag immer zu aktualisieren, falls ich ein zusätzliches oder altes Plugin nicht mehr verwende.

Contact Form 7

Mit dem Plugin Contact Form 7 lassen sich relativ einfach Formulare Erstellen und in WordPress Seiten Einbinden. Es erlaubt Teile des Formulars als Pflichtangaben zu definieren und beim Absenden des Formulars E-Mails zu versenden. Ich verwende es zum Beispiel auf meiner Kontakt Seite.

Responsive Lightbox

WordPress setzt Standardmäßig einen Link zu den in Beiträgen eingebetteten Mediendateien, mit denen diese in voller Größe betrachtet werden können. Mithilfe des Plugins Responsive Lightbox wird bei einem Klick auf die Mediendatei die aktuelle Seite nicht verlassen, sondern die Mediendatei lediglich in voller Größe vor dem eigentlichen Beitrag angezeigt. So kann die Mediendatei mit einem einfachen Klick wieder ausgeblendet oder zwischen verschiedenen im gleichen Beitrag eingebauten Mediendateien gewechselt werden.

SyntaxHighlighter Evolved

Mithilfe von dem Plugin SyntaxHighlighter Evolved visualisiere ich Inhalte von Konfigurationsdateien oder Code-Schnipsel. Es erlaubt unter anderem die Anzeige von Zeilennummern, unterstützt die Syntax diverser Programmiersprachen und erlaubt es einzelne Zeilen hervorzuheben. In dem von mir verwendeten WordPress Theme Sparkling ist in der Standardkonfiguration der Text etwas nach unten verschoben. Wie dies behoben werden kann habe ich im Beitrag Textverschiebung in WordPress Plugin SyntaxHighlighter Evolved beheben beschrieben.

WP-Piwik

Das Plugin WP-Piwik erlaubt es einfach einen Piwik Tracking Code in WordPress einzubinden. Es bietet außerdem die Möglichkeit sich im Dashboard von WordPress die Statistik der letzten Besucher anzeigen zu lassen. Wie es installiert und konfiguriert werden kann habe ich im Beitrag Piwik Tracking-Code in WordPress einfügen beschrieben.

Textverschiebung in WordPress Plugin SyntaxHighlighter Evolved beheben

Ich verwende das WordPress Plugin SyntaxHighlighter Evolved zum Darstellen von Konfigurationsausschnitten oder Codebeispielen. Leider ist bei meinem eingesetzten WordPress Theme Sparkling der Text standardmäßig etwas nach unten verschoben.

Textverschiebung im SyntaxHighlighter Evolved
Textverschiebung im SyntaxHighlighter Evolved

Diese Verschiebung kann einfach durch nachfolgenden Code im Zusätzliches CSS des Themes behoben werden.

.syntaxhighlighter table td.gutter {
    vertical-align: middle !important;
}

Um das Zusätzliche CSS aufzurufen im Administrationsbereich von WordPress einfach in der Linken Menüleiste auf Design (1), anschließend auf Themes (2) und dort auf Customizer (3) klicken.

WordPress Theme Customizer aufrufen
WordPress Theme Customizer aufrufen

Um nun angezeigten Menü ganz unten auf Zusätzliches CSS klicken.

WordPress Theme Customizer - Zusätzliches CSS
WordPress Theme Customizer – Zusätzliches CSS

In der nun angezeigten Textbox (1) das oben gezeigte CSS Schnipsel hinzufügen und mit einem Klick auf Speichern & Publizieren (2) übernehmen.

WordPress Theme Customizer - Zusätzliches CSS bearbeiten
WordPress Theme Customizer – Zusätzliches CSS bearbeiten

Nach dem Speichern ist die Verschiebung sofort behoben.

Behobene Textverschiebung im SyntaxHighlighter Evolved
Behobene Textverschiebung im SyntaxHighlighter Evolved

WordPress mit Let’s Encrypt SSL Zertifikat unter Ubuntu Linux 16.04 mit nginx und MariaDB oder MySQL installieren

WordPress ist ein Content Management System (CMS), welches es erlaubt relativ einfach den Inhalt einer statischen Webseite oder eines Blogs zu pflegen. Es basiert auf PHP und benötigt einen Webserver sowie eine Datenbank zur Ausführung. Ich beschreibe in diesem Beitrag wie WordPress unter Ubuntu Linux 16.04 mit nginx als Webserver, SSL Zertifikate von Let’s Encrypt sowie MariaDB bzw. MySQL als Datenbank installiert werden kann. Wie diese Dinge Konfiguriert werden können habe ich bereits in folgenden Beiträgen beschrieben

Vorbereitung

Nginx / Let’s Encrypt

Zuerst sollte wie in den oben verlinkten Beiträgen eine nginx Konfigurationsdatei erstellt sowie ein Let’s Encrypt SSL Zertifikat beantragt werden.

Falls für das Beantragen der SSL Zertifikate ein dummy-Verzeichnis verwendet wurde muss zuerst ein Verzeichnis für die WordPress Dateien angelegt werden.

$ sudo mkdir -p /var/www/com.example.blog

Damit es später möglich ist WordPress über die Webseite zu aktualisieren sollten die Rechte an diesem Ordner dem Benutzer und der Gruppe www-data zugewiesen werden.

$ sudo chown www-data:www-data /var/www/com.example.blog

Danach muss die nginx Konfiguration unter /etc/nginx/sites/available/com.example.blog durch nachfolgende ersetzt werden – natürlich mit den eigenen Angaben für IP-Adressen, Domains, Pfade etc.

server  {
        listen          80;
        listen          [xxx:xxx:xxx::42]:80;

        server_name     blog.example.com;
        return          301 https://$server_name$request_uri;
}

server  {
        listen          443 ssl;
        listen          [xxx:xxx:xxx::42]:443 ssl;

        server_name     blog.example.com;

        ssl_certificate         /etc/letsencrypt/live/blog.example.com/fullchain.pem;
        ssl_certificate_key     /etc/letsencrypt/live/blog.example.com/privkey.pem;
        add_header              Strict-Transport-Security "max-age=63072000; includeSubdomains;";

        root    /var/www/com.example.blog;

        index   index.php;

        location = /robots.txt {
                try_files $uri $uri/ /index.php?$args;
        }

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.php?$args;
        }

        # pass the PHP scripts to FastCGI server
        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        }

        # snippet for updating letsencrypt certificates
        include snippets/certbot-webroot.conf;
}

Nun muss die Konfiguration ggf. noch aktiviert werden.

$ sudo ln -s /etc/nginx/sites-available/com.example /etc/nginx/sites-enabled/

Bevor die neue Konfiguration geladen wird sollte geprüft werden, dass sie Fehlerfrei ist.

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Anschließend kann sie geladen werden.

$ sudo /etc/init.d/nginx reload
[ ok ] Reloading nginx configuration (via systemctl): nginx.service.

WordPress

Damit ist nginx fertig konfiguriert und die WordPress Dateien können heruntergeladen, entpackt und ihre Rechte gesetzt werden. Falls die englische Version von WordPress installiert werden soll muss die Datei https://wordpress.org/latest.zip heruntergeladen werden.

$ cd /var/www/com.example.blog
$ sudo wget https://de.wordpress.org/latest-de_DE.zip
--2017-05-29 20:33:32-- https://de.wordpress.org/latest-de_DE.zip
Resolving de.wordpress.org (de.wordpress.org)... 66.155.40.249, 66.155.40.250
Connecting to de.wordpress.org (de.wordpress.org)|66.155.40.249|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 9251402 (8.8M) [application/zip]
Saving to: ‘latest-de_DE.zip’

latest-de_DE.zip 100%[=================================================>] 8.82M 4.08MB/s in 2.2s

2017-05-29 20:33:35 (4.08 MB/s) - ‘latest-de_DE.zip’ saved [9251402/9251402]
$ sudo unzip latest-de_DE.zip
$ sudo rm latest-de_DE.zip
$ sudo mv wordpress/* ./
$ sudo rm -r wordpress
$ sudo chown -R www-data:www-data *

MariaDB / MySQL

Bevor die Installation gestartet wird muss noch eine Datenbank für WordPress angelegt werden. Wie eine Datenbank mit zugehörigem Benutzer angelegt werden kann habe ich im Beitrag MySQL oder MariaDB Datenbank über das Terminal erstellen beschrieben.

Installation

Nun, da nginx, Let’s Encrypt und MariaDB bzw. MySQL konfiguriert wurde kann die Installation gestartet werden. Dazu muss einfach die in nginx konfigurierte Domain aufgerufen werden, hier im Beispiel also https://blog.example.com. Auf der nun angezeigten Webseite kann einfach auf „Los geht’s!“ geklickt werden.

Schritt 1 der WordPress Installation
Schritt 1 der WordPress Installation

Im zweiten Schritt müssen die Verbindungsinformationen zur Datenbank eingegeben werden. Anschließend können diese mit einem Klick auf „Senden“ gespeichert werden.

Schritt 2 der WordPress Installation
Schritt 2 der WordPress Installation

Der dritte Schritt erlaubt es mit einem Klick auf „Installation ausführen“ die eigentliche Installation von WordPress zu starten.

Schritt 3 der WordPress Installation
Schritt 3 der WordPress Installation

Im vierten Schritt werden Angaben wie der Titel der Webseite sowie Benutzername und Passwort verlangt. Nachdem dies ausgefüllt wurde kann einfach auf „WordPress Installieren“ geklickt werden.

Schritt 4 der WordPress Installation
Schritt 4 der WordPress Installation

Der fünfte Schritt besteht lediglich aus einer Bestätigung, dass WordPress erfolgreich installiert wurde. Mit einem Klick auf „Anmelden“ wird der Browser auf die Anmeldeseite von WordPress weitergeleitet.

Schritt 5 der WordPress Installation
Schritt 5 der WordPress Installation

WordPress wurde damit erfolgreich installiert und kann genutzt werden.

WordPress Anmeldung
WordPress Anmeldung

Piwik Tracking-Code in WordPress einfügen

Piwik ist eine Open Source alternative zu Google Analytics, welches Webseitenaufrufe statistisch auswertet. Wie Piwik unter Ubuntu 16.04 mit nginx und MariaDB/MySQL installiert werden kann habe ich im Beitrag Piwik unter Ubuntu Linux 16.04 Server mit nginx und MariaDB/MySQL installieren und konfigurieren beschrieben. Um die Webseitenaufrufe zu Tracken muss ein Tracking-Code in die Website eingefügt werden. In diesem Beitrag beschreibe ich wie dies für WordPress erledigt werden kann.

Der Piwik Tracking-Code sollte im Header oder Footer der zu Trackenden Website eingefügt werden. In WordPress kann daher einfach die header.php oder footer.php bearbeitet werden um den Tracking-Code einzubauen. Dies hat aber den Nachteil, dass diese Änderungen nach jedem Update des Themes erneut gemacht werden müssen. Mit einem Child-Theme könnte dies umgangen werden. Jedoch ist einiges an Arbeit nötig um ein Child-Theme zu erstellen. Deshalb habe ich mich entschieden das Plugin WP-Piwik zu verwenden, welches den Tracking-Code automatisch in die Website einbaut. Es kann so konfiguriert werden, dass gewisse Benutzergruppen wie Administratoren von dem Tracking ausgenommen werden. Das Plugin kann außerdem dazu genutzt werden, die Piwik Statistiken direkt im WordPress Dashboard anzuzeigen. Ich gehe hier davon aus, dass in Piwik bereits eine Seite mit der Domain des Blogs estellt wurde. Falls noch keine Seite angelegt wurde kann die Anleitung im Beitrag Bei Piwik eine neue Website hinzufügen verwendet werden.

Installation

Das Plugin WP-Piwik kann einfach  im WordPress Administrationsbereich über die Pluginseite (1) zum Installieren (2) gesucht (3) und anschließend installiert (4) werden (Alternativ kann es von der WordPress.org Plugin-Seite heruntergeladen und manuell installiert werden).

WP-Piwik installieren
WP-Piwik installieren

Anschließend kann es direkt über die gleiche Seite aktiviert werden.

WP-Piwik aktivieren
WP-Piwik aktivieren

Konfiguration

Bevor WP-Piwik konfiguriert werden kann muss der Wert des token_auth herausgefunden werden. Dieser wird von dem Plugin benötigt um sich mit Piwik zu verbinden. Er wird in Piwik im Administrationsbereich (1) unter API (2) angezeigt. Es werden aus Sicherheitsgründen nur die ersten 6 Zeichen angezeigt. Mit einem Klick auf die Zeile (3) werden aber alle Zeichen angezeigt und sie können kopiert werden.

Piwik token_auth beziehen
Piwik token_auth beziehen

In die WP-Piwik Einstellungen gelangt man im WordPress Administrationsbereich über Einstellungen (1) WP-Piwik (2). Dort muss zuerst der Piwik-Modus ausgewählt werden. Dies ist für uns „Selbst-gehostet (HTTP API, Standard). Unter Piwik URL muss die Website unter welcher Piwik erreichbar ist eingegeben werden (am besten direkt mit https). Anschließend muss unter Auth-Token der token_auth, welchen wir uns im letzten Schritt kopiert haben eingefügt werden. Anschließend kann die Verbindung zu Piwik mit einem Klick auf „Änderungen übernehmen“ hergestellt werden.

WP-Piwik Einstellungen - Mit Piwik verbinden
WP-Piwik Einstellungen – Mit Piwik verbinden

Nachdem WP-Piwik mit Piwik verbunden ist kann das Tracking über „Tracking aktivieren“ aktiviert werden (1). Dazu sollte bei Tracking-Code einfügen „Standard-Tracking“ ausgewählt werden (2). Für die Position des JavaScript-Codes sollte der Header (3) ausgewählt werden. Zusätzlich kann ein Tracking-Filter gesetzt werden. Dieser erlaubt es z.B. die Seitenaufrufe von Administratoren nicht zu tracken (4). Abschließend können diese Einstellungen mit einem Klick auf „Änderungen übernehmen“ gespeichert werden.

WP-Piwik Einstellungen - Tracking aktivieren
WP-Piwik Einstellungen – Tracking aktivieren

Abschließend habe ich in der „Experten-Konfiguration“ (1) noch aktiviert, dass immer HTTPS/SSL verwendet werden soll (2). Dies muss auch mit einem Klick auf „Änderungen übernehmen“ (3) gespeichert werden.

WP-Piwik Einstellungen - Experten-Konfiguration
WP-Piwik Einstellungen – Experten-Konfiguration

Nun werden die Aufrufe des Blogs über Piwik unter der Verwendung von HTTPS/SSL getrackt, wobei die Seitenaufrufe der Administratoren ausgenommen sind.