Comment créer un en-tête collant dans WordPress

Au cours de la dernière décennie, l'accent a été de plus en plus mis sur la navigation sur les sites Web. Cela a coïncidé avec l'utilisation généralisée des smartphones qui ont des options de navigation limitées par rapport à l'interface de bureau traditionnelle. La différence dans la conception du site Web est plus qu'évidente si vous regardez une comparaison entre un site de 2011 et celui qui a été créé maintenant.

L'une des principales méthodes utilisées pour reconfigurer les mises en page du site était les éléments collants. Bien nommés, ces éléments collent à la page sur ses bordures lorsque vous vous déplacez autour d'elle, c'est-à-dire qu'ils conservent leur position d'origine (pensez aux volets figés dans Excel, et vous aurez une bonne idée de son fonctionnement).

Haut, bas, gauche et droite

Les éléments collants sont généralement réservés aux menus, aux en-têtes et/ou aux barres d'état ; ceux-ci apportent une grande flexibilité au visiteur car il peut instantanément passer d'une page à l'autre sans avoir à revenir en arrière. De plus, tous ces éléments sont positionnés sur les bordures de page supérieure et inférieure pour commencer, ce qui fonctionne bien avec l'ensemble du principe. Il serait extrêmement difficile de construire une page autour d'un élément collant positionné au centre d'une page.

Rarement peuvent-ils également être trouvés sur les bordures gauche et droite, avec les mêmes fonctions, juste une disposition différente. Dans ces cas, ils seront masqués jusqu'à ce que vous les survoliez avec votre curseur ou que vous les touchiez à l'écran.

Économiseurs d'espace

La chose intéressante à propos des éléments collants est qu'ils vous permettent d'économiser de l'espace sur la page et sur le site dans son ensemble - ils peuvent en fait être utilisés pour remplacer des pages entières. En effet, ils laissent intact le corps principal du site et font des bordures des outils multifonctionnels qui prennent en charge une grande partie des fonctions de la page. Pensez un instant à la mise en page moyenne de votre site.

Le haut est réservé aux menus qui comportent des pages triées par catégories désignées et une barre de recherche. Ceux-ci sont tous deux cachés derrière une barre lors du défilement et se développent en cas de besoin. Si ce n'était pas le cas, seule l'arborescence de menu occuperait toute la partie supérieure de votre page et ne « suivrait » pas lors du défilement vers le bas, de sorte que votre visiteur serait obligé de se déplacer constamment de haut en bas juste pour naviguer dans les pages. .

D'autre part, un élément inférieur collant peut remplacer assez facilement une page d'assistance entière - ajoutez simplement l'e-mail et/ou le numéro avec un bouton de chat, et vous êtes prêt à partir. Vous offrez à vos visiteurs un moyen constamment présent de vous contacter. Encore une fois, l'application pratique est fantastique : un client parcourt vos pages produits, a une question et peut instantanément trouver ce dont il a besoin en cliquant sur le bouton de chat.

Créer des éléments collants

Lorsque nous parlons de WordPress, il existe toujours de nombreuses façons de faire tout ce à quoi vous pouvez penser, et il en va de même ici. Vous pouvez créer manuellement des éléments collants dans l'éditeur par défaut, ou vous pouvez utiliser un plugin qui remplace le besoin de codage par une interface conviviale pour les débutants. Le contraste entre les résultats finaux est minime, mais la façon dont vous y arrivez fait toute la différence. Pour notre exemple, nous utiliserons des en-têtes collants car ils sont de loin l'élément le plus courant qui est fait pour coller.

Création manuelle d'un en-tête collant

La création manuelle d'un en-tête collant dans WordPress nécessite l'utilisation de code CSS. Sans devenir trop technique, le code CSS est quelque chose que nous pouvons ajouter à pratiquement n'importe quel élément d'une page pour modifier ses propriétés. Lors du codage manuel, c'est notre principale méthode de personnalisation. L'utilisation de CSS nécessite d'abord que l'en-tête soit présent sur une page, alors assurez-vous qu'il y a quelque chose à personnaliser en premier lieu. WordPress simplifie ce processus car même l'éditeur par défaut offre la possibilité de l'ajouter en un clic.

Une fois que vous avez un en-tête avec lequel travailler, vous devez accéder à la console. Allez simplement dans la section apparence qui se trouve sur le côté gauche de votre tableau de bord, choisissez « personnaliser », puis cliquez sur « CSS supplémentaire ». Avec la console maintenant ouverte, vous devez saisir le code qui rend votre en-tête collant :

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Le code ci-dessus n'est qu'un exemple de ce à quoi il devrait généralement ressembler, pas une commande définitive. Gardez à l'esprit que la première ligne est toujours spécifique à chaque site - remplacez #website-navigation par la classe CSS ou l'ID de votre en-tête de navigation avant de revenir à l'éditeur de page.

