Comment importer un contenu oEmbed (tweet, article Facebook, vidéo YouTube) sous WordPress ?

Ce tutoriel fait suite à la lecture du billet Comment centrer un Tweet sur wordpress paru sur le Siècle Digital qui m’a paru fort compliqué dans l’approche. En effet, WordPress dispose nativement du support des OEmbed ou contenus distants embarqués dont voici la liste complète.

Hélas, cette fonctionnalité est bien souvent méconnue alors même qu’elle est très simple à utiliser.

Intégrer un contenu distant sous WordPress

Pour récupérer un contenu distant, il suffit d’en copier l’URL directement dans l’éditeur de contenu. Patientez quelques instants et le contenu sera automatiquement embarqué dans votre article.

Magique non ?

Centrer un contenu distant comme un tweet

Répondons à présent à la question évoqué dans l’article du Siècle Digital. Amis journalistes, stop aux complications ! Il n’est pas bon de basculer en mode Texte pour modifier le code HTML d’un contenu. Vous risquez de créer des erreurs d’affichage involontairement.

Comme les contenus tiers correspondent à des iframes, il suffit d’appliquer quelques lignes de CSS dans votre feuille de styles. Le centrage s’opèrera pour tous vos contenus déjà publiés et ceux à venir.

Vous pouvez soit appliquer le centrage pour toutes les iframes du site, soit être spécifique à un contenu embarqué comme les tweets :

/* Embed */
.twitter-tweet {
	margin: 0 auto;
}

Un exemple de tweet centré :

{Atelier} Apprendre à développer une place de marché avec WooCommerce avec Aurélien DENIS (@wpchannel) #WordPress #WooCommerce #ecommerce
Détails et inscription : https://t.co/9T1IJ4Lr3v pic.twitter.com/097ef8kzIH

— WP-Tech (@WPTechLyon) March 27, 2018

Notez qu’à la manière d’un média plus conventionnel comme une image, vous pouvez en modifier à nouveau le lien en cliquant sur l’icône d’édition en forme de crayon.

Seul bémol à l’utilisation de contenus intégrés : cela peut vite alourdir le poids d’une page Web si vous combinez différents contenus qui non seulement embarquent du JavaScript – comme un lecteur vidéo, mais génèrent aussi des requêtes externes.