So fügen Sie eine Top-Leiste im Storefront-Design hinzu

Das Betreiben eines Online-Shops ist mit einem All-in-One-Tool wie WooCommerce ziemlich einfach. Wenn Sie jedoch die Konversionsrate und den Umsatz Ihres Online-Shops steigern möchten, sollten Sie mehrere Strategien entwickeln. Das Hinzufügen einer oberen Leiste zu Ihrem WooCommerce-Shop ist eines der einfachen Dinge, die Sie tun können, um Besucher zum Einkaufen in Ihrem WooCommerce-Shop zu bewegen. In diesem Artikel zeigen wir Ihnen, wie Sie eine obere Leiste im Storefront-Design für WooCommerce hinzufügen .

Aber bevor wir auf weitere Details eingehen, wollen wir zuerst besser verstehen, was die obere Leiste ist und warum wir eine obere Leiste in WooCommerce hinzufügen sollten. Lassen Sie uns das herausfinden.

Warum die obere Leiste in WooCommerce hinzufügen?

Sie müssen die obere Leiste in WooCommerce hinzufügen, um die Sichtbarkeit und die Konversionsraten zu verbessern. Wenn jemand auf Ihrer WooCommerce-Seite landet, sieht er zuerst den oberen Bereich. Genau wie dieser:

Wie Sie im Screenshot sehen können, erwähnte diese Website das Datum und die Uhrzeit in ihrer oberen Leiste. Darüber hinaus haben sie auf der rechten Seite der oberen Leiste einen Link zu ihrem YouTube hinzugefügt. Ähnlich können Sie auch ein paar wertvolle Widgets wie eine Suchleiste, Ihre wichtigen Seitenlinks und so weiter hinzufügen.

Wenn Sie einen Online-Shop betreiben, können Sie wichtige Seiten wie Dokumentation, FAQ, Produktarchive usw. verlinken. In den meisten Situationen hilft auch das Hinzufügen eines Links zum Anmeldeformular für ein Konto. Wenn also ein Benutzer auf Ihrer Website landet, hat er alles in der oberen Leiste. Sie können auch ein wenig weiter gehen und ein Newsletter-Anmeldeformular mit Hilfe von HTML und CSS hinzufügen.

Daher ist eine Top-Leiste in WooCommerce von entscheidender Bedeutung, weshalb die meisten WordPress-Themes mit einer Top-Leiste ausgestattet sind. Sie werden jedoch nicht immer sichtbar sein, daher müssen Sie dies in einigen Fällen manuell aktivieren.

Dies ist jedoch bei Storefront nicht der Fall. Obwohl Storefront ein fantastisches Thema für die Erstellung von WooCommerce-Shops ist, fehlt ihm immer noch diese grundlegende Funktion. Aber keine Sorge, Sie haben kein Pech. Mal sehen, wie wir eine obere Leiste im Storefront-Design hinzufügen können.

So fügen Sie die Top-Leiste im Storefront-Design hinzu

In diesem Abschnitt wird beschrieben, wie Sie eine obere Leiste im Storefront-Design hinzufügen. Wenn Sie das Storefront-WordPress-Design nicht auf Ihrer Website installiert haben, gehen Sie zu Ihrem Admin-Dashboard und navigieren Sie zu Darstellung > Designs. Installieren Sie nun das Design aus dem WordPress-Repository.

Jetzt haben wir zwei Möglichkeiten, eine obere Leiste im Storefront-Design hinzuzufügen:

1. Verwendung des Storefront Top Bar Plugins
2. Programmatisch

Methode 1: Fügen Sie die obere Leiste mit dem Storefront-Plugin für die obere Leiste hinzu

Wenn Sie nach einem speziellen Plugin zum Hinzufügen einer oberen Leiste im Storefront-Design suchen, ist das Storefront Top Bar-Plugin genau das Richtige für Sie . Wie üblich müssen Sie das Plugin zuerst auf Ihrer Seite installieren und aktivieren .

Nach der Aktivierung sehen Sie zwei neue Widget-Bereiche.

Sie können Widgets zu den Bereichen hinzufügen, die in der oberen Leiste angezeigt werden. Lassen Sie uns zum Beispiel ein Text-Widget zum Widget-Bereich „Obere Leiste 1“ hinzufügen.

Überprüfen Sie nach dem Aktualisieren der Einstellungen das Frontend der Website und Sie sehen das Text-Widget direkt dort.

