Einen Button im WordPress-Header-Menü hinzufügen

Das Hinzufügen eines Buttons zum Hauptnavigationsmenü ermöglicht es Ihnen, die Handlungsaufforderung Ihrer Website hervorzuheben und mehr Traffic auf Ihre wichtigsten Seiten zu lenken. Es ist auch eine einfache Möglichkeit, denselben Button zu jeder Seite und jedem Beitrag hinzuzufügen.

Wir haben gesehen, wie WPForms, eine unserer Partner-Marken, eine Schaltfläche „WPForms erhalten“ direkt im WordPress-Header hinzugefügt hat. Diese einfache Ergänzung hat dazu beigetragen, Konversionen zu steigern und den Umsatz zu erhöhen.

Indem WPForms den Button an einer gut sichtbaren Stelle platzierte, erleichterte es den Besuchern, Maßnahmen zu ergreifen, was zu besserem Engagement und mehr Leads führte.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Schaltfläche zu Ihrem WordPress-Header-Menü hinzufügen.

Warum einen Button im WordPress-Header-Menü hinzufügen?

WordPress Navigationsmenüs sind normalerweise einfache Textlinks, bei denen alles gleich aussieht und nichts wirklich hervorsticht.

Einige Links sind jedoch wichtiger als andere. Sie möchten zum Beispiel vielleicht einen Link zu einem Online-Bestellformular oder zur Registrierungsseite Ihrer WordPress-Mitgliedschaftsseite hinzufügen.

Standardmäßig sehen diese wichtigen Links genauso aus wie der Rest des Header-Menüs.

Sie können diese Links auffälliger gestalten, indem Sie sie in Schaltflächen umwandeln. Dies kann Ihnen mehr Klicks und Konversionen bringen.

Standardmäßig können Sie Buttons in WordPress-Beiträgen und -Seiten mit dem Button-Block hinzufügen, aber nicht in Navigationsmenüs.

Nun, da wir das geklärt haben, sehen wir uns an, wie Sie eine Schaltfläche zu Ihrem WordPress-Header-Menü hinzufügen können.

Hinzufügen einer Schaltfläche in Ihrem WordPress-Header-Menü

Zuerst müssen Sie den Link hinzufügen, den Sie in einen Button umwandeln möchten.

Gehen Sie einfach zur Seite Darstellung » Menüs in Ihrem WordPress-Dashboard und fügen Sie den Link zu Ihrem Navigationsmenü hinzu. Detaillierte Anweisungen finden Sie in unserem Leitfaden unter So fügen Sie ein Navigationsmenü in WordPress hinzu.

Danach müssen Sie auf die Schaltfläche Bildschirmoptionen oben auf dem Bildschirm klicken.

Dies zeigt ein Panel mit vielen neuen Optionen an. Aktivieren Sie einfach das Kontrollkästchen neben 'CSS-Klassen'.

Klicken Sie nun, um das Menüelement zu erweitern, das Sie in einen Button umwandeln möchten.

Sie werden eine neue Option für die CSS-Klasse bemerken, in die Sie einen Klassennamen eingeben können. Sie können die CSS-Klasse beliebig benennen, aber in diesem Leitfaden verwenden wir menu-button.

Nachdem Sie einen Namen eingegeben haben, klicken Sie auf die Schaltfläche „Menü speichern“, um Ihre Änderungen zu speichern.

Jetzt haben Sie eine benutzerdefinierte CSS-Klasse zum Menüpunkt hinzugefügt. Sie können das Aussehen mit benutzerdefiniertem CSS-Code ändern. Sie können diesen Code entweder über den integrierten WordPress-Customizer oder über ein Code-Snippets-Plugin hinzufügen.

Schaltfläche im WordPress-Header-Menü mit WPCode hinzufügen (empfohlen)

Der beste Weg, benutzerdefinierten Code zu WordPress hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste Code-Snippet-Plugin, mit dem Sie benutzerdefiniertes CSS, PHP, HTML und mehr hinzufügen können.

Da Sie die Theme-Dateien nicht direkt bearbeiten, können Sie viele häufige WordPress-Fehler vermeiden. Sie können Ihr Theme auch aktualisieren oder zu einem völlig anderen Theme wechseln, ohne Ihren benutzerdefinierten Code zu verlieren.

Wenn Sie die Schaltfläche jederzeit entfernen möchten, können Sie sie mit einem einzigen Klick deaktivieren.

Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, besuchen Sie die Seite Code Snippets » + Snippet hinzufügen im WordPress-Dashboard.

Hier sehen Sie alle fertigen WPCode-Snippets, die Sie zu Ihrer Website hinzufügen können. Dazu gehört ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Anhangsseiten deaktivieren und vieles mehr.

