Créer des boutons de partage statiques

Difficile aujourd’hui d’imaginer publier des articles sans proposer à ses lecteurs de les partager. La grande majorité des blogs affichent ainsi des boutons de partage vers les réseaux sociaux, et ceux qui utilisent WordPress ne sont pas en reste. Sur tous les blogs hébergés sur la plateforme WordPress.com, c’est simple : il y a des boutons de partage par défaut et même si on peut les désactiver, on les retrouve en général sur la majorité des blogs. Si vous hébergez votre blog vous-même, vous pouvez activer ces boutons de partage en utilisant le module Jetpack.

Les boutons de partage proposés par défaut sur WordPress.com
Les boutons de partage proposés par défaut sur WordPress.com

Le répertoire des extensions WordPress compte par ailleurs des dizaines et des dizaines de modules qui permettent d’ajouter des boutons de partage au pied (ou en tête) de chaque article. L’avantage de cette solution, c’est qu’elle fonctionne sans travail de votre part : en général, il suffit d’activer l’extension, éventuellement de régler une ou deux options et c’est tout. Autre solution qui reste très simple : récupérer les boutons officiels proposés par chaque réseau, et l’intégrer directement à son thème.

La majorité de ces boutons de partage ont deux inconvénients : ils ajoutent une charge supplémentaire pas forcément indispensable sur le chargement des pages et ils ajoutent en général des cookies. Lire la suite « Créer des boutons de partage statiques »

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.

Ajoutez l’image à la une au flux RSS

Depuis quelques versions déjà, WordPress permet de définir tres simplement une « image à la une ». Qu’il s’agisse de l’une des images insérées à l’article ou une autre photo, cette image devient en tout cas associée à l’article et elle est utilisée par les thèmes en général. Sur mon blog par exemple, c’est cette image qui est affichée sur la page d’accueil, au-dessus du texte dans un article ou encore dans les listes d’archive et résultats de recherche.

Autant dire que, pour ce blog très visuel, ces images sont essentielles. À mes yeux, l’image suffit à identifier l’article, avant même le titre qui reste essentiel, naturellement. L’image à la une est donc une fonction très utile, et pourtant, pour une raison qui reste mystérieuse, WordPress ne l’utilise pas dans le flux RSS. On peut toutefois facilement ajouter cette image à son flux et voici ma méthode.

Même s’il existe plusieurs extensions capables de le faire, j’ai choisi de le faire sans, puisque le code à ajouter est très réduit. Si vous ne voulez pas toucher au thème que vous utilisez ou si un peu de PHP vous effraie, mieux vaut toutefois passer par un plugin, naturellement… Sans plus attendre, voici le code à ajouter au fichier functions.php de votre thème :

function rss_post_thumbnail($content) {
    global $post;
    if(has_post_thumbnail($post->ID)) {
        $content = '<p>' . get_the_post_thumbnail($post->ID, 'full') .
        '</p>' . get_the_content();
    }   
    return $content;
}

add_filter('the_content_feed', 'rss_post_thumbnail');

Deux ou trois remarques au sujet de ce code :

  • Ligne 4 : vous devez choisir la taille de l’image à insérer dans le flux RSS. Dans mon cas, j’ai choisi la taille par défaut nommée full qui correspond en fait à l’image originale. Vous devez choisir soit une taille par défaut de WordPress que vous pouvez ensuite gérer dans les réglages de médias (« Réglages » dans la barre latérale, puis « Médias »), soit utiliser l’une des tailles personnalisées définies par votre thème.
  • Ligne 10 : sur mon blog, je ne propose qu’un flux RSS avec les articles complets. Si vous souhaitez limiter le flux aux extraits seulement, il faudra utiliser cette ligne à la place : add_filter('the_excerpt_rss', 'rss_post_thumbnail');
  • L’intégration est très simple dans mon cas : je place l’image au-dessus du contenu, dans une balise p, en pleine taille. Vous pouvez aussi n’afficher qu’une miniature placée en haut à droite ou à gauche du texte, mais il faudra alors changer le code pour placer l’image dans une div spécifique.

rss

Trier les articles selon une taxonomie

Pour trier des listes d’articles, WordPress propose plusieurs paramètres de base. Par défaut, les articles affichés sur la page d’accueil, comme dans les pages d’archives sont triés par date de publication. On peut facilement les trier par nom, ou encore par un custom field, ces champs d’information que l’on peut associer à un article. Mais si, comme sur mon blog personnel, on veut trier selon une date enregistrée en taxonomie personnalisée, ce n’est pas possible par défaut.

C’est un choix assumé par les concepteurs de WordPress qui considèrent que les taxonomies ne sont pas conçues pour enregistrer une information numérique, mais uniquement du texte. Un choix respectable, mais qui ne convient pas à mon cas de figure. Si je veux associer un article à une date, en l’occurrence une date de sortie pour un film, ou de publication pour une œuvre publiée, et obtenir des pages d’archive comme celle-ci, je n’ai pas le choix, je dois utiliser une taxonomie. Cette information étant particulièrement utile pour trier des articles, par exemple pour trier les films d’un réalisateur par l’ordre de sortie, je devais une solution pour le faire en fonction de cette taxonomie.

J’ai cherché une solution pendant longtemps et ma solution de replis a été jusque-là de dupliquer la taxonomie dans un custom field. Outre que c’est une solution contraignante quand on a plus de 850 articles, ce n’est pas très logique de dupliquer ainsi une information. Lors de ma dernière recherche sur le sujet, j’ai toutefois trouvé le code qui permet de trier selon n’importe quelle taxonomie. La solution provient du blog JR Nielsen et elle est très simple à mettre en place.

