Plugins, Tutoriaux, Wordpress

Les points à ne pas négliger lorsque vous changez de thème

L’espérance de vie d’un thème étant estimé entre 6 et 12 mois, un blogueur est souvent amené à changer le thème de son blog. Outre le fait d’en réaliser un ou de trouver un thème existant qui vous plaise, il faut aussi penser plusieurs petites choses avant de changer de thème.

N’oubliez pas que même si vous changez le thème de votre blog, votre contenu ne va pas bouger. Par exemple, si vous adoptez un thème où la colonne de contenu est moins large, certaines de vos images risquent de dépasser.

Comme je sais que certains d’entre vous profitent de cette période estivale pour changer de thème, voici quelques conseils/astuces :

La taille des images

Imaginons que vous décidiez de passer d’un thème 2 colonnes à 3 colonnes, la colonne de contenu sera donc plus petite et les images de vos précédents articles risquent de déborder. Pour éviter cela il y a trois solutions :

Ajouter une ligne dans la feuille de style de votre nouveau thème pour limiter la largeur maximale de vos images. Cette solution à l’avantage d’être simple mais elle ne retaillera pas vos images. Elles seront juste coupées afin de ne pas déborder. Autre désavantage, les navigateurs obsolètes (type IE6) ne comprendront pas cette instruction CSS.

exemple :

[css]

.content img {
max-width:100px;
}

[/css]

Pour en savoir plus sur la fonction max-width, rendez-vous sur W3Schools (en).

La deuxième solution consiste à mettre en place un script PHP qui va automatiquement retailler les images en respectant les proportions.  Solution idéale mais nécessite quelques connaissances en HTML/PHP.

Voici le code à insérer pour retailler automatiquement vos images :

[php]

$text = $post -> post_content; // récupère le contenu du post

$regexp = ‘`(<imgs+([^>]*) src="(.*?)" ([^>]*/>))`i’; // détecte toutes les images

preg_match($regexp, $text, $allImg);

$nbImg = count($allImg[0]); // compte le nombre d’images

if($nbImg > 0) { // s’il y a au moins une image
$str = $allImg[3];
$str = trim($str);
$len = strlen($str);
$len_url = strlen(get_bloginfo(‘url’));
$imgpath = substr($str, $len_url, $len); // réécrit le chemin des images (pour être sûr d’être sur le serveur courant)
}

$regrep = preg_replace($regexp, ‘<img src="’ . get_bloginfo(‘template_url’) . ‘/scripts/timthumb.php?src=’ . $imgpath . ‘&w=515" alt=""/>’, $text); // remplace chaque balise d’image avec une contrainte de taille (ici une largeur de 515)
echo $regrep; // affiche le contenu du post

[/php]

Il est là utilisé une librairie couramment utilisée, TimThumb. Ce petit script PHP permet de modifier des images à la volée, et crée ainsi des miniatures qu’il garde sur un cache serveur. C’est ce qu’il y a de mieux dans la manipulation d’images. Elle est notamment utilisée dans le plugin YAPB. (on en reparle plus bas)

La dernière solution consiste à utiliser un plugin dans lequel vous aller déterminer la largeur maximale de vos images et choisir ou non s’il faut la couper. Ce plugin permet également d’appliquer ces paramètres à certains articles ou catégories spécifiques grâce aux ID.

Max Image Size Control

Télécharger le plugin wordpress : Max Image Size Control

Taille des vidéos

Il n’existe malheureusement aucune solution pour retailler toute vos vidéos rapidement. Toutefois, si vous utilisez principalement des vidéos Youtube etc, en passant par un plugin vous pouvez déterminer la taille par défaut du player. Taille que vous pourrez changer une seule fois depuis les options du plugin ce qui permettra de mettre à jour toutes les vidéos que vous avez inséré via le plugin. Voir notre articles sur les meilleurs plugin vidéo pour WordPress.

Taille des titres