Une fois que vous avez vérifié la fonctionnalité dans la fenêtre d'aperçu de la page/de la publication, publiez simplement et vous obtenez un en-tête collant. Nous devons souligner que vous souhaiterez probablement étendre le code CSS pour englober plus que l'attribut "collant" pour un en-tête comme celui-ci - il est recommandé d'ajouter des éléments qui mettront l'en-tête en valeur visuellement, tels que les polices de couleur, la taille, indentation, etc. Comme il s'agit d'un élément permanent sur une page, il peut facilement passer inaperçu, vous devriez donc essayer de le faire ressortir.

Créer un en-tête collant avec un plugin

Il y a un énorme chevauchement entre ceux qui ont besoin d'un site Web pour leur entreprise ou leur blog et ceux qui n'ont tout simplement pas les connaissances nécessaires pour créer quelque chose qui a l'air et se sent professionnel. Heureusement avec WordPress, il y a tellement de plugins qui facilitent la vie de tout le monde ; il n'est pratiquement pas nécessaire de posséder autre chose que des connaissances logicielles de base pour atteindre vos objectifs. WP Sticky est un excellent exemple de plugin qui remplace tout le codage que nous avons couvert ci-dessus par une interface conviviale que tout le monde peut mettre rapidement en main. En même temps, il offre la même quantité de fonctionnalités que vous auriez lors de la création manuelle d'un en-tête collant. Décomposons-le.

Créer un élément

Tout comme vous devez avoir un en-tête pour commencer lorsque vous utilisez CSS, vous devez créer un élément auquel vous ajoutez ensuite l'attribut collant.

Il existe deux façons distinctes de distinguer l'élément - vous pouvez saisir la désignation dans le champ requis, ou vous pouvez sélectionner l'élément dans une fenêtre d'aperçu en cliquant dessus (cela fonctionne à merveille si vous rencontrez des difficultés pour comprendre les désignations) . Lorsque vous choisissez votre élément dans la fenêtre d'aperçu, vous verrez les désignations changeantes en haut de votre écran.

Nous avons constaté qu'après avoir travaillé avec le plugin pendant un certain temps, vous deviendrez tellement à l'aise avec lui que vous n'utiliserez presque jamais le sélecteur visuel. Les désignations deviendront familières, ce qui conduit à les saisir simplement et manuellement, ce qui vous fait gagner du temps. Jusqu'à ce que vous soyez familiarisé avec cette mesure, le sélecteur visuel sera votre meilleur ami. En fin de compte, l'une ou l'autre méthode vous mènera au même endroit - un en-tête collant sur le frontend.

Faites en sorte que ça ait l'air bien

Tous les éléments collants ne sont pas créés égaux, et le vôtre ne devrait pas non plus être un exemple banal. La section des paramètres visuels vous fournira une pléthore d'options de personnalisation avec lesquelles vous pouvez travailler pour rendre votre en-tête collant unique à tous points de vue.

La première chose dont vous devez tenir compte est le positionnement de votre élément. Puisque nous faisons un en-tête, ce sera une décision facile - nous le plaçons en haut de la page. Le positionnement est la clé d'un bon en-tête, donc si vous ne voulez pas qu'il embrasse le haut de la page, vous pouvez le déplacer vers le bas de quelques pixels pour un meilleur ajustement. De plus, si votre site utilise une barre d'outils d'administration pour les utilisateurs enregistrés, vous pouvez faire en sorte que le plug-in la vérifie automatiquement et ajuste l'en-tête en conséquence.

Nous avons un peu abordé la nécessité pour un site d'être entièrement réactif, car il existe de nombreuses façons pour les visiteurs potentiels de naviguer sur le Web. Pour rendre votre site entièrement adaptatif, vous pouvez choisir sur quels écrans l'en-tête sera collant.

Habituellement, les écrans plus petits tirent le meilleur parti des en-têtes collants, tandis que les plus grands utilisés sur les ordinateurs de bureau traditionnels qui ont plus d'options de navigation s'en passent très bien. Les tailles sont divisées en quatre groupes qui couvrent toutes les principales tailles d'écran.

Le Z-index est un paramètre facultatif qui pourrait en dérouter plus d'un à première vue. Pour cette raison et le fait qu'il s'agit d'une fonctionnalité facultative, beaucoup vont probablement l'ignorer et l'ignorer. Si tout fonctionne, vous ne regarderez probablement jamais en arrière ; cependant, s'il y a des problèmes avec l'affichage, l'index Z pourrait potentiellement être une solution rapide. Essentiellement, considérez une page comme une collection de piles où les piles du haut ont des nombres plus élevés que celles du bas. Par conséquent, si quelque chose obscurcit votre en-tête collant, essayez d'élever l'index Z (99999 est suggéré comme valeur qui fonctionne)

