7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Wie man HTML-Code in einem WordPress-Theme bearbeitet

Read Time: 6 mins

German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)

Sie wissen schon, wie Sie eine WordPress Webseite erstellen können? Dann ist der nächste Schritt sicherlich zu lernen, wie Sie die WordPress Seite bearbeiten, bestimmte Details verändern und verschiedene Tweaks implementieren können. In diesem Tutorial lernen Sie, wie Sie WordPress HTML bearbeiten können, um Themes mit beliebigen Anpassungen zu versehen. Los geht's!

In WordPress befindet sich das HTML in PHP-Dateien

Vielleicht wollen Sie zum ersten Mal Änderungen an einem Theme vornehmen und wissen, dass Sie lernen müssen, wie man die HTML-Code in WordPress bearbeitet.

Die erste Hürde, auf die Sie stoßen könnten, ist jedoch, dass Sie in einem WordPress-Theme keine .html-Dateien mit diesem Format finden werden.

Das liegt daran, dass in einem WordPress-Theme der gesamte HTML-Code stattdessen in .php-Dateien enthalten ist.

HTML buried in the PHPHTML buried in the PHPHTML buried in the PHP
HTML Markup in PHP Code eingebettet

PHP ist der Code, der WordPress-Websites "dynamisch" macht, d. h. sie können ihren Inhalt sofort ändern, wenn Beiträge hinzugefügt oder geändert werden, im Gegensatz zu "statischen" Websites, bei denen der Inhalt unverändert bleibt, sofern keine manuelle Dateibearbeitung vorgenommen wird.

Die meisten .php-Dateien in einem WordPress-Theme enthalten einen Teil des dynamischen PHP-Codes, vermischt mit normaler HTML-Vorlage. Kurz gesagt, sie sind genau wie normale HTML-Dateien, aber mit einigen kleinen PHP-Schnipseln, die für die Dynamik Ihrer Website verantwortlich sind.

Obwohl Sie also keine.html-Dateien sehen werden, ist in den .php-Dateien eines Themes jede Menge Code der HTML-Vorlage zu finden.

Kostenlose und kostenpflichtige WordPress Themes

Wenn die Änderungen, die Sie an Ihrem aktuellen WordPress-Theme vornehmen müssen, Ihren Komfortbereich überschreiten, lohnt sich ein Blick auf die kostenlosen und kostenpflichtigen WordPress-Themes, die auf ThemeForest verfügbar sind.

Themeforest WordPress ThemesThemeforest WordPress ThemesThemeforest WordPress Themes

Wenn Sie sich aber sicher sind, dass Sie selbst mit der Bearbeitung beginnen wollen, dann lassen wir uns weitermachen!

HTML im WordPress Theme Code Editor bearbeiten

Jetzt wissen Sie also, dass Sie HTML in den PHP-Dateien eines Themes bearbeiten müssen, aber die nächste Frage ist: Wie machen Sie das eigentlich?

Am einfachsten geht das mit dem Theme-Code-Editor, der in WordPress integriert ist.

Um darauf zuzugreifen, gehen Sie in der linken Seitenleiste des Verwaltungsbereichs auf Design > Theme Editor.

theme code editor in wordpresstheme code editor in wordpresstheme code editor in wordpress

Dort sehen Sie auf der rechten Seite eine Liste aller Dateien, die das derzeit aktive Theme enthält. Klicken Sie auf eine beliebige Datei und sie wird im Bearbeitungsbereich geöffnet.

Sie können nun Ihre Änderungen im Bearbeitungsbereich vornehmen und dann auf die Schaltfläche Datei aktualisieren klicken, wenn Sie fertig sind. Dadurch werden sofort Änderungen an der Live-Site vorgenommen. Stellen Sie also sicher, dass Sie keine Fehler gemacht haben, bevor Sie speichern.

Hinweis: Bei einigen Websites kann der Themeneditor aus Sicherheitsgründen deaktiviert sein. Wenn Sie den Editor nicht sehen, fragen Sie die Person, die die Website verwaltet, ob er deaktiviert ist. Wenn ja, sollten Sie eine der anderen in diesem Tutorial beschriebenen Methoden verwenden.

Caches leeren

Nachdem Sie den HTML-Code des WordPress-Themas bearbeitet haben, kann es vorkommen, dass Ihre Website auch nach dem Aktualisieren noch genauso aussieht wie vorher. Wenn dies der Fall ist, ist dies wahrscheinlich ein Zeichen dafür, dass die alte Version Ihrer Website entweder aus dem Cache Ihres Browsers oder möglicherweise aus einem Caching-Plugin in WordPress geladen wird. Löschen Sie beide Caches und Ihre Änderungen sollten angezeigt werden.

Herunterladen, offline bearbeiten, hochladen

Anstatt den Theme-Editor zu verwenden, können Sie die Datei, die Sie ändern möchten, auch manuell herunterladen, den HTML-Code offline bearbeiten und dann wieder hochladen.

Dazu benötigen Sie einen FTP-Client (File Transfer Protocol), wie FileZilla, und die FTP-Zugangsdaten Ihres Webhosts. Die meisten Hoster stellen diese Informationen in einer Willkommens-E-Mail zur Verfügung und geben in ihrer Dokumentation an, wie Sie Ihre Zugangsdaten später wiederfinden können.

