Désactiver les pages dédiées aux médias de WordPress

Par défaut, WordPress permet d’afficher chaque média mis en ligne sur le blog sur une page dédiée. Ce qui est affiché varie en fonction du thème, mais on retrouve général le nom du média et le fichier lui-même est affiché juste en-dessous. Parfois, on a même des commentaires associés à la pièce-jointe.

attachment-template.png

Si, comme moi, vous ne voulez pas de cette fonction, la solution est très simple. Il suffit de modifier le template attachment présent dans tous les thèmes en remplaçant tout le contenu par cette ligne unique :

wp_redirect(get_permalink($post->post_parent));

Le code est extrêmement simple : il renvoie à l’article associé à la pièce-jointe. En théorie, si un visiteur tombe sur l’ancienne page dédiée à une image, il verra la photo dans son contexte, puisqu’il sera automatiquement redirigé vers l’article qui contient l’image. Simple, mais efficace !

Bonus : WordPress permet de changer de modèle en fonction de la pièce-jointe. On peut ainsi garder le template générique d’origine, mais créer un fichier image.php avec la ligne donnée plus haut pour transférer les visiteurs uniquement sur les photos, mais pas les fichiers PDF. Par exemple.

Comme d’habitude, vous pouvez voir l’astuce en action sur mon blog personnel à cette adresse.

Publicités

Articles similaires Jetpack : augmenter la taille des images

Si vous utilisez la fonction « Articles similaires » du module Jetpack sur votre blog WordPress et que vous souhaitez modifier la présentation par défaut (j’ai déjà expliqué ma méthode dans un précédent article), vous allez peut-être tomber sur mon problème. En choisissant d’afficher trois articles similaires sur toute la largeur de la page, j’ai vite noté que les images étaient de mauvaise qualité. La raison est simple : par défaut, le module utilise des images de 350 pixels de large et quand on agrandit le site, elles sont agrandies à tel point qu’elles deviennent floues.

Cliquer pour voir la différence
Cliquer pour voir la différence

Fort heureusement, la solution est tout aussi simple. Il suffit d’ajouter ces quelques lignes de code dans le fichier functions.php de votre thème. Remplacez les tailles aux lignes 2 et 3 par les valeurs qui vous intéressent, pour ma part j’ai choisi 1000 pixels de large pour avoir de la marge (il faudrait environ 850 pixels pour que les images soient nettes en pleine largeur sur un écran 27 pouces). Le CSS se charge de limiter la taille des images affichées sur le blog pour qu’elles restent au tiers de la largeur, quelle que soit la largeur de la page.

function jetpackchange_image_size ( $thumbnail_size ) {
    $thumbnail_size['width'] = 1000;
    $thumbnail_size['height'] = 572;
    return $thumbnail_size;
}
add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' );

Naturellement, le temps de chargement sera légèrement plus long, mais ces images ne sont pas piochées sur votre serveur. En effet, les images des articles similaires proviennent des serveurs de WordPress, qui sont probablement beaucoup plus rapides que celui qui héberge votre blog. Au passage, précisons que le module gère parfaitement les écrans Retina. Si vous affichez le site sur un tel écran, l’image sera automatiquement remplacée par une version optimisée, deux fois plus grande en largeur et en hauteur, donc.

Mise à jour 26 janvier : un point important qui m’avait échappé, si vous changez la taille des images comme je l’ai fait, le module cherchera nécessairement des images plus grandes. Si celle qui a été mise en avant avec un article est trop petite, il ira chercher une plus grande dans l’article.

Un point à ne pas oublier au moment de définir la taille des images : j’ai abaissé à 900 pixels de large dans mon cas, pour avoir la bonne image sur les anciens articles.

Bloquez les manipulations des opérateurs sur votre site

Certains opérateurs mobiles (pour ne pas dire tous les opérateurs : en France, au moins SFR, Bouygues Telecom et Orange le font) modifient à la volée les sites que vous visitez. L’objectif étant de remplacer les images par des versions « optimisées » (comprendre qu’elles sont compressées, très compressées), mais ce n’est pas la seule opération qu’ils peuvent faire.

Sur mon autre blog, je me suis aussi rendu compte qu’ils modifiaient à la volée le code des pages pour intégrer le CSS et le JavaScript directement dans les pages, au lieu de les laisser dans des fichiers externes, associés par un lien dans le header. Au passage, les fichiers étaient aussi optimisés pour réduire leur taille ce qui, en fonction des modifications effectuées, peut poser problème et casser certaines fonctions du site.

Investigations faites, toutes ces modifications ne sont pas effectuées manuellement par les opérateurs. Ils ont signé des contrats avec des entreprises spécialisées. Il y en a peut-être plusieurs, mais celle qui me concernait et qui concerne apparemment beaucoup d’opérateurs dans bon nombre de pays, c’est Citrix et son service ByteMobile. L’entreprise se vante de gérer 140 opérateurs sur cinq continents et a priori, c’est lui qui est utilisé par tout le monde en France.

bytemobile

Je ne suis pas le premier à m’en rendre compte et à vouloir faire quelque chose pour empêcher ces modifications à la volée. Il existe même un plugin qui modifie à nouveau les URL des images pour restaurer les fichiers d’origine, mais il y a plus simple. En ajoutant cette simple ligne au fichier header.php, vous pouvez bloquer toutes les modifications, images et autres CSS ou JavaScript.

<?php Header("Cache-Control: no-transform");?>

Pour l’ajouter, le plus simple est de modifier directement ce fichier, mais il faudra penser à rajouter la ligne après chaque mise à jour. Une fois en place, ce code bloque effectivement les modifications des opérateurs : simple et efficace !

Image couverture : Phil Woodbridge

Retirer les balises <p> autour des images

Petite astuce rapide pour un problème assez simple : pour simplifier la vie des rédacteurs, WordPress ajoute les balises <p> nécessaires pour créer des paragraphes autour de tous les blocs de texte que vous créez. Le problème, c’est qu’il en ajoute un peu trop, et il en place notamment autour des images, où elles ne sont pas nécessaires.

Une image n’est pas un paragraphe de texte et il n’y a pas besoin d’en mettre. Ce n’est pas non plus forcément gênant, puisque tous les navigateurs savent afficher normalement les images, même avec les balises de paragraphe superflues. Cela dit, si on souhaite afficher des images sur toute la largeur, comme c’est le cas sur mon blog, ces balises gênent la mise en page. Je veux que l’image soit bord à bord, sans la moindre bordure, mais en revanche le texte ne doit pas coller les bords de la fenêtre pour rester lisible. Ainsi, je veux définir les images à 100 %, mais je veux ajouter un peu de marge sur le texte.

images-balise-p

Pour régler ce problème, le plus simple est de retirer les balises <p>, mais uniquement autour des images — on veut les conserver autour du texte. Il se trouve que c’est possible, et c’est même assez simple : il suffit d’ajouter cette fonction au fichier functions.php de votre thème :

function filter_ptags_on_images($content){
   return preg_replace('/<p>s*(<a .*>)?s*(<img .* />)s*(</a>)?s*</p>/iU', '123', $content);
}

add_filter('the_content', 'filter_ptags_on_images');

Et voilà, les images ne seront plus transformées en paragraphes ! Je n’ai pas inventé le code, il vient de cet article.

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.