Wordpress

Avant d’uploader une image ou un fichier dans WordPress, il faut le renommer. Manuel.

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

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

Avec légende le code devient :

1
[ 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]
[ 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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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 );
// 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

commentaires

  • Hello
    Sachez que si vos fichiers sont déjà uploadés avec un accent et que vous souhaitez par la suite utiliser le fichier timthumb.php via un thème ou un plugin, alors il vous sera IMPOSSIBLE d’afficher les thumbnails.
    J’ai découvert ce bug recemment lors de l’ajout d’un plugin pour un client. Résultat : modification du timthumb.php pour éviter un htmlentities -_-‘
    Quoi qu’il en soit, merci pour ces infos.

  • Merci pour l’article. Je ne connaissais pas Yahoo Smash It cependant, après avoir fait le test, pas de grand changement si l’image a déjà été optimisée sous Photoshop avec « Enregistrer pour le web ».

    Quant au nom des fichiers, j’ai toujours travaillé en mettant des tirets au lieu des underscores, exactement comme une URL de pages Web. J’obtiens de très bons résultats avec Google Image.
    Alors la question se pose : pourquoi des tirets pour une URL et des underscores pour une image ?

    Avez-vous de bons retours par rapport à cette pratique ?

  • Les tirets permettent aux crawlers de décomposer plus facilement l’expression en différents mots.
    Ainsi une expression séparée d’underscores sera généralement considérée comme un seul et même terme, ce qui nuira au référencement.

    Pour ma part, j’utilise les tirets hauts pour l’ensemble des éléments que je souhaite optimiser pour le référencement.

  • Bonjour,
    Concernant le renommage des fcihiers, il n’est pas nécessaire de supprimer les espaces, WordPress les remplace automatiquement par des tirets. De plus, ainsi le champs « titre » contient exactement le nom sans tirets du fichier et l’on peut par un simple copié-coller remplir les champs « alt » et « légende ».
    C’est ce que je fais et cela fonctionne très bien.
    Cordialement.

    • Au contraire, il est totalement nécessaire de renommer. L’image sera correctement uploadée avec vos tirets, mais comme je l’ai expliqué dans mon article, ensuite il sera impossible de sauvegarder une image mal nommée via FTP. A moins d’avoir accès à un Cpannel et de sauvegarder le dossier en bloc, ce qui est assez rare chez les hébergeurs français. Et dans certains navigateurs l’image ne s’affichera pas. A vous de voir. Je conseille, après chacun voit comme il veut hein…

      • Pourtant regardé comment est nommée l’image suivante dans mon dossier upload :
        YUMA-organic-additifs-02-150×150.jpg

        Elle s’appelait lors de l’insertion « YUMA organic additifs 0.jpg ».

        Quel est le problème que cela peut poser à l’upload ? vous attirez ma curiosité.

        Je viens à l’instant de télécharger le dossier uploads sur mon ordinateur sans aucun problèmes avec Filezilla chez FREE.

        La méthode que j’applique à un avantage, c’est qu’un simple copié-collé du « titre » dans « légende » et « Alt », suffit pour les remplir sans en plus à avoir à éditer la légende et « Alt » : il suffit de choisir sur son ordinateur comme « nom de fichier.jpg » le texte de la légende « texte de la legende.jpg » et le tour est joué.

        Je viens à l’instant de faire l’essai, avec Chrome, Firefox, I.E, Opera et Safari, toutes mes images sont visibles.

        Après comme vous dites, chacun fait ce qu’il veut.

  • Hello, lorsqu’on upload une image sur WordPress, celle-ci est redimensionnées aux dimensions spécifiées pour le thème, ce qui me va bien. Mais l’image originale est gardée, alors que je n’en ai plus besoin. Quelqu’un connaitrait-il une méthode pour systématiquemen effacer l’original d’une image sans toucher aux thumbnails et autres ?
    merci !

  • Voilà des infos que j’aurais dû lire avant de commencer mon blog.
    En mettant les titres je croyais que WordPress renommait les noms de fichiers, mais nom, il laisse mes DSC_4555-edit.jpg et j’en passe.

    Je me suis dit, pas grave, je vais les renommer par ftp et mettre en ordre ma bibliothèque mais, pas de chance, l’interface ne permet pas de changer le nom de fichier…

    Pas grave (2ème !), me suis-je dit, allons directement dans la base de données… Mais je ne trouve pas la table où les infos de multimedia sont stockés !

    Quelqu’un peut-il m’éclairer là-dessus ?…

    Merci

    • Salut Paul,
      Alors désolée de t’apprendre que tu as aggravé ton problème en changeant tes noms de fichiers par ftp. Retiens un truc général important: si tu veux que WordPress fasse ou prenne en compte quelque chose, tu dois passer par … WordPress. Autrement, si tu ne sais plus comment renommer tes fichiers avec le titre original, tu vas devoir refaire tout à la main. Sinon, tu pouvais et tu devais utiliser des plugins via wordpress. J’en ai cité plusieurs dans cet article. Donc ce que je te suggère maintenant de faire, est d’installer le plugin « Enable Media Replace ». Puis d’aller dans « Médias » de ton WP. Et de remplacer chaque fichier, individuellement, avec le bon qui doit correspondre. Au passage, veille bien à cocher la 2e case qui dit que tu veux renommer le fichier et mettre à jour les liens.
      Et tant qu’à faire de recharger, avant de le faire, change le titre de ton image, et surtout, surtout, relis mon article car les fichiers DSC ect sont immenses. Max 100k c’est déjà très gros. Ou alors tu fais un blog photo et peux te permettre trois fois plus. Mais pas le mega comme c’est le cas habituellement.

      P.S. : et ne change jamais en cours de route le réglage pour Médias qui définit l’url des uploads.

      • Merci Barbara : ce plugin répond parfaitement à ce que je veux faire.

        Concernant la taille, je la réduisais déjà (en même temps que recadrer, régler les couleurs, etc), mais laissais le nom original…

        • Tant mieux. Tiens, ajoute aussi le plugin « SuperSlider-Media-Pop ». Puis clique sur l’onglet Articles (ou Pages), tu verras une meilleure gestion d’ensemble.

  • Salut,
    Quand je veux charger une photo dans média, j’ai toujours la même fenêtre qui apparait : le fichier est vide Merci d’envoyer quelque chose de plus consistant ! Je ne comprends pas j’ai récupéré les photos de mon téléphone, renomée avec extension .jpeg ou .pdf et ca ne marche pas
    Merci pour votre aide

  • J’ai eu un problème ressèment avec la migration d’un blog WordPress, certaine images renvoyé des erreurs 404 car elles avaient été uploadé avec des accents.

    Donc merci de partager la recommandation pour les accents car cela évitera que des erreurs similaire se reproduise pour d’autre.

    • Merci Robert. Oui c’est vrai qu’on peut aussi utiliser un plugin au passage. A vrai dire j’en mets un systématiquement pour mes clients parce que je sais qu'(ils vont oublier de renommer leurs fichiers 🙂
      En revanche je ne choisirai pas ce plugin-là, plutôt un qui renomme au moment de l’upload

  • Bonjour,

    Pour enlever les espaces et accents vous pouvez aussi faire un script comme ci-dessous à mètre dans votre functions.php :

    /* Fonction enlever les accents */
    function sanitize_filename_on_upload($filename) {
    $ext = end(explode(‘.’,$filename));
    // Remplacer les caractères
    $sanitized = preg_replace(‘/[^a-zA-Z0-9-_.]/’, », substr($filename, 0, -(strlen($ext)+1)));
    // Remplacer les points du fichier
    $sanitized = str_replace(‘.’,’-‘, $sanitized);
    return strtolower($sanitized.’.’.$ext);
    }
    add_filter(‘sanitize_file_name’, ‘sanitize_filename_on_upload’, 10);

    cordialement

  • Bonjour et surtout merci….c’était peut-être tout c…. mais j’ai ramé pas mal avant de trouver VOTRE réponse pour uploader (renommer et enlever les caractères « non latin »)….Vraiment ça m’a enlevé une épine du pied (ça commençait à faire mal….)
    cordialement.

  • Bonjour, et merci pour ces bons conseils qui restent d’actualité.
    Juste une question, pour mettre les lignes de code indiquées, le fichier functions.php est bien celui dans le dossier wp-includes et l’insertion se fait par FTP ?
    Est-ce bien ça ? Merci.

Répondre à luciole135 X