Bonnes pratiques WordPress

Ayez le bon réflexe avant d’uploader

Un petit billet pour un grand rappel important des bonnes pratiques sur WordPress, et sur le Web en général.

Pour éviter tout problème et si vous ne devez retenir qu’une chose de ce billet, il faut avoir pour règle générale de

renommer convenablement ses images AVANT de les uploader. Pas seulement les images : tout fichier que vous uploadez (PDF, document, map, zip…).

Renommer les fichiers images avant d’uploader

Ne pas laisser d’espace dans le nom du fichier, ni de caractères latin, c’est à dire pas d’accent ni cédille ni accent circonflexe etc.

Même règle pour les identifiants, les slugs, les permaliens, les adresses url, les identifiants de login (username).

Sous peine d’avoir un problème à l’upload, que vos images ne s’affichent pas correctement dans tous les navigateurs, mais aussi, surtout, de ne pouvoir les sauvegarder par FTP ensuite.

Exemple concret : sur votre ordinateur vous avez un fichier PDF ou une image intitulée « mon image à moi.jpg« . Vous l’uploadez dans votre blog chéri. Vérifiez par FTP dans le dossier wp-content/uploads, le fichier réel uploadé deviendra « monéimageémoi.jpg« . Pas joli n’est-ce pas ? Il faut donc renommer comme suit: mon_image_a_moi.jpg

Traitez les images avant de les charger

Puisqu’on en parle, autre rappel. Avant de les uploader, traitez vos images. Il est inutile de charger une image immense si c’est pour au final afficher un petit machin. Par ailleurs votre thème wordpress impose une limite pour ne pas tout déformer. Et si vous changez de thème par la suite, ce serait pas mal que ces insertions d’images ne déforment pas le nouveau thème. Alors en général, la taille d’une image ne devrait pas dépasser 640px de large. C’est déjà gros.

D’abord réduire l’image à la taille souhaitée. Avec n’importe quel logiciel :

– Avec le windows Manager Media de votre Windows ou tout autre sur Mac.
– Gimp (lourd mais logiciel de retouches et traitement des images)
– Xnview (plus léger, pratique juste pour redimensionner)

Optimiser le poids de l’image

Yahoo Smush.itEnsuite optimiser son poids en l’uploadant chez Yahoo Smush.it. Attention, là on parle bien du poids de l’image, non de sa taille. Une fois optimisée, vous téléchargez l’image pour remplacer la vôtre et ainsi elle est prête à être insérée dans votre article.

Vous pouvez éviter cette manipulation en ajoutant le plugin Wp Smush.it qui le fera automatiquement pour tout nouvel upload. Notez que ce plugin ne fonctionne pas si vos images sont ailleurs que dans un des dossiers de wp-content.

Yahoo Smush.it saving

Réduction du poids de l’image

Au moment de l’envoi de fichier

– Renommer tout document que vous voulez uploadez AVANT de l’uploader : pas d’accent ni espace ni cédille. Pour séparer les mots utilisez plutôt des traits-d’unions (-) ou des underscores (_) pour remplacer les espaces. Par exemple mon-image-a-moi.png.

Ajouter une image dans WordPress

Remplissez convenablement les champs

– Titre : mais une fois chargée, quand votre image uploadée apparait dans la fenêtre d’envoi de fichiers, vous pouvez et je vous le conseille, changer le titre de celle-ci. Cela ne change pas le titre réel du fichier image. Alors pourquoi faire ? Le titre de l’image dans la fenêtre d’envoi est ce qui va apparaitre en info-bulle quand on passe la souris sur l’image. Pas très joli de laisser quelque chose comme img_2544.jpg s’afficher non ?

– Alt : ce qui s’affiche au cas où cette image n’est pas visible. Important pour prévenir un défaut de navigateur, pour aider les aveugles à s’informer de ce qu’ils loupent, et pour avoir une validation conforme des standards du Web.

– Légende : le texte de légende qui s’affiche sous l’image. Optionnel. Il faut savoir que le code généré n’est pas identique avec ou sans légende. Avec légende, la plupart des thèmes WordPress codent un petit cadre de couleur. Sans légende, le code généré sera

<img src="mondomaine.com/wp-content/uploads/image.png">

Avec légende le code devient :

