Ajouter des médias sous WordPress

WordPress aime les médias et ils le lui rendent bien ! On peut quasiment tout insérer dans WP, voici un petit tutoriel sur l'ajout des différents médias (son, image, vidéo, ...) dans WP.

Pour un accès direct, cliquez sur les liens suivants :

ajouter-medias-wordpress


 

Ajouter une image

Le basique et le plus simple, ajouter une image dans un post WordPress cela se fait en un clic depuis votre éditeur.

ajouter-une-image-wordpress

 

Il faut ensuite sélectionner l'image, soit sur votre PC, soit directement dans votre bibliothèque Médias. Remplir correctement les champs titre, légende (si besoin), le texte alternatif et une description de l'image. Enfin les réglages de l'affichage tels que l'alignement, le lien lorsque l'on clique sur cette image et enfin la taille (miniature, moyenne, grande ou taille originale).

ajouter-une-image-wordpress-2

 

Ajouter une galerie avec WordPress

La galerie image WordPress a grandement évolué avec les dernières versions de WordPress. Il est désormais très simple d'en ajouter et de prévisualiser le résultat dans votre éditeur de texte.

ajouter-une-galerie-images-wordpress

 

Une fois les fichiers sélectionnés, il ne vous reste plus qu'à définir le lien (vers où doivent pointer ces images), les classer (choisir leur ordre), le nombre de colonnes et si elles doivent apparaître dans un ordre aléatoire.

ajouter-une-galerie-images-wordpress-2

 

Voici le rendu de la galerie WordPress native, sur 3 colonnes avec description d'image et pointant vers le fichier média attaché.


 

Ajouter une vidéo dans WordPress

Rien de plus simple, WordPress sait parfaitement gérer les vidéos et les liens raccourcis de YouTube, Vimeo et consorts.

Ouvrez un compte sur la plateforme de votre choix, importez-y votre vidéo puis copiez le lien si vous souhaitez afficher la vidéo sur toute la largeur utile (image 1), ou utilisez le code d'intégration pour définir une taille personnalisée (image 2) et ajoutez l'iFrame.

inserer video youtube wordpress inserer video youtube wordpress
Pourquoi utiliser les services tiers comme Youtube ou Vimeo, simplement pour ne pas manger toute votre bande passante... En attendant voici un exemple de vidéo YouTube insérée:



 

Ajouter du son sous WordPress

Envie d'ajouter de la musique (si vous avez les droits;), des tutos audio, etc... WordPress sait faire et vous offre même un lecteur intégré.
ajouter-son-mp3-wordpress
Uploadez simplement le fichier son dans votre bibliothèque WordPress et insérez le, cela devrait donner ce type d'aperçu:


 

Ajouter un PDF dans WordPress

Toujours aussi simple, il vous suffit d'uploader le PDF dans votre bibliothèque et de le sélectionner via "Ajouter un média". N'oubliez pas lors de l'ajout de le lier au "fichier média". Lorsque l'internaute cliquera dessus, son navigateur ouvrira une nouvelle fenêtre affichant ainsi le PDF.

Ce qui vous donne ceci : Voir le programme des Formations 2014
Bien sûr, rien ne vous empêche de faire la même opération mais cette fois avec une image pointant vers le PDF, comme illustré ci-après:

ajouter-PDF-WordPress

 

Ajouter une carte Google Maps

Très souvent utilisée sur les pages contact, la carte google maps affiche un plan interactif sous WordPress.

Pour ajouter cette carte, rendez-vous sur Google Maps, tapez votre adresse, ouvrez le module d'intégration et sélectionnez l'iFrame que vous ajouterez directement depuis votre éditeur WP en mode texte.

ajouter-carte-google-maps-WordPress
Vous pouvez bien sûr choisir la taille, à noter que vous pourrez ultérieurement modifier les paramètres "height", "width", "frameborder", etc... pour plus de personnalisation, ce qui vous donnera ceci:



 

Ajouter un Tweet

Il est parfois nécessaire d'insérer un tweet dans l'un de nos articles WordPress. Là encore WP sait le faire! Il vous suffit juste de copier le lien du tweet et de le coller dans votre éditeur.

Pour plus de personnalisation, vous pouvez aussi utiliser la fonction d'intégration: via Twitter sélectionnez le tweet de votre choix, cliquez en bas à droite de ce dernier sur les 3 petits points (plus) puis sur "insérer le Tweet".

ajouter-tweet-WordPress
Simple et très facile, vous pouvez également centrer ce tweet en insérant avant et après le code fourni la balise "center". Voici le résultat obtenu:

 

 

Ajouter une publication Facebook

