WordPress
time_read20mn de lecture

Comment intégrer un iframe dans WordPress ?

02 novembre 2023

Comment intégrer un iframe dans WordPress ?

L’intégration de contenus externes sur votre site WordPress peut être un véritable jeu d’enfant, surtout avec l’utilisation des iframes  🖥️. Que vous souhaitiez ajouter une vidéo, une carte ou tout autre widget, les iframes sont la clé 🔑. Dans cet article, nous allons vous montrer comment intégrer un iframe dans WordPress de manière efficace et sécurisée 🛡️. Alors, préparez-vous à enrichir votre contenu avec facilité et flexibilité 🌟 !

Objectif

L’objectif de ce guide 👇 est de vous guider pas à pas à travers le processus d’intégration d’iframes dans WordPress. Vous apprendrez non seulement à insérer ces éléments essentiels, 🤭 mais aussi à les personnaliser selon vos besoins. À la fin de ce tutoriel, vous aurez toutes les compétences nécessaires pour donner vie à votre site web en intégrant des iframes de manière transparente.🙂

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Prérequis

  • Accès à votre site WordPress : vous devez avoir accès à votre site WordPress en tant qu’administrateur ou éditeur pour pouvoir modifier le contenu et intégrer des iframes.
  • Source de l’iframe : assurez-vous d’avoir la source (URL) de l’iframe que vous souhaitez intégrer. Cela peut être une vidéo YouTube, un formulaire Google, une carte Google Maps, ou tout autre contenu compatible avec les iframes.

Qu’est-ce qu’un iframe sur WordPress ?

Un iframe (abréviation de « Inline Frame ») sur WordPress, comme sur n’importe quel site web, est une balise HTML qui permet d’intégrer du contenu provenant d’une source externe directement à l’intérieur d’une page ou d’un article WordPress. Cela permet d’afficher du contenu interactif, tel que des vidéos, des cartes, des formulaires, des widgets, des éléments de médias sociaux, et bien plus encore, sur votre site WordPress sans avoir à créer ce contenu vous-même.

Les iframes sont couramment utilisés dans WordPress pour :

  • Intégrer des vidéos : vous pouvez intégrer des vidéos provenant de plateformes telles que YouTube, Vimeo, ou Dailymotion en utilisant des iframes.
  • Afficher des cartes interactives : vous pouvez intégrer des cartes Google Maps, par exemple, pour montrer l’emplacement de votre entreprise.
  • Incorporer des formulaires : les formulaires de contact, les sondages, les inscriptions à la newsletter, etc., peuvent être intégrés en utilisant des iframes.
  • Intégrer des éléments de médias sociaux : vous pouvez intégrer des publications de réseaux sociaux, des boutons de partage, des flux Twitter, etc., sur votre site WordPress.
  • Afficher des widgets externes : certains services tiers offrent des widgets que vous pouvez intégrer dans votre site web, tels que des widgets de météo, de calendrier, de suivi de conversion, etc.

Comment intégrer un iframe dans WordPress ? 3 façons

À présent, nous allons voir comment vous pouvez utiliser un iframe pour intégrer du contenu interactif externe sur votre site WordPress de 3 façons.

1. Utiliser la fonctionnalité Embed pour intégrer un iframe sur WordPress

La plupart de services de partage de contenus en ligne tels que YouTube ou Vimeo fournissent des blocs Embed prêts à l’emploi permettant d’intégrer des vidéos sur d’autres plateformes. Pour partager une vidéo YouTube sur WordPress en utilisant un iframe, rendez-vous sur YouTube et cliquez sur le bouton « Partager » sous la vidéo.Partager une vidéo YouTube via Embed

Une boîte contextuelle s’affiche sur votre écran, cliquez sur le bloc “Intégrer ” pour obtenir le code iFrame d’intégration.Obtenir le code d'intégration iFrame

Copiez le code iframe une fois qu’il vous est présenté.Copier le code iFrame d'intégration

Rendez-vous sur votre site WordPress et ouvrez la page/publication où vous souhaitez ajouter une vidéo dans Gutenberg.

