Avec les adresses web intégrées (oEmbed), une adresse web saisie dans l’éditeur WordPress est remplacée automatiquement par un aperçu de la page HTML correspondante.

Ceci ne fonctionne qu’avec les sites capables de gérer les adresses web intégrées.

Intégrer un article ou une page WordPress

Dans la zone d’édition, saisir l’adresse web d’un article ou d’une page d’un site WordPress, par exemple : « https://dfarnier.fr/modifier-images-wp/ » :

WordPress reconnaît que l’adresse web correspond à un site capable de gérer les adresses web intégrées. Il remplace automatiquement l’affichage du lien par un aperçu de la page :

Dans l’aperçu, s’affichent :

1. le titre de l’article,
2. l’image à la une de l’article intégré,
3. l’extrait de l’article,
4. un lien pour accéder au site,
5. un lien pour que les visiteurs puissent partager l’article.

Bien évidemment, vous pouvez remplacer « article » par « page WordPress ».

Afficher l’adresse web intégrée

Une fois l’article publié, un visiteur du site qui clique sur le titre dans l’aperçu lance l’affichage de l’article intégré :

Une fois l’article publié, un visiteur du site qui clique sur l’image dans l’aperçu lance l’affichage de l’article intégré :

Afficher le site

Une fois l’article publié, un visiteur du site qui clique sur l’icône et l’adresse du site en bas de l’aperçu lance l’affichage de la page d’accueil du site :

Récupérer les adresses de partage

Une fois l’article publié, un visiteur du site qui clique sur l’icône de partage en bas de l’aperçu récupère des informations permettant d’intégrer l’article dans un site web.

Récupérer l’adresse de l’article

Côté visiteur, cliquer sur l’icône de partage ( ), puis sur le bouton « Intégration WordPress » :

Pour utiliser l’adresse web:

• cliquer dans la zone où l’adresse s’affiche,
• taper simultanément sur les touches « CTRL » et « c » pour copier ce qui est sélectionné,
• taper simultanément sur les touches « CTRL » et « v » à l’endroit où l’adresse web de l’article doit être insérée dans le site cible.

Récupérer du code pour afficher l’article

Côté visiteur, cliquer sur l’icône de partage ( ), puis sur le bouton « Inclusion HTML » :

Pour utiliser le code HTML:

• cliquer dans la zone où le code s’affiche,
• taper simultanément sur les touches « CTRL » et « c » pour copier ce qui est sélectionné,
• taper simultanément sur les touches « CTRL » et « v » à l’endroit où le code doit être inséré dans le site cible.

Haut de page

Tester l’intégration d’un article WordPress

Si on ajoute « embed » à l’adresse web d’un article WordPress on peut visualiser comment se présentera l’affichage intégré (oEmbed) :

Haut de page

Intégrer une vidéo d’un service de partage ou un réseau social

Récupérer dans dailymotion

Certains fournisseurs de vidéo (dailymotion, youtube…) permettent d’intégrer leur vidéo dans un site WordPress.
Il suffit de coller l’adresse web de la page présentant la vidéo dans l’éditeur WordPress, pour que WordPress fasse apparaître la vidéo que les visiteurs du site pourront regarder sur votre site.

Se rendre sur le site du fournisseur de vidéos, dailymotion par exemple, et copier l’adresse web d’une vidéo en la sélectionnant dans la barre d’adresse du navigateur ( « CTRL +a » pour sélectionner toute l’adresse puis « CTRL + c » pour la copier) :

La plupart des services de partage possèdent une option permettant d’obtenir l’adresse sous forme longue ou réduite ; dans le cas de dailymotion,  l’option est disponible sous l’image :

Retourner dans l’éditeur WordPress et copier l’adresse (« CTRL + v »); WordPress remplace automatiquement l’adresse web par une photo de la vidéo :

Les visiteurs du site n’auront qu’à cliquer sur l’image pour lancer la vidéo :

Récupérer dans Twitter

Dans Twitter, il est possible de récupérer une adresse intégrée pour chaque Tweet en cliquant sur les points de suspension puis sur « Copier le lien du Tweet » :

Voici ce qui s’affiche si on recopie l’adresse dans un article (ou une page) WordPress :

Haut de page

Modifier une adresse web intégrée (oEmbed)

Dans la zone d’édition de WordPress, cliquer dans un aperçu d’adresse intégrée puis sur l’icône en forme de crayon qui apparaît :

WordPress affiche une fenêtre dans laquelle :

1. on peut modifier l’adresse web intégrée,
2. le titre avec un lien vers l’adresse de l’article intégré se modifie automatiquement pour correspondre à l’adresse saisie,
3. le nouvel article peut être intégré dans la zone d’édition en cliquant sur le bouton

Haut de page

Retirer une adresse web intégrée (oEmbed)

Dans la zone d’édition de WordPress, cliquer dans un aperçu d’adresse intégrée puis sur l’icône en forme de croix qui apparaît :

L’aperçu disparaît.

Haut de page

Le coin des développeurs

L’intégration des adresses web a été améliorée dans la version 4.5 de WordPress. On trouvera des précisions dans l’article ci-dessous :

Embeds Changes in WordPress 4.5

Haut de page