Jetpack : modifier l’aspect des articles similaires

La dernière version de Jetpack, le module conçu par les propriétaires de WordPress.com, ajoute la fonction d’articles associés à n’importe quel blog WordPress hébergé. Même si je suis rarement fan de ce genre de fonctions, j’ai décidé de lui laisser une chance. Après tout, s’il y a bien un acteur qui peut trouver des articles similaires à un autre, c’est bien celui qui a créé le CMS. Cette fonction a en outre l’avantage de ne pas reposer sur votre serveur pour effectuer le lourd et difficile calcul de relations que tous les autres modules rendent nécessaire. Les images quant à elles sont chargées depuis les serveurs de WordPress.com, si bien que la charge sur votre hébergeur devrait rester minime.

Jetpack ne propose pas beaucoup d'options pour son module d'articles liés : tout au plus peut-on choisir d'afficher ou non "Connexe" et les images.
Jetpack ne propose pas beaucoup d’options pour son module d’articles liés : tout au plus peut-on choisir d’afficher ou non « Connexe » et les images.

Comme quasiment toutes les autres fonctions Jetpack, celle-ci s’active d’un clic dans l’administration du blog, mais vous n’avez pas beaucoup d’options pour modifier son apparence. Vous pouvez choisir de masquer ou non un en-tête et vous pouvez afficher, ou non, des images associées à chaque article. On ne peut pas influencer les résultats, modifier leur nombre ou encore changer leur emplacement sans passer par un peu de code.

Les réglages de Jetpack sont très légers par défaut.
Les réglages de Jetpack sont très légers par défaut.

Souhaitant une interface beaucoup plus sobre, avec uniquement les images — le lecteur peut connaître le nom de l’article en question en passant la souris sur une image —, j’ai simplement utilisé mon thème pour masquer les éléments que je ne désirais pas et retoucher les images pour les coller. Voici, à titre d’information, le code utilisé sur mon blog :

.entry-content .jp-relatedposts,
.entry-content .jp-relatedposts .jp-relatedposts-post,
.entry-content .jp-relatedposts .jp-relatedposts-items-visual,
.entry-content .jp-relatedposts .jp-relatedposts-post img{margin: 0;padding: 0;}
.entry-content .jp-relatedposts .jp-relatedposts-post{width: 33.33%;}
.entry-content .jp-relatedposts .jp-relatedposts-post-title,
.entry-content .jp-relatedposts .jp-relatedposts-post-context{display: none;}

Et voici ce que cela donne, remis dans le contexte. Pour information, les quatre articles « Dans la même catégorie » ne sont qu’une sélection au hasard dans la catégorie de l’article en cours. J’aime bien le côté aléatoire de la sélection, mais il est vrai qu’elle n’a pas vraiment de sens pour le lecteur.

Avec un peu de CSS, on peut facilement modifier l'aspect des articles liés proposés par Jetpack.
Avec un peu de CSS, on peut facilement modifier l’aspect des articles liés proposés par Jetpack.

Même si les options affichées pour ce module sont très simples, on a un contrôle plus fin qu’il n’en a l’air sur les résultats affichés. En ajoutant du code au fichier functions.php comme expliqué à cette adresse, on peut assez facilement modifier le nombre de résultats, mais aussi retirer des résultats certains articles, ou à l’inverse afficher systématiquement un article associé dans certains cas. On peut aussi choisir la position des résultats, mais malheureusement le choix est limité à deux options : en tête ou en fin d’article. Peut-être qu’il y a un moyen de placer les images plus précisément, ce qui me permettrait de retirer mes articles aléatoires, mais je n’ai pas trouvé comment faire.

Publicités

