Utilisation de get_pages () pour créer des boutons de lien vers les pages de niveau supérieur de votre site style

Ce que vous allez créer

Si vous avez suivi mon tutoriel précédent, vous aurez maintenant un thème sur votre site (ou un thème enfant) qui comprend des liens vers vos pages de niveau supérieur dans l'en-tête du site..

J'ai créé un thème pour enfants de vingt-seize ans, et voici comment mes liens se présentent:

Dans ce tutoriel, je vais vous montrer comment ajouter du CSS à votre thème pour rendre ces liens un peu plus agréables. Commençons par éliminer les balles et ajouter des flotteurs.

Retrait des balles et ajout de flotteurs

Ouvrez la feuille de style de votre thème. Si vous avez créé un thème enfant, il sera vide, mais si vous travaillez avec votre propre thème, je vous suggère d'ajouter ce style dans la partie de votre feuille de style où vous conservez le style de l'en-tête..

Un récapitulatif sur le code qui génère les liens de page (s'il existe des pages vers lesquelles renvoyer des liens):

  
 ID); ?> "> titre de l'article; ?>  
  

Cela signifie que nous visons un ul élément avec le liens de haut niveau classe et dans ce, li éléments avec le lien de page classe suivie par une éléments (liens).

Tout d'abord, retirons les balles. Ajoute ça:

ul.top-level-page-links style-liste: aucun; 

Ensuite, supprimons le remplissage de chaque élément de la liste et ajoutons un marge gauche déclaration:

ul.top-level-page-links type de type de liste: aucun; marge gauche: 0; 

Maintenant, actualisez votre écran et vous verrez que le style de la liste est parti:

Suivons ces liens qui flottent les uns à côté des autres. Ajoutez ceci à votre feuille de style:

.lien de page float: left; 

Maintenant, vos liens seront tous côte à côte:

Passons maintenant à rendre les liens un peu plus ressemblants à des boutons.

Ajout de marges, de rembourrages et d'arrière-plans

Pour que nos liens ressemblent à des boutons, nous allons ajouter une marge, un remplissage et un arrière-plan aux liens..

Ajoutez ceci à votre feuille de style:

.lien de page a margin-right: 10px; rembourrage: 0.5em 10px; couleur de fond: # 454545; 

Notez que je n'ai utilisé qu'une marge à droite car je veux que le bouton de gauche s'aligne à gauche de la page..

Lorsque vous actualisez votre écran, vos boutons ressemblent davantage à des boutons:

Ils ont l'air beaucoup mieux mais ont besoin d'un peu de finesse. Modifions la couleur du texte et de l’arrière-plan de sorte que, lorsque quelqu'un survole le bouton, il change de couleur..

Ajouter des effets de survol

Faisons maintenant ces boutons un peu plus attrayants.

Ajoutez deux autres blocs de déclaration à votre feuille de style, en veillant à les ajouter après le bloc de déclaration pour les liens que vous venez d'ajouter:

.lien de page a: lien, .page-lien a: visité color: #fff; texte-décoration: aucun;  .page-link a: survol, .page-link a: actif background-color: #dddddd; couleur: # 454545; texte-décoration: aucun; 

Cela change la couleur des liens, supprime le soulignement et change la couleur lorsque quelqu'un survole un lien ou qu'il est actif..

Voyons à quoi cela ressemble sur la page:

Et quand je survole un lien:

Beaucoup mieux!

Résumé

Dans ce didacticiel en deux parties, vous avez appris à créer des liens vers les pages de niveau supérieur de votre site générées automatiquement, puis à les styler à l'aide de CSS pour qu'ils ressemblent à des boutons..

Cela vous permet de laisser vos visiteurs accéder directement à ces pages, ce qui sera très utile si vous avez des pages de niveau supérieur auxquelles vous souhaitez vous assurer que de nombreux visiteurs peuvent accéder..