[ caption id="attachment_376" align="alignright" width="300" caption="Légende img class="size-medium wp-image-376" title="titre" src=http://domaine.com/wp-content/uploads/mon_image_a_moi-300x298.jpg alt="titre" width="300" height="298" />[/ caption]

– Lien d’attachement : quand vous insérez une image, demandez-vous s’il y a lieu de laisser ce lien. Si ce lien apporte une information supplémentaire, oui. Sinon vous incitez vos visiteurs à cliquer pour rien.
Ce sera utile de laisser le lien d’attachement dans plusieurs cas : soit parce que vous renseignez un lien externe sur l’image (illustration d’un site externe), soit parce que vous insérez une image de taille moyenne dans l’article mais que vous laissez un accès à la voir plus grande. Soit dans le cas d’une galerie d’images.

– Alignement : aucun, gauche, droite, centré. Aucun alignement permet d’insérer une image et d’aller à la ligne. Tout autre alignement fait flotter l’image en aspirant le texte à côté vers lui. Si le texte qui suit est court, cela fera flotter de manière chaotique. Mais là tout dépend de comment le thème est codé (feuille de style). .

– Taille de l’image : par défaut WordPress crée trois tailles supplémentaires de votre image uploadée Ce qui fait donc 4 fichiers images pour une uploadée. Choisir la taille insérée en fonction de vos besoins, mais surtout fonction du thème. Généralement ce sera taille moyenne.

– Insérer l’image ou Utiliser comme miniature : insérer veut dire inclure l’image dans l’article. Vous pouvez insérer la taille que vous voulez ou une miniature. Alors que utiliser comme miniature veut dire qu’une vignette de cette image s’affichera à côté de la navigation de votre blog en mode extraits (archives, tags, catégories, voire le blog si vous avez choisi des extraits comme sur ici sur mon blog).
Il va sans dire que vous pouvez utiliser comme miniature une image sans insérer d’image dans un article. Et utiliser comme miniature une tout autre image que celle insérée.

Si vous vous trompez

Une image uploadée est insérée dans la bibliothèque des Médias (voir onglet Médias dans le tableau de bord). Même si vous supprimez le code ou l’image dans l’article, cette image existe bel et bien dans la bibliothèque. Donc inutile d’uploader deux fois, quand ce n’est pas plusieurs fois la même image. Si vous vous êtes trompé de taille, supprimez cette image puis re-cliquez sur la fenêtre d’envoi de fichiers. Là, vous verrez à l’onglet Galerie un chiffre qui indique bien que vous avez déjà une image attachée. Choisissez la bonne taille. Ou allez chercher dans la bibliothèque votre image en tapant un seul mot du nom de celle-ci (la recherche ne marche que pour un seul mot sans tiret). .
Pour changer de taille alors que l’image est déjà uploadée et insérée, juste passer en mode “html” et retirer le code.
Vous pouvez aussi, au moment de l’upload, supprimer tout de suite dans la fenêtre d’envoi ce que vous venez d’uploader. Faire supprimer puis continuer.

Je conseille de vous habituer à travailler en mode html pour vous familiariser.

Surveillez ce qui se passe en vérifiant, dans la fenêtre d’envoi de fichiers, que vous avez un chiffre à côté du mot Galerie (1) pour une photo uploadée. Si vous avez (2) c’est qu’un fichier y est déjà associé et que ça s’emmêle les pinceaux. Vérifiez alors dans la bibliothèque s’il ne faut pas jeter ce fichier parasite. Le chiffre qui apparait à côté du mot Galerie est l’exact nombre de photos attachées au billet.

Galerie du billet

La Galerie affiche le nombre d’images attachés au billet, avec ou sans erreur.

Snippet pour la bibliothèque des images

Pour voir dans les colonnes d’images de la bibliothèque les fichiers d’attachements (à quel article est attaché l’image). Collez ceci dans le fichier functions.php :

// AJOUTER COLONNE ATTACHEMENT AUX ARTICLES Media library

function lashon_ColonneMedias($columns) {
    $columns['medID'] = __('ID');
    return $columns;
}
add_filter( 'manage_media_columns', 'lashon_ColonneMedias' );
function mediaColumnsRow($columnName, $columnID){
    if($columnName == 'medID'){
        echo $columnID;
    }
}
add_filter( 'manage_media_custom_column', 'mediaColumnsRow', 10, 2 );

That’s all Folks