Même utilisation que pour Twitter, Facebook propose aussi l'intégration de posts dans vos articles.

ajouter-publication-facebook-WordPress

Rendez-vous sur Facebook, en haut à droite de chaque publication vous verrez un check, cliquez sur "intégrer la publication" et copiez le code fourni en spécifiant, si vous le souhaitez, la largeur en px.

Votre publication Facebook devrait ensuite s'afficher sur votre WordPress.

 

 

Ajouter un post Google+

On continue avec les réseaux sociaux, Google Plus propose également sa fonction d'intégration.

ajouter-post-google-plus-WordPress
A l'instar de Facebook, cherchez le check en haut à droite du post Google+ à intégrer, cliquez et sélectionnez "intégrer le post", copiez le code fourni puis insérez-le dans votre éditeur WordPress en mode "texte".

Voici l'exemple d'une intégration de post Google+ dans un article:


 

Ajouter une présentation SlideShare

Il est parfois intéressant d'afficher dans WordPress, une présentation PowerPoint ou un PDF, dans ce cas là Slideshare est fait pour vous! Il vous suffit de copier le lien de la présentation et de le coller dans votre éditeur.

Pour plus de personnalisation, vous pouvez aussi utiliser la fonction d'intégration:

ajouter-slideshare-presentation-WordPress
Ouvrez un compte sur Slideshare, ajoutez votre présentation puis depuis cette dernière, cliquez sur "intégrer" et copiez l'iFrame fourni. Ce qui vous donnera:



Cette petite checklist non exhaustive de quelques uns des médias que l'on peut ajouter très simplement dans WordPress, est terminée.

Voici d’ailleurs ci-dessous un tableau récapitulatif de tous les formats "oEmbed" (ou il suffit d'insérer l'URL) pris en charge par WordPress (source: codex WordPress)

 

ServicesTypeDepuis
SpotVidéosWordPress 2.9
CollegeHumorVidéos(À venir en 4.0)
DailyMotionVidéosWordPress 2.9
FlickrVidéos et imagesWordPress 2.9
FunnyOrDie.comVidéosWordPress 3.0
HuluVidéosWordPress 2.9
ImgurImagesWordPress 3.9
InstagramImagesWordPress 3.5
IssuuDocuments(À venir v4.0)
Meetup.comDiversWordPress 3.9
MixcloudMusique(À venir v4.0)
PhotobucketImagesWordPress 2.9
PollDaddyEnquêtes et sondagesWordPress 3.0
RdioMusiqueWordPress 3.6
Revision3des émissions de télévisionWordPress 2.9
ScribdDocumentsWordPress 2.9
SlideSharediaporamas de présentationWordPress 3.5
SmugMugPhotosWordPress 3.0
SoundCloudMusiqueWordPress 3.5
SpotifyMusiqueWordPress 3.6
TEDVidéos(À venir v4.0)
TwitterLes médias sociauxWordPress 3.4
ViddlerVidéos(Désapprouvé v4.0)
VimeoVidéoWordPress 2.9
YouTubeVidéosWordPress 2.9
WordPress.tvVidéosWordPress 2.9

 

Bien sûr, tous n'ont pas abordés dans cet article et certains ne sont pas à proprement parlé de purs médias.

Quoiqu'il en soit, vous savez désormais que WordPress est capable d'afficher de très nombreux éléments dans ses posts comme dans ses pages;)

A propos de l'auteur...

WPFormation

Fabrice Ducarme, formateur WordPress je suis éditeur, auteur et fondateur du site WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015 ainsi qu'au WP Tech Nantes 2014, je vous propose plus de 400 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

