99Theme

WordPress Header bearbeiten – Wie kann man Header ändern?

Wordpress Header bearbeiten

Die Sicherheit und Geschwindigkeit Ihrer Website sind kritische Bereiche, auf die Sie sich konzentrieren sollten. Eine andere Möglichkeit, einen positiven Eindruck auf Ihre Besucher zu machen, besteht jedoch darin, eines der Elemente zu verfeinern, die sie zuerst sehen, wenn sie auf Ihrer Website landen – Ihren Header.

Es ist hilfreich, wenn Sie wissen, wie Sie Ihren eigenen benutzerdefinierten WordPress Header erstellen können, wenn Sie wollen, dass Ihre Website auffällt. Es gibt eine Vielzahl von WordPress-Tutorials, aber nur wenige konzentrieren sich ausschließlich auf die Bearbeitung dieses wichtigen Elements. Glücklicherweise gibt es mehrere Methoden, die Sie verwenden können, um dieses Ziel zu erreichen.

In diesem Beitrag werden wir erklären, was ein Header in WordPress ist, wo man ihn findet und wie man einen benutzerdefinierten WordPress Header sowohl mit als auch ohne Plugin erstellt. Abschließend besprechen wir einige bewährte Methoden und beantworten häufig gestellte Fragen (FAQ). Lassen Sie uns anfangen!

Auch lesen: WordPress Footer bearbeiten – Schritt-für-Schritt Anleitung

Was ist ein Header in WordPress? 🤔

Der Header einer WordPress-Site ist ein universelles Element, das auf jeder Seite und jedem Beitrag erscheint. Am Beispiel unserer WP Buffs Website ist der Header der orangefarbene Balken, der sich am oberen Rand dieser Seite befindet, sowie alle darin enthaltenen Funktionen:

In Anbetracht seiner prominenten Platzierung dient der Header oft als erster Eindruck der Besucher Ihrer Website. Es ist auch der Ort, wo kritische Informationen und Aufrufe zum Handeln (CTAs) hingehen. Im obigen Beispiel sehen Sie zum Beispiel unser Logo, wichtige Menü-Links und die Schaltfläche “Aufruf buchen”.

Es spielt keine Rolle, ob Ihre Website ein Blog, ein Online-Shop, ein Portfolio oder etwas ganz anderes ist – Ihr WordPress Header ist äußerst wichtig. Viele Themen sind mit Funktionen ausgestattet, die es Ihnen ermöglichen, dem Header, der als benutzerdefinierter WordPress-Header bezeichnet wird, Ihr eigenes Styling, Ihren eigenen Text oder Ihr eigenes Bild hinzuzufügen.

Wo befindet sich der Header in WordPress? 🧭

Natürlich befindet sich der Header am oberen Rand Ihrer Website (am Frontend), während der WordPress Footer der Abschnitt ist, der am unteren Rand erscheint. Das Auffinden der Header-Datei im Backend kann jedoch verwirrend sein, wenn Sie mit WordPress nicht vertraut sind.

Es hängt auch vom Thema ab, das Sie verwenden. Beispielsweise können Sie die Datei, die Ihren WordPress Header enthält, normalerweise finden, indem Sie zu Design> Themeneditor navigieren:

Themes bearbeiten (1)

Hier sehen Sie alle Dateien, aus denen Ihr Thema besteht. Die Header-Funktionen sind in der Datei header.php enthalten, während sich der Code für Stil und Erscheinungsbild in der Datei style.css befindet:

Die Datei header.php im WordPress Theme Editor.

Bei einigen anderen Themen, wie z.B. Twenty Seventeen, können Sie Ihren Header jedoch finden, indem Sie von Ihrem WordPress-Dashboard aus zu Aussehen > Header navigieren.

Dadurch gelangen Sie zum WordPress Customizer, wo Sie spezielle Abschnitte zum Ändern Ihrer WordPress Header-Medien finden.

