Barre de notification supérieure pour WordPress

Barre de notification supérieure pour Wordpress

Bienvenue aux développeurs!. Aujourd'hui, nous allons construire un barre de notification en tête d'une page web avec WordPress. Nous avons fait une conception personnalisée de la barre supérieure sans plugins, qui semble rapide, légère et propre. Ajoutez la barre supérieure parfaite pour améliorer le référencement de notre site Web.

Barre de notification supérieure pour WordPress

Actuellement, il existe de nombreux plugins qui implémentent un barre de notification dans l'en-tête supérieur de WordPress. Après en avoir installé plusieurs, nous avons décidé de créer le nôtre sans installer de plugin.

Pourquoi installer une barre de notification dans WordPress sans plugins?

Principalement, en raison de l'amélioration de la vitesse sur notre site Web WordPress. Il est connu que moins nous avons de plugins, meilleures seront les performances de notre site Web. Les plugins actuels qui chargent la barre de notification dans l'en-tête, ont une multitude de fonctions et de code que notre page devra charger, même si nous ne les utilisons pas, c'est pourquoi nous effectuons une installation propre de notre barre supérieure.

Plugins pour installer une barre de notification dans l'en-tête WordPress

Voici quelques-uns des plugins que nous avons utilisés dans nos tests et que nous listons, en commençant par les meilleurs:

  1. Barre de notification facile: le plus simple et le plus léger de tous. Dans notre cas avec un problème dans les styles de notre conception.
  2. Hello bar- Une barre de notification complète pour WordPress. Multitude de fonctions pour votre barre supérieure, ce qui rend notre site Web dans WordPress plus lent.
  3. Barre de notification WPFront: Nous aimons son poids et sa vitesse, il continue de générer des problèmes dans le CSS de notre thème.
  4. Barres de notification WP: le meilleur plugin pour monter une barre de notification dans WordPress. Nous l'avons laissé en quatrième position car dans notre cas, il a cassé le style de notre site internet, il ne nous sert pas.
  5. Barre supérieure: l'un des plus simples et des plus complets mais avec un grand poids sur notre site.

Une fois l’étude du meilleurs plugins pour installer votre barre de notification dans WordPress, nous allons faire une installation propre sans plugins.

Comment installer notre propre barre de notification dans WordPress?

Tout d'abord, nous allons générer le code de notre propre barre de notification que nous installerons sans avoir besoin de plugins. Cela, nous permet de maintenir les performances de notre site Web avec WordPress, est la principale raison pour laquelle nous avons choisi de construire notre propre avis dans l'en-tête.

Avant de commencer, nous devrons modifier le code de notre site Web. Si vous n'avez pas de connaissances techniques en développement Web avec PHP, nous vous recommandons de contacter un Développeur WordPress expert, installez votre barre de notification en modifiant le code. Si vous n'avez pas les ressources et le temps, il est important d'avoir un Société de maintenance de sites Web WordPress qui peut résoudre vos doutes et problèmes éventuels sur votre site Web.

Ensuite, nous vous laissons le code que nous utilisons et il nous a servi pour notre thème WordPress:

Texte de la barre supérieure Texte du bouton

À quoi ressemble notre code:

Texte de la barre supérieureTexte du bouton

Où mettre le code?

Nous devons aller à la partie des fichiers de notre modèle. Les fichiers se trouvent dans «Apparence»->«Éditeur de thème«.

modifier le thème WordPress

Une fois dedans on cherche le fichier à modifier «header.php»Et cliquez dessus pour le modifier. Nous recherchons le label et collez notre code juste en dessous:

créer la barre supérieure de wordpress

Quelques modifications:

Si vous devez changer de couleur:

  • Le premier fond est la couleur générale du fond.
  • Le deuxième arrière-plan est la couleur de l'arrière-plan du bouton.
  • Vous pouvez changer la police dans «famille de polices: regular ROBOT;«, N'oubliez pas de saisir certains compatibles avec votre thème.
  • Lien du bouton dans «href = »https://webdedestino.com/»«. Nous utilisons les dernières recommandations des meilleures pratiques de Google avec «rel = »noopener»«.

Si vous avez besoin d'une modification supplémentaire comme:

  • Définissez la barre de notification fixe lorsque vous faites défiler vers le bas sur votre page Web.
  • Changez les couleurs.
  • Générez des liens.
  • Ajoutez des icônes de médias sociaux.
  • Nous surprenons par votre idée et nous la rendrons possible ??‍?.

Contactez-nous:

Barre de notification supérieure pour Wordpress
Copier le lien