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 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.
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 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.
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.
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.
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é.
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 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.
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”.
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:
Vous connaissez déjà #WordPress mais vous voulez aller plus loin ? http://t.co/L19F4vB0Rd pic.twitter.com/gh42uBOVKU
— WPFormation Ⓦ (@wpformation) 12 Juin 2014
Ajouter une publication Facebook
Même utilisation que pour Twitter, Facebook propose aussi l’intégration de posts dans vos articles.
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.
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:
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:
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:
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)
| Services | Type | Depuis | |
|---|---|---|---|
| Spot | Vidéos | WordPress 2.9 | |
| CollegeHumor | Vidéos | (À venir en 4.0) | |
| DailyMotion | Vidéos | WordPress 2.9 | |
| Flickr | Vidéos et images | WordPress 2.9 | |
| FunnyOrDie.com | Vidéos | WordPress 3.0 | |
| Hulu | Vidéos | WordPress 2.9 | |
| Imgur | Images | WordPress 3.9 | |
| Images | WordPress 3.5 | ||
| Issuu | Documents | (À venir v4.0) | |
| Meetup.com | Divers | WordPress 3.9 | |
| Mixcloud | Musique | (À venir v4.0) | |
| Photobucket | Images | WordPress 2.9 | |
| PollDaddy | Enquêtes et sondages | WordPress 3.0 | |
| Rdio | Musique | WordPress 3.6 | |
| Revision3 | des émissions de télévision | WordPress 2.9 | |
| Scribd | Documents | WordPress 2.9 | |
| SlideShare | diaporamas de présentation | WordPress 3.5 | |
| SmugMug | Photos | WordPress 3.0 | |
| SoundCloud | Musique | WordPress 3.5 | |
| Spotify | Musique | WordPress 3.6 | |
| TED | Vidéos | (À venir v4.0) | |
| Les médias sociaux | WordPress 3.4 | ||
| Viddler | Vidéos | (Désapprouvé v4.0) | |
| Vimeo | Vidéo | WordPress 2.9 | |
| YouTube | Vidéos | WordPress 2.9 | |
| WordPress.tv | Vidéos | WordPress 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;)
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…
@Jean-Marc, c’est clair ! La 1ère fois au passage de la nouvelle version Google Maps, j’ai longtemps cherché;)
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.
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.
Salut @Alex, oui effectivement cela marche “parfois” pas ici en tout cas, certainement un bug avec mon thème!
Merci beaucoup pour ces tutos, c’est vraiment utile
Merci pour toutes ces explications, surtout pour celle de slideshare !
J’ai beaucoup appris de cet article. Merci beaucoup pour le partage
Bon tuto pour ceux qui débutent.
Il y a aussi la possibilité de passé par des shortcodes .
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 :)
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
Bonjour @Charlotte,
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;)
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
Bonjour @Alain,
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?
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 !
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
@wpformation
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
@berny Merci et bonne année 2015 à vous aussi ;)
Pour votre problèmatique, je vous conseille de jeter un oeil sur l’option du coaching à la carte: https://wpformation.com/coaching-wordpress-a-la-carte/