Wie Sie am besten auf Ihren WordPress Header zugreifen oder ihn bearbeiten können, hängt von einigen Faktoren ab. Es hängt insbesondere von Ihrer Erfahrung, den Änderungen, die Sie vornehmen möchten, und dem Thema ab, das Sie verwenden.

Auch lesen: OptimizePress 3 Test & Erfahrungen

Wie Sie Ihren Header in WordPress anpassen können (3 Methoden) 🛠

Jetzt, da Sie ein wenig mehr über WordPress Header wissen, ist es an der Zeit, die verschiedenen Optionen zur Anpassung Ihrer Header zu erkunden. Werfen wir einen Blick auf drei Methoden, um dies zu tun:

  • Verwenden Sie den Customizer
  • Bearbeiten Sie den Code Ihres Themas
  • Installieren Sie ein WordPress Header-Plugin

Verwenden Sie den Customizer

Wie wir gerade erwähnt haben, können Sie Ihren WordPress Header unter anderem mit dem WordPress Customizer personalisieren. Abhängig von Ihrem Thema können Sie dies unter Design > Header tun.

Es ist jedoch bei den meisten Themen über Design > Customizer möglich. Innerhalb des Anpassers können Sie Ihr Header-Bild austauschen sowie den Titel und die Tagline Ihrer Website bearbeiten (Hinweis: In einigen Themen befinden sich diese Elemente auf der Registerkarte Identität der Website):

Themes bearbeiten header

Der Bildschirm zum Anpassen eines WordPress-Headers mit dem Customizer.
Der Vorteil der Verwendung des Customizers besteht darin, dass Sie keinen Code berühren müssen, wenn Sie nicht möchten. Sie können Ihre Änderungen auch in der Live-Vorschau auf der rechten Seite sehen.

Auch lesen: WordPress Zeilenumbruch erstellen [manuell mit HTML]

Bearbeiten Sie den Code Ihres Themas

Eine weitere Möglichkeit, Ihren WordPress Header anzupassen, besteht darin, den Code der Dateien Ihres Themas direkt zu bearbeiten. Dies bietet mehr Kontrolle über die Anpassungen, erfordert aber natürlich einige Programmierkenntnisse. Es ist klug, vor dem Start ein untergeordnetes Thema zu erstellen.

Um den Code Ihres Headers zu bearbeiten, navigieren Sie zu Design > Themen-Editor und öffnen Sie dann die Datei style.css:

theme-editor-stylesheet (1)

Sie können im Abschnitt Site Header dieser Datei Code hinzufügen oder entfernen:

site-header-css

Sie können die Befehle include verwenden, sind aber nicht darauf beschränkt:

  • Schriftart: kursiv; Dieser Code ändert den Schriftstil in kursiv.
  • background-Opacity: .5; Dies ändert die Opazität des Hintergrunds (0 ist vollständig transparent und 1 ist überhaupt nicht transparent).
  • font-size: 20px; Hiermit ändern Sie die Schriftgröße des Header-Textes (ändern Sie den px-Wert nach Belieben).
  • Auffüllen: 20px; Hiermit können Sie die Füllung oder den Abstand um den Header ändern (ändern Sie 20 nach Belieben).
  • Rahmen: 20px; Dies erzeugt einen Rahmen um den Header.
  • border-color: white; Hiermit ändern Sie die Rahmenfarbe in weiß (Sie können auch eine Hex-Farbe verwenden).
  • line-height: 20px; Hiermit stellen Sie den Abstand so ein, dass er Ihrer Schriftgröße entspricht, was nützlich sein kann, wenn Sie eine größere Schrift verwenden und diese sich bei Zeilenumbrüchen überlappt.

Wenn Ihr neuer Code nicht funktioniert, versuchen Sie, am Ende des Befehls !important hinzuzufügen, wie in padding-left: 0 !important;. Wenn das immer noch nicht funktioniert, wird Ihr Header möglicherweise nicht “header” genannt.
Einige WordPress-Themen verwenden stattdessen “Masthead”, “Inline-Header” oder andere Bezeichnungen.

