Mettre en forme une pagination WordPress avec Scss et Flexbox

Pour faire des liens de pagination numérotés colorés et sympas, comme vous pouvez le voir sur ce blog !

En gros on va faire ça :

Englobez la pagination généré par WordPress par une div ayant la classe .pagination et donnez lui en css / scss les propriétés flexbox adéquates :

.pagination{
    display:flex;
    align-items: center;
    justify-content: center;
}

WordPress génère avec la pagination un span ayant la classe .current qui vous indique la page sur lequel vous vous trouvez lors de la navigation, et des balises a pour les liens vers les autres pages.

Vous pouvez cibler ensemble ces éléments en css / scss :

//On utilise le nesting (uniquement disponible en Scss) pour cibler spéciquement les elements a et span.current qui sont dans la balise ayant la classe .pagination 
.pagination{
   a, span.current{
       //Ici mettre les propriétés et valeurs que l'on va voir plus bas.
   }
}

Tout d’abord il vous faut définir une largeur et une hauteur fixe pour ces boutons de pagination avec : width et height, par exemple à 30px.

Puis donner ces propriétés et valeurs à ces boutons pour que le texte soit centré :

display:flex;
align-items: center;
justify-content: center;

La propriété border-radius avec une valeur de 50% vous permet d’arrondir ces éléments automatiquement.

border-radius:50%;

Vous pouvez également ajouter des marges extérieures pour espacer horizontalement les boutons :

margin-left:10px;
margin-right:10px;

On donne également une couleur de fond avec :

background-color:$blue;

Et, en prévision de la suite une bordure invisible (!) avec :

border:1px solid transparent;

Ajouter une transition

Pour créer un effet de changement de couleur au survol de la souris, il convient d’appliquer une transition. Pour ce faire, utilisez toujours en imbriquant votre code la notation suivante :

//Définissez tout d'abord la transition : 
transition:all 0.5s ease;
//Puis...
&:hover:not(.current){
       background-color:white;
       border:1px solid $blue;
       color:$blue;
}

not(.current) permet au code de n’être appliqué qu’aux liens.

Vous pouvez ensuite spécifier quelque chose d’un peu différent pour le numéro de page en cours, moi j’ai utilisé :

//$light correspond à un gris clair
span.current{
    background-color:$light;
}

On récapitule :

.pagination{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom:100px;
    padding:10px;
    a, span.current{
        background-color:$blue;
        padding:5px;
        color:white;
        font-weight: bold;
        text-decoration: none;
        width:30px;
        height:30px;
        display:flex;
        align-items: center;
        justify-content: center;
        border-radius:50%;
        margin-left:10px;
        margin-right:10px;
        font-style: italic;
        border:1px solid transparent;
        transition:all 0.5s ease;
        &:hover:not(.current){
            background-color:white;
            border:1px solid $blue;
            color:$blue;
        }
    }
    span.current{
        background-color:$light;
    }
}

J’ai ajouté ici un peu de mise en forme concernant le soulignement des liens (que j’ai enlevé), de l’italique et de l’espacement. Rien d’insurmontable.

Très bonne journée à vous.