Embarquer des contenus tiers comme des tweets, des vidéos YouTube ou Vimeo, des posts Facebook ou même des articles issus d'un autre WordPress est un véritable jeu d'enfant sous WordPress à condition d'utiliser correctement les oEmbeds.

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é :

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.

4 commentaires
  1. Ben si on ne travaille qu’en mode HTML, il n’y a pas de problème , hein

  2. Bonjour Aurélien
    Quelle est votre solution pour appliquer le centrage à tous les iframes du site
    ou conseillez vous de faire une liste de centrages spécifiques ?
    Merci

    1. Aurélien Denis auteur de l’article

      Bonjour, soit via CSS en appliquant un margin: 0 auto à toutes les iframes (éventuellement avec du !important), soit en JS aussi avec addClass(‘aligncenter’).

Les commentaires sont fermés.