Bienvenue aux développeurs ! Aujourd'hui, nous allons construire Barre de notification dans l'en-tête d'une page web avec WordPressNous avons fait une conception sur mesure de la barre supérieure sans plugins, qui a l'air rapide, légère et propre. Ajoutez la barre supérieure parfaite pour améliorer le référencement de notre site web.
Actuellement, il existe de nombreux plugins qui mettent en œuvre un barre de notification dans l'en-tête supérieur de WordPressAprè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 de notre site WordPress. Il est connu que moins nous avons de plugins, plus notre site sera performant. Les plugins actuels qui chargent la barre de notification dans l'en-tête, ont de nombreuses fonctions et du code que notre page devra charger, même si nous ne les utilisons pas, c'est pourquoi nous avons fait une installation propre de notre barre supérieure.
Plugins pour l'installation d'une barre de notification dans l'en-tête de WordPress
Voici quelques-uns des plugins que nous avons utilisés dans nos tests et nous les énumérons, en commençant par les meilleurs :
- Barre de notification facile: Dans notre cas, il y a un problème de style.
- Hello Bar: Une barre de notification complète pour WordPress. Une multitude de fonctionnalités pour votre barre supérieure, rendant notre site WordPress plus lent.
- WPFront Notification Bar: Nous aimons son poids et sa vitesse, il continue à générer des problèmes dans le CSS de notre thème.
- WP Barres de notification: Nous l'avons laissé en quatrième position parce que, dans notre cas, il a brisé le style de notre site web, il ne fonctionne pas pour nous.
- Barre supérieure: Le "S" - un des plus simples et des plus complets, mais avec un grand poids sur notre site web.
Une fois que l'étude de la les meilleurs plugins pour installer votre barre de notification dans WordPressSi vous n'êtes pas satisfait des résultats, nous effectuerons une installation propre sans aucun plugin de notre part.
Comment installer notre propre barre de notification dans WordPress ?
Tout d'abord, nous allons générer notre propre code barre de notification que nous installerons sans avoir besoin de plugins. Cela nous permettra de maintenir les performances de notre site web avec WordPress, et c'est la raison principale pour laquelle nous avons choisi de construire notre propre en-tête de notification.
Avant de commencer, nous devrons modifier le code de notre site web. Si vous n'avez pas de connaissances techniques sur le développement web avec PHP, nous vous recommandons de contacter un Développeur WordPress Si vous n'avez pas les ressources et le temps nécessaires, il est important d'avoir un société de maintenance web avec WordPress qui peuvent résoudre vos doutes et les problèmes éventuels sur votre site web.
Voici le code que nous avons utilisé pour notre thème WordPress :
Modifiez le texte de la barre supérieure en fonction du texte que vous souhaitez voir apparaître.
Changez "#" 2. Changez "#" en lien de destination, contenu dans le dernier <em>href="#" href="#"</em> et "Texte du bouton" pour le texte qui apparaît sur le bouton.
<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;">Texte sur la barre supérieure<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">Texte du bouton</a></div></div>Comment se présente notre code :
Texte sur la barre supérieureTexte du bouton
Où mettre le code ?
Nous devrions aller dans la partie archives de notre modèle. Les fichiers sont dans "Comparution" --> "Rédacteur du thème".
Une fois à l'intérieur, nous cherchons le fichier à modifier".header.phpNous cherchons l'étiquette "head" et collons notre code juste en dessous :
Quelques modifications :
Si vous avez besoin de changer de couleur :
- Le premier fond, est la couleur générale du fond.
- Le second fond est la couleur de fond du bouton.
- Vous pouvez changer la police de caractères dans "font-family : vol régulier ;"N'oubliez pas d'en saisir un qui soit compatible avec votre thème.
- Bouton lien dans "href="https://webdedestino.com/""Nous utilisons les dernières recommandations de Google en matière de meilleures pratiques avecrel="noopener"".
Si vous avez besoin de modifications supplémentaires comme :
- Laissez la barre de notification fixe lorsque vous faites défiler votre site web.
- Changez de couleur.
- Générer des liens.
- Ajout d'icônes de réseaux sociaux.
- Nous vous surprendrons avec votre idée et nous la rendrons possible.
Contactez-nous :