16 commentaires sur “Jetpack : modifier l’aspect des articles similaires

  1. Les !important sont essentiels pour écraser le fichier de style fourni avec le module

    Au lieu d’utiliser !important, tu pourrais être plus spécifique dans ton code CSS, par exemple :

    .entry-content .jp-relatedposts,
    .entry-content .jp-relatedposts .jp-relatedposts-post,
    .entry-content .jp-relatedposts .jp-relatedposts-items-visual,
    .entry-content .jp-relatedposts .jp-relatedposts-post img{margin: 0;padding: 0;}
    .entry-content .jp-relatedposts .jp-relatedposts-post{width: 33.33%;}
    .entry-content .jp-relatedposts .jp-relatedposts-post-title,
    .entry-content .jp-relatedposts .jp-relatedposts-post-context{display: none;}
    

    Peut-être qu’il y a un moyen de placer les images plus précisément, ce qui me permettrait de retirer mes articles aléatoires, mais je n’ai pas trouvé comment faire.

    En haut ou en bas des articles sont les deux seules options disponibles pour le moment. Quelles autres options pourraient être utiles à ton avis ?

    J'aime

    1. En effet pour le CSS, j’ai fait ça rapidement, mais c’est sans doute une meilleure solution… 🙂

      Quant au placement, dans l’idéal j’aimerais remplacer les quatre images aléatoires que j’ai actuellement sous les articles. Donc dans l’idéal, une fonction en PHP qui annulerait le placement automatique du module, ce serait bien.

      Pendant que j’y suis, j’utilise WP-Rocket pour mettre le blog en cache et rien n’apparaît quand le cache est actif. Une idée pourquoi ou une piste pour corriger ça ?

      J'aime

      1. Donc dans l’idéal, une fonction en PHP qui annulerait le placement automatique du module, ce serait bien.

        Tu pourrais désactiver l’affichage par défaut grâce au filtre jetpack_relatedposts_filter_options (ref), et ensuite rajouter les articles similaires avec l’affichage de ton choix, où tu veux dans ton loop, grâce à la classe Jetpack_RelatedPosts_Raw (ref).

        j’utilise WP-Rocket pour mettre le blog en cache et rien n’apparaît quand le cache est actif. Une idée pourquoi ou une piste pour corriger ça ?

        WP-Rocket n’est pas gratuit donc je ne peux pas vraiment tester de mon côté, mais quand je visite ton site je vois une erreur Javascript qui semble créée par la fonction de minification et concatenation de WP-Rocket. Cela créé surement des problèmes avec les fonctionnalités utilisant Javascript sur ton site, comme les articles similaires de Jetpack.

        Contacte l’équipe de WP Rocket, ils seront surement capables de t’aider, tu ne dois pas être le seul avec ce problème !

        J'aime

      2. Histoire de rendre les choses plus simples pour tout le monde, nous venons de créer un shortcode qui te permettra d’insérer les articles similaires n’importe où dans tes articles. Ce shortcode fera partie de la prochaine mise à jour de Jetpack.

        Tu pourras utiliser do_shortcode() pour insérer les articles directement dans ton thème.
        C’est plus simple que la méthode dont je parlais plus tôt. 🙂

        J'aime

  2. Pour conclure sur WP-Rocket et en attendant un correctif, vous pouvez ajouter ce code au fichier functions.php et après avoir sauvegardé à nouveau les réglages du module et vider le cache, cela devrait fonctionner…

    add_filter( 'rocket_htaccess_mod_rewrite', 'patch_jetpack_29' );
    function patch_jetpack_29( $rules )
    {
    	return str_replace( '!.*=.*', '=""', $rules );
    }
    

    J'aime

  3. Ce topic est très intéressant, j’espère que tu pourra m’aider car j’ai un petit soucis avec ce module. Mon thème me propose déjà un widgets « articles les plus récents », je souhaite désactivé ou masquer celui de Jet Pack. J’ai beau avoir décocher les cases, il apparait toujours et crée une répétions du coup, avec le widgets de mon thème. Aurais tu une solution ? Merci d’avance !

    J'aime

  4. En faite, ce n’est pas le widget de mon thème qui me pose problème mais celui de Jet Pack qui du coup ne me sert pas et que je souhaite retirer. Mon thème c’est Redwood.

    J'aime

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s