Sie können auch Änderungen an Ihrer Datei header.php vornehmen, wenn Sie es für nötig halten. Dieser Code befasst sich jedoch eher mit Funktionen als mit dem Styling. Da die meisten Leute, die ihre Header anpassen möchten, mehr daran interessiert sind, das Aussehen ihrer Websites zu aktualisieren, als an dem, was hinter den Kulissen passiert, werden Sie wahrscheinlich den größten Teil Ihrer Aufmerksamkeit auf das CSS richten.

Auch lesen: WordPress Customizer lädt und funktioniert nicht

Installieren Sie ein benutzerdefiniertes WordPress-Plugin für Header

Ein einfacherer Weg, Ihren WordPress Header anzupassen, ist mit einem Plugin. Diese Methode wird empfohlen, wenn Sie sich nicht wohl dabei fühlen, die Dateien Ihrer Website direkt zu bearbeiten.

Es gibt eine Handvoll Werkzeuge, die je nach Ihrer Erfahrung und den von Ihnen gewünschten Bearbeitungen zur Verfügung stehen. Ein kostenloses und beliebtes Plugin ist Insert Headers and Footers einfügen:

Das WordPress-Plugin Insert Headers and Footers einfügen.

Es ist auf Ihrer Website aktiviert und Sie finden es unter Einstellungen > Insert Headers and Footers einfügen:

settings-insert-header (1)

Als nächstes können Sie im Abschnitt Header Code für alles hinzufügen, was Sie Ihrer Kopfzeile hinzufügen oder aus ihr entfernen möchten:

insert-header-section (1)

Skripte, die Sie hier einfügen, werden automatisch dem ‘head’-Tag Ihrer WordPress-Site hinzugefügt. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern.

Eine andere Möglichkeit ist die Verwendung eines erstklassigen benutzerdefinierten WordPress-Plugins für Header, wie z.B. Popping Sidebars & Widgets:

Das WordPress-Plugin Popping Sidebars & Widgets: Das Popping Sidebars & Widgets-Plugin.
Mit diesem Plugin können Sie Widgets (Text, Formulare, Social-Media-Symbole usw.) erstellen, die Sie zu Ihrem Header hinzufügen können. Wenn Sie Code ganz vermeiden möchten, könnte diese Lösung ideal sein. Es ermöglicht Ihnen auch, Ihre Seitenleiste und Footer-Bereiche anzupassen.

Um mit dem Popping Sidebars & Widgets-Plugin zu beginnen, können Sie eine Vorschau einer Demo auf der OTWthemes-Website ansehen. Wenn Sie es vor dem Kauf des Premium-Plugins testen möchten, können Sie sich auch für eine kostenlose Testversion anmelden.

Benutzerdefinierte Best Practices für WordPress Header 🏅

Sobald Sie wissen, wie Sie WordPress Header anpassen können, müssen Sie sich überlegen, welches Design Sie für Ihren Header verwenden möchten. Es gibt ein paar bewährte Verfahren und Tipps, die Sie befolgen können, um das Beste daraus zu machen:

  • Versuchen Sie es mit einer Illustration. Fade Stockfotos können langweilig und langweilig sein. Sie können Ihre Website sogar allgemein und unzuverlässig erscheinen lassen. Daher sollten Sie vielleicht in Erwägung ziehen, eine Illustration zu verwenden, um Ihrem Header etwas Kreativität zu verleihen und ihn auffallend zu gestalten.
  • Wählen Sie Bilder, die zu Ihrem Branding passen. Wenn Sie Bilder und Logos auswählen, verwenden Sie solche, die sich auf Sie oder Ihr Unternehmen beziehen. Konsistenz ist der Schlüssel zur Markenbildung. Sicher, Blumen sind hübsch, aber wenn Sie kein Florist sind, können sie irreführend sein.
  • Verwenden Sie wenn möglich Ihre eigenen Bilder. Wenn und wann immer möglich, integrieren Sie Ihre eigenen Arbeiten und Bilder. Dies ist ein Kinderspiel für Künstler, Designer und Fotografen. Aber auch Bauherren, Industrieunternehmen und andere weniger visuell orientierte Unternehmen können ein Bild eines ihrer eigenen Produkte verwenden.

