Guide pour Insérer une Image dans WordPress

Ajouter une image
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Wordpress 3.x
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de vous apprendre à insérer une image dans une page WordPress, configurer les paramètres d'affichage et comprendre la gestion de médias sur le serveur de votre site.

Ce guide vous montre comment insérer une image dans une page WordPress et gérer ses paramètres d'affichage et de comportements.

Dans cette leçon, nous allons explorer en détail comment utiliser WordPress pour insérer une image dans une page de votre site web. Nous commencerons par apprendre à ajouter une image via l'interface utilisateur de WordPress, une opération rendue très simple et intuitive par l'outil. Vous serez guidé à travers les différentes options disponibles pour configurer l'affichage de votre image, incluant le choix des tailles et des alignements.

En suivant les étapes indiquées, vous apprendrez également à ajouter des descriptions et des légendes qui peuvent améliorer la visibilité de votre contenu pour les moteurs de recherche et les utilisateurs malvoyants. Nous verrons comment WordPress gère automatiquement différentes tailles d'image et comment ces images sont stockées sur le serveur de votre site, organisées par année et mois. Enfin, nous aborderons les options d'édition pour recadrer votre image et personnaliser l'affichage d'une vignette, tout en conservant un lien vers l'image en taille réelle ou en ajoutant des éléments comme des légendes ou des copyrights.