Das war einfach. Was ist nun, wenn Sie der oberen Leiste ein Navigationsmenü hinzufügen möchten? Nun, das ist auch möglich. Alles, was Sie brauchen, ist ein Navigationsmenü mit den Navigationslinks. Sie können eines im Abschnitt Menüs erstellen, wenn Sie noch keins haben.

In unserem Fall haben wir ein Navigationsmenü erstellt, aber diesem Menü keinen Ort zugewiesen. Gehen Sie daher nach dem Erstellen eines Menüs zum Widgetbereich Top Bar 1 und fügen Sie das Menü hinzu.

Speichern Sie die Optionen und überprüfen Sie Ihre Website vom Frontend aus. Dort sehen Sie das Navigationsmenü.

Auf diese Weise können Sie der oberen Leiste des Storefront-Designs ein Navigationsmenü hinzufügen. Ebenso können Sie mit dem Plugin Links, Schaltflächen, Suchfelder usw. hinzufügen, ohne dass Code erforderlich ist.

Wenn Sie jedoch keine Plugins von Drittanbietern verwenden möchten und sich beim Codieren wohlfühlen, haben wir die Code-Snippets für Sie, um Ihrem WooCommerce-Shop eine Top-Leiste mit dem Storefront-Design hinzuzufügen.

Methode 2: Obere Leiste in Storefront mit benutzerdefinierten Code-Snippets hinzufügen

Bevor Sie Code-Snippets hinzufügen, empfehlen wir Ihnen dringend, ein vollständiges Backup Ihrer WordPress-Site zu erstellen und ein untergeordnetes Design zu verwenden, um grundlegende WordPress-Dateien zu bearbeiten. Wenn Sie nicht wissen, wie man ein Child-Theme erstellt, folgen Sie unserem Schritt-für-Schritt-Tutorial oder verwenden Sie ein Child-Theme-Plugin. Alternativ können Sie das Code-Snippets-Plugin verwenden, um benutzerdefinierte Code-Snippets hinzuzufügen. Mit dem Code Snippets-Plugin benötigen Sie das untergeordnete Thema jedoch nicht. Wir empfehlen jedoch immer, einen zur Sicherheit zu haben.

Verwenden des Code-Snippets-Plugins

Zu Demonstrationszwecken verwenden wir die Code-Snippets, um unsere benutzerdefinierten Code-Snippets hinzuzufügen. Gehen Sie zunächst von Ihrem Admin-Dashboard zu Plugins > Neu hinzufügen. Suchen Sie nach dem Code-Snippets-Plug-in und installieren Sie es auf Ihrer Website. Klicken Sie anschließend auf Aktivieren , um das Plugin zu aktivieren.

Sobald Sie das Plugin aktiviert haben, können Sie neue Snippets erstellen. Gehen Sie zu Code Snippets und klicken Sie auf die Schaltfläche Neu hinzufügen. Es öffnet sich ein neues Fenster, in dem Sie Ihren benutzerdefinierten Code hinzufügen können. Wenn Sie Ihren Code hinzugefügt haben, speichern und aktivieren Sie ihn, damit er auf Ihrer Website funktioniert.

Werfen wir einen Blick auf das Code-Snippet, das wir verwenden werden, um dem WooCommerce-Shop, auf dem das Storefront-Design ausgeführt wird, eine obere Leiste hinzuzufügen.

Codeausschnitt zum Hinzufügen der oberen Leiste

 add_action( 'storefront_before_header', 'quadlayers_storefront_top_bar' );

 Funktion quadlayers_storefront_top_bar() {
 ?>
 <div class="sf-top-bar">
 <div class="col-full">
 TEXTE GEHEN HIER
 </div>
 </div>
 <?php
 }

Kopieren Sie das obige Code-Snippet und fügen Sie es in den Editor des Plugins ein. Geben Sie Ihrem Code-Snippet einen Titel, damit Sie nicht vergessen, die Änderungen zu speichern und das Snippet zu aktivieren.

Wenn Sie sich den Code genauer ansehen, verwenden wir als Funktion quadlayers_storefront_top_bar . Um den Inhalt zu bearbeiten, ersetzen Sie einfach TEXT GOES HERE mit allem, was Sie wollen, und es wird zur oberen Leiste Ihres WooCommerce-Shops hinzugefügt. Gehen Sie nun zum Frontend der Website, nachdem Sie das Snippet aktiviert haben, und Sie sehen den Text oben auf der Website.

