Wie Sie Ihre WordPress-Kopfzeile anpassen (Anleitung für Anfänger)

Möchten Sie einen individuellen Header für Ihre WordPress-Website anzeigen?

Viele WordPress-Themes verfügen über eine integrierte Kopfzeile, die oben auf jeder Seite erscheint. Möglicherweise müssen Sie ihn anpassen, um wichtige Links, soziale Symbole, eine Site-Suche oder andere Elemente hinzuzufügen, die einen guten ersten Eindruck vermitteln.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihren WordPress-Header anpassen und sogar einen vollständig benutzerdefinierten Header für Ihre gesamte Website oder bestimmte Seiten erstellen können.

Was ist die Kopfzeile in WordPress?

Die Kopfzeile Ihrer Website ist der oberste Abschnitt jeder Seite Ihrer WordPress-Website und wahrscheinlich das Erste, was Ihre Besucher sehen werden.

Es zeigt oft IhreWebsite-Logo und Titel, Navigationsmenüs und andere wichtige Elemente, die die Nutzer zuerst sehen sollen.

Hier ist zum Beispiel unser Kopfbereich auf WPBeginner, der jeden Monat von Millionen von Lesern gesehen wird.

Indem Sie die Kopfzeile Ihrer Website anpassen, können Sie ihr ein einzigartiges Design geben und sie für Ihre Besucher nützlicher machen. Sie können Links zu Ihren beliebtesten Seiten, soziale Symbole oder IhreGeschäftsrufnummerund zeigen Call-to-Action-Buttons für mehr Conversions.

Sehen wir uns also an, wie Sie Ihre WordPress-Kopfzeile ganz einfach anpassen können. Sie können die folgenden Links verwenden, um zu dem Abschnitt zu springen, den Sie lesen möchten.

• Anpassen der Kopfzeile mit dem WordPress Theme Customizer
• Anpassen der Kopfzeile mit dem WordPress Full Site Editor
• Benutzerdefinierte Kopfzeilen und Seitenlayouts mit SeedProd erstellen
• Hinzufügen einer benutzerdefinierten Überschrift für jede Kategorie
• Hinzufügen eines Widget-Bereichs zu Ihrer WordPress-Kopfzeile
• Zufällige Kopfzeilenbilder zu Ihrem WordPress-Blog hinzufügen
• Hinzufügen von benutzerdefiniertem Code in die Kopfzeile Ihrer Website (Fortgeschrittene)

Anpassen der Kopfzeile mit dem WordPress Theme Customizer

Bei vielen beliebten WordPress-Themes können Sie den WordPress-Theme-Customizer verwenden, um Änderungen am Kopfbereich Ihres WordPress-Layouts vorzunehmen. Diese Funktion wird manchmal alsbenutzerdefinierte Kopfzeile, aber nicht alle Themes unterstützen dies.

Beginnen Sie mit der Navigation zuErscheinungsbild “ Anpassen in Ihrem WordPress-Administrationsbereich.

Ihr Theme kann einen Abschnitt „Kopfzeile“ zum Customizer hinzufügen, oder Kopfzeilenoptionen unter dem Abschnitt „Farbe“, aber das ist von Theme zu Theme unterschiedlich. Hier sind ein paar Beispiele.

Einige Themes, wie Twenty Twenty-One, bieten überhaupt keine Optionen zur Anpassung der Kopfzeile. In diesem Fall empfehlen wir die Verwendung eines Drag&Drop-Theme-Builder-Plugins wie SeedProd, das wir weiter unten vorstellen.

Das Twenty Sixteen-Theme ermöglicht Ihnenein Hintergrundbild hinzufügen in der Kopfzeile, und sogarzufällige Kopfzeilenbilder hinzufügen.

Einigekostenlose und hochwertige WordPress-Themes bieten noch mehr Optionen zur Anpassung des Themas. So können Sie beispielsweise die Schriftart, das Layout, die Farben und vieles mehr Ihrer Kopfzeile ändern. Sie sind jedoch auf das beschränkt, was der Theme-Entwickler Ihnen erlaubt.

Sie können zum Beispiel eine benutzerdefinierte Kopfzeile erstellen, indem Sie den Theme-Customizer mit der OptionThema Astra.

Astra verfügt über eine spezielle „Header Builder“-Option im Panel auf der linken Seite. Hier finden Sie verschiedene Einstellungen, um das Aussehen und den Stil der Kopfzeile zu bearbeiten. Sie können eine benutzerdefinierte Kopfzeile erstellen, indem Sie Blöcke hinzufügen, genau wie bei der Bearbeitung eines Blogbeitrags oder einer Seite in derWordPress-Inhaltseditor.