Avec la nouvelle mode des étiquettes, il arrive que le changement de thème pose des soucis si vous utilisez des titres trop longs. Effectivement, certains thèmes ne permettent pas d’afficher un titre sur 2 lignes. Pour palier à ce problème, vous pouvez utiliser le plugin Truncate Title ou bien utiliser le code suivant  :

[php]

if (strlen($post->post_title) > 40) {
echo substr(the_title($before=”, $after=”, false),0,40).’…’;
} else {
the_title();
}

[/php]

Miniatures / Thumbnails

En fonction du thème que vous utilisez, le champ personnalisé (custom field) utilisé pour afficher une miniature de l’article peux varier (Thumb, Thumbnail, image etc.). De façon à pouvoir récupérer vos anciennes miniatures, pensez à modifier la valeur pour qu’elle corresponde à celle de votre ancien thème. D’autre part, si vous n’utilisiez pas encore de miniature pour vos articles, pensez à prévoir une image par défaut pour tous les anciens articles.

Là encore c’est beaucoup plus simple si vous utilisiez déjà TimThumb dans votre thème. La librairie possède plusieurs paramètres (liste complète ici) à indiquer lors de l’appel. Parmi ces paramètres, nous avons :

  • src : le chemin complet vers l’image
  • w : largeur max de l’image (en px)
  • h : hauteur max de l’image (en px)
  • zc : zoom/retailler : initialisé à 1, l’image prend toute la place de la partie la plus petite pour qu’il n’y ait aucun blanc, le reste est coupé
  • q : qualité (par défaut 75, va jusqu’à 100)

Pour une image en custom field, qui aurait par exemple comme chemin :

[html]

http://www.exemple.com/wp-content/uploads/exemple.jpg

[/html]

… avec la librairie placée à cet endroit du serveur :

[html]

http://www.exemple.com/wp-content/themes/default/scripts/timthumb.php

[/html]

…et si nous avions sur le blog d’origine une largeur disponible de 400 px et que nous voulions limiter la hauteur de l’image à 200 px, nous utiliserons alors le code suivant à mettre en tête d’article :

[html]
<img src="http://www.exemple.com/wp-content/themes/default/scripts/timthumb.php?src=http://www.exemple.com/wp-content/uploads/exemple.jpg&w=400&h=200&zc=1" alt="" />

[/html]

Dans le cadre d’une migration de thème, nous devrons tout simplement changer la largeur indiquée dans l’appel à la librairie TimThumb, par exemple pour une largeur de 500 px :

[html]

<img src="http://www.exemple.com/wp-content/themes/default/scripts/timthumb.php?src=http://www.exemple.com/wp-content/uploads/exemple.jpg&w=500&h=200&zc=1" alt="" />

[/html]

Rien de plus simple, non ?

ABONNEZ-VOUS à la mailing list, c'est GRATUIT !

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !

10 Comments

  1. Je déconseille personnellement TimThumb qui m’a posé des gros soucis de performances. Les temps de chargement sont augmentés avec ce script, même si les images sont en cache.

  2. J’ai arreté l’utilisation de TimThumb également pour des soucis de performance.

    Cependant, d’après ce que j’ai pu lire depuis, il on améliorer le script.
    Mais je n’ai pas encore testé… qu’on me tienne au courant… car je n’ose plus prendre le risque de le mettre en production !

    Merci sinon pour le tuto.

  3. Avec un système de cache cela ne pose pas de soucis. Peux-tu être plus précis quand tu parles de “soucis de performances” ?

  4. Ping : links for 2009-08-19 | Eric Reboisson's Blog
  5. Je conseillerai aussi de bien inspecter le thème, un de mes amis a passé pas mal de temps à installer un nouveau thème et à l’arrivée je me suis aperçu qu’il y avait des liens commerciaux dans le footer qu’on ne pouvait pas retirer, ce qui est néfaste pour son référencement, il a du tout recommencer..

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Avant de partir

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !