Ce qu’est un en-t\u00eate \u00e9pingl\u00e9<\/h2>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/header-section.png\")
Une section d’en-t\u00eate du site web de Kotaku.<\/figcaption><\/figure>\nLa partie en-t\u00eate de votre site est un peu comme le bureau d’information de votre site. C’est ce que la plupart des utilisateurs rep\u00e8rent en premier, et c’est toujours l’endroit qu’ils consulteront pour trouver quelques informations cl\u00e9s et effectuer certaines actions :<\/p>\n
\n- Par exemple, votre logo ou le nom de votre site sera ici, ce qui sert de point d’ancrage pour vos utilisateurs. Dans la plupart des cas, ils pourront revenir \u00e0 la page d’accueil en cliquant sur le logo.<\/li>\n
- Si vous g\u00e9rez des comptes d’utilisateur<\/a> sur votre site, l’en-t\u00eate offrira g\u00e9n\u00e9ralement un lien pour se connecter \u00e0 ces pages de compte et de profil.<\/li>\n
- Il peut y avoir une fonctionnalit\u00e9 de recherche<\/a> ici, surtout si vous avez un grand site avec beaucoup de contenu dans diff\u00e9rents domaines.<\/li>\n
- Bien entendu, la navigation de votre site<\/a> fait \u00e9galement partie int\u00e9grante de l’en-t\u00eate.<\/li>\n<\/ul>\n
Dans l’ensemble, votre en-t\u00eate est un point de contact pour les utilisateurs. Vous constaterez qu’il s’agit souvent de la \u00ab barre \u00bb pour les sch\u00e9mas de lecture en forme de F<\/a>. Il attire donc l’attention de vos utilisateurs \u00e0 un niveau intuitif.<\/p>\nVous savez probablement d\u00e9j\u00e0 ce qu’est un en-t\u00eate \u00e9pingl\u00e9, m\u00eame au sens intuitif du terme. Il s’agit de la section d’en-t\u00eate de votre site qui colle au haut de l’\u00e9cran lorsque vous faites d\u00e9filer la page. Contrairement \u00e0 un en-t\u00eate statique, qui reste en place et dispara\u00eet au fur et \u00e0 mesure que vous d\u00e9filez, l’en-t\u00eate \u00e9pingl\u00e9 est un \u00e9l\u00e9ment toujours visible.<\/p>\n
Si l’approche typique pour un en-t\u00eate \u00e9pingl\u00e9 consiste \u00e0 en coller une version statique en haut de votre \u00e9cran, il existe plusieurs fa\u00e7ons de rendre cet \u00e9l\u00e9ment plus utilisable, plus efficace \u00e0 l’\u00e9cran et plus dynamique. Nous allons maintenant examiner quelques exemples concrets.<\/p>\n\n
Exemples d’en-t\u00eates \u00e9pingl\u00e9s sur le web<\/h2>\n
Vous trouverez des en-t\u00eates collants partout sur le Web, et c’est une bonne id\u00e9e d’en v\u00e9rifier quelques-uns pour voir l’\u00e9tendue de ce que vous pouvez r\u00e9aliser. L’un des exemples les plus simples est celui de Hammerhead<\/a>. Ce site utilise un menu d\u00e9roulant et un en-t\u00eate \u00e9pingl\u00e9, et il est simple : Il s’engage \u00e0 rester en haut de la page dans sa mise en page statique :<\/p>\n![\"L'en-t\u00eate](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/hammerhead-site-gif.gif\")
L’en-t\u00eate \u00e9pingl\u00e9 du site Hammerhead.<\/figcaption><\/figure>\nUne autre mise en \u0153uvre simple est celle de Kin<\/a>. Elle utilise un en-t\u00eate \u00e9pingl\u00e9 typique, mais cette fois avec quelques \u00e9l\u00e9ments de design sympas.<\/p>\nVous remarquerez que le contraste change en fonction de la partie du site web que vous faites d\u00e9filer, et il y a aussi quelques jolis effets de transition :<\/p>\n![\"L'en-t\u00eate](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kin-site-gif.gif\")
L’en-t\u00eate \u00e9pingl\u00e9 sur le site web de Kin.<\/figcaption><\/figure>\nNous ne pouvons pas terminer cette section sans mentionner l’en-t\u00eate \u00e9pingl\u00e9 de Kinsta<\/a>. Celui-ci reste \u00e9galement simple en ce qui concerne les \u00e9l\u00e9ments de l’en-t\u00eate, mais inclut une touche de convivialit\u00e9 soign\u00e9e qui offre de la valeur au visiteur :<\/p>\n![\"L'en-t\u00eate](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kinsta-site-gif.gif\")
L’en-t\u00eate \u00e9pingl\u00e9 du site web de Kinsta.<\/figcaption><\/figure>\nCette fois, vous verrez l’en-t\u00eate dispara\u00eetre lorsque vous ferez d\u00e9filer la page. Toutefois, il r\u00e9appara\u00eetra lorsque vous ferez d\u00e9filer la page vers le haut – on peut parler d’un \u00ab en-t\u00eate partiellement persistant \u00bb.<\/p>\n
L’id\u00e9e est que le d\u00e9filement vers le bas signifie que vous investissez votre temps dans la page elle-m\u00eame, et que vous n’aurez probablement pas besoin de navigation, de pages de connexion ou d’aller ailleurs. Cependant, au moment o\u00f9 vous faites d\u00e9filer la page vers le haut, vous \u00eates plus susceptible de vouloir vous diriger vers une autre page du site. C’est l\u00e0 que l’en-t\u00eate \u00e9pingl\u00e9 intervient pour vous sauver la mise.<\/p>\n
Ce sont ces petites touches d’exp\u00e9rience utilisateur (UX) qui font que les visiteurs auront envie de revenir sur le site. Pour vos propres conceptions d’en-t\u00eates \u00e9pingl\u00e9s, vous voudrez examiner ce que vous pouvez faire pour cr\u00e9er une UX et une UI qui se concentrent sur les besoins du visiteur.<\/p>\n
Pourquoi vous devriez utiliser un en-t\u00eate \u00e9pingl\u00e9 pour votre site<\/h2>\n
De nombreux sites utilisent des en-t\u00eates \u00e9pingl\u00e9s, et il y a de nombreuses bonnes raisons pour cela. Ils peuvent \u00eatre des \u00e9l\u00e9ments cruciaux de l’exp\u00e9rience globale de votre site et ont beaucoup d’influence sur votre UX et votre UI.<\/p>\n
\u00c9tant donn\u00e9 que les \u00e9l\u00e9ments que vous inclurez dans un en-t\u00eate sont ceux auxquels l’utilisateur voudra toujours acc\u00e9der, il est logique qu’ils soient toujours affich\u00e9s. Cela est particuli\u00e8rement vrai pour les appareils et les formats d’\u00e9cran plus petits<\/a>.<\/p>\nBien qu’il puisse sembler contre-intuitif d’avoir un en-t\u00eate \u00ab toujours actif \u00bb lorsque l’espace d’affichage est limit\u00e9, il s’agit simplement d’un petit sacrifice. Le v\u00e9ritable avantage est de donner \u00e0 l’utilisateur mobile moins de raisons de faire d\u00e9filer le texte – une n\u00e9cessit\u00e9 sur les petits appareils. Si vous pouvez fournir la navigation de votre site sans avoir \u00e0 le faire d\u00e9filer, l’utilisateur peut se d\u00e9placer sur votre site avec plus de facilit\u00e9.<\/p>\n
Les avantages et les inconv\u00e9nients des en-t\u00eates \u00e9pingl\u00e9s<\/h3>\n
Nous avons abord\u00e9 quelques-uns des avantages des en-t\u00eates \u00e9pingl\u00e9s, alors r\u00e9sumons-les rapidement :<\/p>\n
\n- Vous pouvez proposer une navigation \u00e0 laquelle l’utilisateur peut toujours acc\u00e9der, ce qui permet de pr\u00e9server le sch\u00e9ma de lecture naturel sur votre site.<\/li>\n
- Vous \u00eates en mesure d’adapter l’en-t\u00eate \u00e0 diff\u00e9rents besoins<\/a>, tels que les contrastes, les sch\u00e9mas de couleurs, ou m\u00eame l’intention de l’utilisateur.<\/li>\n
- Il est possible d’offrir de la valeur \u00e0 l’utilisateur, tant pour les ordinateurs de bureau que pour les \u00e9crans plus petits.<\/li>\n<\/ul>\n
Cependant, un en-t\u00eate \u00e9pingl\u00e9 n’est pas une panac\u00e9e pour am\u00e9liorer l’UX, et il y a quelques inconv\u00e9nients \u00e0 les utiliser :<\/p>\n
\n- Nous en parlons bri\u00e8vement, mais pour les \u00e9crans de toutes tailles, vous devrez allouer de l’espace \u00e0 votre en-t\u00eate.<\/li>\n
- Un en-t\u00eate \u00e9pingl\u00e9 prendra naturellement le pas sur le reste de votre contenu, car ses propres \u00e9l\u00e9ments d\u00e9tourneront le regard du corps de la page.<\/li>\n
- Le d\u00e9veloppement d’un bon en-t\u00eate\u00e9pingl\u00e9 demande plus de travail, car vous devez le mettre en \u0153uvre, vous assurer qu’il fonctionne dans diff\u00e9rents navigateurs et v\u00e9rifier qu’il n’y a pas de bogues sur les \u00e9crans plus petits.<\/li>\n<\/ul>\n
Cependant, si vous r\u00e9fl\u00e9chissez \u00e0 vos choix de conception, aux besoins des utilisateurs et aux objectifs du site, vous pouvez att\u00e9nuer ou supprimer tous ces inconv\u00e9nients, tout en conservant les bons points. L’un des moyens d’y parvenir est de recourir \u00e0 des extensions WordPress.<\/p>\n
3 plugins pour vous aider \u00e0 cr\u00e9er des en-t\u00eates \u00e9pingl\u00e9s<\/h2>\n
Au cours des prochaines sections, nous pr\u00e9senterons quelques-uns des principales extensions d’en-t\u00eates \u00e9pingl\u00e9s pour WordPress. Plus tard, nous verrons si ce type de solution vous convient. Quoi qu’il en soit, une extension peut vous aider \u00e0 mettre en \u0153uvre une fonctionnalit\u00e9 sans avoir besoin de code, ce qui est pr\u00e9cieux si votre th\u00e8me<\/a> ne l’inclut pas.<\/p>\nDe plus, l’extension vous permet de tirer parti de l’exp\u00e9rience d’un expert en mati\u00e8re de conception et de d\u00e9veloppement. Les d\u00e9veloppeurs feront certains des choix techniques les plus importants pour vous, et les int\u00e9greront dans une interface utilisateur intuitive et facile \u00e0 utiliser.<\/p>\n
1. Sticky Menu & Sticky Header<\/h3>\n
L’extension Sticky Menu & Sticky Header<\/a> de Webfactory est un bon premier choix, en raison de sa richesse de fonctionnalit\u00e9s, de sa flexibilit\u00e9 utile et de son prix abordable.<\/p>\n![\"L'extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-sticky-header-plugin.png\")
L’extension Sticky Menu & Sticky Header.<\/figcaption><\/figure>\nL’int\u00e9r\u00eat de cette extension est que vous pouvez faire en sorte que n’importe quel \u00e9l\u00e9ment de votre site colle \u00e0 l’\u00e9cran. Cela peut \u00eatre utile \u00e0 bien des \u00e9gards, mais cela signifie que la mise en \u0153uvre d’un en-t\u00eate \u00e9pingl\u00e9 est un jeu d’enfant.<\/p>\n
L’extension est \u00e9galement livr\u00e9e avec une s\u00e9rie d’options puissantes pour vous aider \u00e0 mettre en \u0153uvre un en-t\u00eate \u00e9pingl\u00e9 :<\/p>\n
\n- Vous pouvez d\u00e9finir le niveau de positionnement \u00ab sup\u00e9rieur \u00bb que vous souhaitez. Cela signifie que vous pouvez ajouter de l’espace \u00e0 la zone situ\u00e9e au-dessus de l’en-t\u00eate pour r\u00e9pondre \u00e0 vos objectifs de conception.<\/li>\n
- Il existe \u00e9galement d’autres options de positionnement, comme l’utilisation de la propri\u00e9t\u00e9 CSS z-index<\/a> pour concevoir votre site \u00ab d’avant en arri\u00e8re \u00bb<\/li>\n
- Vous pouvez activer l’en-t\u00eate \u00e9pingl\u00e9 uniquement sur les pages que vous s\u00e9lectionnez, ce qui peut s’av\u00e9rer utile si vous avez des pages de destination<\/a> ou d’autres contenus inadapt\u00e9s.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header comprend \u00e9galement un mode de d\u00e9bogage, pour vous aider \u00e0 corriger tout \u00e9l\u00e9ment \u00ab non adh\u00e9sif \u00bb. Le mode dynamique vous aidera \u00e9galement \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s aux conceptions responsives.<\/p>\n
La meilleure nouvelle est que Sticky Menu & Sticky Header est gratuit \u00e0 t\u00e9l\u00e9charger et \u00e0 utiliser. De plus, il existe une version premium<\/a> qui vous d\u00e9barrasse d’une grande partie du savoir-faire technique dont vous avez besoin.<\/p>\nAvec la version gratuite de l’extension, vous devrez conna\u00eetre le s\u00e9lecteur de l’\u00e9l\u00e9ment afin de le sp\u00e9cifier dans les options. Cependant, la version premium (49-199 $ par an) offre un s\u00e9lecteur d’\u00e9l\u00e9ment visuel pour contourner cela.<\/p>\n
2. Options for Twenty Twenty-One<\/h3>\n
Bien que nous ne recommanderions pas un th\u00e8me WordPress par d\u00e9faut pour la plupart des sites ax\u00e9s sur la client\u00e8le, ils en ont suffisamment dans le coffre pour les blogs et les types de sites similaires.<\/p>\n
Twenty Twenty-One<\/a> est l’un des th\u00e8mes par d\u00e9faut les plus remarquables selon nous, mais il lui manque la fonctionnalit\u00e9 d’en-t\u00eate \u00e9pingl\u00e9. Si vous souhaitez ajouter cette fonctionnalit\u00e9, l’extension Options for Twenty Twenty-One<\/a> pourrait r\u00e9aliser ce dont vous avez besoin.<\/p>\n![\"L'extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/options-twenty-twenty-one.png\")
L’extension Options for Twenty Twenty-One.<\/figcaption><\/figure>\nCette \u00e9dition de l’extension est l’une des nombreuses. Chaque th\u00e8me par d\u00e9faut r\u00e9cent poss\u00e8de une version, mais il n’y en a pas encore une pour Twenty Twenty-Two<\/a>. Quoi qu’il en soit, la fonctionnalit\u00e9 de base de l’extension offre de nombreux extras :<\/p>\n\n- L’outil FSE (Full Site Editing)<\/a> est pr\u00eat pour son d\u00e9ploiement complet.<\/li>\n
- Vous \u00eates en mesure de modifier la taille de la police pour le corps du texte, de supprimer le soulignement des hyperliens et d’autres personnalisations simples.<\/li>\n
- Vous pouvez travailler avec les largeurs maximales des conteneurs et des \u00e9l\u00e9ments, sans avoir besoin de code.<\/li>\n<\/ul>\n
Il y a beaucoup d’autres options pour votre navigation, votre contenu, votre pied de page et votre en-t\u00eate. Pour ce dernier, vous pouvez le cacher de la vue, le rendre pleine largeur, ajouter une image et une couleur d’arri\u00e8re-plan<\/a>, ainsi que de nombreuses autres modifications.<\/p>\nAlors que l’extension de base est gratuite<\/a>, vous avez besoin d’une mise \u00e0 niveau premium (25-50 $)<\/a> pour acc\u00e9der aux options d’en-t\u00eate \u00e9pingl\u00e9. Cela vous permet de r\u00e9gler les param\u00e8tres des en-t\u00eates mobiles et de bureau \u00e0 partir de la personnalisation de WordPress :<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-header-customizer.png\")
La personnalisation de WordPress, montrant les options d’en-t\u00eate \u00e9pingl\u00e9.<\/figcaption><\/figure>\n\u00c9tant donn\u00e9 son nom, vous ne devriez pas vous attendre \u00e0 ce que cette extension fonctionne avec un autre th\u00e8me que Twenty Twenty-One (ou toute autre \u00ab saveur \u00bb que vous choisissez.) Cependant, si vous utilisez ce th\u00e8me par d\u00e9faut et ne voulez pas coder, il sera id\u00e9al pour vous aider \u00e0 ajouter un en-t\u00eate \u00e9pingl\u00e9 \u00e0 votre site.<\/p>\n
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme \u2013 myStickymenu<\/h3>\n
Voici une extension qui joue cartes sur table. L’extension myStickymenu<\/a> de Premio offre presque tout ce que vous voudrez inclure dans votre propre en-t\u00eate \u00e9pingl\u00e9, et offre une grande quantit\u00e9 de fonctionnalit\u00e9s.<\/p>\n![\"L'extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mystickymenu-plugin.png\")
L’extension myStickymenu.<\/figcaption><\/figure>\nIl poss\u00e8de un nombre \u00e9tonnant d’avis positifs sur le r\u00e9pertoire d’extensions WordPress<\/a>\u00a0– 799 avis cinq \u00e9toiles pour une moyenne de 4,9. Cela est d\u00fb en partie \u00e0 l’ensemble complet de fonctionnalit\u00e9s \u00e0 votre disposition :<\/p>\n\n- Elle offre une souplesse d’utilisation. Par exemple, vous pouvez cr\u00e9er une barre de bienvenue ainsi qu’un menu \u00e9pingl\u00e9, et un en-t\u00eate.<\/li>\n
- L’extension s’adapte \u00e0 la r\u00e9activit\u00e9 de votre site. Cela signifie que vous n’aurez pas besoin d’impl\u00e9menter plus de fonctionnalit\u00e9s en utilisant du code.<\/li>\n
- En fait, l’extension ne n\u00e9cessite pas que vous sachiez coder pour l’utiliser pleinement.<\/li>\n
- L’extension myStickymenu est compatible avec un certain nombre d’extensions de construction de pages de premier plan, telles que Elementor<\/a>, Beaver Builder<\/a>, Gutenberg<\/a>, Divi Builder<\/a>, et bien d’autres.<\/li>\n<\/ul>\n
Vous disposez \u00e9galement d’un certain nombre d’options de personnalisation pour faire fonctionner votre en-t\u00eate \u00e9pingl\u00e9 comme vous le souhaitez. Par exemple, vous pouvez choisir de faire un en-t\u00eate partiellement persistant, modifier des aspects simples tels que les couleurs d’arri\u00e8re-plan, les choix typographiques, et plus encore.<\/p>\n
De plus, en raison des diff\u00e9rentes fa\u00e7ons dont vous pouvez pr\u00e9senter votre en-t\u00eate \u00e9pingl\u00e9 (comme les options de menu et de barre de bienvenue), vous pouvez choisir comment elles s’affichent, et o\u00f9, sur votre site.<\/p>\n
Bien que la version gratuite de myStickymenu puisse suffire \u00e0 vos besoins, il existe \u00e9galement une version premium (25-99 $ par an.) Celle-ci offre davantage de moyens de d\u00e9sactiver votre en-t\u00eate \u00e9pingl\u00e9 dans des conditions sp\u00e9cifiques, des comptes \u00e0 rebours, la possibilit\u00e9 d’ajouter plusieurs barres de bienvenue et quelques options de personnalisation suppl\u00e9mentaires.<\/p>\n
Comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 dans WordPress<\/h2>\n
Dans la suite de ce tutoriel, nous allons vous montrer comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 dans WordPress. Il y a deux approches possibles, et nous allons les couvrir toutes les deux. Cependant, notre premi\u00e8re \u00e9tape vous aidera \u00e0 prendre cette d\u00e9cision.<\/p>\n
\u00c0 partir de l\u00e0, vous travaillerez sur votre propre en-t\u00eate \u00e9pingl\u00e9 en utilisant votre m\u00e9thode pr\u00e9f\u00e9r\u00e9e, puis vous appliquerez certains de nos conseils pour rendre le v\u00f4tre plus efficace et utilisable \u00e0 l’avenir.<\/p>\n
1. D\u00e9cidez comment vous allez cr\u00e9er votre en-t\u00eate \u00e9pingl\u00e9<\/h3>\n
L’une des raisons pour lesquelles WordPress est si flexible<\/a> pour toutes sortes d’utilisateurs est due \u00e0 son \u00e9cosyst\u00e8me d’extensions et \u00e0 son extensibilit\u00e9 open source. Ainsi, vous pouvez choisir une solution standard ou cr\u00e9er la v\u00f4tre<\/p>\nVotre premi\u00e8re t\u00e2che consiste \u00e0 d\u00e9cider si vous voulez utiliser une extension ou vous plonger dans le code pour mettre en \u0153uvre votre en-t\u00eate \u00e9pingl\u00e9. D\u00e9cortiquons les deux solutions :<\/p>\n
\n- Extensions.<\/strong> Il s’agit d’une m\u00e9thode approuv\u00e9e par WordPress<\/a>, surtout si vous n’avez pas les connaissances techniques en main. Elle offre une certaine souplesse, mais vous \u00eates \u00e0 la merci de ce que le d\u00e9veloppeur juge important, et de sa capacit\u00e9 \u00e0 coder.<\/li>\n
- Le codage.<\/strong> Si vous avez une vision claire en t\u00eate, vous pouvez coder un en-t\u00eate \u00e9pingl\u00e9 pour votre site. Bien s\u00fbr, vous aurez besoin d’une expertise technique<\/a> pour y parvenir (principalement CSS<\/a>), mais les r\u00e9sultats seront exactement ceux que vous souhaitez. Cependant, vous aurez plus de maintenance potentielle \u00e0 effectuer, et son succ\u00e8s d\u00e9pendra de vos propres capacit\u00e9s \u00e0 coder.<\/li>\n<\/ul>\n
Nous dirions que pour la plupart des utilisateurs de WordPress, une extension sera la solution id\u00e9ale pour cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9. Il s’int\u00e8gre bien \u00e0 la plateforme et est plus facile \u00e0 d\u00e9panner si vous rencontrez des probl\u00e8mes. Cependant, dans les prochaines \u00e9tapes, nous couvrirons une solution de codage ainsi que l’option de l’extension.<\/p>\n
2. Choisissez si vous allez modifier votre th\u00e8me actuel ou en s\u00e9lectionner un d\u00e9di\u00e9<\/h3>\n
L’aspect suivant \u00e0 prendre en compte est de savoir si vous modifiez votre th\u00e8me actuel<\/a> ou si vous en choisissez un qui poss\u00e8de d\u00e9j\u00e0 la fonctionnalit\u00e9 d’en-t\u00eate \u00e9pingl\u00e9 dans son jeu de fonctions. C’est important si votre th\u00e8me n’a pas la fonctionnalit\u00e9 n\u00e9cessaire pour g\u00e9rer un en-t\u00eate \u00e9pingl\u00e9.<\/p>\nDe nombreux th\u00e8mes et extensions de construction de pages incluent une option d’en-t\u00eate \u00e9pingl\u00e9, en raison des avantages qu’elle pr\u00e9sente et pour vous offrir une certaine souplesse de conception. Vous constaterez que certains des th\u00e8mes et extensions les plus grands et les plus polyvalents proposent cette option en standard, comme Elementor<\/a>, Astra<\/a>, Divi, Avada et bien d’autres.<\/p>\n![\"L'option](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/wordpress-theme-sticky.png\")
L’option d’en-t\u00eate \u00e9pingl\u00e9 dans Elementor.<\/figcaption><\/figure>\nPour prendre cette d\u00e9cision, vous devrez tenir compte de quelques \u00e9l\u00e9ments concernant votre th\u00e8me et votre site actuels :<\/p>\n
\n- Votre site a-t-il d\u00e9j\u00e0 l’apparence que vous souhaitez, ou a-t-il besoin d’un rafra\u00eechissement ?<\/em><\/li>\n
- Votre th\u00e8me actuel est-il facile \u00e0 personnaliser sous le capot ?<\/em> La documentation du d\u00e9veloppeur devrait vous le dire.<\/li>\n
- Souhaitez-vous une impl\u00e9mentation complexe de l’en-t\u00eate \u00e9pingl\u00e9 ou une impl\u00e9mentation plus simple ?<\/em><\/li>\n<\/ul>\n
En fonction des r\u00e9ponses que vous donnerez ici, vous choisirez l’un ou l’autre. Si vous avez besoin d’un nouveau th\u00e8me, vous pouvez tout aussi bien en choisir un qui offre l’impl\u00e9mentation d’un en-t\u00eate \u00e9pingl\u00e9. Toutefois, si vous souhaitez conserver votre th\u00e8me actuel et qu’il ne dispose pas encore de la fonctionnalit\u00e9 d’en-t\u00eate \u00e9pingl\u00e9, vous devrez retrousser vos manches et suivre l’une des sous-\u00e9tapes suivantes.<\/p>\n
2a. Utiliser une extension avec un th\u00e8me sp\u00e9cifique<\/h4>\n
Si vous n’avez pas d’exp\u00e9rience en d\u00e9veloppement, nous vous recommandons de choisir une extension pour ajouter la fonctionnalit\u00e9 d’en-t\u00eate collant \u00e0 votre site. Il y a trop de variables que vous devez prendre en compte, construire et maintenir. En revanche, une extension aura d\u00e9j\u00e0 une base de code qui fait un clin d’\u0153il \u00e0 ces \u00e9l\u00e9ments, elle offrira donc une option presque id\u00e9ale pour la majorit\u00e9 des circonstances.<\/p>\n
Pour cette partie du tutoriel, nous allons utiliser l’extension myStickymenu, car elle offre un ensemble de fonctionnalit\u00e9s riches et compl\u00e8tes pour la majorit\u00e9 des cas d’utilisation. Toutefois, l’utilisation g\u00e9n\u00e9rale sera la m\u00eame pour la plupart des extensions que vous utiliserez.<\/p>\n
Une fois que vous aurez install\u00e9 et activ\u00e9 votre extension<\/a>, vous devrez vous rendre \u00e0 l’endroit o\u00f9 se trouvent les options du th\u00e8me. Pour certaines extensions, cela se fera dans la personnalisation de WordPress ; pour d’autres, dans un panneau d’administration d\u00e9di\u00e9. Ici, vous utiliserez un panneau d’administration personnalis\u00e9 sur myStickymenu > Tableau de bord<\/strong>\u00a0dans WordPress :<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/plugin-admin-panel.png\")
Le panneau d’administration de myStickymenu dans WordPress.<\/figcaption><\/figure>\nCependant, l’\u00e9cran par d\u00e9faut affiche les r\u00e9glages de la barre de bienvenue, ce que nous ne voulons pas pour ce tutoriel. En tant que tel, cliquez sur le bouton \u00e0 bascule pour d\u00e9sactiver la barre, et cliquez sur l’\u00e9cran des R\u00e9glages de Sticky menu <\/strong>:<\/p>\n![\"L'\u00e9cran](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-settings.png\")
L’\u00e9cran des r\u00e9glages de Sticky menu.<\/figcaption><\/figure>\nBien qu’il y ait beaucoup d’options ici, vous n’avez besoin que du panneau Sticky Class<\/strong>. Une fois que vous avez activ\u00e9 l’en-t\u00eate \u00e9pingl\u00e9, saisissez la balise HTML appropri\u00e9e pour votre en-t\u00eate dans le champ correspondant qui co\u00efncide avec le menu d\u00e9roulant Autre classe ou ID<\/strong>:<\/p>\n![\"Modification](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-class-dropdown.png\")
Modification de la balise de s\u00e9lection HTML dans l’extension myStickymenu.<\/figcaption><\/figure>\nUne fois que vous aurez enregistr\u00e9 vos modifications, celles-ci s’appliqueront \u00e0 votre site. \u00c0 partir de l\u00e0, vous pouvez examiner certaines des fonctionnalit\u00e9s de style. Par exemple, vous pouvez d\u00e9finir un effet de transition en fondu ou en glissement, d\u00e9finir l’indice z<\/strong>, travailler avec des opacit\u00e9s, des couleurs et des temps de transition – ainsi qu’une foule d’autres options.<\/p>\n2b. \u00c9crivez du code pour cr\u00e9er votre en-t\u00eate \u00e9pingl\u00e9<\/h4>\n
Il va presque sans dire que cette section est destin\u00e9e \u00e0 ceux qui ont une exp\u00e9rience du d\u00e9veloppement. Vous verrez plus tard que le code lui-m\u00eame est si simple qu’il est difficile d’y croire. Cependant, \u00e9tant donn\u00e9 le travail suppl\u00e9mentaire, la maintenance et l’entretien g\u00e9n\u00e9ral pour cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 personnalis\u00e9, vous devrez faire appel \u00e0 d’autres aspects de votre exp\u00e9rience \u00e9galement.<\/p>\n
Toutefois, avant de commencer, vous aurez besoin des \u00e9l\u00e9ments suivants :<\/p>\n
\n- Un \u00e9diteur de code d\u00e9cent<\/a>, bien que dans ce cas (et selon l’impl\u00e9mentation) vous pourriez utiliser un \u00e9diteur de texte du syst\u00e8me d’exploitation par d\u00e9faut.<\/li>\n
- Vous devrez avoir acc\u00e8s aux fichiers de votre site<\/a>, que vous devriez sauvegarder<\/a>, puis t\u00e9l\u00e9charger dans un environnement de d\u00e9veloppement WordPress local<\/a>.<\/li>\n<\/ul>\n
Il est inutile de r\u00e9p\u00e9ter que vous ne voulez pas travailler sur les fichiers de votre site en production. Travaillez plut\u00f4t dans un environnement de staging<\/a> ou une installation locale<\/a>, puis t\u00e9l\u00e9versez les fichiers sur votre serveur r\u00e9el apr\u00e8s avoir test\u00e9 les choses.<\/p>\nVous voudrez \u00e9galement utiliser un th\u00e8me enfant<\/a> pour cela, car vous apportez des modifications personnalis\u00e9es \u00e0 votre th\u00e8me parent. Cela vous permet d’organiser votre code et de vous assurer que toutes les modifications restent (litt\u00e9ralement) en place si le th\u00e8me re\u00e7oit une mise \u00e0 jour.<\/p>\nMise en \u0153uvre d’un en-t\u00eate \u00e9pingl\u00e9 \u00e0 l’aide du code : Trouver les balises d’en-t\u00eate correctes<\/h4>\n
Avec tout cela en t\u00eate, vous pouvez commencer. Le premier travail consiste \u00e0 d\u00e9couvrir les bonnes balises HTML pour votre navigation. Le r\u00e9sultat ici d\u00e9pendra du th\u00e8me que vous utilisez, bien que la balise header<\/strong> soit une valeur s\u00fbre dans la plupart des cas. La meilleure fa\u00e7on de le savoir est d’utiliser les outils de d\u00e9veloppement de votre navigateur<\/a> et de s\u00e9lectionner l’en-t\u00eate :<\/p>\n![\"L'outil](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/inspect-element.png\")
L’outil Inspecter l’\u00e9l\u00e9ment montrant le site Kinsta et la balise.<\/figcaption><\/figure>\nVous constaterez probablement que ce n’est pas aussi simple qu’une seule balise, nous vous sugg\u00e9rons donc de jeter un coup d’\u0153il \u00e0 la documentation de votre th\u00e8me (ou de parler directement avec le d\u00e9veloppeur) afin de trouver les balises<\/a> dont vous avez besoin si vous avez des difficult\u00e9s.<\/p>\nMise en \u0153uvre d’un en-t\u00eate \u00e9pingl\u00e9 \u00e0 l’aide de code : Travailler avec vos feuilles de style<\/h4>\n
Ensuite, vous devez cr\u00e9er ou ouvrir un fichier style.css<\/strong> dans le r\u00e9pertoire de votre th\u00e8me enfant. Ce fichier ajoutera votre CSS \u00e0 celui de l’installation principale et, lorsque les balises se r\u00e9p\u00e8tent, il le remplacera.<\/p>\nDans ce fichier, ajoutez les m\u00e9tadonn\u00e9es typiques<\/a> dont vous avez besoin pour enregistrer le th\u00e8me enfant :<\/p>\n![\"Cr\u00e9ation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/style-css-child.png\")
Cr\u00e9ation d’un th\u00e8me enfant \u00e0 l’aide de Onivim2.<\/figcaption><\/figure>\nEnsuite, vous voudrez ajouter du code pour activer votre en-t\u00eate \u00e9pingl\u00e9. Cela n\u00e9cessitera une certaine connaissance de l’h\u00e9ritage CSS, et selon le th\u00e8me que vous utilisez, cela pourrait \u00eatre une exp\u00e9rience exasp\u00e9rante.<\/p>\n
Par exemple, le th\u00e8me Twenty Twenty-Two utilise deux balises d’en-t\u00eate, et il peut \u00eatre difficile de trouver le bon m\u00e9lange de CSS pour que votre code fonctionne sur le bon \u00e9l\u00e9ment. Et ce, m\u00eame avec la bo\u00eete de dialogue des classes de mod\u00e8les dans l’\u00e9diteur de blocs (si vous utilisez la fonctionnalit\u00e9 FSE<\/a>) :<\/p>\n![\"L'inspecteur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/supersticky.png\")
L’inspecteur Inspector plusieurs balises d’en-t\u00eate pour le th\u00e8me Twenty Twenty-Two.<\/figcaption><\/figure>\nQuoi qu’il en soit, le code dont vous aurez besoin sera le m\u00eame :<\/p>\n
Akhil Arjun<\/a> propose une solution en deux lignes pour cela :<\/p>\n\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nCependant, vous pouvez \u00e9galement envisager d’utiliser la propri\u00e9t\u00e9 position : fixed<\/strong>, qui utilise quelques lignes de code suppl\u00e9mentaires :<\/p>\n\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nCeci utilise z-index<\/strong> pour amener l’en-t\u00eate \u00e0 l’avant de la pile, puis un attribut fixe pour le faire rester en haut de l’\u00e9cran.<\/p>\nNotez que vous devrez peut-\u00eatre ajouter une nouvelle classe ici, afin d’appliquer l’en-t\u00eate \u00e9pingl\u00e9. Quoi qu’il en soit, ceci devrait mettre en \u0153uvre les bases de votre en-t\u00eate \u00e9pingl\u00e9. Une fois que vous l’aurez mis au point, vous voudrez travailler davantage sur la conception pour qu’il s’int\u00e8gre au reste de votre site.<\/p>\n
Conseils pour rendre vos en-t\u00eates \u00e9pingl\u00e9s plus efficaces<\/h2>\n
Une fois que vous avez trouv\u00e9 une m\u00e9thode pour cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9, vous devez trouver comment le perfectionner. Il existe de nombreuses fa\u00e7ons d’am\u00e9liorer le design de base et de s’assurer qu’il r\u00e9pond aux besoins des visiteurs de votre site.<\/p>\n
Une bonne analogie pour votre propre en-t\u00eate \u00e9pingl\u00e9 est de s’assurer qu’il est comme un bon arbitre sportif. La plupart du temps, vous ne saurez pas qu’ils sont l\u00e0. Cependant, lorsqu’un joueur ou un entra\u00eeneur a besoin d’eux, ils passent un appel et deviennent pr\u00e9sents.<\/p>\n
Votre en-t\u00eate \u00e9pingl\u00e9 devrait faire de m\u00eame – rester dans l’ombre, ou hors de l’esprit jusqu’\u00e0 ce que l’utilisateur en ait besoin. Vous pouvez y parvenir gr\u00e2ce \u00e0 quelques r\u00e8gles empiriques que vous pouvez (comme toujours) choisir d’enfreindre si la conception l’exige :<\/p>\n
\n- Restez compact. <\/strong>L’espace sur l’\u00e9cran va \u00eatre limit\u00e9, alors essayez de garder l’en-t\u00eate petit. Vous pouvez mettre en place une solution o\u00f9 votre en-t\u00eate s’adapte de mani\u00e8re dynamique, en fonction de la zone du site sur laquelle il figure.<\/li>\n
- Utilisez des en-t\u00eates et des menus cach\u00e9s sur les petits \u00e9crans.<\/strong> Par extension, vous pourriez choisir de masquer un menu, un peu comme dans l’exemple pr\u00e9c\u00e9dent de Hammerhead. Cela permet de garder l’en-t\u00eate compact, et rejoint le point suivant.<\/li>\n
- Veillez \u00e0 ne pas introduire de distractions.<\/strong> Plus les \u00e9l\u00e9ments sont nombreux \u00e0 l’\u00e9cran, plus ils se disputent l’attention. Si l’en-t\u00eate \u00e9pingl\u00e9 n’a pas besoin de montrer un \u00e9l\u00e9ment, retirez-le – le contenu du corps du texte l’appr\u00e9ciera, tout comme vos mesures.<\/li>\n
- Offrez du contraste. <\/strong>Il s’agit d’une astuce du manuel d’appel \u00e0 l’action (Call To Action ou CTA). Si vous utilisez le contraste pour l’en-t\u00eate \u00e9pingl\u00e9 dans son ensemble, et ses \u00e9l\u00e9ments individuels, vous pouvez attirer l’\u0153il l\u00e0 o\u00f9 vous en avez besoin – ou le pousser ailleurs.<\/li>\n<\/ul>\n
Dans l’ensemble, votre en-t\u00eate \u00e9pingl\u00e9 ne fera que ce dont vous avez besoin, et pas plus. Parfois, vous aurez besoin de garder les choses au minimum, d’autres fois, vous le remplirez de liens, de logos et de formulaires d’inscription<\/a>. Dans tous les cas, si vous gardez l’UX et l’UI \u00e0 l’esprit, vous prendrez toujours une d\u00e9cision ax\u00e9e sur l’utilisateur.<\/p>\n\nR\u00e9sum\u00e9<\/h2>\n
La convivialit\u00e9 et l’UX de votre site sont si importantes qu’elles devraient \u00eatre les premi\u00e8res, deuxi\u00e8mes et troisi\u00e8mes choses que vous clouez lorsque vous le concevez et le construisez. La navigation de votre site n’en est qu’un aspect, mais vous devez trouver la meilleure fa\u00e7on de permettre \u00e0 un utilisateur de se d\u00e9placer sur votre site sans probl\u00e8me. Un en-t\u00eate \u00e9pingl\u00e9 est un bon moyen d’y parvenir.<\/p>\n
La partie en-t\u00eate de votre site est un peu comme le bureau d’information de votre site. C’est ce que la plupart des utilisateurs rep\u00e8rent en premier, et c’est toujours l’endroit qu’ils consulteront pour trouver quelques informations cl\u00e9s et effectuer certaines actions :<\/p>\n
- \n
- Par exemple, votre logo ou le nom de votre site sera ici, ce qui sert de point d’ancrage pour vos utilisateurs. Dans la plupart des cas, ils pourront revenir \u00e0 la page d’accueil en cliquant sur le logo.<\/li>\n
- Si vous g\u00e9rez des comptes d’utilisateur<\/a> sur votre site, l’en-t\u00eate offrira g\u00e9n\u00e9ralement un lien pour se connecter \u00e0 ces pages de compte et de profil.<\/li>\n
- Il peut y avoir une fonctionnalit\u00e9 de recherche<\/a> ici, surtout si vous avez un grand site avec beaucoup de contenu dans diff\u00e9rents domaines.<\/li>\n
- Bien entendu, la navigation de votre site<\/a> fait \u00e9galement partie int\u00e9grante de l’en-t\u00eate.<\/li>\n<\/ul>\n
Dans l’ensemble, votre en-t\u00eate est un point de contact pour les utilisateurs. Vous constaterez qu’il s’agit souvent de la \u00ab barre \u00bb pour les sch\u00e9mas de lecture en forme de F<\/a>. Il attire donc l’attention de vos utilisateurs \u00e0 un niveau intuitif.<\/p>\n
Vous savez probablement d\u00e9j\u00e0 ce qu’est un en-t\u00eate \u00e9pingl\u00e9, m\u00eame au sens intuitif du terme. Il s’agit de la section d’en-t\u00eate de votre site qui colle au haut de l’\u00e9cran lorsque vous faites d\u00e9filer la page. Contrairement \u00e0 un en-t\u00eate statique, qui reste en place et dispara\u00eet au fur et \u00e0 mesure que vous d\u00e9filez, l’en-t\u00eate \u00e9pingl\u00e9 est un \u00e9l\u00e9ment toujours visible.<\/p>\n
Si l’approche typique pour un en-t\u00eate \u00e9pingl\u00e9 consiste \u00e0 en coller une version statique en haut de votre \u00e9cran, il existe plusieurs fa\u00e7ons de rendre cet \u00e9l\u00e9ment plus utilisable, plus efficace \u00e0 l’\u00e9cran et plus dynamique. Nous allons maintenant examiner quelques exemples concrets.<\/p>\n\n
Exemples d’en-t\u00eates \u00e9pingl\u00e9s sur le web<\/h2>\n
Vous trouverez des en-t\u00eates collants partout sur le Web, et c’est une bonne id\u00e9e d’en v\u00e9rifier quelques-uns pour voir l’\u00e9tendue de ce que vous pouvez r\u00e9aliser. L’un des exemples les plus simples est celui de Hammerhead<\/a>. Ce site utilise un menu d\u00e9roulant et un en-t\u00eate \u00e9pingl\u00e9, et il est simple : Il s’engage \u00e0 rester en haut de la page dans sa mise en page statique :<\/p>\n
L’en-t\u00eate \u00e9pingl\u00e9 du site Hammerhead.<\/figcaption><\/figure>\n Une autre mise en \u0153uvre simple est celle de Kin<\/a>. Elle utilise un en-t\u00eate \u00e9pingl\u00e9 typique, mais cette fois avec quelques \u00e9l\u00e9ments de design sympas.<\/p>\n
Vous remarquerez que le contraste change en fonction de la partie du site web que vous faites d\u00e9filer, et il y a aussi quelques jolis effets de transition :<\/p>\n
L’en-t\u00eate \u00e9pingl\u00e9 sur le site web de Kin.<\/figcaption><\/figure>\n Nous ne pouvons pas terminer cette section sans mentionner l’en-t\u00eate \u00e9pingl\u00e9 de Kinsta<\/a>. Celui-ci reste \u00e9galement simple en ce qui concerne les \u00e9l\u00e9ments de l’en-t\u00eate, mais inclut une touche de convivialit\u00e9 soign\u00e9e qui offre de la valeur au visiteur :<\/p>\n
L’en-t\u00eate \u00e9pingl\u00e9 du site web de Kinsta.<\/figcaption><\/figure>\n Cette fois, vous verrez l’en-t\u00eate dispara\u00eetre lorsque vous ferez d\u00e9filer la page. Toutefois, il r\u00e9appara\u00eetra lorsque vous ferez d\u00e9filer la page vers le haut – on peut parler d’un \u00ab en-t\u00eate partiellement persistant \u00bb.<\/p>\n
L’id\u00e9e est que le d\u00e9filement vers le bas signifie que vous investissez votre temps dans la page elle-m\u00eame, et que vous n’aurez probablement pas besoin de navigation, de pages de connexion ou d’aller ailleurs. Cependant, au moment o\u00f9 vous faites d\u00e9filer la page vers le haut, vous \u00eates plus susceptible de vouloir vous diriger vers une autre page du site. C’est l\u00e0 que l’en-t\u00eate \u00e9pingl\u00e9 intervient pour vous sauver la mise.<\/p>\n
Ce sont ces petites touches d’exp\u00e9rience utilisateur (UX) qui font que les visiteurs auront envie de revenir sur le site. Pour vos propres conceptions d’en-t\u00eates \u00e9pingl\u00e9s, vous voudrez examiner ce que vous pouvez faire pour cr\u00e9er une UX et une UI qui se concentrent sur les besoins du visiteur.<\/p>\n
Pourquoi vous devriez utiliser un en-t\u00eate \u00e9pingl\u00e9 pour votre site<\/h2>\n
De nombreux sites utilisent des en-t\u00eates \u00e9pingl\u00e9s, et il y a de nombreuses bonnes raisons pour cela. Ils peuvent \u00eatre des \u00e9l\u00e9ments cruciaux de l’exp\u00e9rience globale de votre site et ont beaucoup d’influence sur votre UX et votre UI.<\/p>\n
\u00c9tant donn\u00e9 que les \u00e9l\u00e9ments que vous inclurez dans un en-t\u00eate sont ceux auxquels l’utilisateur voudra toujours acc\u00e9der, il est logique qu’ils soient toujours affich\u00e9s. Cela est particuli\u00e8rement vrai pour les appareils et les formats d’\u00e9cran plus petits<\/a>.<\/p>\n
Bien qu’il puisse sembler contre-intuitif d’avoir un en-t\u00eate \u00ab toujours actif \u00bb lorsque l’espace d’affichage est limit\u00e9, il s’agit simplement d’un petit sacrifice. Le v\u00e9ritable avantage est de donner \u00e0 l’utilisateur mobile moins de raisons de faire d\u00e9filer le texte – une n\u00e9cessit\u00e9 sur les petits appareils. Si vous pouvez fournir la navigation de votre site sans avoir \u00e0 le faire d\u00e9filer, l’utilisateur peut se d\u00e9placer sur votre site avec plus de facilit\u00e9.<\/p>\n
Les avantages et les inconv\u00e9nients des en-t\u00eates \u00e9pingl\u00e9s<\/h3>\n
Nous avons abord\u00e9 quelques-uns des avantages des en-t\u00eates \u00e9pingl\u00e9s, alors r\u00e9sumons-les rapidement :<\/p>\n
- \n
- Vous pouvez proposer une navigation \u00e0 laquelle l’utilisateur peut toujours acc\u00e9der, ce qui permet de pr\u00e9server le sch\u00e9ma de lecture naturel sur votre site.<\/li>\n
- Vous \u00eates en mesure d’adapter l’en-t\u00eate \u00e0 diff\u00e9rents besoins<\/a>, tels que les contrastes, les sch\u00e9mas de couleurs, ou m\u00eame l’intention de l’utilisateur.<\/li>\n
- Il est possible d’offrir de la valeur \u00e0 l’utilisateur, tant pour les ordinateurs de bureau que pour les \u00e9crans plus petits.<\/li>\n<\/ul>\n
Cependant, un en-t\u00eate \u00e9pingl\u00e9 n’est pas une panac\u00e9e pour am\u00e9liorer l’UX, et il y a quelques inconv\u00e9nients \u00e0 les utiliser :<\/p>\n
- \n
- Nous en parlons bri\u00e8vement, mais pour les \u00e9crans de toutes tailles, vous devrez allouer de l’espace \u00e0 votre en-t\u00eate.<\/li>\n
- Un en-t\u00eate \u00e9pingl\u00e9 prendra naturellement le pas sur le reste de votre contenu, car ses propres \u00e9l\u00e9ments d\u00e9tourneront le regard du corps de la page.<\/li>\n
- Le d\u00e9veloppement d’un bon en-t\u00eate\u00e9pingl\u00e9 demande plus de travail, car vous devez le mettre en \u0153uvre, vous assurer qu’il fonctionne dans diff\u00e9rents navigateurs et v\u00e9rifier qu’il n’y a pas de bogues sur les \u00e9crans plus petits.<\/li>\n<\/ul>\n
Cependant, si vous r\u00e9fl\u00e9chissez \u00e0 vos choix de conception, aux besoins des utilisateurs et aux objectifs du site, vous pouvez att\u00e9nuer ou supprimer tous ces inconv\u00e9nients, tout en conservant les bons points. L’un des moyens d’y parvenir est de recourir \u00e0 des extensions WordPress.<\/p>\n
3 plugins pour vous aider \u00e0 cr\u00e9er des en-t\u00eates \u00e9pingl\u00e9s<\/h2>\n
Au cours des prochaines sections, nous pr\u00e9senterons quelques-uns des principales extensions d’en-t\u00eates \u00e9pingl\u00e9s pour WordPress. Plus tard, nous verrons si ce type de solution vous convient. Quoi qu’il en soit, une extension peut vous aider \u00e0 mettre en \u0153uvre une fonctionnalit\u00e9 sans avoir besoin de code, ce qui est pr\u00e9cieux si votre th\u00e8me<\/a> ne l’inclut pas.<\/p>\n
De plus, l’extension vous permet de tirer parti de l’exp\u00e9rience d’un expert en mati\u00e8re de conception et de d\u00e9veloppement. Les d\u00e9veloppeurs feront certains des choix techniques les plus importants pour vous, et les int\u00e9greront dans une interface utilisateur intuitive et facile \u00e0 utiliser.<\/p>\n
1. Sticky Menu & Sticky Header<\/h3>\n
L’extension Sticky Menu & Sticky Header<\/a> de Webfactory est un bon premier choix, en raison de sa richesse de fonctionnalit\u00e9s, de sa flexibilit\u00e9 utile et de son prix abordable.<\/p>\n
L’extension Sticky Menu & Sticky Header.<\/figcaption><\/figure>\n L’int\u00e9r\u00eat de cette extension est que vous pouvez faire en sorte que n’importe quel \u00e9l\u00e9ment de votre site colle \u00e0 l’\u00e9cran. Cela peut \u00eatre utile \u00e0 bien des \u00e9gards, mais cela signifie que la mise en \u0153uvre d’un en-t\u00eate \u00e9pingl\u00e9 est un jeu d’enfant.<\/p>\n
L’extension est \u00e9galement livr\u00e9e avec une s\u00e9rie d’options puissantes pour vous aider \u00e0 mettre en \u0153uvre un en-t\u00eate \u00e9pingl\u00e9 :<\/p>\n
- \n
- Vous pouvez d\u00e9finir le niveau de positionnement \u00ab sup\u00e9rieur \u00bb que vous souhaitez. Cela signifie que vous pouvez ajouter de l’espace \u00e0 la zone situ\u00e9e au-dessus de l’en-t\u00eate pour r\u00e9pondre \u00e0 vos objectifs de conception.<\/li>\n
- Il existe \u00e9galement d’autres options de positionnement, comme l’utilisation de la propri\u00e9t\u00e9 CSS z-index<\/a> pour concevoir votre site \u00ab d’avant en arri\u00e8re \u00bb<\/li>\n
- Vous pouvez activer l’en-t\u00eate \u00e9pingl\u00e9 uniquement sur les pages que vous s\u00e9lectionnez, ce qui peut s’av\u00e9rer utile si vous avez des pages de destination<\/a> ou d’autres contenus inadapt\u00e9s.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header comprend \u00e9galement un mode de d\u00e9bogage, pour vous aider \u00e0 corriger tout \u00e9l\u00e9ment \u00ab non adh\u00e9sif \u00bb. Le mode dynamique vous aidera \u00e9galement \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s aux conceptions responsives.<\/p>\n
La meilleure nouvelle est que Sticky Menu & Sticky Header est gratuit \u00e0 t\u00e9l\u00e9charger et \u00e0 utiliser. De plus, il existe une version premium<\/a> qui vous d\u00e9barrasse d’une grande partie du savoir-faire technique dont vous avez besoin.<\/p>\n
Avec la version gratuite de l’extension, vous devrez conna\u00eetre le s\u00e9lecteur de l’\u00e9l\u00e9ment afin de le sp\u00e9cifier dans les options. Cependant, la version premium (49-199 $ par an) offre un s\u00e9lecteur d’\u00e9l\u00e9ment visuel pour contourner cela.<\/p>\n
2. Options for Twenty Twenty-One<\/h3>\n
Bien que nous ne recommanderions pas un th\u00e8me WordPress par d\u00e9faut pour la plupart des sites ax\u00e9s sur la client\u00e8le, ils en ont suffisamment dans le coffre pour les blogs et les types de sites similaires.<\/p>\n
Twenty Twenty-One<\/a> est l’un des th\u00e8mes par d\u00e9faut les plus remarquables selon nous, mais il lui manque la fonctionnalit\u00e9 d’en-t\u00eate \u00e9pingl\u00e9. Si vous souhaitez ajouter cette fonctionnalit\u00e9, l’extension Options for Twenty Twenty-One<\/a> pourrait r\u00e9aliser ce dont vous avez besoin.<\/p>\n
L’extension Options for Twenty Twenty-One.<\/figcaption><\/figure>\n Cette \u00e9dition de l’extension est l’une des nombreuses. Chaque th\u00e8me par d\u00e9faut r\u00e9cent poss\u00e8de une version, mais il n’y en a pas encore une pour Twenty Twenty-Two<\/a>. Quoi qu’il en soit, la fonctionnalit\u00e9 de base de l’extension offre de nombreux extras :<\/p>\n
- \n
- L’outil FSE (Full Site Editing)<\/a> est pr\u00eat pour son d\u00e9ploiement complet.<\/li>\n
- Vous \u00eates en mesure de modifier la taille de la police pour le corps du texte, de supprimer le soulignement des hyperliens et d’autres personnalisations simples.<\/li>\n
- Vous pouvez travailler avec les largeurs maximales des conteneurs et des \u00e9l\u00e9ments, sans avoir besoin de code.<\/li>\n<\/ul>\n
Il y a beaucoup d’autres options pour votre navigation, votre contenu, votre pied de page et votre en-t\u00eate. Pour ce dernier, vous pouvez le cacher de la vue, le rendre pleine largeur, ajouter une image et une couleur d’arri\u00e8re-plan<\/a>, ainsi que de nombreuses autres modifications.<\/p>\n
Alors que l’extension de base est gratuite<\/a>, vous avez besoin d’une mise \u00e0 niveau premium (25-50 $)<\/a> pour acc\u00e9der aux options d’en-t\u00eate \u00e9pingl\u00e9. Cela vous permet de r\u00e9gler les param\u00e8tres des en-t\u00eates mobiles et de bureau \u00e0 partir de la personnalisation de WordPress :<\/p>\n
La personnalisation de WordPress, montrant les options d’en-t\u00eate \u00e9pingl\u00e9.<\/figcaption><\/figure>\n \u00c9tant donn\u00e9 son nom, vous ne devriez pas vous attendre \u00e0 ce que cette extension fonctionne avec un autre th\u00e8me que Twenty Twenty-One (ou toute autre \u00ab saveur \u00bb que vous choisissez.) Cependant, si vous utilisez ce th\u00e8me par d\u00e9faut et ne voulez pas coder, il sera id\u00e9al pour vous aider \u00e0 ajouter un en-t\u00eate \u00e9pingl\u00e9 \u00e0 votre site.<\/p>\n
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme \u2013 myStickymenu<\/h3>\n
Voici une extension qui joue cartes sur table. L’extension myStickymenu<\/a> de Premio offre presque tout ce que vous voudrez inclure dans votre propre en-t\u00eate \u00e9pingl\u00e9, et offre une grande quantit\u00e9 de fonctionnalit\u00e9s.<\/p>\n
L’extension myStickymenu.<\/figcaption><\/figure>\n Il poss\u00e8de un nombre \u00e9tonnant d’avis positifs sur le r\u00e9pertoire d’extensions WordPress<\/a>\u00a0– 799 avis cinq \u00e9toiles pour une moyenne de 4,9. Cela est d\u00fb en partie \u00e0 l’ensemble complet de fonctionnalit\u00e9s \u00e0 votre disposition :<\/p>\n
- \n
- Elle offre une souplesse d’utilisation. Par exemple, vous pouvez cr\u00e9er une barre de bienvenue ainsi qu’un menu \u00e9pingl\u00e9, et un en-t\u00eate.<\/li>\n
- L’extension s’adapte \u00e0 la r\u00e9activit\u00e9 de votre site. Cela signifie que vous n’aurez pas besoin d’impl\u00e9menter plus de fonctionnalit\u00e9s en utilisant du code.<\/li>\n
- En fait, l’extension ne n\u00e9cessite pas que vous sachiez coder pour l’utiliser pleinement.<\/li>\n
- L’extension myStickymenu est compatible avec un certain nombre d’extensions de construction de pages de premier plan, telles que Elementor<\/a>, Beaver Builder<\/a>, Gutenberg<\/a>, Divi Builder<\/a>, et bien d’autres.<\/li>\n<\/ul>\n
Vous disposez \u00e9galement d’un certain nombre d’options de personnalisation pour faire fonctionner votre en-t\u00eate \u00e9pingl\u00e9 comme vous le souhaitez. Par exemple, vous pouvez choisir de faire un en-t\u00eate partiellement persistant, modifier des aspects simples tels que les couleurs d’arri\u00e8re-plan, les choix typographiques, et plus encore.<\/p>\n
De plus, en raison des diff\u00e9rentes fa\u00e7ons dont vous pouvez pr\u00e9senter votre en-t\u00eate \u00e9pingl\u00e9 (comme les options de menu et de barre de bienvenue), vous pouvez choisir comment elles s’affichent, et o\u00f9, sur votre site.<\/p>\n
Bien que la version gratuite de myStickymenu puisse suffire \u00e0 vos besoins, il existe \u00e9galement une version premium (25-99 $ par an.) Celle-ci offre davantage de moyens de d\u00e9sactiver votre en-t\u00eate \u00e9pingl\u00e9 dans des conditions sp\u00e9cifiques, des comptes \u00e0 rebours, la possibilit\u00e9 d’ajouter plusieurs barres de bienvenue et quelques options de personnalisation suppl\u00e9mentaires.<\/p>\n
Comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 dans WordPress<\/h2>\n
Dans la suite de ce tutoriel, nous allons vous montrer comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 dans WordPress. Il y a deux approches possibles, et nous allons les couvrir toutes les deux. Cependant, notre premi\u00e8re \u00e9tape vous aidera \u00e0 prendre cette d\u00e9cision.<\/p>\n
\u00c0 partir de l\u00e0, vous travaillerez sur votre propre en-t\u00eate \u00e9pingl\u00e9 en utilisant votre m\u00e9thode pr\u00e9f\u00e9r\u00e9e, puis vous appliquerez certains de nos conseils pour rendre le v\u00f4tre plus efficace et utilisable \u00e0 l’avenir.<\/p>\n
1. D\u00e9cidez comment vous allez cr\u00e9er votre en-t\u00eate \u00e9pingl\u00e9<\/h3>\n
L’une des raisons pour lesquelles WordPress est si flexible<\/a> pour toutes sortes d’utilisateurs est due \u00e0 son \u00e9cosyst\u00e8me d’extensions et \u00e0 son extensibilit\u00e9 open source. Ainsi, vous pouvez choisir une solution standard ou cr\u00e9er la v\u00f4tre<\/p>\n
Votre premi\u00e8re t\u00e2che consiste \u00e0 d\u00e9cider si vous voulez utiliser une extension ou vous plonger dans le code pour mettre en \u0153uvre votre en-t\u00eate \u00e9pingl\u00e9. D\u00e9cortiquons les deux solutions :<\/p>\n
- \n
- Extensions.<\/strong> Il s’agit d’une m\u00e9thode approuv\u00e9e par WordPress<\/a>, surtout si vous n’avez pas les connaissances techniques en main. Elle offre une certaine souplesse, mais vous \u00eates \u00e0 la merci de ce que le d\u00e9veloppeur juge important, et de sa capacit\u00e9 \u00e0 coder.<\/li>\n
- Le codage.<\/strong> Si vous avez une vision claire en t\u00eate, vous pouvez coder un en-t\u00eate \u00e9pingl\u00e9 pour votre site. Bien s\u00fbr, vous aurez besoin d’une expertise technique<\/a> pour y parvenir (principalement CSS<\/a>), mais les r\u00e9sultats seront exactement ceux que vous souhaitez. Cependant, vous aurez plus de maintenance potentielle \u00e0 effectuer, et son succ\u00e8s d\u00e9pendra de vos propres capacit\u00e9s \u00e0 coder.<\/li>\n<\/ul>\n
Nous dirions que pour la plupart des utilisateurs de WordPress, une extension sera la solution id\u00e9ale pour cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9. Il s’int\u00e8gre bien \u00e0 la plateforme et est plus facile \u00e0 d\u00e9panner si vous rencontrez des probl\u00e8mes. Cependant, dans les prochaines \u00e9tapes, nous couvrirons une solution de codage ainsi que l’option de l’extension.<\/p>\n
2. Choisissez si vous allez modifier votre th\u00e8me actuel ou en s\u00e9lectionner un d\u00e9di\u00e9<\/h3>\n
L’aspect suivant \u00e0 prendre en compte est de savoir si vous modifiez votre th\u00e8me actuel<\/a> ou si vous en choisissez un qui poss\u00e8de d\u00e9j\u00e0 la fonctionnalit\u00e9 d’en-t\u00eate \u00e9pingl\u00e9 dans son jeu de fonctions. C’est important si votre th\u00e8me n’a pas la fonctionnalit\u00e9 n\u00e9cessaire pour g\u00e9rer un en-t\u00eate \u00e9pingl\u00e9.<\/p>\n
De nombreux th\u00e8mes et extensions de construction de pages incluent une option d’en-t\u00eate \u00e9pingl\u00e9, en raison des avantages qu’elle pr\u00e9sente et pour vous offrir une certaine souplesse de conception. Vous constaterez que certains des th\u00e8mes et extensions les plus grands et les plus polyvalents proposent cette option en standard, comme Elementor<\/a>, Astra<\/a>, Divi, Avada et bien d’autres.<\/p>\n
L’option d’en-t\u00eate \u00e9pingl\u00e9 dans Elementor.<\/figcaption><\/figure>\n Pour prendre cette d\u00e9cision, vous devrez tenir compte de quelques \u00e9l\u00e9ments concernant votre th\u00e8me et votre site actuels :<\/p>\n
- \n
- Votre site a-t-il d\u00e9j\u00e0 l’apparence que vous souhaitez, ou a-t-il besoin d’un rafra\u00eechissement ?<\/em><\/li>\n
- Votre th\u00e8me actuel est-il facile \u00e0 personnaliser sous le capot ?<\/em> La documentation du d\u00e9veloppeur devrait vous le dire.<\/li>\n
- Souhaitez-vous une impl\u00e9mentation complexe de l’en-t\u00eate \u00e9pingl\u00e9 ou une impl\u00e9mentation plus simple ?<\/em><\/li>\n<\/ul>\n
En fonction des r\u00e9ponses que vous donnerez ici, vous choisirez l’un ou l’autre. Si vous avez besoin d’un nouveau th\u00e8me, vous pouvez tout aussi bien en choisir un qui offre l’impl\u00e9mentation d’un en-t\u00eate \u00e9pingl\u00e9. Toutefois, si vous souhaitez conserver votre th\u00e8me actuel et qu’il ne dispose pas encore de la fonctionnalit\u00e9 d’en-t\u00eate \u00e9pingl\u00e9, vous devrez retrousser vos manches et suivre l’une des sous-\u00e9tapes suivantes.<\/p>\n
2a. Utiliser une extension avec un th\u00e8me sp\u00e9cifique<\/h4>\n
Si vous n’avez pas d’exp\u00e9rience en d\u00e9veloppement, nous vous recommandons de choisir une extension pour ajouter la fonctionnalit\u00e9 d’en-t\u00eate collant \u00e0 votre site. Il y a trop de variables que vous devez prendre en compte, construire et maintenir. En revanche, une extension aura d\u00e9j\u00e0 une base de code qui fait un clin d’\u0153il \u00e0 ces \u00e9l\u00e9ments, elle offrira donc une option presque id\u00e9ale pour la majorit\u00e9 des circonstances.<\/p>\n
Pour cette partie du tutoriel, nous allons utiliser l’extension myStickymenu, car elle offre un ensemble de fonctionnalit\u00e9s riches et compl\u00e8tes pour la majorit\u00e9 des cas d’utilisation. Toutefois, l’utilisation g\u00e9n\u00e9rale sera la m\u00eame pour la plupart des extensions que vous utiliserez.<\/p>\n
Une fois que vous aurez install\u00e9 et activ\u00e9 votre extension<\/a>, vous devrez vous rendre \u00e0 l’endroit o\u00f9 se trouvent les options du th\u00e8me. Pour certaines extensions, cela se fera dans la personnalisation de WordPress ; pour d’autres, dans un panneau d’administration d\u00e9di\u00e9. Ici, vous utiliserez un panneau d’administration personnalis\u00e9 sur myStickymenu > Tableau de bord<\/strong>\u00a0dans WordPress :<\/p>\n
Le panneau d’administration de myStickymenu dans WordPress.<\/figcaption><\/figure>\n Cependant, l’\u00e9cran par d\u00e9faut affiche les r\u00e9glages de la barre de bienvenue, ce que nous ne voulons pas pour ce tutoriel. En tant que tel, cliquez sur le bouton \u00e0 bascule pour d\u00e9sactiver la barre, et cliquez sur l’\u00e9cran des R\u00e9glages de Sticky menu <\/strong>:<\/p>\n
L’\u00e9cran des r\u00e9glages de Sticky menu.<\/figcaption><\/figure>\n Bien qu’il y ait beaucoup d’options ici, vous n’avez besoin que du panneau Sticky Class<\/strong>. Une fois que vous avez activ\u00e9 l’en-t\u00eate \u00e9pingl\u00e9, saisissez la balise HTML appropri\u00e9e pour votre en-t\u00eate dans le champ correspondant qui co\u00efncide avec le menu d\u00e9roulant Autre classe ou ID<\/strong>:<\/p>\n
Modification de la balise de s\u00e9lection HTML dans l’extension myStickymenu.<\/figcaption><\/figure>\n Une fois que vous aurez enregistr\u00e9 vos modifications, celles-ci s’appliqueront \u00e0 votre site. \u00c0 partir de l\u00e0, vous pouvez examiner certaines des fonctionnalit\u00e9s de style. Par exemple, vous pouvez d\u00e9finir un effet de transition en fondu ou en glissement, d\u00e9finir l’indice z<\/strong>, travailler avec des opacit\u00e9s, des couleurs et des temps de transition – ainsi qu’une foule d’autres options.<\/p>\n
2b. \u00c9crivez du code pour cr\u00e9er votre en-t\u00eate \u00e9pingl\u00e9<\/h4>\n
Il va presque sans dire que cette section est destin\u00e9e \u00e0 ceux qui ont une exp\u00e9rience du d\u00e9veloppement. Vous verrez plus tard que le code lui-m\u00eame est si simple qu’il est difficile d’y croire. Cependant, \u00e9tant donn\u00e9 le travail suppl\u00e9mentaire, la maintenance et l’entretien g\u00e9n\u00e9ral pour cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 personnalis\u00e9, vous devrez faire appel \u00e0 d’autres aspects de votre exp\u00e9rience \u00e9galement.<\/p>\n
Toutefois, avant de commencer, vous aurez besoin des \u00e9l\u00e9ments suivants :<\/p>\n
- \n
- Un \u00e9diteur de code d\u00e9cent<\/a>, bien que dans ce cas (et selon l’impl\u00e9mentation) vous pourriez utiliser un \u00e9diteur de texte du syst\u00e8me d’exploitation par d\u00e9faut.<\/li>\n
- Vous devrez avoir acc\u00e8s aux fichiers de votre site<\/a>, que vous devriez sauvegarder<\/a>, puis t\u00e9l\u00e9charger dans un environnement de d\u00e9veloppement WordPress local<\/a>.<\/li>\n<\/ul>\n
Il est inutile de r\u00e9p\u00e9ter que vous ne voulez pas travailler sur les fichiers de votre site en production. Travaillez plut\u00f4t dans un environnement de staging<\/a> ou une installation locale<\/a>, puis t\u00e9l\u00e9versez les fichiers sur votre serveur r\u00e9el apr\u00e8s avoir test\u00e9 les choses.<\/p>\n
Vous voudrez \u00e9galement utiliser un th\u00e8me enfant<\/a> pour cela, car vous apportez des modifications personnalis\u00e9es \u00e0 votre th\u00e8me parent. Cela vous permet d’organiser votre code et de vous assurer que toutes les modifications restent (litt\u00e9ralement) en place si le th\u00e8me re\u00e7oit une mise \u00e0 jour.<\/p>\n
Mise en \u0153uvre d’un en-t\u00eate \u00e9pingl\u00e9 \u00e0 l’aide du code : Trouver les balises d’en-t\u00eate correctes<\/h4>\n
Avec tout cela en t\u00eate, vous pouvez commencer. Le premier travail consiste \u00e0 d\u00e9couvrir les bonnes balises HTML pour votre navigation. Le r\u00e9sultat ici d\u00e9pendra du th\u00e8me que vous utilisez, bien que la balise header<\/strong> soit une valeur s\u00fbre dans la plupart des cas. La meilleure fa\u00e7on de le savoir est d’utiliser les outils de d\u00e9veloppement de votre navigateur<\/a> et de s\u00e9lectionner l’en-t\u00eate :<\/p>\n
L’outil Inspecter l’\u00e9l\u00e9ment montrant le site Kinsta et la balise.<\/figcaption><\/figure>\n Vous constaterez probablement que ce n’est pas aussi simple qu’une seule balise, nous vous sugg\u00e9rons donc de jeter un coup d’\u0153il \u00e0 la documentation de votre th\u00e8me (ou de parler directement avec le d\u00e9veloppeur) afin de trouver les balises<\/a> dont vous avez besoin si vous avez des difficult\u00e9s.<\/p>\n
Mise en \u0153uvre d’un en-t\u00eate \u00e9pingl\u00e9 \u00e0 l’aide de code : Travailler avec vos feuilles de style<\/h4>\n
Ensuite, vous devez cr\u00e9er ou ouvrir un fichier style.css<\/strong> dans le r\u00e9pertoire de votre th\u00e8me enfant. Ce fichier ajoutera votre CSS \u00e0 celui de l’installation principale et, lorsque les balises se r\u00e9p\u00e8tent, il le remplacera.<\/p>\n
Dans ce fichier, ajoutez les m\u00e9tadonn\u00e9es typiques<\/a> dont vous avez besoin pour enregistrer le th\u00e8me enfant :<\/p>\n
Cr\u00e9ation d’un th\u00e8me enfant \u00e0 l’aide de Onivim2.<\/figcaption><\/figure>\n Ensuite, vous voudrez ajouter du code pour activer votre en-t\u00eate \u00e9pingl\u00e9. Cela n\u00e9cessitera une certaine connaissance de l’h\u00e9ritage CSS, et selon le th\u00e8me que vous utilisez, cela pourrait \u00eatre une exp\u00e9rience exasp\u00e9rante.<\/p>\n
Par exemple, le th\u00e8me Twenty Twenty-Two utilise deux balises d’en-t\u00eate, et il peut \u00eatre difficile de trouver le bon m\u00e9lange de CSS pour que votre code fonctionne sur le bon \u00e9l\u00e9ment. Et ce, m\u00eame avec la bo\u00eete de dialogue des classes de mod\u00e8les dans l’\u00e9diteur de blocs (si vous utilisez la fonctionnalit\u00e9 FSE<\/a>) :<\/p>\n
L’inspecteur Inspector plusieurs balises d’en-t\u00eate pour le th\u00e8me Twenty Twenty-Two.<\/figcaption><\/figure>\n Quoi qu’il en soit, le code dont vous aurez besoin sera le m\u00eame :<\/p>\n
Akhil Arjun<\/a> propose une solution en deux lignes pour cela :<\/p>\n
\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nCependant, vous pouvez \u00e9galement envisager d’utiliser la propri\u00e9t\u00e9 position : fixed<\/strong>, qui utilise quelques lignes de code suppl\u00e9mentaires :<\/p>\n
\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nCeci utilise z-index<\/strong> pour amener l’en-t\u00eate \u00e0 l’avant de la pile, puis un attribut fixe pour le faire rester en haut de l’\u00e9cran.<\/p>\n
Notez que vous devrez peut-\u00eatre ajouter une nouvelle classe ici, afin d’appliquer l’en-t\u00eate \u00e9pingl\u00e9. Quoi qu’il en soit, ceci devrait mettre en \u0153uvre les bases de votre en-t\u00eate \u00e9pingl\u00e9. Une fois que vous l’aurez mis au point, vous voudrez travailler davantage sur la conception pour qu’il s’int\u00e8gre au reste de votre site.<\/p>\n
Conseils pour rendre vos en-t\u00eates \u00e9pingl\u00e9s plus efficaces<\/h2>\n
Une fois que vous avez trouv\u00e9 une m\u00e9thode pour cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9, vous devez trouver comment le perfectionner. Il existe de nombreuses fa\u00e7ons d’am\u00e9liorer le design de base et de s’assurer qu’il r\u00e9pond aux besoins des visiteurs de votre site.<\/p>\n
Une bonne analogie pour votre propre en-t\u00eate \u00e9pingl\u00e9 est de s’assurer qu’il est comme un bon arbitre sportif. La plupart du temps, vous ne saurez pas qu’ils sont l\u00e0. Cependant, lorsqu’un joueur ou un entra\u00eeneur a besoin d’eux, ils passent un appel et deviennent pr\u00e9sents.<\/p>\n
Votre en-t\u00eate \u00e9pingl\u00e9 devrait faire de m\u00eame – rester dans l’ombre, ou hors de l’esprit jusqu’\u00e0 ce que l’utilisateur en ait besoin. Vous pouvez y parvenir gr\u00e2ce \u00e0 quelques r\u00e8gles empiriques que vous pouvez (comme toujours) choisir d’enfreindre si la conception l’exige :<\/p>\n
- \n
- Restez compact. <\/strong>L’espace sur l’\u00e9cran va \u00eatre limit\u00e9, alors essayez de garder l’en-t\u00eate petit. Vous pouvez mettre en place une solution o\u00f9 votre en-t\u00eate s’adapte de mani\u00e8re dynamique, en fonction de la zone du site sur laquelle il figure.<\/li>\n
- Utilisez des en-t\u00eates et des menus cach\u00e9s sur les petits \u00e9crans.<\/strong> Par extension, vous pourriez choisir de masquer un menu, un peu comme dans l’exemple pr\u00e9c\u00e9dent de Hammerhead. Cela permet de garder l’en-t\u00eate compact, et rejoint le point suivant.<\/li>\n
- Veillez \u00e0 ne pas introduire de distractions.<\/strong> Plus les \u00e9l\u00e9ments sont nombreux \u00e0 l’\u00e9cran, plus ils se disputent l’attention. Si l’en-t\u00eate \u00e9pingl\u00e9 n’a pas besoin de montrer un \u00e9l\u00e9ment, retirez-le – le contenu du corps du texte l’appr\u00e9ciera, tout comme vos mesures.<\/li>\n
- Offrez du contraste. <\/strong>Il s’agit d’une astuce du manuel d’appel \u00e0 l’action (Call To Action ou CTA). Si vous utilisez le contraste pour l’en-t\u00eate \u00e9pingl\u00e9 dans son ensemble, et ses \u00e9l\u00e9ments individuels, vous pouvez attirer l’\u0153il l\u00e0 o\u00f9 vous en avez besoin – ou le pousser ailleurs.<\/li>\n<\/ul>\n
Dans l’ensemble, votre en-t\u00eate \u00e9pingl\u00e9 ne fera que ce dont vous avez besoin, et pas plus. Parfois, vous aurez besoin de garder les choses au minimum, d’autres fois, vous le remplirez de liens, de logos et de formulaires d’inscription<\/a>. Dans tous les cas, si vous gardez l’UX et l’UI \u00e0 l’esprit, vous prendrez toujours une d\u00e9cision ax\u00e9e sur l’utilisateur.<\/p>\n\n
R\u00e9sum\u00e9<\/h2>\n
La convivialit\u00e9 et l’UX de votre site sont si importantes qu’elles devraient \u00eatre les premi\u00e8res, deuxi\u00e8mes et troisi\u00e8mes choses que vous clouez lorsque vous le concevez et le construisez. La navigation de votre site n’en est qu’un aspect, mais vous devez trouver la meilleure fa\u00e7on de permettre \u00e0 un utilisateur de se d\u00e9placer sur votre site sans probl\u00e8me. Un en-t\u00eate \u00e9pingl\u00e9 est un bon moyen d’y parvenir.<\/p>\n
- Utilisez des en-t\u00eates et des menus cach\u00e9s sur les petits \u00e9crans.<\/strong> Par extension, vous pourriez choisir de masquer un menu, un peu comme dans l’exemple pr\u00e9c\u00e9dent de Hammerhead. Cela permet de garder l’en-t\u00eate compact, et rejoint le point suivant.<\/li>\n
- Vous devrez avoir acc\u00e8s aux fichiers de votre site<\/a>, que vous devriez sauvegarder<\/a>, puis t\u00e9l\u00e9charger dans un environnement de d\u00e9veloppement WordPress local<\/a>.<\/li>\n<\/ul>\n
- Votre th\u00e8me actuel est-il facile \u00e0 personnaliser sous le capot ?<\/em> La documentation du d\u00e9veloppeur devrait vous le dire.<\/li>\n
- Le codage.<\/strong> Si vous avez une vision claire en t\u00eate, vous pouvez coder un en-t\u00eate \u00e9pingl\u00e9 pour votre site. Bien s\u00fbr, vous aurez besoin d’une expertise technique<\/a> pour y parvenir (principalement CSS<\/a>), mais les r\u00e9sultats seront exactement ceux que vous souhaitez. Cependant, vous aurez plus de maintenance potentielle \u00e0 effectuer, et son succ\u00e8s d\u00e9pendra de vos propres capacit\u00e9s \u00e0 coder.<\/li>\n<\/ul>\n
- Extensions.<\/strong> Il s’agit d’une m\u00e9thode approuv\u00e9e par WordPress<\/a>, surtout si vous n’avez pas les connaissances techniques en main. Elle offre une certaine souplesse, mais vous \u00eates \u00e0 la merci de ce que le d\u00e9veloppeur juge important, et de sa capacit\u00e9 \u00e0 coder.<\/li>\n
- Vous pouvez activer l’en-t\u00eate \u00e9pingl\u00e9 uniquement sur les pages que vous s\u00e9lectionnez, ce qui peut s’av\u00e9rer utile si vous avez des pages de destination<\/a> ou d’autres contenus inadapt\u00e9s.<\/li>\n<\/ul>\n
- Il est possible d’offrir de la valeur \u00e0 l’utilisateur, tant pour les ordinateurs de bureau que pour les \u00e9crans plus petits.<\/li>\n<\/ul>\n
- Il peut y avoir une fonctionnalit\u00e9 de recherche<\/a> ici, surtout si vous avez un grand site avec beaucoup de contenu dans diff\u00e9rents domaines.<\/li>\n