Bewegen Sie einfach den Mauszeiger über einen leeren Bereich in der Kopfzeile und klicken Sie auf das „+“-Symbol, um einen Kopfzeilenblock hinzuzufügen.

Als Nächstes können Sie einen beliebigen Block auswählen, den Sie zu Ihrer benutzerdefinierten Kopfzeile hinzufügen möchten. Sie können zum Beispiel Folgendes hinzufügenWidget-Block, Kontosperre, Suchsperre und mehr.

Außerdem können Sie mit dem Header Builder die Blöcke per Drag & Drop über oder unter dem Header platzieren.

Sie können jeden Block, den Sie der Kopfzeile hinzufügen, weiter anpassen.

Wenn Sie z. B. den Block Site Title & Logo auswählen, können Sie einen Site-Titel und ein Logo hochladen, die Breite des Logos ändern, einen Site-Tagline anzeigen und vieles mehr.

Darüber hinaus können Sie auch dieHintergrundfarbe der Kopfzeile oder fügen Sie ein Hintergrundbild hinzu, das in der Kopfzeile erscheinen soll.

Wenn Sie mit der Bearbeitung der benutzerdefinierten Kopfzeile fertig sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“.

Weitere Einzelheiten finden Sie in unserem ultimativen Leitfaden überwie man den WordPress-Theme-Customizer verwendet.

Anpassen der Kopfzeile mit dem WordPress Full Site Editor

WordPress fügte die Bearbeitung ganzer Seiten in WordPress hinzuVersion 5.9. Wenn Ihr Theme die neue Funktion unterstützt, ersetzt sie den Theme-Customizer. Derzeit gibt es jedoch nur wenige Themes, die mit dem vollständigen Site-Editor funktionieren.

Wenn Sie ein kompatibles Thema verwenden, können Sie Ihre Kopfzeile anpassen, indem Sie zuErscheinungsbild “ Editor. Dadurch wird der vollständige Site-Editor gestartet, der genau wie derBlockeditor die Sie zum Schreiben von WordPress-Beiträgen und -Seiten verwenden.

Wenn Sie auf die Kopfzeile klicken, werden Sie feststellen, dass sich der Name der Vorlage oben auf der Seite in „Seitenüberschrift“ ändert.

Wenn Sie nun auf das Symbol „Einstellungen“ in der Symbolleiste klicken, sehen Sie Optionen zum Anpassen von Layout, Farbe, Rahmen und Abmessungen der Kopfzeile.

Als Beispiel werden wir die Hintergrundfarbe der Kopfzeile ändern. Zunächst müssen Sie auf den Abschnitt „Farbe“ klicken, um ihn zu erweitern. Danach sollten Sie auf die Option „Hintergrund“ klicken.

Es erscheint ein Popup-Fenster, in dem Sie eine Volltonfarbe oder einen Farbverlauf auswählen können. Es gibt auch eine Reihe von Farben, die Sie auswählen können. Wenn Sie auf eine Farbe klicken, wird der Hintergrund Ihrer Kopfzeile sofort geändert.

Weitere Anpassungsmöglichkeiten finden Sie, wenn Sie oben rechts auf der Seite auf das Symbol „Stile“ klicken. Damit können Sie die Schriftart, die Farben und das Layout der Kopfzeile ändern.

Wenn Sie mehr über die Funktionsweise des vollständigen Website-Editors erfahren möchten, lesen Sie unseren Leitfaden für Einsteiger aufWie man sein WordPress-Theme anpasst.

Benutzerdefinierte Kopfzeilen und Seitenlayouts mit SeedProd erstellen

Wenn Sie die volle Kontrolle über Ihre Kopf- und Fußzeilen und Seitenleisten haben möchten, um Ihrer Website ein einzigartiges Design zu geben, empfehlen wir Ihnen die Verwendung vonSeedProd.

SeedProd ist das beste WordPress-Theme-Builder-Plugin, mit dem Sie ganz einfach ein benutzerdefiniertes WordPress-Theme erstellen können, ohne irgendeinen Code zu schreiben. Dies umfasst die Erstellung von Kopf- und Fußzeilen und alles andere, was für ein attraktives WordPress-Theme benötigt wird.

Sie können sogar mehrere benutzerdefinierte Kopfzeilenstile für verschiedene Seiten und Abschnitte Ihrer Website erstellen.

Anmerkung: Sie können diekostenlose Version von SeedProd um benutzerdefinierte Landing Pages einschließlich benutzerdefinierter Kopfzeilen zu erstellen, aber Sie benötigen die Pro-Version, um vollständig benutzerdefinierte Themen zu erstellen, die seitenweite Kopfzeilenlayouts enthalten.