access your wordpress files with an ftp clientaccess your wordpress files with an ftp clientaccess your wordpress files with an ftp client

Sobald Sie mit diesen Zugangsdaten eine FTP-Verbindung zu Ihrem Hoster hergestellt haben, können Sie sich auf die Suche nach Ihren Theme-Dateien machen.

Suchen Sie zunächst das Stammverzeichnis, das Ihre gesamte Website enthält. Wenn Sie nur eine Site auf Ihrem Hosting haben, wird es wahrscheinlich ein Verzeichnis namens www oder public_html sein. Wenn Sie mehrere Sites haben, wird es wahrscheinlich ein Verzeichnis sein, das Ihrem Domainnamen entspricht. Es gibt keine feste Regel, in welchem Verzeichnis sich Ihre Site genau befindet. Wenn Sie also nicht weiterkommen, müssen Sie Ihren Hoster um Hilfe bitten.

Sobald Sie sich im Verzeichnis Ihrer Website befinden, suchen Sie das Unterverzeichnis namens wp-content. Darin befindet sich ein Verzeichnis mit dem Namen themes, und ein Verzeichnis mit einem Namen, der dem Namen Ihres Themes entspricht.

Suchen Sie in diesem Ordner nach der Datei, die Sie bearbeiten möchten, und laden Sie dann mit dem FTP-Client eine Kopie auf Ihren Computer herunter. Nun können Sie die Datei in einem Texteditor Ihrer Wahl bearbeiten. Sie können zwar auch einen einfachen Texteditor wie Notepad zum Bearbeiten verwenden, aber es ist viel einfacher und weniger fehleranfällig, wenn Sie einen speziell dafür entwickelten Code-Editor wie VS Code oder Atom verwenden.

code editorcode editorcode editor

Wenn Sie Ihre Änderungen vorgenommen haben, laden Sie die Datei mit dem FTP-Client wieder an denselben Speicherort hoch. Sie werden gefragt, ob Sie die bestehende Version der Datei überschreiben möchten. Solange Sie sicher sind, dass Sie keine Fehler in der bearbeiteten Datei gemacht haben, können Sie dies tun.

Bearbeitung über Remote Verbindung

Anstatt einen manuellen Upload- und Download-Prozess für die Offline-HTML-Bearbeitung durchzuführen, können Sie den Download- und Upload-Teil über eine Remote-Verbindung automatisieren. Hierfür benötigen Sie die SFTP-Verbindungsdaten (Secure File Transfer Protocol). Diese können dieselben sein wie Ihre FTP-Zugangsdaten. Vergewissern Sie sich, dass Ihr Host Fernverbindungen zulässt.

Sie benötigen außerdem einen Code-Editor, mit dem Sie Dateien aus der Ferne bearbeiten und Änderungen direkt auf dem Host speichern können. Die Auswahl ist groß, aber um Ihnen ein Beispiel zu geben: Der Editor, den ich selbst für die Programmierung auf dem iPad verwende, heißt einfach Code Editor.

code editor for the ipadcode editor for the ipadcode editor for the ipad

Sobald Sie dem Editor Ihre SFTP-Daten mitgeteilt haben, sollten Sie in der Lage sein, sich mit Ihrem Host zu verbinden und Ihre Themadateien zu durchsuchen. Von dort aus sollten Sie die Dateien im Editor öffnen und ändern können. Wenn Sie Ihre Änderungen speichern, sollten sie direkt auf Ihre Live-Site übertragen werden.

the header.php file from wordpressthe header.php file from wordpressthe header.php file from wordpress

Offline Bearbeitung über XAMPP

Eine andere Möglichkeit besteht darin, dass Sie das auf Ihrer Live-Site installierte Theme nicht bearbeiten, sondern eine Offline-Installation von WordPress ausführen und alle Theme-Bearbeitungen dort vornehmen. Sie müssten Ihre Änderungen immer noch manuell hochladen, entweder per FTP, durch Kopieren und Einfügen in den Theme-Editor oder durch eine Neuinstallation des gesamten Themes.

Wenn Sie jedoch umfangreiche Änderungen vornehmen möchten, ist dies immer noch der beste Weg, da Sie sich nicht bei jedem Speichern um die Upload- oder Download-Zeit kümmern müssen, und wenn Sie Fehler machen, wirken sich diese nicht auf Ihre Live-Site aus.

Wir haben einen weiteren Artikel über die lokale Installation von WordPress mit XAMPP, um Ihnen den Umgang mit WordPress zu erleichtern.

    Die Verwendung eines Child-Themes

    Es ist auch eine Überlegung wert, ein Child-Theme zu erstellen, anstatt HTML Code direkt an Ihrem Haupt-Theme zu bearbeiten. Dadurch wird Ihr Parent-Theme vor Fehlern geschützt und Ihre Änderungen bleiben erhalten, wenn Ihr Haupt-Theme aktualisiert wird.

    Sie sind startklar!

    Jetzt haben Sie eine Sammlung verschiedener Ansätze für die Bearbeitung von HTML in WordPress-Themes zur Hand. Gutes Gelingen beim Anpassen!

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Scroll to top
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.