Comment rendre compatible votre thème avec le gestionnaire de médias de WordPress 2.5 et 2.6

Comment rendre compatible votre thème avec le gestionnaire de médias de WordPress 2.5 et 2.6

Publié le - Catégories Développement, Thèmes

Depuis la version 2.5, WordPress dispose d’un gestionnaire de médias bien plus flexible que par le passé. Il propose par exemple de gérer l’alignement de vos images dans le contenu de vos articles.

Malheureusement, dans la plupart des cas, ce que vous voyez dans l’éditeur de TinyMCE ressemble rarement à ceux qui est affiché dans votre blog.

Depuis WordPress 2.6, l’éditeur visuel va plus loin et propose d’ajouter des légendes à vos images. Encore une fois, le rendu graphique sur votre blog est rarement à la hauteur…

La raison ?

Elle est très simple. Très peu de thèmes WordPress incorporent les nouvelles classes CSS du gestionnaire de médias !

Pas de panique. Nous allons voir ensemble comment ajouter les bonnes règles CSS pour profiter à 100% des capacités de l’éditeur visuel.

Pour cela, nous allons utiliser le thème par défaut que propose WordPress. En effet ce dernier contient l’ensemble des propriétés CSS nécéssaires.

L’objectif est donc d’ajouter ces règles CSS à votre thème. Pour simplifier la chose, j’ai mis à disposition les lignes CSS à ajouter sur le service pastbin:

Il vous suffit d’ajouter ces lignes à la fin de votre fichier CSS. Pour y parvenir 2 méthodes, soit via votre client FTP et éditeur de texte favori, soit via l’éditeur de thème de WordPress. (Onglet apparence, éditeur de thème)

Démo:

Légende de l'image
Légende de l'image

24 commentaires

  2. Benoît

    J’ai remis au goût du jour tous mes thèmes, c’est tout de même bien pratique cette gestion de médias. Quant aux légendes sous les images, c’est une belle avancée aussi.
    Il est à noter que le codex indique cette méthode.

  5. jaly

    Bonjour,
    Je souhaite publier des photos dans la vie en gris et je ne connais rien à Worpress par quoi commencer.
    Merci d’avance jaly

  7. Elo

    Petit problème non-résolu cependant :
    Je n’arrive pas à aligner les images côte à côte qd il y a une légende placée sous chaque image … les images sont calées par défaut l’une en-dessous de l’autre, il n’y a pas de class pour gérer cela donc j’ai tenté de rajouter une div englobante avec une liste ul li , et un display inline, mais rien ne bouge …
    Une idée qqun SVP ? 🙂

  8. Amaury

    Elo > Commence par donner l’adresse de ton site 😉

    Ca sera plus simple à débugger…
    Mais tu auras certainement plus de réponses à ton problème sur le forum !

  9. Elo

    Apparemment le rapport entre les images n’est pas prévu ds le gestionnaire de média, donc j’ai tt simplement généré un tableau avec des cellules et glissé les images dedans pour les aligner comme je le voulais, à l’horizontal ^^
    Sinon j’ai débusqué un nouveau soucis : toutes les images intégrées via les gestionnaire sont étirées à 332px, dès lors que j’ai sélectionné l’alignement à gauche ou à droite !
    Dans le code source les parametres Width et Height sont bons pourtant, mais qd je fais clic droit sur une image pour connaitre ses propriétés j’ai la largeur 332px qui s’affiche …
    J’ai bien cherché, mais je ne trouve nulle part une dimension « imposée » de 332px !
    Je ferai bien d’aller poser ma question sur le forum en effet 😉

  14. seb

    Bonjour Amaury,

    sur mon site, j’affiche des images pour lesquelles j’ai rempli le champs « légende ». Celle-ci apparait bien dans l’aperçu tinymce mais en revanche lorsque je publie l’article elle n’apparait pas côté blog.
    J’ai beau utiliser ton CSS, rien n’y fais, et pour cause : dans le code source de l’article, il n’y a pas trace de la la légende, elle n’apparait que dans le « alt », le texte alternatif, de l’image.

    Que dois-je faire pour que la légende s’affiche ?
    Je précise que ce problème était valable sur la version 2.6.1, et qu’il est toujours présent dans la version 2.6.2 que je viens d’installer.

    Y’a-t-il une fonction à activer/désactiver comme c’était le cas pendant un temps (voir article) ?

  17. olivier

    Bonjour @ tous,
    Moi j’ai un autre souci …
    Dans un article celui ci :
    http://blog.coolgraph.net/?p=1

    Le petit logo wordpress est compressé… malgré les attributs largeur hauteur définis… cela fait ça dès que je sélectionne l’alignement à gauche ou à droite.
    Lorsque c’est centré pas de souci !

    Merci de me venir en aide car c’est vraiment une galère pour moi !

    @+

  18. seb

    olivier, je me permets de te répondre :

    Si tu alignes à droite, tu vois que ton image subit la class « alignleft ».
    Or si tu vas dans ton css, tu vois que la class « alignleft » est définie ainsi :

    .alignleft{float:left; padding:20px; margin-left:20px; background:url(images/back.gif) no-repeat left; width:100px; font-size:11px;}

    Note le « Width:100px »

    Voilà pourquoi ton image fait 100 px de large

  19. olivier

    Merci Merci Merci mille fois Seb ! d’une par pour ton aide et d’autre part pour ta rapidité ! c’est nickel maintenant … à par la flèche qui se répercute derrière le logo… je ne comprend pas non plus pourquoi… si tu as une idée 🙂

    Merci encore

    @+

  20. seb

    La flèche c’est le background de la class « alignleft ».
    Elle apparait car, comme tu peux le constater, aligneleft est définie ainsi :
    background:url(images/back.gif) no-repeat left;

    voilà

    et désolé Amaury de squatter ton blog 😉

  22. bgin

    Plus le temps passe et plus je me félicite d’avoir adopté WordPress.
    On ne peut que féliciter et remercier Amaury, Xavier et d’autres pour leur travail de soutien.
    J’avais remarqué cette distorsion qu’Amury signale entre le rendu de mon blog et l’interface de mise en page des images à partir de la v 2.5
    J’ai un peu galéré pour faire l’adaptation au thème Mimbo2.2-Niss.
    Désormais, je penserai à venir chercher l’information ici.
    Merci encore

  23. delphinE

    Bonjour,

    je suis désolée d’être une truffette, mais j’ai besoin de votre aide, malgré avoir suivi les conseils donnés dans ce post … mes images restent désespérément alignées à gauche … je pleure pas encore mais presque …
    Merci de votre contribution !

  24. delphinE

    Bon, en fait, lorsque l’article est publié, ça marche, mais par contre l’aperçu du billet lui ne prend pas en compte les alignements d’images …. pas facile de faire une mise en page…
    Et merci ! ça marche !

Les commentaires sont fermés