Ajoutez un bloc HTML personnalisé à partir de l’outil d’insertion de blocs.Ajouter un bloc HTML personnalisé dans Gutenberg

Collez ensuite le code iframe dans le champ prévu.Intégration d'un iFrame sur WordPress

Une fois que le code est inséré, cliquez sur le bouton « Prévisualiser » pour avoir un aperçu de votre contenu.Prévisualiser un code iFrame sur WordPress

Et voici le résultat.👇Intégration d'une vidéo YouTube sur WordPress via Embed

2. Intégrer un iframe en utilisant l’éditeur classique

Si vous utilisez l’éditeur classique, il est encore plus simple d’intégrer un iframe dans votre page/publication. Ainsi, ouvrez votre page dans l’éditeur classique et basculez vers le mode d’édition texte et collez votre code iFrame.

Ci-dessous 👇, nous intégrons un code iframe d’une carte Google Maps.Mode d'édition de texte de l'éditeur classique

Revenez ensuite dans le mode d’édition visuelle et appréciez le résultat.Ajouter une carte Maps à WordPress via Embed

Visitez votre page en direct pour vous assurer que la carte s’affiche comme prévu.👇Affichage d'une carte Maps intégrée via Embed

3. Ajouter un iframe dans WordPress en utilisant des balises

La dernière façon dont vous disposez pour ajouter un iframe consiste à utiliser des balises iframe. Cette méthode est adaptée si vous n’avez pas encore de code iframe prêt à l’emploi comme dans les deux premiers cas. Éventuellement, vous voudrez intégrer du contenu externe à partir d’une source qui ne fournit pas d’option Embed, comme Facebook ou Instagram.

Pour ce faire, copiez le lien de votre contenu puis insérez-le entre les balises iframe ci-dessous :

<iframe src=”URL”></iframe>.

Vous devez insérer l’ensemble du code dans un bloc HTML personnalisé Gutenberg.Ajouter du contenu externe à WordPress via Embed

Voici un exemple d’une intégration iframe avec cette méthode.👇Intégrer un iFrame dans WordPress par des balises iFrame

Prévisualisez ensuite votre page pour vous assurer que le contenu s’affiche comme souhaité.Affichage d'une page via iFrame Cette méthode offre par ailleurs une flexibilité dans l’intégration de contenu d’origine externe. Vous pouvez définir des dimensions, notamment la hauteur et la largeur du bloc. Voici, dans ce cas, le code que vous devez utiliser ;

<iframe src=”URL” width=”800” height=”900” ></iframe>

Si vous des connaissances en CSS, vous pouvez également ajouter des règles de style personnalisé.

Trucs et astuces


Envie de découvrir d’autres astuces ? 🌟 Rendez-vous sur le blog LWS pour une mine d’informations et de conseils experts !

Conclusion

En résumé, l’intégration d’iframes dans WordPress est une compétence précieuse pour tout propriétaire de site web. 🤔 Elle vous permet d’ajouter des éléments interactifs à votre contenu, ce qui peut améliorer l’engagement de vos visiteurs et offrir une expérience plus riche.🚀👨‍💻 En suivant les méthodes simples que nous avons présentées, vous pouvez facilement maîtriser cette technique. 🤗 Alors, plongez dans l’univers des iframes et transformez votre site WordPress en une plateforme dynamique et engageante. N’attendez plus, commencez dès aujourd’hui à intégrer des iframes et à captiver votre public !

Si vous avez des questions, des ajouts ou des préoccupations sur la façon d’intégrer un iFrame dans WordPress, utilisez la section Commentaire pour nous écrire.

Avatar de l'auteur

Auteur de l'article

Joseph

Bonjour, je m'appelle Joseph. Je suis rédacteur spécialisé dans WordPress, PrestaShop et d'autres CMS. Fort d'une expertise approfondie en PHP et MySQL, je partage mes connaissances à travers des tutoriels simples et accessibles. Passionné par le développement et la transmission de savoir, j'aime expliquer et rendre les concepts techniques compréhensibles pour tous

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (2)

Judith
12/11/2023 - 23:49
Karen
2023-11-13 08:14:57

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.