Afficher une longueur d’extrait différent selon la taille d’ecran

Sur wordpress il y a plétore de fonctions pour raccourcir un extrait d’article : cet article le décrit très bien.

Ici on va plutot voir comment afficher une longueur différent d’extrait sur mobile, tablette ou desktop..Plutot pratique lorsqu’on a des blocs de taille réduite en version mobile.

Telecharger Mooble

Premièrement on va télécharger le plugin mooble .Celui ci ne requiert aucun paramètrage et va nous permettre d’ajouter des conditions d’affichage dans le code

Des conditions pour un affichage optimisé

Dans mon fichier functions.php, j’intègre le code suivant:

function ecommerce_excerpt_length($length) {

    if(is_mobile()){

    return 20;

    }else if(is_tablet()){

        return 35;

    } else {

        return 50;}

}

add_filter('excerpt_length', 'ecommerce_excerpt_length');



function ecommerce_excerpt_more($more) {

    global $post;

    return '<a href="'. get_permalink($post->ID) . '" class="readmore">Lire la suite</a>';  

}

add_filter('excerpt_more', 'ecommerce_excerpt_more');

Une première fonction pour raccourcir l’extrait d’article avec trois conditions:

• un is_mobile pour détecter tout type de mobile et n’afficher que 20 caractères
• un is_tablet pour cibler les tablettes et afficher 35 caractères
• et un dernier else pour dire « sinon affiche moi 50 caractères

Une deuxième fonction permet ensuite d’ajouter un « lire la suite » qu’on peut styliser en css pour lui donner une apparence de bouton

La fonction agit sur le ‘ <?php   the_excerpt(); ?>’ de wordpress,  que l’on retrouve généralement dans les fichiers d’archives, il n’y a donc rien d’autre à ajouter dans nos fichiers : en testant sur un émulateur ou sur votre mobile, vous verrez tout de suite la différence!