Voir plus
Questions réponses
Comment ajouter une image à une page dans WordPress?
Pour ajouter une image, allez dans la page d'édition, placez votre curseur à l'endroit souhaité, cliquez sur 'Envoyer/Insérer', et sélectionnez ou déposez votre fichier image.
Pourquoi est-il important de renommer les titres des images dans WordPress?
Renommer les titres des images aide à améliorer le référencement et à rendre les images plus accessibles pour les utilisateurs malvoyants.
Comment WordPress gère-t-il les différentes tailles d'image?
WordPress génère automatiquement plusieurs tailles d'image (miniature, moyenne, originale) lors de l'importation d'une image, facilitant ainsi leur utilisation dans différentes parties du site.
Nous allons voir maintenant comment insérer des médias et plus particulièrement pour commencer comment rajouter une image dans son site. Insérer une image dans une page est une opération qui est devenue très simple dans Wordpress. Vous allez voir que le logiciel offre une interface adaptée pour régler l'affichage et le comportement des images dans ce site. Alors on va prendre la page d'accueil avec ce texte là et on va rajouter une image à l'intérieur de notre texte. Je fais modifier la page. Il faut que je positionne mon curseur à l'endroit où je souhaite que l'image apparaisse. Donc si je souhaite que ce soit entre ce bloc de texte et le en savoir plus, je mets mon curseur ici et je fais un retour à la ligne. Je remonte et j'ai bien mon curseur qui est positionné ici entre les deux paragraphes. Là tout ce qui est médias ça va s'opérer ici. Donc je clique sur envoyer insérer et là vous voyez que j'ai une boîte de dialogue qui s'ouvre. Ajouter un média. J'ai deux possibilités soit de déposer le fichier ou soit de sélectionner le fichier. Pour commencer on va déposer le fichier. Ça c'est un outil, c'est une nouveauté de Wordpress qui est très intéressante, qui peut vraiment vous faciliter la vie. Lorsque vous avez des écrans d'ordinateur qui sont relativement larges, vous avez votre navigateur là avec la fenêtre ajouter un média et puis à côté une autre fenêtre avec la liste de tous les médias. Il vous suffit de les glisser. Je vais vous montrer comment ça marche. Là je veux rajouter mon image, page d'accueil. Je la prends et je la dépose. Vous avez vu ça a modifié le rendu ici de ces quadrillages là. Et maintenant j'ai bien mon image ici qui est apparue. Donc je descends avec ma souris ici, je vois mon image. Donc pour vous la montrer ici mon image c'était celle-ci. Automatiquement Wordpress a créé une petite vignette de mon image pour que je la retrouve facilement. Là c'est le titre. Alors ça n'est pas le nom de l'image. Le nom de l'image on ne peut pas le modifier mais c'est le titre, le title tel que ça va apparaître. Donc là c'est important de le modifier, de lui donner un nom qui corresponde à quelque chose. Aussi bien par rapport au référencement ou par rapport au standard pour les malvoyants mais aussi pour que je le retrouve plus tard, plus facilement. Quand on a des images avec des 001 souvent c'est les noms qui sont générés automatiquement par les appareils photos. C'est pas facile de retrouver des images qui ont des numéros. Donc autant leur donner un titre. Donc là je peux mettre des espaces, je peux mettre des accents. Ici c'est vraiment une phrase, une description. Donc je vais dire vue aérienne. Le texte alternatif donc ça aussi c'est très important. C'est comme la balise title qu'on l'a vu précédemment. Donc ici je vais décrire en quelques mots le contenu réel de l'image. La ville vue d'avion sous le soleil. La légende ça on verra ça un petit peu plus tard. Le champ description en général c'est quelque chose que l'on va assez peu utiliser parce que c'est plutôt un champ qui va apparaître lorsque l'on va afficher une page d'image. Alors une page d'image on verra ça un petit peu plus tard. La cible du lien qu'est ce que c'est ? Ça veut dire quand mon image s'affichera est-ce que je veux pouvoir cliquer dessus ? Et si je veux cliquer dessus vers quelle page ou vers quel lien est-ce que je décide d'aller ? Donc là je vais mettre aucun. L'alignement c'est la mise en page. Donc là je vais mettre aucun aussi. La taille alors regardez ça c'est très intéressant. J'ai envoyé une image et vous voyez ici j'ai un miniature 150 150 donc c'est cette image là. J'ai moyenne 300 sur 320 et taille originale. Cela signifie lorsque j'ai déposé mon dossier ici il est allé sur mon serveur et en allant sur mon serveur il a généré trois images. Pour mieux comprendre cette petite procédure on va aller sur notre serveur. Donc je vais sur mon site sur mon serveur et là regardez j'ai mon répertoire wp-content et à l'intérieur de wp-content est apparu un dossier upload. Et à l'intérieur de ce dossier upload est apparu une année 2012 et à l'intérieur de cette année le mois 2008. Qu'est ce que ça signifie ? Ça signifie que dans mon dossier wp-content j'ai un répertoire upload avec toutes mes images qui vont être triées par année et par mois. Et si je clique sur 08 regardez mon image de page d'accueil elle apparaît en 1 2 3 4 5 formats. J'ai automatiquement 5 formats qui ont été créés. Si je retourne dans mon image je fais insérer dans l'article. Parfait j'ai mon image mettre à jour et là si je retourne sur ma page d'accueil j'ai bien mon titre, mon descriptif et mon image qui est sans lien. C'est parfait maintenant on va refaire insérer une image dans une page ça va être la même chose et on va montrer un autre comportement. Donc je vais dans ma page modifier. Cette fois-ci je vais dans le contenu et je vais essayer d'insérer une petite vignette avec un lien. Donc je fais la même chose envoyer insérer. Cette fois-ci je vais faire sélectionner le fichier donc regardez là c'est un comportement habituel on va sélectionner le fichier ouvrir. Donc vous voyez l'image est envoyée sur mon serveur on peut on peut suivre ici la progression le titre et le descriptif le texte alternatif les bateaux dans le port. Donc là je vais faire un lien vers mon image et je vais décider de l'aligner à droite. Donc si je fais le lien vers ma photo je vais pas afficher la taille originale mais je vais afficher une petite image et je fais insérer dans l'article. Très bien mettre à jour. Donc maintenant on va aller voir notre page et regardez j'ai bien ici mon texte le descriptif tout le contenu et mon image qui est ici et si je clique dessus j'ai bien mon image qui s'affiche en grand. Alors regardez quelque chose sur cette image. Cette image elle est intéressante parce que j'ai des jolis drapeaux là sur le côté droit et malheureusement ici je les vois pas. Alors vous allez voir que WordPress est un outil qui est bien fait parce que justement ce que l'on a vu là sur le serveur que WordPress faisait un découpage automatique on peut intervenir dessus. Donc ça c'est très pratique on va le faire tout de suite. Et là je vais modifier cette image donc il faut que je la supprime. Alors regardez lorsque l'on clique sur l'image j'ai deux boutons modifier et supprimer là il faut la supprimer. Donc je recommence envoyer insérer mais regardez cette image elle est déjà sur mon serveur donc je ne vais pas la réenvoyer. Si vous observez bien ici ajouter un média j'ai depuis l'ordinateur depuis le web bibliothèque et j'ai ici une galerie qui est apparue avec un numéro 1 ça veut dire que j'ai une image dans la galerie c'est l'image que j'ai déjà envoyé. Donc je clique dessus et là je retrouve la même interface que tout à l'heure. Et là regardez sous ma vignette je peux modifier l'image et ça c'est très intéressant parce que je vais pouvoir ici sélectionner donc je vais essayer de faire un carré donc de faire 400 sur 400 et je vais là non pas sélectionner une image juste les bateaux mais sélectionner juste les bateaux mais sélectionner les bateaux et les drapeaux comme ça. Donc j'ai mon espace là qui est comme je le souhaite et regardez ici j'ai un petit bouton pour recadrer donc je recadre et là je souhaite que ce recadrage s'applique à la miniature uniquement. D'accord là je ne touche à rien et je fais enregistrer. Donc regardez ma vignette a changé donc maintenant j'ai vraiment une vignette qui correspond exactement au recadrage que je souhaite. Et là je peux laisser la même chose donc le lien vers l'image complète depuis la miniature mais cette fois-ci je vais rajouter une légende par exemple un port coloré. Maintenant qu'on voit les drapeaux ça a du sens et là je fais insérer dans l'article. Et regardez comme j'ai rajouté une légende j'ai ma mise en page qui a changé qui s'est adaptée. Donc là je peux mettre à jour et là si j'affiche ma page j'ai toujours mon image qui est alignée à droite. Cette fois-ci j'ai un cadre gris avec en dessous une légende. Alors ce qui est intéressant c'est que cette légende je peux aussi l'éditer par exemple je veux que ce soit en gras je peux cliquer sur gras. Et ce qui est surtout intéressant et on verra ça un petit peu plus tard quand on utilise des photos de chez flickr par exemple, c'est que je peux rajouter dans mes images un petit copyright pour faire un lien vers le photographe. On va modifier cette image encore une fois pour vous montrer encore une fonction. Donc je vais cliquer sur mon image et je vais la modifier. Donc cette fois-ci j'ai toujours ma miniature avec le lien. Ça je ne peux pas changer ce comportement là. Mais par contre regardez je peux ici modifier la taille. Ça c'est assez intéressant parce que quand on a des petits soucis de mise en forme ça c'est rapide et ça me fonctionne bien. Donc je peux changer le titre le texte alternatif la légende. Donc vous avez vu tout à l'heure j'ai utilisé les boutons pour générer un code html. La cible du lien et on peut décider de faire un lien vers un autre site par exemple. Et vous avez aussi ici des options avancées. Alors en général on va on va pas utiliser tout ça mais par exemple si vous faites un lien vers un autre site c'est ici que vous pouvez décider de faire une ouverture dans une nouvelle fenêtre. Alors je vais simplement ici enlever la légende pour retrouver la mise en page de tout à l'heure. Et pour vous montrer une fonction c'est qu'en fait quand vous n'avez pas de légende vous pouvez sélectionner votre image et la déplacer comme ça simplement en cliquant dessus je la déplace et je veux qu'elle apparaisse ici par exemple. Donc là il n'y a pas de problème je mets à jour et j'ai pu comme ça déplacer mon image simplement en cliquant et en la déplaçant.

Programme détaillé de la formation

Nos dernières formations WordPress