Auch lesen: Was sind Trackbacks und Pingbacks? 

Häufig gestellte Fragen über benutzerdefinierte WordPress Header 📝

Hoffentlich haben Sie an dieser Stelle eine solide Vorstellung davon, wie Sie einen benutzerdefinierten WordPress Header bearbeiten oder erstellen können. Es gibt jedoch noch einige FAQs, die wir erhalten und die wir hier ansprechen möchten.

Wie füge ich Text zu einem WordPress Header hinzu?

Bei vielen WordPress-Themen können Sie den Website-Titel und die Tagline nur über den Customizer ändern. Wenn Sie jedoch mehr Text zu Ihrem benutzerdefinierten WordPress Header hinzufügen möchten, können Sie dies durch Bearbeiten Ihrer Datei header.php tun.

Sie können z.B. den folgenden Code zu Ihrer Datei hinzufügen, wodurch ein Textfeld zu Ihrem WordPress Header hinzugefügt wird:

<div class="custom-header">
<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
<div class="custom_textbox">
<div class="custom_textbox_content"><p>This is where you can put your header text.</p></div>

Wie füge ich Bilder zu einem WordPress Header hinzu?

Bei vielen Standard-Themen in WordPress können Sie Ihr eigenes WordPress Header-Bild über den Customizer hochladen. Wenn Ihr Thema diese Möglichkeit jedoch nicht bietet oder Sie für jede Webseite ein anderes Header-Bild verwenden möchten, können Sie auch ein Plugin wie Unique Headers oder WP-Header-Bilder verwenden.

Diese Plugins ermöglichen es Ihnen, jeder Webseite Ihre eigenen benutzerdefinierten WordPress Header-Bilder hinzuzufügen. Sie können auch benutzerdefinierte Header-Bilder für Blog-Beiträge, benutzerdefinierte Beitragstypen und sogar WooCommerce-Produkte hinzufügen.

Auch lesen: Die 6 besten Slider Plugins für WordPress 

Fazit 🎉

Obwohl keine zwei WordPress Header gleich sein sollten, dienen sie alle einem ähnlichen Zweck. Effektive Header zeigen den Besuchern, worum es auf Ihrer Website geht, und hinterlassen einen positiven ersten Eindruck. Aus diesem Grund empfehlen wir, Ihre Header an Ihre spezifischen Ziele und Ihr Branding anzupassen.

Wie wir in diesem Beitrag besprochen haben, gibt es drei Hauptmethoden, mit denen Sie einen benutzerdefinierten WordPress Header erstellen können:

  • Verwenden Sie den Customizer, der eine einsteigerfreundliche Option ist, die keine Programmierung erfordert.
  • Bearbeiten Sie den Header-Code Ihres WordPress-Themas, was mehr Kontrolle bietet, aber CSS- und PHP-Kenntnisse erfordert.
  • Installieren Sie ein WordPress-Plugin für Header, wie z.B. Insert Headers and Footers, Seitenleisten und Widgets einblenden oder WP-Header-Bilder.

Das Anpassen Ihres WordPress Headers kann dazu beitragen, sein Erscheinungsbild und seine Benutzerfreundlichkeit zu verbessern. Je mehr Sites Sie haben, desto mühsamer wird dies jedoch. Wir von WP Buffs bieten Care-Pläne und White-Label-Lösungen, die die Verwaltung, Wartung und Anpassung von Websites erheblich erleichtern können. Schauen Sie sich diese noch heute an!

Add comment

Your Header Sidebar area is currently empty. Hurry up and add some widgets.