Auf diese Weise können Sie der oberen Leiste im Storefront-Design ein Text-Widget hinzufügen. Ebenso können Sie der oberen Leiste Ihres WooCommerce-Shops verschiedene Arten von Inhalten hinzufügen. Als nächstes schauen wir uns an, wie wir das Aussehen und Verhalten der oberen Leiste im Storefront-Design anpassen können.

So passen Sie die obere Leiste im Storefront-Design an

Sobald Sie Ihrem WooCommerce-Shop eine Top-Leiste hinzugefügt haben, ist es an der Zeit, das Erscheinungsbild anzupassen. Auch hier gibt es eine Plugin-Methode und eine manuelle Methode. Wenn Sie vorhaben, ein Plugin zum Anpassen Ihrer WordPress-Installation zu verwenden, sollten Sie sich CSS Hero ansehen. Es ist ein Premium-Plugin, das beim Anpassen Ihrer oberen Leiste im Storefront-Design sehr hilfreich sein kann.

Wenn Sie das Plugin jedoch nicht möchten und etwas CSS kennen, können Sie das Aussehen Ihrer oberen Leiste nach Belieben ändern.

Das Storefront Top Bar WordPress-Plugin, das wir oben verwendet haben, um eine Top-Leiste im Storefront-Design hinzuzufügen, verfügt über eine benutzerdefinierte CSS-Styling-Option. Sie können diese Funktion verwenden, um benutzerdefinierte CSS-Stile aus dem Plugin hinzuzufügen.

(Screenshot hier hinzufügen)

Wenn Sie andererseits Code-Snippets zum Hinzufügen der oberen Leiste im Storefront-Design verwendet haben, können Sie Ihre CSS-Klasse verwenden, um benutzerdefiniertes Styling hinzuzufügen. In unserem vorherigen Beispiel mit dem Code haben wir sf-top-bar als CSS-Klasse für das div-Tag verwendet. Jetzt können wir auf diese bestimmte Klasse abzielen, um benutzerdefinierte Stile hinzuzufügen, z

 .sf-top-bar {
 Textausrichtung: Mitte;
 Polsterung: 0,2em 0;
 Hintergrund: #E11F27;
 Farbe weiß;
 }

Dem benutzerdefinierten Styling mit CSS sind keine Grenzen gesetzt, sodass Sie die obere Leiste nach Belieben gestalten können, solange Sie über die erforderlichen CSS-Kenntnisse verfügen. Um benutzerdefiniertes CSS hinzuzufügen, gehen Sie zu Theme Customizer > Zusätzliches CSS. Hier können Sie Ihren gesamten benutzerdefinierten CSS-Code eingeben und die Änderungen in Echtzeit sehen.

Sobald Sie dies getan haben, können Sie loslegen. So einfach ist es, Ihre Top-Leiste im Storefront-Design anzupassen.

BONUS: So bearbeiten Sie die Kopfzeile in WordPress

Wie wir bereits erwähnt haben, ist der Header der Website das erste, was ein Besucher sieht, wenn er auf der Homepage oder Ihren inneren Seiten landet. Daher wäre es hilfreich, Ihrem Header wertvolle Links hinzuzufügen. Über den Header können Sie beispielsweise den Tracking-Code für Google Analytics oder AdSense abrufen. Dieser Abschnitt zeigt drei Methoden, mit denen Sie den Header der Website ändern können.

1) Verwendung eines dedizierten Plugins

Die Verwendung eines speziellen Plugins ist die einfachste Möglichkeit, den Header in WordPress zu bearbeiten. Unserer Erfahrung nach ist Insert Headers and Footers eines der besten WordPress-Plugins für diese Aufgabe.

Als erstes müssen Sie das Plugin auf Ihrer WordPress-Seite installieren. Sobald das Plugin installiert ist, klicken Sie auf die Schaltfläche Aktivieren , um das Plugin auf Ihrer Website zu aktivieren.

Nachdem Sie das Plugin aktiviert haben, sehen Sie die Plugin-Einstellungen im linken Bereich des Admin-Dashboards . Wählen Sie dort den Abschnitt Kopf- und Fußzeile aus.