18 commentaires pertinents à ce jour ;)

  • Jean-Marc dit :
    Pour ajouter une carte dans la nouvelle version de Maps, le « ouvrez le module d’intégration… » n’est plus du tout intuitif. La petite roue dentée en bas à droite…
  • WPFormation dit :
    , c’est clair ! La 1ère fois au passage de la nouvelle version Google Maps, j’ai longtemps cherché;)
  • SidB dit :
    Bonjour,
    merci pour ces rappels pour ceux qui ne veulent pas surcharger leur wordpress de plugins dédiés à ce genre d’insertion de médias.
    Sinon, beaucoup de templates proposent de shortcodes prévus à ce genre d’insertion.
  • Alex dit :
    Très bons rappels Fabrice :)
    Sinon pour les tweets, ça marche aussi en collant simplement le lien, oembed transforme aussi pas mal d’autres médias.
  • WPFormation dit :
    Salut , oui effectivement cela marche « parfois » pas ici en tout cas, certainement un bug avec mon thème!
  • Michael dit :
    Merci beaucoup pour ces tutos, c’est vraiment utile
  • Pretty Geeky dit :
    Merci pour toutes ces explications, surtout pour celle de slideshare !
  • Rafeal dit :
    J’ai beaucoup appris de cet article. Merci beaucoup pour le partage
  • Josselin dit :
    Bon tuto pour ceux qui débutent.
    Il y a aussi la possibilité de passé par des shortcodes .
  • Josselin dit :
    Bonjour,
    Merci pour ces rappels ! Ils sont simple mais peuvent éviter l’ajout d’extensions inutiles.
    C’est bien expliqué, avec des images etc. comme d’habitude :)
  • Charlotte dit :
    Bonjour,
    Comment ajouter un fichier pdf en gardant son nom de fichier initial dans la bibliothèque de médias mais le renommer  » en cliquant ici » (avec le lien) sur la page ??
    Merci d’avanc epour votre aide
  • WPFormation dit :
    Bonjour ,

    Tout simplement en tapant dans votre éditeur de texte WordPress « => en cliquant ici » puis vous cliquez sur l’icône ajouter un lien hypertexte (l’icône chaîne) et en mettant le lien (URL complète) vers le fichier PDF.

    Une URL qui devrait ressembler à http:// monsite.com/wp-content/uploads/2014/11/nom-fichier.pdf;)

  • alainarenarealamurespa dit :
    Bonjour,
    J’adore ces tutos qui sont de vrais tutos. Par contre, je suis toujours à la recherche d’un plugin qui aille un petit peu plus loin que ces galeries. Je n’arrive pas à trouver un plugin où il soit possible de mettre sur chaque image un lien vers une URL externe.
    Bien sur il y a la solution de créer un tableau, etc.. etc.. mais je reconstruit un site et je me suis dit qu’avec WP je vais trouver mon bonheur avec les plugins, Bah non.
    Je ne trouve pas de plugin gallerie avec lequel il soit possible de mettre une URL externe sur chaque image de la dite gallerie. Cela m’étonne car je ne dois pas être le seul à avoir besoin de cette fonction mais non. RIEN TROUVË ou bien suis-je passé à côté d’un plugin écrit en anglais et non référencé lorsque l’on recherche en français.
    Si quelqu’un a trouvé cette perle de plugin, merci d’avance d’en faire profiter la communauté.
    Bien amicalement à vous tous apporteurs d’informations si précieuses.
    Alain
  • WPFormation dit :
    Bonjour ,

    Si votre besoin est de faire un lien vers une URL externe quand on clique sur l’image d’une galerie WordPress, c’est vrai que ce dernier ne le propose pas en natif…

    En revanche, je suis presque certain que dans les plugins premium de galerie images vous devriez pouvoir trouver votre bonheur!

    En attendant et même si c’est un peu plus long, pourquoi ne pas ajouter vos images une-à-une (sans alignement) et linker vers l’URL de votre choix?

  • Elodie dit :
    Merci pour toutes ces infos ! Je cherchais à mettre une carte Google Maps sur mon blog, et cela fonctionne !

    Par contre j’ai deux petites questions :

    1) Sur mon blog, sous ma carte j’ai une mention « View Larger Map ». Quand on clique dessus, sur ordinateur cela fonctionne (on est envoyé vers le site web google maps), mais sur mon téléphone je tombe sur : « The Google Maps Embed API must be used in an iframe ». Qu’est-ce que cela veut dire ?
    Je précise que je ne suis pas douée du tout en informatique ! ^^ S’il n’y a pas d’option simple pour régler le problème, est-ce possible de supprimer cette mention ?

    2) J’ai donc réalisé l’intégration de la carte maps sur mon ordi, mais est-il possible de faire pareil via mobile (Android) ? Si oui, comment récupérer le code html/le lien de partage de ma carte Google Maps ?

    Merci !

  • pierre dit :
    bonjour
    comment puis je insérer des fichiers musicaux noteworthy qui seraient pointés par des images ?
    apparemment wordpress n’en veut pas pour des raisons de sécurité (?) mas pourtant, il le faudrait
    vraiment ! site de chorale en construction –
    merci par avance pour votre aide et encore bravo pour la rédaction de vos tutos
  • berny dit :

    Bonjour et bonne année!
    je suis une senior à la retraite qui travaille à nouveau depuis 6 ans (je viens de souffler le 31 mes 66 bougies…) et après avoir modifié mon site j’ai créé la page facebook et un blog avec wordpress j’ai choisi le modèle TONAL mais j’ai quelques difficultés à présenter mon blog de manière plus sympathique plus journalistique… pensez vus pouvoir m’aider?
    cordialement
Tweet103
Share78
Share3
Buffer92