Avec votre en-tête collant "en haut des piles", il est temps d'être encore plus créatif en ajoutant des effets tout en faisant défiler vers le bas. Lorsque les deux options sont désactivées, l'en-tête conservera simplement sa position en haut comme un morceau découpé de la page d'origine. Vous pouvez ajouter plus d'éclat avec des effets comme le fondu enchaîné ou le glissement vers le bas. Considérez la conception visuelle globale de votre site avant d'opter pour ces types d'effets ; cependant - souvent, moins c'est plus.

Les effets visuels ne se limitent pas à ceux qui sont liés au mouvement. Vous pouvez également personnaliser l'en-tête lui-même (en plus des mouvements que vous avez effectués lors de la création de l'en-tête). L'opacité est utile si vous ne voulez pas que l'en-tête masque tout autre contenu de la page. Le régler à environ 50% rendra à la fois l'en-tête et le contenu en dessous relativement visibles.

Une fonctionnalité encore plus utile que l'opacité consiste à ajuster la plage de défilement. Dans le cas où vous avez de très longues pages comme les blogs en ont généralement, il y a un certain point dans la navigation vers le bas où avoir un en-tête collant n'a plus de sens. Ce sont les moments où c'est une bonne idée de faire décoller l'en-tête après que votre visiteur ait suffisamment descendu.

Enfin, il existe une option pour modifier la couleur d'arrière-plan de l'en-tête lorsqu'il est collant, ce qui le fait ressortir encore plus, mais en le renversant à ses valeurs d'origine lorsque l'en-tête n'est plus collant.

La toute dernière partie de l'édition visuelle nous ramène à l'édition manuelle de l'en-tête collant via CSS.

Même si vous n'avez vraiment pas besoin d'avoir des connaissances préalables en matière de codage pour utiliser avec succès WP Sticky, cela peut améliorer votre travail si vous l'utilisez. La fonctionnalité est facultative, c'est donc à vous de décider si vous souhaitez l'utiliser et dans quelle mesure.

Options avancées

La section des options avancées concerne à peu près l'exclusion, c'est-à-dire dans quels cas un en-tête collant cessera d'être collant et reviendra à la "programmation d'origine".

La configuration manuelle de la taille de l'écran où l'en-tête n'est pas collant est un pas en avant sur les quatre tailles par défaut qui vous sont présentées dans la section des paramètres visuels. Ici, vous serez aussi précis que vous le souhaitez, donc s'il y a un écran sauvage à l'avenir qui ne rentre dans aucune des tailles prédéterminées, vous pouvez établir des règles qui fonctionneront pour cela.

Rendre un en-tête non collant ne concerne pas uniquement la taille de l'écran, mais également le contenu de votre site, plus précisément la catégorisation. Vous pouvez faire en sorte que votre en-tête ne colle pas sur des pages, des publications et des types de publication désignés, des catégories spécifiques ou du contenu avec certaines balises. Toutes ces conditions peuvent être mélangées et assorties pour créer le recueil parfait lorsque l'en-tête collant est utilisé et lorsqu'il ne l'est pas.

De la même manière que vous avez choisi l'élément collant (dans notre cas, l'en-tête) au tout début, vous pouvez également choisir un élément push-up plus bas sur la page sur laquelle vous souhaitez que votre en-tête soit poussé vers le haut. Cela fera essentiellement passer votre en-tête à la bordure même de cet élément sans rembourrage ni espace entre eux.

Pour finir, lorsque vous en avez marre et que vous ne voulez plus de votre élément collant, il y a toujours la dernière option pour le supprimer entièrement. Soyez averti qu'il s'agit d'une action permanente et que toutes les personnalisations que vous avez apportées à l'élément (dans ce cas, l'en-tête) seront perdues.

Sommaire

Il est difficile de dire quelle façon de faire est la meilleure. Vous avez certainement plus d'options à votre disposition en utilisant CSS, mais c'est une solution pour très peu de gens dans l'ensemble. D'autre part, un plugin comme WP Sticky combine la facilité d'utilisation avec des fonctionnalités toujours robustes qui en font un choix parfait pour les débutants ou ceux qui ne sont toujours pas sûrs de coder à partir de zéro. La meilleure façon de créer un en-tête collant et fonctionnel est probablement de commencer par ce dernier et de vous préparer au premier.

Auteur : Matej Milohnoja

J'avais l'habitude d'écrire sur les jeux et les jeux en général, mais il est depuis passé aux tests et à l'écriture sur les logiciels de développement Web. Joue encore beaucoup de jeux, juste pour le plaisir.