Embellissez le bouton de lien de la première page du site : utilisez la méthode get_pages()

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

J'ai créé un thème pour 26 enfants et voici à quoi ressemblent mes liens maintenant :

Dans ce tutoriel, je vais vous montrer comment ajouter du CSS à votre thème pour améliorer un peu ces liens. Commençons par supprimer les puces et ajouter des flotteurs.

Supprimez les puces et ajoutez des flotteurs

Ouvrez la feuille de style du thème. Si vous avez créé un thème enfant, il sera vide, mais si vous utilisez votre propre thème, je vous recommande d'ajouter ce style dans la section de votre feuille de style contenant le style d'en-tête.

Révision du code pour le lien de la page de sortie (s'il y a une page à lier) :

<ul class="top-level-page-links">

<?php // using a foreach loop, output the title and permalink for each page
foreach ( $pages as $page ) { ?>

    <li class="page-link">
	
		<a href="<?php echo get_page_link( $page->ID ); ?>">
			<?php echo $page->post_title; ?>
		</a>
	
	</li>

<? } ?>

</ul>

Cela signifie que nous ciblons les éléments avec top-level-page-links 类的 ul 元素，并在其中 li 元素，其中 page-link 类后跟 a (c'est-à-dire les liens).

Tout d’abord, supprimons la balle. Ajoutez ceci :

ul.top-level-page-links  {
    list-style: none;
}

Ensuite, supprimons le remplissage sur chaque élément de la liste et ajoutons une instruction margin-left : 

ul.top-level-page-links  {
    list-style-type: none;
	margin-left: 0;
}

Maintenant, actualisez l'écran et vous verrez que le style de liste a disparu :

Ensuite, laissez ces liens flotter les uns à côté des autres. Ajoutez ceci à votre feuille de style :

.page-link {
    float: left;
}

Maintenant, vos liens seront les uns à côté des autres :

Ensuite, passons à faire en sorte que le lien ressemble davantage à un bouton.

Ajouter des marges, du remplissage et de l'arrière-plan

Pour que notre lien ressemble à un bouton, nous ajouterons des marges, un remplissage et un arrière-plan au lien.

Ajoutez ceci à votre feuille de style :

.page-link a {
    margin-right: 10px;
	padding: 0.5em 10px;
	background-color: #454545;
}

Veuillez noter que je n'ai utilisé que la marge sur le côté droit car je voulais que le bouton gauche s'aligne avec le côté gauche de la page.

Lorsque vous actualisez l'écran, vos boutons ressembleront davantage à des boutons :

Ils sont bien meilleurs mais nécessitent un peu d'habileté. Modifions la couleur du texte et de l'arrière-plan afin que lorsque quelqu'un survole le bouton, celui-ci change de couleur.

Ajouter un effet de survol

Rendons maintenant ces boutons plus attrayants.

Ajoutez deux blocs de déclaration supplémentaires à votre feuille de style, en veillant à les ajouter après le bloc de déclaration du lien que vous venez d'ajouter :

.page-link a:link,
.page-link a:visited {
    color: #fff;
	text-decoration: none;
}
.page-link a:hover,
.page-link a:active {
	background-color: #dddddd;
	color: #454545;
	text-decoration: none;
}

Cela change la couleur du lien, supprime le soulignement et change la couleur lorsque quelqu'un survole le lien ou lorsque le lien est actif.

Voyons à quoi cela ressemble sur la page :

Quand je survole le 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 générées automatiquement de votre site Web, puis à utiliser CSS pour styliser ces liens afin qu'ils ressemblent à des boutons.

Cela vous donne un moyen agréable et visible d'orienter vos visiteurs directement vers ces pages, ce qui est utile si vous souhaitez garantir qu'un grand nombre de visiteurs puissent accéder à vos principales pages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!