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

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.

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.

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.

 

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“.

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:

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


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.

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.

Sie haben Anregungen oder Fragen zum Thema: maßgeschneiderte WordPress-Webseite? Schicken Sie uns einen Kommentar. Wir freuen uns auf Ihr Feedback.

Wolf-Dieter Fiege

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

One thought on “Tipps für eine maßgeschneiderte WordPress-Webseite

  1. Gute Tipps, das gefällt mir. Überhaupt nutze auch ich gerne WordPress für kleinere Projekte. Wichtig ist dabei natürlich, dass man immer die Ladezeit im Blick hat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.