Si vous n’utilisez pas l’excellent plugin WP Page Navi, il se peut que vous vouliez personnaliser les liens de navigation entre les pages d’archives de votre site WordPress.

On trouve Ă©galement ces liens sur les pages de catĂ©gories, d’Ă©tiquettes et de blog.

VoilĂ  Ă  quoi ils peuvent ressembler :

liens navigations pages WordPress

Si vous avez besoin de cibler ces deux éléments en CSS pour modifier leur affichage, ce snippet devrait vous plaire.

Nous allons ici ajouter une classe CSS personnalisée à ces éléments de maniÚre à les sélectionner facilement aprÚs.

Copiez-collez le code suivant dans le fichier functions.php de votre thĂšme enfant:

// Ajouter une classe CSS aux balises "Entrées précédentes" et "Entrées suivantes"

add_filter( 'next_posts_link_attributes', 'wpm_posts_link_attributes' );
add_filter( 'previous_posts_link_attributes', 'wpm_posts_link_attributes' );

function wpm_posts_link_attributes() {
    return 'class="ma-class-perso"';
}

Et c’est tout.

On vĂ©rifie que ça marche bien avec l’inspecteur de code de Google Chrome:

class perso liens navigation WordPress

Vous pouvez également mettre une classe CSS différente pour les deux liens de navigation avec le code suivant :

// Ajouter une classe CSS différentes par lien de navigation

add_filter( 'next_posts_link_attributes', 'wpm_posts_link_attributes_next' );
add_filter( 'previous_posts_link_attributes', 'wpm_posts_link_attributes_previous' );

// On ajoute une classe CSS au lien suivant
function wpm_posts_link_attributes_next() {
    return 'class="mon-lien-suivant-perso"';
}

// On ajoute une classe CSS au lien précédent
function wpm_posts_link_attributes_previous() {
    return 'class="mon-lien-precedent-perso"';
}

Et voilĂ , maintenant vous pouvez personnaliser vos liens de navigation trĂšs simplement en CSS.

Comment avez-vous utilisé ce snippet sur votre site ? Dites-nous tout en commentaire !

Source: Greg Sweet