Copiez/collez ce code et placez-le dans le fichier functions.php de votre thème. Il est prévu pour fonctionner dans tous les cas et il n’y a qu’une seule chose à changer, ligne 6 : remplacez ce qui se trouve entre parenthèses par les identifiants de vos propres taxonomies. Dans mon cas, cela donne : $taxonomies = array('annee');

//allows queries to be sorted by taxonomy term name
add_filter('posts_clauses', 'posts_clauses_with_tax', 10, 2);
function posts_clauses_with_tax( $clauses, $wp_query ) {
global $wpdb;
//array of sortable taxonomies
$taxonomies = array('example-taxonomy', 'other-taxonomy');
if (isset($wp_query->query['orderby']) && in_array($wp_query->query['orderby'], $taxonomies)) {
$clauses['join'] .= "
LEFT OUTER JOIN {$wpdb->term_relationships} AS rel2 ON {$wpdb->posts}.ID = rel2.object_id
LEFT OUTER JOIN {$wpdb->term_taxonomy} AS tax2 ON rel2.term_taxonomy_id = tax2.term_taxonomy_id
LEFT OUTER JOIN {$wpdb->terms} USING (term_id)
";
$clauses['where'] .= " AND (taxonomy = '{$wp_query->query['orderby']}' OR taxonomy IS NULL)";
$clauses['groupby'] = "rel2.object_id";
$clauses['orderby'] = "GROUP_CONCAT({$wpdb->terms}.name ORDER BY name ASC) ";
$clauses['orderby'] .= ( 'ASC' == strtoupper( $wp_query->get('order') ) ) ? 'ASC' : 'DESC';
}
return $clauses;
}

Vous pouvez ensuite directement utiliser la taxonomie comme critère de tri, n’importe où dans le thème. Par exemple pour lister tous les articles en les triant selon la taxonomie « Année », j’utilise :

query_posts($query_string . '&posts_per_page=-1&orderby=annee&order=ASC');

Il suffit d’ajouter une autre taxonomie, ligne 6 du code précédent pour pouvoir l’utiliser en guise de tri ailleurs. C’est simple et cela fonctionne, même s’il faut pour cela réaliser une jointure en SQL. En théorie, ce type de solution n’est pas très bonne pour les performances, mais je n’ai pas noté de différence avec la méthode par défaut de WordPress et le tri sur un custom field.

Une recherche instantanée sur WordPress

Dans ma quête d’optimisation de mon blog personnel qui tourne sur WordPress, quête qui alimente régulièrement ce blog technique, la recherche interne est un problème particulièrement complexe. Le blog compte actuellement environ 820 articles pour un total d’un million de mots. Ajoutons à cela les mots-clés et la taxonomie, les commentaires éventuellement et j’atteins vite les limites de mon hébergement mutualisé. D’autant que, pour diverses raisons qui feront peut-être l’objet d’un article séparé, j’ai choisi de remplacer la recherche par défaut par celle fournie par Relevanssi qui indexe plus, mais est plus lente.

recherche-wordpress Lire la suite « Une recherche instantanée sur WordPress »

Préparer son blog pour les cartes Twitter

Twitter limite ses messages à 140 caractères, tout compris. Si vous voulez évoquer l’un de vos articles sur le réseau social, le lien vers l’article en question exploite déjà une vingtaine de caractères. Pour décrire le sujet ou vanter ses mérites, il ne vous reste dès lors qu’une vingtaine de caractères au mieux. C’est souvent trop peu et on est obligé de n’associer que le titre de l’article au lien original, ce qui n’est pas toujours très vendeur.

Il existe pourtant une meilleure solution. À condition de configurer correctement son blog, on peut donner à Twitter quelques informations supplémentaires pour chaque lien et les afficher en-dessous du tweet. Cette fonction, nommée « Twitter Cards » par le réseau social, est assez simple à mettre en place et elle vous permettra d’obtenir une meilleure visibilité. Sur le site et dans les logiciels officiels, on pourra obtenir quelque chose comme ça :

Une carte Twitter en action : tous les liens du blog À voir et à manger auront droit à cet aperçu avec une image et un résumé, ce qui offre plus de place dans le tweet pour présenter l'article.
Une carte Twitter en action : tous les liens du blog À voir et à manger auront droit à cet aperçu avec une image et un résumé, ce qui offre plus de place dans le tweet pour présenter l’article.

Lire la suite « Préparer son blog pour les cartes Twitter »

Récupérer l’URL de n’importe quelle page

Pour obtenir l’adresse d’un article et l’utiliser dans son thème — par exemple pour les réseaux sociaux — WordPress propose une fonction toute simple. En utilisant the_permalink();, on obtient le lien de l’article en cours et cela fonctionne parfaitement.

Le problème se pose dès que vous voulez l’URL d’une page qui n’est pas créée manuellement par vos soins (article ou page), mais générée automatiquement par WordPress. Mettons que vous voulez l’adresse d’une page d’archive, comme celle qui rassemble tous les articles publiés pendant un mois, cette fonction ne donne pas bon le résultat. Elle vous donnera l’adresse du dernier article et non celle de la page d’archive elle-même.

Pour trouver toutes les adresses du blog, quelle qu’elle soit, il existe ce code qui fonctionne très bien d’après mon expérience :

echo home_url( $wp->request );

Je dois avouer que je ne sais pas exactement comment cela marche, mais ça marche. Rendons à César, ce qui appartient à César : l’inspiration vient de ce blog. À noter que j’ai simplifié la version originale, puisqu’elle allongeait l’URL de base sans aucune raison apparente. Si quelqu’un veut m’expliquer que j’ai tort, les commentaires sont ouverts…