Fahren Sie nun einfach mit der Maus über die Option 'Fügen Sie Ihren benutzerdefinierten Code hinzu (Neues Snippet)' und klicken Sie auf die Schaltfläche '+ Benutzerdefiniertes Snippet hinzufügen', wenn sie erscheint.

Als Nächstes müssen Sie aus der Liste der Optionen, die auf dem Bildschirm erscheinen, 'CSS-Snippet' als Code-Typ auswählen.

Auf dem folgenden Bildschirm müssen Sie einen Titel für das Code-Snippet eingeben.

Der Name dient nur Ihrer Referenz, Sie können also verwenden, was Sie möchten.

Wenn das erledigt ist, können Sie einen CSS-Code-Snippet in das Feld „Code-Vorschau“ einfügen:

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

Stellen Sie beim Hinzufügen des obigen Code-Snippets sicher, dass Sie menu-button durch den Namen Ihrer CSS-Klasse ersetzen.

Der obige Code-Snippet erstellt eine orangefarbene Schaltfläche mit Schatteneffekt, wie Sie im folgenden Bild sehen können.

Experimentieren Sie ruhig mit dem CSS-Snippet, um zu sehen, welche verschiedenen Effekte Sie erzielen können. Sie können zum Beispiel die Hintergrundfarbe, die Linktextfarbe ändern, einen Rahmen hinzufügen und mehr.

Wenn Sie eine andere Farbe verwenden möchten, müssen Sie den Hex-Code dieser Farbe kennen. Wenn Sie sich nicht sicher sind, welche Codes Sie verwenden sollen, können Sie eine Ressource wie Color Hex verwenden.

Wenn Sie mit dem Code zufrieden sind, klicken Sie auf den Umschalter 'Inaktiv', damit er zu 'Aktiv' wechselt, und klicken Sie dann auf die Schaltfläche 'Snippet speichern'.

Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie den neuen Header-Menü-Button in Aktion.

Fügen Sie mit dem Customizer einen Button in Ihr WordPress-Header-Menü ein

Wenn Sie kein Plugin verwenden möchten, können Sie Code über den integrierten Customizer hinzufügen.

Gehen Sie einfach zu Design » Anpassen, und Sie sehen eine Vorschau Ihrer Website auf der rechten Seite sowie eine Reihe von Theme-Einstellungen in der linken Spalte.

Klicken Sie zunächst auf die Option 'Zusätzliches CSS'.

Sie sehen nun ein Feld, in das Sie benutzerdefinierten CSS-Code einfügen können.

Noch einmal, Sie können den obigen Code-Schnipsel als Ausgangspunkt verwenden.

Wenn Sie mit dem Aussehen des Buttons zufrieden sind, klicken Sie auf „Veröffentlichen“, um Ihre Änderungen live zu schalten.

Video-Tutorial

Wenn Sie eher ein visueller Lerner sind, sehen Sie sich bitte unser Video-Tutorial an, wie Sie eine Schaltfläche in Ihr WordPress-Header-Menü einfügen:

Bonus: Schaltfläche „Jetzt anrufen“ im WordPress-Header hinzufügen

Wenn Sie eine Website für ein kleines Unternehmen haben, möchten Sie vielleicht auch eine Click-to-Call-Schaltfläche in Ihr Navigationsmenü einfügen. Dies erleichtert es Besuchern, Sie zu kontaktieren, und kann sogar Ihre Suchmaschinenrankings verbessern, indem Ihre Website SEO-freundlicher wird.

Um diesen Button hinzuzufügen, besuchen Sie die Seite Darstellung » Menüs im WordPress-Dashboard und erweitern Sie den Tab 'Benutzerdefinierte Links' auf der rechten Seite.

Fügen Sie hier Ihre VOIP-Telefonnummer in die URL ein und fügen Sie eine Beschriftung dafür hinzu. Klicken Sie anschließend auf die Schaltfläche „Zum Menü hinzufügen“.

Sobald der Click-to-Call-Button zu Ihrer Liste von Navigationslinks hinzugefügt wurde, vergessen Sie nicht, auf die Schaltfläche 'Menü speichern' zu klicken, um Ihre Einstellungen zu speichern.

Für detaillierte Anweisungen sehen Sie sich vielleicht unser Tutorial an, wie Sie einen Click-to-Call-Button in WordPress hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Button zu Ihrem WordPress-Header-Menü hinzufügen. Sie können auch unseren Leitfaden zum Erstellen eines Sticky Floating Navigationsmenüs in WordPress und unser Tutorial zum Hinzufügen bedingter Logik zu Menüs in WordPress durchgehen.

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.