Obere Benachrichtigungsleiste für WordPress

App Design · Aktualisiert 24. April 2020

Willkommen Entwickler! Heute werden wir Benachrichtigungsleiste in der Kopfzeile einer Webseite mit WordPressWir haben ein maßgeschneidertes Design der Topleiste ohne Plugins erstellt, das schnell, leicht und sauber aussieht. Fügen Sie die perfekte Topleiste hinzu, um den SEO unserer Website zu verbessern.

Obere Benachrichtigungsleiste für WordPress

Derzeit gibt es viele Plugins, die eine Benachrichtigungsleiste in der oberen Kopfzeile in WordPressNachdem wir mehrere installiert hatten, beschlossen wir, unsere eigenen zu erstellen, ohne ein Plugin zu installieren.

Warum eine Benachrichtigungsleiste in WordPress ohne Plugins installieren?

Hauptsächlich wegen der Geschwindigkeitsverbesserung unserer WordPress-Website. Es ist bekannt, dass die Leistung unserer Website umso höher ist, je weniger Plugins wir haben. Die aktuellen Plugins, die die Benachrichtigungsleiste in der Kopfzeile laden, haben viele Funktionen und Code, die unsere Seite laden muss, auch wenn wir sie nicht verwenden, deshalb haben wir eine saubere Installation unserer Top-Leiste vorgenommen.

Plugins zur Installation einer Benachrichtigungsleiste in der WordPress-Kopfzeile

Dies sind einige der Plugins, die wir in unseren Tests verwendet haben, und wir listen sie auf, beginnend mit den besten:

  1. Einfache Benachrichtigungsleiste: In unserem Fall mit einem Problem in den Stilen unseres Entwurfs.
  2. Hallo Bar: Eine vollständige Benachrichtigungsleiste für WordPress. Eine Vielzahl von Funktionen für Ihre Top-Leiste, die unsere WordPress-Website langsamer machen.
  3. WPFront-Benachrichtigungsleiste: Wir mögen sein Gewicht und seine Geschwindigkeit, es erzeugt weiterhin Probleme im CSS unseres Themas.
  4. WP-Benachrichtigungsleisten: Wir haben es an vierter Stelle belassen, weil es in unserem Fall den Stil unserer Website durchbrochen hat, es funktioniert bei uns nicht.
  5. Obere Leiste: Das "S" - eines der einfachsten und vollständigsten, aber mit großem Gewicht auf unserer Website.

Sobald das Studium der die besten Plugins zur Installation Ihrer Benachrichtigungsleiste in WordPressWenn Sie mit den Ergebnissen nicht zufrieden sind, werden wir eine saubere Installation ohne eigene Plugins durchführen.

Wie installieren wir unsere eigene Benachrichtigungsleiste in WordPress?

Zunächst werden wir unseren eigenen Benachrichtigungs-Barcode generieren, den wir ohne Plugins installieren werden. Dies ist der Hauptgrund dafür, dass wir uns für die Erstellung einer eigenen Kopfzeilen-Benachrichtigung entschieden haben, um die Performance unserer Website mit WordPress aufrechtzuerhalten.

Bevor wir beginnen, müssen wir den Code unserer Website ändern. Wenn Sie keine technischen Kenntnisse über Webentwicklung mit PHP haben, empfehlen wir Ihnen, sich an einen WordPress-Entwickler Wenn Sie nicht über die Ressourcen und Zeit verfügen, ist es wichtig, eine Web-Wartungsunternehmen mit WordPress die Ihre Zweifel und möglichen Probleme auf Ihrer Website lösen kann.

Hier ist der Code, den wir für unser WordPress-Thema verwendet haben:

# 1. ändern Sie "Top bar text" auf den Text, der erscheinen soll.
Ändern Sie "#" 2. ändern Sie "#" in den Ziellink, der in der letzten <em>href="#" href="#"</em> und "Schaltflächentext" für den Text, der auf der Schaltfläche erscheint.

<div id="tpbr_topbar" style="position: relative; z-index: 99999; background: rgb(247, 198, 22); display: block;"><div id="tpbr_box" style="padding:6px 0px 7px; background:#43414e; margin:0 auto; text-align:center; width:100%; color:white; font-size:15px; font-family: ROBOTO regular;  font-weight:300;">Text auf der oberen Leiste<a id="tpbr_calltoaction" style="background:#2cd4d9; display:inline-block; padding:2px 10px 2px; color:#43414e; text-decoration:none; margin: 0px 20px; border-radius:5px;" href="#" target="_blank" rel="noopener">Schaltflächen-Text</a></div></div>

Wie unser Code aussieht:

Text auf der oberen LeisteSchaltflächen-Text

Wohin mit dem Code?

Wir sollten zum Archivteil unserer Vorlage gehen. Die Dateien sind in "Erscheinungsbild" --> "Themen-Editor".

WordPress-Thema ändern

Sobald wir drin sind, suchen wir nach der zu ändernden Datei "kopf.php"Wir suchen nach dem 'Kopf'-Etikett und kleben unseren Code direkt darunter:

topbar wordpress erstellen

Einige Modifikationen:

Wenn Sie Farben ändern müssen:

  • Der erste Hintergrund, ist die allgemeine Farbe des Hintergrunds.
  • Der zweite Hintergrund ist die Hintergrundfarbe der Schaltfläche.
  • Sie können die Schriftart in "Font-Familie: regelmäßiger Raubüberfall;"Denken Sie daran, eine einzugeben, die mit Ihrem Thema kompatibel ist.
  • Schaltfläche Link in "href="https://webdedestino.com/""Wir verwenden Googles neueste Best-Practice-Empfehlungen mitrel="noopener"".

Wenn Sie zusätzliche Modifikationen benötigen wie

  • Lassen Sie die Benachrichtigungsleiste fixiert, wenn Sie auf Ihrer Website nach unten scrollen.
  • Farben ändern.
  • Links generieren.
  • Hinzufügen von Symbolen für soziale Netzwerke.
  • Wir werden Sie mit Ihrer Idee überraschen und wir werden es möglich machen.

Kontaktieren Sie uns:

4.5/5 - (4 Stimmen)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

App Design
Webdesign-Agentur, Anwendungs- und Software-Entwicklung

📍Madrid - Malaga - Barcelona - Portugal

Spanien | USA | Mexiko | Kolumbien | UK | Frankreich | Deutschland | Belgien | Schweiz | Australien

Copyright © 2023 App Design | Alle Rechte vorbehalten - Datenschutzerklärung, rechtliche Hinweise und Cookies - Allgemeine Bedingungen
chevron-down verlinkt auf facebook Interesse youtube rss twittern instagramm facebook-blank rss-blank Blank verlinkt Interesse youtube twittern instagramm