Eine der häufigsten Fragen, die wir von WordPress-Benutzern hören, ist: „Ich möchte mein Theme anpassen, aber ich weiß nicht, welche Datei ich bearbeiten soll.“
Und ehrlich gesagt, diese Verwirrung ist völlig verständlich. Wenn Sie die falsche Datei bearbeiten, kann Ihre Website abstürzen oder Ihre Änderungen gehen beim nächsten Theme-Update verloren.
Außerdem hilft es nicht, dass die meisten Themes Dutzende von Dateien mit mysteriösen Namen enthalten. Das kann überwältigend sein, wenn Sie nur eine Sache ändern möchten.
Im Laufe der Jahre haben wir an allen Arten von WordPress-Projekten gearbeitet und mussten die richtigen Vorlagendateien öfter als wir zählen können finden. Genau deshalb haben wir diesen Leitfaden zusammengestellt.
Wir führen Sie durch die genauen Schritte, die wir verwenden, um herauszufinden, welche Vorlagendatei bearbeitet werden soll, wie die WordPress-Vorlagenhierarchie funktioniert und wie Sie Änderungen vornehmen, die tatsächlich bestehen bleiben. 🎨
WordPress-Theme-Vorlagendateien verstehen
Bevor Sie mit der Bearbeitung beginnen, ist es hilfreich zu wissen, wie Themes aufgebaut sind. WordPress-Themes bestehen aus mehreren Dateien, darunter Vorlagendateien, benutzerdefinierte Vorlagentags und Funktionen, Vorlagenteile, Bilder, JavaScript und CSS-Dateien.
Die meisten klassischen Themes folgen der offiziellen WordPress-Vorlagenhierarchie. (Block-Themes hingegen funktionieren anders und ermöglichen es Ihnen, Seitenlayouts visuell mit HTML-Vorlagen im Site-Editor zu bearbeiten.)
Das bedeutet, dass sie den Code auf eine standardisierte Weise organisieren. Jede Datei wird als Vorlage verwendet, um einen bestimmten Bereich Ihrer WordPress-Website anzuzeigen.
Hier sind einige der gängigsten Vorlagendateien, die Sie in einem klassischen Theme sehen werden:
| Theme-Dateien | Was sie tun |
|---|---|
functions.php | Fügt Funktionen und Möglichkeiten hinzu, wie z. B. das Erstellen neuer Bildgrößen, benutzerdefinierte Beitragstypen oder Widgets |
single.php | Zeigt einen einzelnen Blogbeitrag an |
page.php | Zeigt eine statische Seite an (wie Ihre Über-uns- oder Kontaktseite) |
archive.php | Zeigt eine Liste von Beiträgen an, z. B. Kategorien oder Tags |
header.php | Enthält den Header-Bereich (Logo, Menü), der auf jeder Seite angezeigt wird |
footer.php | Enthält den Footer-Bereich, der auf jeder Seite angezeigt wird |
Das Verständnis dieser Hierarchie hilft Ihnen zu erkennen, welche Datei eine bestimmte Seite steuert. Wenn Sie jemals Code zu Ihrem WordPress-Theme hinzufügen oder bearbeiten müssen, hilft Ihnen dies auch dabei, die zu bearbeitenden Dateien zu bestimmen.
Weitere Details finden Sie in unserem Cheat Sheet zur WordPress-Template-Hierarchie.
In diesem Sinne zeigen wir Ihnen, wie Sie ganz einfach die Dateien finden, die Sie in einem WordPress-Theme bearbeiten müssen. Hier ist, was wir behandeln werden:
Legen wir los!
Vorlagendateien in einem WordPress-Theme finden und bearbeiten
Das erste, was Sie tun müssen, ist das What The File Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Das Plugin funktioniert sofort, und es gibt keine Einstellungen, die Sie konfigurieren müssen.
🚨 Wichtig: Möglicherweise sehen Sie eine Warnung, dass dieses Plugin veraltet ist. Wir haben dieses Plugin jedoch auf unseren Staging-Umgebungen getestet und bestätigt, dass es für klassische Themes korrekt funktioniert.
Es liefert jedoch möglicherweise keine nützlichen Daten für moderne Block-Themes, die HTML-Vorlagen verwenden. Wenn Sie Bedenken haben, lesen Sie unseren Leitfaden, um zu sehen, ob es sicher ist, veraltete Plugins zu verwenden, um weitere Informationen zu erhalten.
Nach der Aktivierung müssen Sie das Frontend Ihrer Website besuchen, und Sie werden ein neues Menü 'What The File' in der WordPress Admin-Leiste bemerken.
Nun müssen Sie nur noch mit der Maus über den Menüpunkt fahren. Daraufhin wird ein Dropdown-Menü angezeigt, das die Vorlagendateien auflistet, die zum Anzeigen dieser Seite verwendet werden.
Ein Klick auf den Dateinamen führt Sie zum Standard-WordPress-Dateieditor, wo Sie diese spezielle Datei bearbeiten können.
Wir empfehlen jedoch nicht, den WordPress-Dateieditor zum Bearbeiten von Theme-Dateien zu verwenden, da er keine Rückgängig-Option bietet. Wenn Sie einen Fehler machen und sich von Ihrer Website aussperren, müssen Sie einen FTP-Client verwenden, um dies zu beheben.
Stattdessen empfehlen wir die Verwendung eines FTP-Clients oder der Dateimanager-App in Ihrem WordPress-Hosting-Kontrollpanel.
Mit diesen Tools können Sie Theme-Dateien mit jedem einfachen Texteditor wie Notepad bearbeiten. Direkte Änderungen an Ihrem WordPress-Theme vorzunehmen, ist eine schlechte Idee, da diese Änderungen bei einem Theme-Update verschwinden.
Wenn Sie nur Farben oder Schriftarten ändern müssen, müssen Sie keine PHP-Dateien bearbeiten. In klassischen Themes können Sie zu Darstellung » Anpassen » Zusätzliches CSS gehen, um benutzerdefiniertes CSS hinzuzufügen.
Für umfangreichere Änderungen sollten Sie ein Child-Theme erstellen. Das Plugin 'What The File' kann Ihnen helfen, die Theme-Dateien zu finden, die Sie in Ihrem Child-Theme kopieren und bearbeiten müssen.
☝ Hinweis: Der vom Plugin hinzugefügte Menüpunkt in der Admin-Leiste ist für alle angemeldeten Benutzer sichtbar und verlinkt direkt zum Theme-Datei-Editor. Wir empfehlen, dieses Plugin nur in einer Entwicklungsumgebung zu verwenden, z. B. auf einer Staging-Site.
Bonus-Tipp: Benutzerdefinierten Header- und Footer-Code in WordPress hinzufügen
Manchmal denken Sie vielleicht, Sie müssten header.php oder footer.php bearbeiten, nur um ein Tracking-Skript oder einen Verifizierungscode hinzuzufügen. Das direkte Bearbeiten dieser Dateien kann jedoch riskant und schwer zu verwalten sein.
Stattdessen können Sie ein kostenloses Plugin wie WPCode verwenden. Es ermöglicht Ihnen, Code-Snippets sicher in Ihren Header oder Footer einzufügen, ohne eine einzige Template-Datei öffnen zu müssen.
Wir verwenden WPCode tatsächlich auf einigen unserer Partner-Websites. Es schützt unsere Anpassungen während Theme-Updates und verhindert, dass Codefehler die Website zum Absturz bringen.
Wenn Sie neugierig auf unsere Erfahrungen sind, lesen Sie unseren detaillierten WPCode-Testbericht.
WPCode hat eine einfache Oberfläche zum Einfügen Ihres Codes. Auf diese Weise bleiben Ihre Theme-Dateien unberührt und Ihre Änderungen bleiben bei Updates sicher.
Hier ist zum Beispiel, wie einfach es ist, ein Tracking-Skript hinzuzufügen:
Die Verwendung von Plugins wie diesem spart Zeit und reduziert Fehler. Es ist eine sicherere Methode, neue Funktionen zu Ihrer Website hinzuzufügen. Weitere Details finden Sie in unserem Leitfaden unter wie man Kopf- und Fußzeilen-Code in WordPress hinzufügt.
FAQs: Welche Dateien in Ihrem WordPress-Theme zu bearbeiten sind
Sind Sie immer noch unsicher, wo Sie anfangen sollen oder wie Sie häufige Fehler vermeiden können? Hier sind einige schnelle Antworten auf häufig gestellte Fragen zur Bearbeitung von WordPress-Theme-Dateien.
Warum sollte ich meine Haupt-WordPress-Theme-Dateien nicht bearbeiten?
Das direkte Bearbeiten Ihrer Haupt-Theme-Dateien ist riskant, da alle von Ihnen vorgenommenen Änderungen überschrieben werden, wenn das Theme das nächste Mal aktualisiert wird. WordPress-Updates ersetzen in der Regel den gesamten Theme-Ordner, was bedeutet, dass Ihre Anpassungen ohne Vorwarnung verschwinden könnten.
Was ist ein Child-Theme und warum ist es wichtig?
Ein Child-Theme ist ein separates Theme, das die Funktionalität und das Styling eines Parent-Themes erbt. Es ist der sicherste Weg, Ihre Website anzupassen, da es Ihre Änderungen von den Original-Theme-Dateien trennt. So können Sie das Parent-Theme sicher aktualisieren, ohne Ihre Änderungen zu verlieren.
Kann ich Änderungen in der Vorschau anzeigen, bevor ich sie live schalte?
Absolut. Die Verwendung einer Staging-Site ist eine der besten Möglichkeiten, Änderungen zu testen, ohne Ihre Live-Site zu beeinträchtigen. Sie können auch den Theme Customizer oder den Full Site Editor (falls Ihr Theme dies unterstützt) verwenden, um einfache Designanpassungen in Echtzeit zu testen, bevor Sie sie veröffentlichen.
Benötige ich Programmierkenntnisse, um WordPress-Theme-Dateien zu bearbeiten?
Wenn Sie Theme-Dateien wie header.php, functions.php oder single.php direkt bearbeiten möchten, dann ja, ein grundlegendes Verständnis von HTML, CSS und PHP ist wichtig, um zu vermeiden, dass Ihre Website beschädigt wird.
Für einfache Anpassungen wie das Ändern von Farben, Schriftarten oder Layouts bieten viele Themes jedoch integrierte Anpassungsoptionen im Theme Customizer oder im Full Site Editor. Sie können auch Page Builder wie SeedProd und Elementor verwenden, um visuelle Änderungen vorzunehmen, ohne Code anzufassen.
Gibt es Werkzeuge, die mir helfen, die zu bearbeitende Theme-Datei zu finden?
Ja! Tools wie das What The File-Plugin können Ihnen genau sagen, welche Template-Datei auf jeder Seite verwendet wird. Sie können auch die WordPress Template-Hierarchie konsultieren, um zu verstehen, wie verschiedene Theme-Dateien je nach Art des angezeigten Inhalts geladen werden.
Wie füge ich sicher benutzerdefiniertes CSS zu meiner WordPress-Website hinzu?
Eine der einfachsten Möglichkeiten, benutzerdefiniertes CSS hinzuzufügen, ist über den Theme Customizer unter Darstellung » Anpassen » Zusätzliches CSS.
Alternativ können Sie ein Code-Snippet-Plugin wie WPCode oder die Stylesheet eines Child-Themes verwenden. Diese Methoden stellen sicher, dass Ihre Stile bei Theme-Updates nicht verloren gehen, insbesondere wenn Sie ein Block-Theme verwenden, bei dem das Menü Anpassen möglicherweise ausgeblendet ist.
Zusätzliche Ressourcen: Weitere Tipps und Tricks für WordPress-Themes
Wir hoffen, dieser Artikel hat Ihnen geholfen, die richtigen Dateien für Ihr WordPress-Theme zu finden. Als Nächstes möchten Sie vielleicht auch unsere Anleitungen zu folgenden Themen lesen:
- So verwenden Sie den WordPress Theme Customizer wie ein Profi
- Ein vollständiger Leitfaden für Anfänger zur vollständigen Website-Bearbeitung in WordPress
- So zeigen Sie Plugin- und Theme-Informationen in WordPress an
- WordPress Theme Development Cheat Sheet
- Kostenlose vs. Premium-WordPress-Themes (Vor- und Nachteile für Website-Besitzer)
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Dennis Muthomi
Ich schätze besonders Ihre Betonung der Verwendung von Child-Themes für umfangreiche Änderungen.
Dies ist ein entscheidender Ratschlag, den viele Anfänger übersehen.
Meiner Erfahrung nach hat die Erstellung eines Child-Themes mir unzählige Stunden Frustration bei Theme-Updates erspart.
kzain
Gibt es eine Möglichkeit, Änderungen an Theme-Dateien in der Vorschau anzuzeigen, bevor sie auf der Website live geschaltet werden? Das wäre wirklich nützlich, um unbeabsichtigte Störungen zu vermeiden. Vielen Dank für die Bereitstellung so klarer und praktischer Ratschläge!
WPBeginner Kommentare
Eine Option wäre, eine Staging-Site oder einen lokalen Server zu verwenden, um das Theme zu testen, bevor die Änderungen live gehen.
Moinuddin Waheed
Dies ist eine eher entwicklerorientierte Aufgabe, aber ja, manchmal stellt sich die Frage, welche Datei bearbeitet werden muss, um die gewünschten Änderungen vorzunehmen.
Ich dachte immer, es sei immer die functions.php-Datei, die geändert werden muss, aber nein, die Änderung muss dort vorgenommen werden, wo sie gewünscht ist.
Ich werde das Plugin untersuchen, um zu sehen, wo wir die Bearbeitung und Änderungen vornehmen müssen.
Vielen Dank für diesen Tutorial-Leitfaden. Er hilft wirklich, diese Konzepte besser zu verstehen.
WPBeginner Support
You’re welcome
Admin
Jiří Vaněk
Danke für den Tipp. Manchmal muss ich eine Änderung an einer Website vornehmen und weiß nicht sofort, welche Datei bearbeitet werden muss. Dieses Plugin kann eine große Hilfe sein, um herauszufinden, welche Template-Datei gerade verwendet wird.
WPBeginner Support
Glad we could share this plugin
Admin
Riyaz
Die Installation dieses Plugins hat mir das Leben leichter gemacht. Einige der Themes lassen jedoch etwas wie diese übrig:
$has_sidebar = is_active_sidebar( ‘single-blog’ );
do_action( ‘mytheme_page_header’ );
und sogar einige Funktionen, die ich nirgendwo finden kann:
mytheme_get_listings_image(‘mytheme-list’)
Gibt es eine Möglichkeit, diese Dinge zu finden?
WPBeginner Support
Sie müssten die Dateien manuell durchgehen, normalerweise wären diese in der functions.php-Datei zu finden
Admin
mark Swift
Hallo,
schöner Artikel,
aber was, wenn die Dateien nicht im Child-Theme verfügbar sind, das ich bearbeiten muss??
Cos
Wenn Sie Vorlagendateien (.php) in Ihr Child-Theme kopieren (damit Sie sie bearbeiten können und Ihre Änderungen nicht verlieren, wenn das Theme aktualisiert wird), was passiert dann, wenn die von Ihnen kopierte und bearbeitete Datei vom Theme-Entwickler aktualisiert wird? Verlieren Sie dann den Vorteil ihres Updates?
Susan Sheridan
Wie wäre es mit demselben Werkzeug, um herauszufinden, welche Stylesheets angewendet werden?
Bond Shands
Ich hatte gehofft, diese Anweisungen zu verwenden, um die Zeile für die Postanschrift am unteren Rand meines Blogs zu ändern. Die Installation und Aktivierung des What The File-Plugins ergab jedoch keine erkennbaren Ergebnisse. Auf meiner Menüleiste erschien nichts Neues. Außerdem waren Ihre Anweisungen ehrlich gesagt nicht hilfreich, wie ich das Plugin sehen würde, wenn ich die Blogseite aufrufe, die ich sehen wollte. (Außerdem bin ich bereits Abonnent über eine alternative E-Mail-Adresse).
WPBeginner Support
Hallo Bond Shands,
Jede WordPress-Website verwendet einige Vorlagen, die auf jeder Seite geladen werden. Zum Beispiel die Vorlagen für Kopf- und Fußzeile. Um Ihre Postanschrift zu ändern, müssen Sie die Datei footer.php bearbeiten. Stellen Sie jedoch sicher, dass Sie ein Backup Ihres WordPress-Themes erstellen, bevor Sie direkte Änderungen vornehmen.
Danke
Admin