Vous êtes ici : Accueil | Snippets WordPress | Articles | Ajouter des classes CSS aux liens « Entrées précédentes » et « Entrées suivantes »

Ajouter des classes CSS aux liens « Entrées précédentes » et « Entrées suivantes »

supprimer categorie article page blog snippet

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

On trouvé également ces liens sur les pages de catégories, d’étiquette et de blog.

Voila à quoi ils peuvent ressembler :

liens navigations pages WordPress

Si vous avez besoin de cibler ces deux éléments en CSS pour modifier leur affichage alors 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 voila, 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

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

    Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



    5f0091ae9b9818f404d33d813962560eBBBBBBBBBB
    Partagez
    Tweetez
    Partagez