Zunächst empfehlen wir Ihnen, unseren Leitfaden zu befolgenwie man ganz einfach ein individuelles WordPress-Theme ohne jeglichen Code erstellt. Sobald Sie dies getan haben, können Sie mit SeedProd Ihre Kopfzeile ganz einfach anpassen.

Klicken Sie einfach auf den Link „Design bearbeiten“, der sich unter der Kopfzeile befindet.

Dadurch wird die Kopfzeile im Drag-and-Drop-Editor von SeedProd geöffnet.

Von hier aus können Sie Ihre Kopfzeile leicht anpassen, indem Sie neue Blöcke hinzufügen.

Es gibt Blöcke für Template-Tags wie ein Website-Logo, beliebige WordPress-Widgets und erweiterte Blöcke wie einen Countdown-Timer, ein Navigationsmenü oder Schaltflächen für Social Sharing.

Das Beste daran ist, dass Sie jeden Block mit dem Theme Builder weiter anpassen können. So können Sie beispielsweise die Größe und Ausrichtung Ihres Logos ändern oder auswählen, welche Seiten im Navigationsmenü angezeigt werden sollen. Es erlaubt Ihnen sogarein Bild in der Kopfzeile hinzufügen.

Mit SeedProd können Sie der Kopfzeilenvorlage Ihres Themes auch einen kompletten Abschnitt hinzufügen.

Abschnitte sind eine Gruppe von Blöcken, die Sie für verschiedene Bereiche auf Ihrer Website verwenden können. Dazu gehören Kopfzeilen, Fußzeilen und Funktionen,Empfehlungsschreiben, Aufrufe zum Handeln und mehr.

Um einen Kopfzeilenabschnitt zu verwenden, wechseln Sie zunächst zur Registerkarte „Abschnitte“ im Design-Panel.

Danach wählen Sie einen Header-Bereich, den Sie für Ihre Website verwenden möchten. SeedProd bietet mehrere Abschnittsvorlagen, die Sie verwenden können.

Als Nächstes können Sie den Kopfbereich anpassen.

Wenn Sie mit Ihrer benutzerdefinierten Kopfzeile zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Jetzt können Sie Ihre benutzerdefinierte Kopfzeile veröffentlichen.

Gehen Sie einfach zuSeedProd “ Theme Builder Seite in Ihrem WordPress-Dashboard und klicken Sie auf den Schalter neben der Option „SeedProd-Theme aktivieren“ auf Ja.

Sobald Sie die Option aktivieren, ersetzt SeedProd Ihr Standard-WordPress-Theme durch ein neues benutzerdefiniertes Theme und einen Header.

Sie können nun Ihre Website besuchen, um die neue benutzerdefinierte Kopfzeile in Aktion zu sehen.

Verschiedene benutzerdefinierte Überschriften für jede Seite erstellen

Wussten Sie, dass Sie mit SeedProd individuelle Kopfzeilen für verschiedene Seiten erstellen können?

Mit dem Theme-Builder können Sie benutzerdefinierte Kopfzeilen für jede Seite Ihrer Website hinzufügen.WordPress-Website. Auf diese Weise können Sie eine angepasste Kopfzeile für verschiedene Kategorien, Tags, Beitragstypen, Seitentypen und mehr anzeigen.

Um zu beginnen, müssen Sie Folgendes aufrufenSeedProd “ Theme Builder in Ihrem WordPress-Dashboard und klicken Sie auf die Schaltfläche „Neue Theme-Vorlage hinzufügen“.

Es erscheint ein neues Popup-Fenster, in das Sie die Details der Themenvorlage eingeben müssen.

Geben Sie nun einen Namen für Ihre Themenvorlage ein. Wählen Sie anschließend aus dem Dropdown-Menü den Vorlagentyp „Kopfzeile“ aus. Sie können das Feld „Priorität“ leer lassen.

Als Nächstes müssen Sie die Anzeigebedingungen für Ihre benutzerdefinierte Kopfzeile eingeben. Wir haben zum Beispiel die Bedingung verwendet, dass sie auf allen Beiträgen und Seiten angezeigt wird, die sich in der Kategorie „Tutorials“ befinden.

Vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, wenn Sie fertig sind.

Danach können Sie die benutzerdefinierte Kopfzeile mit dem SeedProd-Drag-and-Drop-Theme-Builder bearbeiten.

Wenn Sie die Bearbeitung der benutzerdefinierten Kopfzeile abgeschlossen haben, klicken Sie einfach oben auf die Schaltfläche „Speichern“.

Weitere Ideen, wie Sie Ihre Kopfzeile mit SeedProd anpassen können, finden Sie in unserem Leitfaden für Einsteiger aufwie man ganz einfach ein individuelles WordPress-Theme erstellt mit dem SeedProd Theme Builder.

