WordPress-Themes anpassen: HTML, CSS, PHP und Chrome-Inspektor nutzen

In diesem Schritt-für-Schritt-Tutorial lernst du genau, wie du dein WordPress-Theme mit individuellem Code bearbeitest. Wenn du verstehst, wie WordPress die PHP-Theme-Dateien nutzt, um deine Webseiten basierend auf dem Template-Hierarchie-System zu generieren, kannst du das Design mit HTML, PHP und CSS anpassen.

Die beste Art, Unterstützung zu zeigen oder "Danke" zu sagen, ist, deine eigene Website-Idee umzusetzen!

Bist du WordPress-Professionell? Verdiene Geld mit deinen Website-Fähigkeiten!

Fügen wir ein individuelles Banner auf unserer Startseite hinzu, das einen starken Handlungsaufforderungstext enthält. Dafür musst du die PHP-Dateien in deinem *Child-Theme*-Ordner bearbeiten, damit sie Vorrang vor den PHP-Dateien des Hauptthemes haben.

Gehe in deinem WordPress-Backend zu *Design > Theme-Editor*, um die Dateien zu sehen, die dein installiertes Theme ausmachen. Du kannst eine Theme-Datei vom Haupttheme in dein *Child-Theme* kopieren und dann bearbeiten, um sie anzupassen.

Sobald du die PHP-Vorlagendatei aktualisiert hast, kannst du das Design mit CSS anpassen. Entweder fügst du individuellen CSS-Code in die *style.css* des *Child-Themes* ein oder nutzt den Editor unter *Design > Anpassen*.

Meine bevorzugte Methode zum Designen ist, kleine Änderungen in Echtzeit mit dem *Inspektions*-Button von Google Chrome zu testen, den du durch Rechtsklick auf einer beliebigen Website siehst. Das zeigt dir den Code hinter dem Design, und du kannst mit CSS-Einstellungen herumspielen, um genau das Aussehen zu erreichen, das du möchtest.

Sobald ich das gemacht habe, kopiere ich den CSS-Code in das WordPress-Theme.

Statt große Änderungen auf einmal vorzunehmen, bin ich ein großer Fan davon, schrittweise zu verbessern…