Fügen Sie den benötigten HTML-/CSS-/JS-Code im Head-Bereich hinzu und speichern Sie die Einstellungen. Das ist es. Ihr Header wird basierend auf Ihren im Code angegebenen Änderungen angepasst.

2) Header.PHP des Themes bearbeiten

Wenn Sie mit dem Bearbeiten der Designdateien vertraut sind, können Sie die Datei header.php bearbeiten und mit Ihrem benutzerdefinierten Code ändern. Bevor Sie dies tun, stellen Sie jedoch sicher, dass Sie ein untergeordnetes Design erstellt haben, da Sie sonst alle Ihre Änderungen nach einem Design-Update verlieren.

Sie können die header.php-Datei des Designs mit dem Design-Editor bearbeiten oder einen FTP-Client wie FileZilla verwenden. Wenn Sie Zugriff auf das WordPress Admin Dashboard haben, ist es besser, zum Theme-Editor zu gehen. Gehen Sie zu Darstellung > Themen-Editor, um Ihren Themen-Editor zu öffnen.

Wenn Sie jedoch keinen Zugriff auf das WordPress-Backend haben, können Sie das FileZilla-Tool verwenden, um eine Verbindung mit Ihrer Website herzustellen und die Datei header.php zu bearbeiten. In unserem Fall haben wir Zugriff auf das Backend, also verwenden wir den Theme Editor.

Nachdem Sie den Theme File Editor geöffnet haben, sehen Sie sich die rechte Seite an. Sie sehen alle verfügbaren Dateien im Ordner Ihres Designs. Wählen Sie dort die Datei header.php aus.

In der header.php -Datei können Sie alles hinzufügen, was Sie wollen, bevor Sie den Head-Abschnitt </head> schließen.

Das ist es. Diese Methode ist nicht so kompliziert. Mit ein wenig HTML-Kenntnissen können Sie Ihren WordPress-Header ganz einfach anpassen.

Das ist jedoch nicht alles, was Sie tun können, um Ihren Header anzupassen. Für eine umfassendere Anleitung können Sie gerne unseren speziellen Beitrag zum Bearbeiten von Headern in WordPress lesen.

Fazit

Storefront ist ein beliebtes WordPress-Theme für WooCommerce-Shops. Tausende von Menschen verwenden es, um voll funktionsfähige Online-Shops zu erstellen. Das Hinzufügen einer oberen Leiste im Storefront-Design hilft Ihnen, Ihre Besucher in Ihr Geschäft zu locken, indem Sie spezielle Nachrichten anzeigen, soziale Links hinzufügen, Anmeldesteuerungen und mehr. Leider hat das Storefront-Design standardmäßig keinen Widget-Bereich in der oberen Leiste. Wir können die obere Leiste jedoch auf mehrere Arten hinzufügen.

In diesem Artikel haben wir gelernt, wie man eine obere Leiste im Storefront-Design hinzufügt. Wir haben zwei Methoden gesehen, um die obere Leiste hinzuzufügen; Verwenden Sie das Storefront Top Bar-Plugin oder fügen Sie benutzerdefinierte Code-Snippets hinzu. Sie können die Codierungsmethode verwenden, wenn Sie mit der Bearbeitung von PHP oder CSS vertraut sind. Wenn Sie andererseits den einfachsten Weg zum Hinzufügen einer oberen Leiste zum Storefront-Design benötigen, sollten Sie die Plugin-Methode wählen.

Nachdem wir dem Design eine obere Leiste hinzugefügt hatten, lernten wir, wie man die obere Leiste mit einem benutzerdefinierten CSS-Stil anpasst. Zuletzt haben wir uns angesehen, wie man den Header in einer WordPress-Site bearbeitet.

Wir hoffen, dass Sie diesen Artikel hilfreich fanden und die Lektüre genossen haben. Haben Sie versucht, eine Top-Leiste in Ihrem WooCommerce-Shop hinzuzufügen, die ein Storefront-Design ausführt? Welche Methode wirst du verwenden? Lass es uns in den Kommentaren wissen!

Wenn Sie den Inhalt hilfreich fanden, haben wir viele andere WordPress-Leitfäden, die Sie interessieren könnten. Schauen Sie sich zum Beispiel gerne Folgendes an:

• So erstellen Sie ein benutzerdefiniertes Header-Widget in WordPress
• So bearbeiten Sie HTML in WordPress
• So bearbeiten Sie die WordPress-Startseite: 3 Methoden