Beim beliebten Content Management System (CMS) WordPress bestimmt das ausgewählte Template das Seitenlayout. Tausende dieser Designvorlagen stehen kostenlos und kostenpflichtig zur Auswahl – für eine maßgeschneiderte WordPress-Webseite müssen Sie …
das Template individuell auf Ihre Ansprüche abstimmen. Mit den folgenden Tipps passen Sie das Layout mit CSS-Änderungen an, bauen benutzerdefinierte Felder ein und fügen Widget-Bereiche hinzu.

Vor der Optimierung: Backup durchführen

Abbildung - UpdraftPlus WP-Backup-Plug-In

Zum UpdraftPlus WordPress Backup Plugin

Regelmäßige Backups sind ohnehin empfohlen und vor Änderungen am Template, dem Design und am Code unbedingt durchzuführen. Das beliebte WordPress-Plug-In UpdraftPlus macht das Erstellen von Backups und die Wiederherstellung einer Website leicht. Die gesicherten Daten können in der Cloud bei Anbietern wie Dropbox und Google Drive gespeichert und mit einem Klick wiederhergestellt werden.

Das Design mit CSS-Änderungen anpassen

Ihr ausgewähltes Template verwenden sicherlich auch andere Websites, für eine wirklich einzigartige Seite müssen Sie die Standard-Möglichkeiten für Veränderungen hinter sich lassen und den CSS-Code ändern.

CSS steht für Cascading Style Sheets. Mit dem Code legen Sie den Stil der Seite fest – unter anderem die Schrift und Farben, das Layout oder sogar Animationen. Erfahrene Anwender können ein Child-Theme erstellen und dessen style.css Datei verändern. Dafür müssen Sie sich mit CSS auskennen.

Viele Themes ermöglichen die Verwendung des in WordPress integrierten WordPress Customizers. Prüfen Sie die Dokumentation Ihres Templates auf diese Möglichkeit. Klicken Sie auf Design > Customizer und auf zusätzliches CSS.

Abbildung - CSS hinzufügen

Alternativ gibt es CSS-Plug-Ins, die das Verändern des Layouts erleichtern. Zusätzlicher Vorteil: Plug-In und CSS-Code bleiben auch beim Umstieg auf ein anderes Template erhalten. Das kostenlose Jetpack-Plug-In wurde bereits über eine Million Mal installiert und integriert ein Custom-CSS-Modul. Nach der Aktivierung ist ein Custom-CSS-Editor verfügbar. Jetpack erfreut mit einem Preview-Button, Änderungen können Sie so schnell auf die gewünschte Wirkung kontrollieren.

Abbildung - WordPress Plug-In Jetpack

Zum Jetpack Plug-In

Das Plug-In unterstützt viele weitere Funktionen. Wenn Sie diese nicht benötigen, können Sie das simplere und ebenfalls kostenlose Plug-In Custom CSS installieren.

Abbildung - Simple Custom CSS - Kopie

Benutzerdefinierte Felder für die maßgeschneiderte WordPress-Webseite

WordPress bietet die Möglichkeit, Beiträgen benutzerdefinierte Felder hinzuzufügen. Die Felder finden Sie in der Bearbeitungsmaske für Artikel und Seiten. Für die Anzeige klicken Sie oben auf Optionen und aktivieren das Kästchen bei „Benutzerdefinierte Felder“.

Abbildung - benutzerdefinierte felder

Die Felder bestehen aus einem Namen und dem dazugehörigen Wert. Für jede Seite und jeden Artikel können theoretisch beliebig viele Felder angelegt werden.

Beispiel: Sie möchten der Website bei bestimmten Artikeln ein Banner hinzufügen. Dafür erstellen Sie ein Feld mit dem Namen „Banner“ und dem Wert „ja“. Das Theme muss das Feld auslesen, dafür ist die Funktion „get_post_meta( $post_id, $key, $single )“ gedacht.

„$post_id“ steht für die Artikel-ID und wird mit „get_the_ID()“ abgerufen.

„$key“ entspricht dem Namen des Feldes, hier „Banner“.

„§single“ erwartet den Wert „true“ oder „false“ und entscheidet, ob das Ergebnis als String (true) oder Array (false) zurückgegeben wird.

Mit dieser Funktion wird das Banner-Feld ausgelesen:

$banner= get_post_meta( get_the_ID(), ‚banner‘, true );

Der Wert $banner speichert die Information, ob die Seite das Banner anzeigen soll oder nicht. Die Abfrage sieht so aus:



$banner= get_post_meta( get_the_ID(), 'banner', true );
if($banner=='ja') {
echo'< img src="BILD" alt="" />';
}

Hinweis: Wenn Sie das Codebeispiel verwenden, bitte das Leerzeichen vor „img“ löschen!

Komplexe individuelle Lösungen mithilfe der benutzerdefinierten Felder können Sie außerdem mit dem Plug-In Advanced Custom Fields realisieren. Lesen Sie sich dazu die Dokumentation aufmerksam durch. Zu den verfügbaren Feldern zählen unter anderem Bild-Upload, E-Mail, Galerie, Ja/Nein-Abfrage, Checkbox und die Google Map Karte.

Zum Plug-In Advanced Custom Fields

Widgetbereiche in die maßgeschneiderte WordPress-Webseite integrieren

In WordPress können Sie mit Widgets diverse Elemente in Sidebars und den Footer integrieren, wie zum Beispiel Social Media Plug-Ins. Darüber hinaus können Sie Widgets zu jeder Seite und jedem Beitrag hinzufügen. Die Widgets finden Sie unter Design>Widgets. Um Widgets in Beiträge einzugliedern, installieren und aktivieren Sie das Plug-In Widgets on Pages. Unter Design>Widgets finden Sie jetzt neue Widget Areas.

Abbildung - WordPress Plug-In Widgets on Pages

Wenn Sie unterschiedliche Widgets getrennt voneinander einbinden möchten, benötigen Sie für diese jeweils eine eigene Widget Area. Im oberen Bereich der Widget Area wird der zum Einbinden benötigte Shortcode angezeigt, den Sie in die Seite oder den Beitrag kopieren.

Probieren Sie die Plug-Ins und Möglichkeiten aus und erstellen Sie Schritt für Schritt Ihre maßgeschneiderte WordPress-Seite.

Wolf-Dieter Fiege

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten