sushiandbox.ru Maîtriser PC - Internet. Skype. Réseaux sociaux. Leçons sur Windows.
Bonne journée, chers lecteurs !
Comment influencent-ils chapelure sur l'optimisation des moteurs de recherche et comment les créer sur un site avec WordPress. C'est ce qui sera discuté dans l'article d'aujourd'hui. Pour l’avenir, le fil d’Ariane aide vos utilisateurs à naviguer sur votre site. Ils ont également un effet positif sur le référencement.
Les fils d'Ariane sont des indices sur le site qui montrent à l'utilisateur où il se trouve. Une sorte de chaîne créée pour la navigation.
Ils sont cliquables, ce qui signifie que le visiteur peut à tout moment accéder au "niveau" supérieur - à une sous-section ou à une section. En règle générale, le fil d'Ariane ressemble à ceci : principal - titre - sous-titre - article. Le dernier élément est très souvent supprimé, estimant que cela crée une duplication inutile.
On pense que ce nom fait référence à un conte de fées, dans lequel les enfants, en allant dans la forêt, laissaient derrière eux un chemin de miettes de pain pour la navigation. Ils étaient censés suivre ce chemin pour revenir. Une chaîne de maillons est aussi un chemin, plus on s'éloigne du site, plus il contient d'éléments. Et en effet, tout au long de cette chaîne, vous pouvez revenir à la page principale. Comme dans un conte de fées.
Comment le référencement est affecté
Utiliser le flux de navigation est considéré comme un bon comportement dans le monde optimisation du moteur de recherche.
Premièrement, cela améliore facteurs comportementaux. Et ceci, comme vous le savez, est presque l'indicateur le plus important de la qualité du site. Si la convivialité est activée bon niveau, l'utilisation et la navigation seront claires et pratiques, alors les visiteurs l'apprécieront certainement et resteront sur la ressource plus longtemps. De plus, plus les facteurs comportementaux sont bons, plus votre ressource sera élevée dans les résultats de recherche.
Deuxièmement, la présence de fil d’Ariane est déjà considérée comme un bon facteur pour le moteur de recherche. Les robots voient que le projet dispose d'un système de navigation, d'une structure, ce qui a un bon effet sur le classement.
Naturellement, la barre de navigation à elle seule ne mettra pas votre ressource en haut. Cela fonctionne en conjonction avec d’autres aspects d’un bon référencement.
Pour résumer, le fil d'Ariane aide :
- améliorer les facteurs comportementaux et la convivialité,
- rendre la structure du site claire et accessible,
- navigation facile dans les pages,
- améliorer techniquement le référencement,
- faire une reconnexion.
C'est-à-dire que l'utilisation d'un flux de navigation est strictement obligatoire pour ceux qui souhaitent que leur projet soit pratique, pratique et visité.
Types de chapelure
Oui, ils ont des variétés. Il n'y en a pas beaucoup, mais cela vaut quand même la peine de considérer ce moment.
Linéaire
La bande habituelle qui montre le chemin de la page principale à l'article. Le type de fil d’Ariane le plus courant. Nous avons juste un type de barre de navigation linéaire.
Bouton Retour
Un type de navigation très peu pratique et très courant dans les boutiques en ligne. En règle générale, les utilisateurs n'en sont pas particulièrement satisfaits et utilisent un bouton similaire dans le navigateur lui-même. Pour un site informatif, cette option est pratiquement inutile.
Hybride
Cette option combine les deux précédentes. Autrement dit, la ressource dispose à la fois d'une navigation linéaire et d'un bouton « Retour ». On peut dire que c'est un compromis qui contribue à plaire à tout le monde. Mais, comme je l'ai dit plus haut, les gens utilisent rarement le bouton « Retour », lui préférant un bouton dans le navigateur lui-même - heureusement, il en existe dans toutes les applications modernes.
En règle générale, la barre de navigation est située sur toutes les pages sauf la page principale. Dans WordPress, il s'agit de catégories, de balises, d'articles et d'autres taxonomies.
Comment créer du fil d'Ariane dans WordPress
Le moyen le plus simple de créer un flux de navigation sur WordPress et d’autres sites consiste à utiliser le HTML. Ce sera plutôt un hybride de HTML et de PHP - sinon vous devrez écrire chaque chaîne de navigation manuellement, ce qui n'est pas une tâche très agréable.
Utiliser un modèle
Il serait judicieux de choisir immédiatement un modèle avec du fil d'Ariane. Si vous envisagez simplement de créer un autre site et que vous n'avez pas encore commencé à le créer, vous devriez vous tourner vers un magasin. Modèles WordPress Et cherchez là un sujet avec cette fonction (je conseille Root).
Ce sera l’option la plus pratique car vous n’aurez pas besoin d’installer de plugins supplémentaires. Dans ce cas, vous n'avez pas besoin d'ajouter ou de modifier quelque chose manuellement, tout fonctionnera, comme on dit, immédiatement (immédiatement après l'installation).
Plugins
Vous pouvez installer la barre de navigation avec le plugin. Mais gardez à l’esprit que chaque plugin peut charger encore plus votre CMS. S'il y a autant de plugins, un nouveau nouveau peut tout simplement tout gâcher, ralentissant le site.
Yoast SEO - instructions détaillées pour la configuration des miettes
Si vous l’utilisez comme plugin SEO, j’ai d’excellentes nouvelles pour vous. Les fils d'Ariane sont présents dans la fonctionnalité, il vous suffit donc de les configurer.
Ce instruction générale ce qui devrait convenir à la plupart des utilisateurs. Il est basé sur les informations fournies par les auteurs du plugin eux-mêmes.
Ainsi, pour que le flux de navigation dans Yoast SEO fonctionne, nous devons placer le code PHP suivant dans nos fichiers modèles :
Habituellement, ce code est inséré dans des modèles de page courants - single.php ou page.php. De plus, certains utilisateurs collent ce code dans header.php – à la toute fin. Je ne sais pas si cela fonctionnera dans votre cas particulier, mais vous pouvez essayer.
Les modèles de pages généraux peuvent être modifiés via les outils WordPress intégrés. Je vais " Apparence» - « Editeur », on retrouve fichier souhaité dans la liste.
Voici le code PHP et le balisage HTML. Un utilisateur non préparé peut être confus, mais vous devez vous réunir et essayer de comprendre quoi et où.
Concrètement, dans mon thème, le fil d'Ariane est déjà fourni, juste après l'en-tête il y a une fonction qui appelle la chaîne de navigation native. Votre code sera différent, mais la signification générale reste la même.
Il est préférable de placer le fil d'Ariane juste en dessous de l'en-tête avec la fonction get_header() ; - sert juste à l'appeler. Par conséquent, il sera correct de placer le code de Yoast SEO juste en dessous.
Mais gardez à l’esprit que la personnalisation de la barre de navigation peut nécessiter un style CSS. Ils sont fournis par le plugin lui-même, mais peuvent ne pas convenir.
Vous pouvez même utiliser du fil d’Ariane dans les articles. Il vous suffit de laisser le shortcode suivant au bon endroit : .
Mais ni le code ni le shortcode ne fonctionneront si la fonctionnalité fil d’Ariane est désactivée dans le plugin lui-même. Pour l’activer, vous devez vous rendre dans les paramètres du plugin (onglet « SEO ») – affichage dans Résultats de recherche- chapelure.
Basculez le curseur sur « Activé », puis faites défiler la page et cliquez sur « Enregistrer les modifications ». À partir de maintenant, le fil d’Ariane commencera à fonctionner.
Vous pouvez les personnaliser si vous le souhaitez. Par exemple, définissez un séparateur entre les éléments, écrivez le texte d'un lien vers la page principale, des préfixes pour les taxonomies, etc.
Vous pouvez également sélectionner dernière page(ou nom du matériau) en gras. Pour ce faire, faites basculer le curseur correspondant.
Si Yoast SEO ne vous convient pas vraiment, alors vous pouvez regarder d’autres plugins qui vous permettent de créer du fil d’Ariane sur votre site. Il y en a beaucoup dans le catalogue gratuit, mais je soulignerai les options les plus populaires.
Fil d'Ariane NavXT
Un plugin simple qui peut créer un fil d'Ariane pour votre projet. Sur ce moment il compte plus de 800 000 utilisateurs actifs. Le plugin possède son propre panneau de contrôle et convient à la plupart des sites WordPress.
Presque tout peut être personnalisé dans Breadcrumb NavXT. Apparence, éléments affichés et leur ordre. Il y a beaucoup plus d'options ici que dans le même Yoast SEO (notamment en ce qui concerne la configuration de la chaîne de navigation).
Cette extension peut être installée tout à fait gratuitement depuis le répertoire WordPress. Vous pouvez le trouver par mots-clés.
Miette de pain
Une autre extension qui peut être installée directement depuis le répertoire. Contrairement au précédent, ce plugin n’a pas une audience aussi large. Seulement 10 000 utilisateurs actifs. Mais si l'on considère que beaucoup de gens préfèrent d'autres options pour créer des chaînes de navigation, alors c'est un très bon résultat.
Le plugin est simple et léger. Il a un beau design (voir capture d'écran), vous pouvez changer les couleurs. Pour une utilisation sur de petits projets, c’est largement suffisant.
Il existe également d'autres plugins. Ils sont moins populaires, mais vous pouvez toujours les essayer. Allez simplement dans le répertoire des plugins et tapez mot-clé chapelure. WordPress vous proposera immédiatement plusieurs dizaines d’options adaptées.
Conclusion
Le fil d’Ariane est un excellent moyen de naviguer sur votre site. Ils améliorent le référencement, augmentent les facteurs comportementaux et permettent aux utilisateurs de naviguer dans les pages du site.
Presque tous les sites modernes tentent d'y prêter attention. Les concepteurs de sites Web ne sont pas en reste, désormais le manque de fil d'Ariane dans le modèle est considéré comme un inconvénient très important. Quelqu'un refusera même d'acheter un tel modèle, simplement à cause de cette bagatelle apparemment insignifiante. Assurez-vous de prendre en compte ce fait et essayez de rendre votre site convivial.
Si vous souhaitez en savoir plus sur la création projets d'information pour les gains, alors je vous conseille de regarder. L'auteur parle de la création d'un site sur WordPress, d'une optimisation technique et des moteurs de recherche compétente, et surtout, des méthodes actuelles de monétisation.
Grâce au développement de CSS et CSS3 ces dernières années, nous avons atteint un point où bon nombre des anciens Solutions logicielles, qui incluent des images d'arrière-plan, peuvent désormais être entièrement créées en CSS. Dans ce didacticiel, nous verrons comment créer une séquence de liens de navigation appelée « fil d'Ariane » dans un style plat, sans avoir recours à la technique d'image d'arrière-plan auparavant populaire appelée méthode de « porte coulissante ».
Le fil d'Ariane que nous allons créer est stylisé sous forme de chevrons pour visualiser l'idée de contenu structuré. Auparavant, nous aurions utilisé image de fond V Format PNG pour créer cette forme de chevron, et maintenant avec une technique de bordure intelligente, vous pouvez créer le même effet en utilisant uniquement CSS.
Nous allons commencer par créer des liens de navigation de fil d’Ariane sous forme de liste non ordonnée. Chaque fil d'Ariane sera un élément
#crumbs ul li a ( display : block ; float : left ; height : 50px ; background : #3498db ; text-align : center ; padding : 30px 40px 0 40px ; position : relative ; margin : 0 10px 0 0 ; font-size : 20px ; décoration de texte : aucune ; couleur : #fff ; )
Le code CSS initial définit l’ancre de chaque élément de liste sur un style de rectangle bleu soigné. Le texte est centré et un remplissage égal est ajouté de tous les côtés. Afin de positionner les éléments absolument suivants, la propriété position: relative; est ajoutée à ces éléments afin que ces éléments positionnés absolument soient rendus par rapport à cet élément parent.
#crumbs ul li a:after ( content : "" ; border-top : 40px rouge uni ; border-bottom : 40px rouge uni ; border-left : 40px bleu uni ; position : absolue ; droite : -40px ; top : 0 ; )
Nous allons maintenant créer un effet chevron en CSS, qui n'était auparavant réalisable qu'à l'aide d'une image d'arrière-plan. Utilisez le sélecteur :after pour créer élément supplémentaire, qui peut être stylé individuellement. La forme triangulaire est créée à l'aide de différentes bordures CSS. Ainsi, comme vous pouvez le voir dans l'image précédente, le triangle bleu peut être créé en appliquant des bordures supérieure et inférieure pour couper la zone de revêtement. Ces bordures sont colorées en rouge pour plus de clarté, mais si elles sont transparentes, un triangle bleu en résultera. Cet effet de bordure est ensuite mis en place à l’aide d’un positionnement absolu.
Bordure supérieure : 40px solide transparent ; border-bottom : 40px solide transparent ; bordure gauche : 40px solide #3498db ;
L'effet de bordure avec les valeurs de couleur correctes créera le triangle souhaité qui donne au fil d'Ariane la forme de chevron populaire.
#crumbs ul li a:before ( content : "" ; border-top : 40px solid transparent ; border-bottom : 40px solid transparent ; border-left : 40px solid #d4f2ff ; position : absolue ; left : 0 ; top : 0 ; )
En utilisant les mêmes principes, une autre forme triangulaire peut être appliquée sur le côté gauche du fil d’Ariane. Cette fois, la couleur de la bordure est définie sur la même couleur que la couleur d'arrière-plan pour masquer certaines parties de la couleur d'arrière-plan bleue du lien.
Rembourrage : 30px 40px 0 80px ;
Au fur et à mesure que des liens sont ajoutés au HTML, la séquence de fils d'Ariane augmente, séparée par des chevrons aux formes intéressantes, grâce à l'effet de bordure CSS triangulaire et à une légère marge droite.
#crumbs ul li:premier-enfant a ( border-top-left-radius: 10px ; border-bottom-left-radius: 10px ; ) #crumbs ul li:first-child a:before ( display : none ; ) #crumbs ul li:last-child a ( padding-right : 80px ; border-top-right-radius : 10px ; border-bottom-right-radius : 10px ; ) #crumbs ul li:last-child a:after ( display : aucun ; )
Le fil d'Ariane complet peut être stylisé davantage en supprimant l'effet triangle du premier et du dernier élément avec les sélecteurs :first-child et :last-child, après quoi vous pouvez arrondir légèrement les coins avec la propriété border-radius.
#crumbs ul li a:hover ( background : #fa5ba5 ; ) #crumbs ul li a:hover :after ( border-left-color : #fa5ba5 ; )
Il ne reste plus qu'à appliquer l'effet de survol aux liens. N'oubliez pas de modifier la valeur de la propriété border-left-color pour l'effet triangle sur l'état de survol afin que tout le fil d'Ariane change de couleur.
Traduction - Bureau
Une belle et originale sélection de fils d'Ariane, réalisés dans un design plat, en utilisant CSS3, dans une palette de nuances différente. Bien entendu, la visibilité de la navigation, sous forme de boutons, aide parfaitement à la fois l'utilisateur du site et les invités, il s'agit de naviguer sur la ressource Internet, où vous pouvez naviguer vers Expressions-clés ce qui nous sera produit. Mais il convient aussi parfaitement au style, de plus en plus on voit que certains l'installent sur le module forum, sans parler Design moderne.Si, comme vous le pensez, vous disposez de beaucoup de matériel, il est recommandé d'activer cette fonctionnalité ici. Le style de liste ne consistera pas à éviter le point noir de liste ou tout autre style qui est la valeur par défaut. Puisqu'il le trie en catégories et modules inconditionnels, en commençant par page d'accueil et tout est présenté avec style. Dans ce matériau, vous observez une sélection qui est faite dans le même style, c'est dans un style plat.
Ici, dans leur forme, ils sont complètement différents, que quelqu'un n'aura même pas besoin de modifier pour les adapter à leur conception, car ils s'y intégreront parfaitement. Nous allons maintenant utiliser du code CSS pour créer l'ancre de la première liste et définir l'ancre du dernier enfant pour en faire la valeur par défaut afin que le tringle n'apparaisse pas dans l'ancre du premier enfant pour l'ancre de gauche et la dernière enfant pour le côté droit.
Faire de la chapelure
1. Dans une teinte jaune clair :
2. Palette lumineuse aux tons verts :
3. En couleur framboise
4. Réalisé dans une palette bleue :
Ce sera une simple liste droite avec un arrière-plan, un remplissage et un autre style. Après cela, je créerai une structure triangulaire sur le côté droit de chaque ancre de liste en utilisant CSS, en jouant avec les propriétés broder.
Comme vous pouvez le voir dans la démo, lorsque nous survolons une ancre de liste sur les coffres à panure, cela donne un effet qui signifiera visité ou être dans cette section.
Ou bien nous pouvons imaginer son effet pour le rendre actif comme du fil d’Ariane actif. Vous pouvez dire que ces fils d'Ariane CSS ne sont que des fils d'Ariane car je n'utiliserai que CSS et CSS3 pour créer ces fils d'Ariane.
Commençons l'installation :
css
Le style de liste ne consistera pas à éviter le point noir de liste ou tout autre style qui est la valeur par défaut. Chaque liste div en ligne sera list-inline pour en faire une liste horizontale en utilisant l'affichage CSS : list-inline.
#breadcrumb-isanchogives1 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}
#breadcrumb-isanchogives1 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives1 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives1 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #ffd928 ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de la police : 20 px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives1 ul li a:après (
contenu: "";
bordure gauche : 40px solide #ffd928 ;
indice z : 1 ;
#breadcrumb-isanchogives1 ul li a:avant (
contenu: "";
bordure supérieure : 40 px solide transparent ;
bordure inférieure : 40 px solide transparent ;
}
#breadcrumb-isanchogives1 ul li:premier-enfant a (
}
#breadcrumb-isanchogives1 ul li:premier-enfant a:avant (
affichage : aucun ;
}
#breadcrumb-isanchogives1 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
}
#breadcrumb-isanchogives1 ul li:dernier-enfant a:après (
affichage : aucun ;
}
#breadcrumb-isanchogives1 ul li a:hover (
arrière-plan : #ff9a2d ;
}
#breadcrumb-isanchogives1 sur li a.wesove-readcrum(
arrière-plan : #ff9a2d ;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
couleur de la bordure gauche : #ff9a2d ;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
couleur de la bordure gauche : #ff9a2d ;
}
#breadcrumb-isanchogives2 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}
#breadcrumb-isanchogives2 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives2 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives2 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #56e9ae ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de la police : 20 px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives2 ul li a:après (
contenu: "";
bordure supérieure : 40 px solide transparent ;
bordure inférieure : 40 px solide transparent ;
bordure gauche : 40px solide #56e9ae ;
position : absolue ; à droite : -40px ; haut : 0 ;
indice z : 1 ;
#breadcrumb-isanchogives2 ul li a:avant (
contenu: "";
bordure supérieure : 40 px solide transparent ;
bordure inférieure : 40 px solide transparent ;
bordure gauche : 40px solide #f2f2f2 ;
position : absolue ; gauche : 0 ; haut : 0 ;
}
#breadcrumb-isanchogives2 ul li:premier-enfant a (
}
#breadcrumb-isanchogives2 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
}
#breadcrumb-isanchogives2 ul li a:hover (
arrière-plan : #49c593 ;
}
#breadcrumb-isanchogives2 sur li a.wesove-readcrum (
arrière-plan : #49c593 ;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
couleur de la bordure gauche : #49c593 ;
}
#breadcrumb-isanchogives2 sur li a.wesove-readcrum:after (
couleur de la bordure gauche : #49c593 ;
}
#breadcrumb-isanchogives3 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}
#breadcrumb-isanchogives3 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives3 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives3 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #ff818b ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de la police : 20 px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives3 ul li a:après (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
arrière-plan : #ff818b ;
position : absolue ; à droite : -40px ; haut : 0 ;
indice z : 1 ;
#breadcrumb-isanchogives3 ul li a:avant (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
rayon de bordure : 0px 40px 40px 0px ;
arrière-plan :#f2f2f2 ;
position : absolue ; gauche : 0 ; haut : 0 ;
}
#breadcrumb-isanchogives3 ul li:premier-enfant a (
rayon de la bordure supérieure gauche : 10 px ; bordure inférieure gauche : 10 px ;
}
#breadcrumb-isanchogives3 ul li:premier-enfant a:avant (
affichage : aucun ;
}
#breadcrumb-isanchogives3 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
rayon de bordure en haut à droite : 10 px ; bordure en bas à droite : 10 px ;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
affichage : aucun ;
}
#breadcrumb-isanchogives3 ul li a:hover (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 sur li a.wesove-readcrum (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 sur li a.wesove-readcrum:after (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives4 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}
#breadcrumb-isanchogives4 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives4 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives4 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #2b97cc ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de la police : 20 px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives4 ul li a:après (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
rayon de bordure : 0px 40px 40px 0px ;
arrière-plan : #2b97cc ;
position : absolue ; à droite : -40px ; haut : 0 ;
indice z : 1 ;
#breadcrumb-isanchogives4 ul li a:avant (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
arrière-plan :#f2f2f2 ;
rayon de bordure : 0px 40px 40px 0px ;
position : absolue ; gauche : 0 ; haut : 0 ;
}
#breadcrumb-isanchogives4 ul li:premier-enfant a (
bordure-haut-gauche-radius : 0px ; bordure-bas-gauche-rayon : 0px ;
}
#breadcrumb-isanchogives4 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
bordure en haut à droite : 0px ; bordure-bas-droit-radius : 0px ;
}
#breadcrumb-isanchogives4 ul li a:hover (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 sur li a.wesove-readcrum (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 sur li a.wesove-readcrum:after (
arrière-plan : #207ca8 ;
}
Tout d'abord créer structure HTML basé sur les balises div et ul li. Le div contient un identifiant, chaque identifiant contiendra un style différent dans la feuille de style pour représenter une conception distincte. Où nous utilisons des numérotations comme un, deux, trois, quatre.
Ces identifiants ont la même structure interne, séparés par des styles différents selon leur identifiant.
L'article précédent « Naviguer dans le fil d'Ariane avec des triangles en CSS » décrivait comment créer un menu en utilisant CSS pur sans utiliser de graphiques.
La méthode est bonne pour tout le monde, sauf pour une chose : la prise en charge d'un tel menu dans les anciens navigateurs est douteuse. Mais lors de la traduction de cet article, un lien a été mentionné vers un moyen de créer une navigation à l'aide de graphiques.
L’article a été écrit il y a longtemps, mais la méthode fonctionne absolument. L'auteur de l'article est Veerle Pieters, et l'article lui-même s'intitule « Fil d'Ariane simple et évolutif basé sur CSS ». Ci-dessous, je n'en donne même pas une traduction gratuite, mais un récit gratuit.
Il y a quelques jours, j'avais pour tâche de créer un menu de navigation de type fil d'Ariane pour un site sur lequel je travaillais. Je ne pense pas qu'un tel menu soit nécessaire pour chaque site, mais dans certains cas, il est très utile et pratique.
Cependant, cet exemple constitue en quelque sorte une base qui peut être élargie et appliquée dans la pratique. Le menu sera créé à l'aide d'une liste à puces régulière
| 1 | ul |
Mais d’abord, regardons l’exemple avec lequel nous allons travailler :
Le menu est assez simple, tout comme le code avec lequel nous allons le créer.
Code HTML - liste à puces ul
- Maison
- Section principale
- sous-section
- Sous sous section
- La page sur laquelle vous vous trouvez actuellement
Tous les éléments de menu ont des liens, à l'exception du dernier - « La page sur laquelle vous vous trouvez actuellement » (La page sur laquelle vous vous trouvez actuellement). En travaillant sur le menu, je me suis demandé : la liste est-elle la structure la plus appropriée pour créer un menu ? Je pense que l'utilisation d'une liste dans ce cas n'est pas une règle stricte, mais il me semble que c'est l'option la plus sémantique et la plus correcte.
Code CSS - création de styles pour le menu
Nous définissons les styles généraux pour le menu - supprimons les marqueurs et réinitialisons les retraits dans Navigateurs Firefox.C'EST À DIRE:
faire flotter à travers la propriété égale à la hauteur de l'ensemble du menu - . Et définissez la couleur du texte. Ensuite, nous plaçons une image d’arrière-plan découpée dans la mise en page du lien. Pour ce faire, vous devez découper uniquement la « flèche » elle-même :… que l'on « pousse » vers la droite (100 %) et que l'on place exactement à la verticale (50 %). Nous mettons également en retrait le lien à droite
| 1 | remplissage à gauche : 15 px |
Presque tout a déjà été fait. Il reste à définir les styles du texte du lien. Supprimez le soulignement standard et changez sa couleur :
.crumbs li a :link , .crumbs li a :visited ( text-decoration : none ; color : #777 ; )| 1 | :flotter |
| 1 | :se concentrer |
Le résultat de nos travaux est présenté ici :
Note du traducteur :
L'auteur de l'article a simplifié au maximum l'exemple et le code lui-même, respectivement, pour autant que je sache. Le fait est que le dégradé horizontal linéaire pour chacun des éléments de menu est clairement visible dans l'exemple. Cependant, cela n'était pas indiqué dans le code. Eh bien, cela n'a pas d'importance : est-ce vraiment un problème de créer un dégradé linéaire en CSS3 ? La tâche elle-même est terminée !
Salutations. Le fil d'Ariane est un bloc très utile sur n'importe quel site Web car il vous permet de voir le chemin complet vers la page sur laquelle vous vous trouvez actuellement. Et aujourd'hui je vais vous dire comment styliser le fil d'Ariane en CSS ? Non pas créer, mais arranger. En général, il existe de nombreuses options, j'en aborderai deux.
Une option de conception simple - sans image
Le code HTML imite le fil d'Ariane. Que ce soit comme ceci :
En principe, vous pouvez simplement poser une équerre, mais il n'y aura alors aucun moyen de contrôler l'épaisseur de la ligne. Je propose de faire autrement, à l'aide de transformations. Voici le code qui va le faire :
Cumbs1 a:not(:dernier-enfant):après(
contenu: "";
affichage : bloc en ligne
largeur : 5px
hauteur : 5px ;
bordure supérieure : 2px noir uni ;
bordure droite : 2px noir uni ;
transformation : rotation (45 degrés) ;
marge gauche : 5px
}
.cumbs1 a: survol (
couleur orange;
}
Peut-être que pour vous ce seront des sélecteurs compliqués, alors consultez cet article. L'essentiel est le suivant : l'utilisation du pseudo-élément (à propos de ce que c'est et comment l'utiliser - ) ajoute ensuite notre séparateur à la fin de chaque lien. Il est formé de deux cadres et pivoté de 45 degrés. Nous ajoutons également une couleur orange aux liens de survol. Ici, en principe, et toute la conception.
Une autre option de conception - avec une image
Dans ce cas, le fil d'Ariane aura l'air plus intéressant, comme ceci :
Pour ce faire, nous avons besoin d'une image et de quelques styles CSS :
Cumbs2(
fond : orange ;
largeur maximale : 250 px
}
.cumbs2 un(
affichage : bloc en ligne
remplissage : 7px 0
couleur : #000 ;
}
.cumbs2 a:not(:dernier-enfant)(
arrière-plan : url(arrow.png) sans répétition 100 % 50 % ;
remplissage à droite : 33 px ;
}
Code HTML Je ne cite pas, car c'est la même chose que dans le premier cas. Par où commencer ici ? Tout d’abord, nous définissons la couleur d’arrière-plan et la taille de l’ensemble du bloc avec le fil d’Ariane. Ensuite, nous définissons les styles généraux des liens : type de bloc en ligne, indentation en haut et en bas et couleur.
L'étape suivante est la plus intéressante - en utilisant la pseudo-classe not, sélectionnez tous les liens du bloc, à l'exception du dernier, et définissez l'image d'arrière-plan arrow.png pour eux, sans répétition, avec la position d'arrière-plan au milieu dans hauteur et à la toute fin dans la largeur d'un maillon. Les deux premiers liens ont besoin du retrait intérieur à droite juste pour y placer l'image. S'il n'y était pas, l'image se fondrait dans le texte.
Comment fonctionne la non pseudo-classe, je pense que vous l'avez déjà deviné - elle sélectionne tous les éléments, à l'exception de ce qui est indiqué entre parenthèses. Si quoi que ce soit, j'écrirai à l'avenir une autre courte note sur le travail avec la pseudo-classe:not , où tout sera plus clair. Eh bien, voici 2 modèles simples de fil d’Ariane que vous pouvez utiliser pour créer le vôtre.