Hinzufügen einer benutzerdefinierten Überschrift für jede Kategorie

Die meisten Websites zeigen für alle Beiträge, Seiten, Kategorien und Archivseiten dieselbe Kopfzeile an. Sie können jedoch für jede WordPress-Seite eine andere Kopfzeile anzeigenKategorie.

Dies kann durch Hinzufügen von Code zu Ihren Themadateien geschehen, aber Sie haben mehr Kontrolle, wenn Sie einen Theme Builder verwenden.

Wir haben Ihnen bereits gezeigt, wie Sie Ihre Kopfzeile mit der OptionSeedProd Theme-Builder-Plugin. Mit SeedProd können Sie auch mehrere benutzerdefinierte Kopfzeilen erstellen und sie für verschiedene Kategorien mit bedingter Logik anzeigen.

Um eine neue Kopfzeile zu erstellen, navigieren Sie zuSeedProd “ Theme Builder und klicken Sie auf die orangefarbene Schaltfläche „Neue Themenvorlage hinzufügen“. Alternativ können Sie auch Ihre aktuelle Kopfzeile duplizieren und als Ausgangspunkt verwenden.

Es wird ein Popup-Fenster angezeigt, in dem Sie der Themenvorlage einen Namen geben und „Kopfzeile“ aus dem Dropdown-Menü „Typ“ auswählen können.

Sie müssen auch eine Priorität angeben. Diese wird verwendet, wenn mehr als eine Überschrift die Bedingungen für eine bestimmte Seite erfüllt, und die Überschrift mit der höchsten Priorität wird angezeigt. Die Standardüberschrift hat eine Priorität von 0, geben Sie also mindestens 1 ein.

Danach müssen Sie eine oder mehrere Bedingungen einrichten. Dadurch weiß SeedProd, wann eine bestimmte Kopfzeile angezeigt werden soll. Sie wählen die Bedingungen einfach aus Dropdown-Menüs aus.

In den ersten beiden Menüs müssen Sie „Einschließen“ und dann „Hat Kategorie“ auswählen. In das letzte Feld geben Sie den Namen der Kategorie ein, in der die Kopfzeile angezeigt werden soll.

Sie können ganz einfach dieselbe Kopfzeile für mehrere Kategorien anzeigen, indem Sie auf die Schaltfläche „Bedingung hinzufügen“ klicken und eine weitere Kategorie hinzufügen. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Speichern“, um die neue Kopfzeile zu speichern.

Jetzt können Sie das Design jeder neuen Kopfzeile mit dem Drag & Drop-Editor von SeedProd anpassen, wie wir Ihnen bereits gezeigt haben.

Weitere Informationen, auch darüber, wie Sie dies mit Hilfe von Code erreichen können, finden Sie in unserem Leitfadenwie man eine benutzerdefinierte Kopfzeile, Fußzeile oder Seitenleiste für jede Kategorie hinzufügt.

Hinzufügen eines Widget-Bereichs zu Ihrer WordPress-Kopfzeile

Wenn Sie ein benutzerdefiniertes Theme von Grund auf mit Code erstellen, dann möchten Sie vielleicht ein WordPress-Widget in Ihre Kopfzeile einfügen, um die Aufmerksamkeit Ihrer Besucher zu erregen. Mit Widgets können Sie bestimmten Abschnitten Ihres Themes ganz einfach Inhaltsblöcke hinzufügen, aber nicht jedes Theme enthält einen Header-Widget-Bereich.

Wir haben bereits erwähnt, wie einfach es ist, Widgets zu Ihrer Kopfzeile hinzuzufügen, indem Sie dieSeedProd Themenerstellung. Was aber, wenn Sie ein Widget in den Header eines normalen WordPress-Themes einfügen möchten?

Einige Themen, wie dieAstra Themes können Sie dies über den WordPress-Theme-Customizer tun. Astra fügt zum Beispiel eine Option namens „Header Builder“ hinzu, mit der Sie die Kopfzeile vollständig anpassen können, einschließlich des Hinzufügens von Widgets.

Wenn Ihr WordPress-Theme derzeit nicht über einen WordPress-Widget-Bereich im Header verfügt, müssen Sie ihn manuell hinzufügen, indem Sie den folgenden Code zu Ihremfunktionen.php Datei, in einerstandortspezifisches Pluginoder durch die Verwendung einesCode-Schnipsel-Plugin.

Dies ist eine fortgeschrittenere Option, da Sie wissen müssen, wo Sie den Code platzieren und wie Sie ihn mit CSS gestalten können.

Funktion

Dieser Code registriert eine neue Seitenleiste oder einen für Widgets vorbereiteten Bereich für Ihr Thema.

<?php