Voulez-vous intégrer un code iFrame dans un article ou une page WordPress? Les IFrames offrent un moyen simple d'intégrer des vidéos ou d'autres contenus sur votre site sans les télécharger. De nombreuses plates-formes tierces comme YouTube permettent aux utilisateurs d'utiliser iframe pour intégrer le contenu de leur site Web.
Dans cet article, nous allons vous montrer comment intégrer facilement du code iFrame dans WordPress en utilisant plusieurs méthodes.
Sommaire
Un iFrame permet d'intégrer des vidéos ou d'autres contenus sur votre site sous forme d'HTML. Cela signifie que vous pouvez afficher une vidéo sur votre site sans héberger réellement cette vidéo sur votre propre serveur. L'iframe, c'est comme ouvrir une fenêtre sur votre site pour afficher du contenu externe.
Le contenu réel est toujours chargé à partir de la source à partir de laquelle vous l'intégrez. Pour ajouter une iframe, vous devez ajouter un code HTML spécial. Ne vous inquiétez pas si cela semble assez technique en réalité c'est très simple.
Nous allons vous montrer le moyen le plus simple d'intégrer un iFrame dans votre blog WordPress.
Une des principales raisons d'utiliser iFrames est d'éviter d'avoir à héberger des vidéos ou d'autres ressources sur votre site, ce qui épuisera votre bande passante et votre espace de stockage. En outre, les iFrames vous permettent d'éviter de porter atteinte au contenu protégé par le droit d'auteur d'autres personnes.
Au lieu de télécharger leur vidéo ou autre contenu puis de le télécharger sur votre site, vous l'ajoutez simplement à votre page à l'aide d'un iFrame. Un autre avantage est que si le contenu d'origine est modifié, il sera également automatiquement mis à jour dans l'iFrame.
L'utilisation des iFrames présente également certains inconvénients. Tous les sites Web ne vous permettent pas de mettre leur contenu dans un iFrame. En outre, l'iFrame peut devenir trop grand ou trop petit pour votre page et vous devrez l'ajuster manuellement.
Un autre problème est que les sites HTTPS ne peuvent utiliser les iFrames que pour le contenu d'autres sites HTTPS. De même, les sites HTTP ne peuvent utiliser les iFrames que pour le contenu d'autres sites HTTP.
C'est pourquoi de nombreuses plates-formes comme WordPress préfèrent oEmbed. Vous pouvez utiliser oEmbed pour intégrer des vidéos ainsi que d'autres types de contenu en collant simplement une URL dans votre publication WordPress. Le contenu sera automatiquement redimensionné pour s'adapter, et il aura la bonne taille même sur les appareils mobiles.
WordPress ne prend pas en charge oEmbed pour les publications Facebook et Instagram. Pour plus d'informations à ce sujet, consultez notre guide complet sur les problèmes Facebook / Instagram oEmbed et comment le résoudre.
Une autre excellente alternative aux iFrames est d'utiliser un plugin de flux sociaux. Nous vous recommandons d'utiliser les plugins de Smash Balloon. Ceux-ci vous permettent d'afficher le contenu de Facebook, Instagram, Twitter et YouTube.
Cela dit, examinons trois façons différentes d'ajouter des iFrames à votre site.
De nombreux sites ont une option d'intégration pour leur contenu. Cela vous donne le code iFrame spécial que vous devez ajouter à votre site. Sur YouTube, vous pouvez obtenir ce code en accédant à la vidéo sur YouTube, puis en cliquant sur le bouton Partager en dessous.
Ensuite, vous verrez une fenêtre contextuelle avec plusieurs options de partage. Cliquez simplement sur le bouton Intégrer. Maintenant, YouTube vous montrera le code iFrame. Par défaut, YouTube inclura les commandes du lecteur. Nous vous recommandons également d'activer le mode de confidentialité améliorée.
Après cela, allez-y et cliquez sur le bouton Copier pour copier le code. Maintenant, vous pouvez coller ce code dans n'importe quel article ou page de votre site. Nous allons l'ajouter à une nouvelle page dans l'éditeur de blocs.
Pour créer une nouvelle page, accédez à Pages »Ajouter nouveau dans votre tableau de bord WordPress.
Ensuite, ajoutez un bloc HTML à votre page. Maintenant, vous devez coller le code YouTube iFrame dans ce bloc.
Vous pouvez ensuite prévisualiser ou publier votre page pour voir la vidéo YouTube qui y est intégrée. Si vous utilisez l'ancien éditeur classique, vous pouvez toujours ajouter du code iFrame. Vous devez le faire dans la vue Texte Le basculement entre l'affichage visuel et textuel dans l'éditeur classique peut entraîner des problèmes avec le code iFrame.
Cette méthode est utile car elle vous permet de créer une iframe pour intégrer du contenu à partir de n'importe quelle source, même si cette source ne fournit pas de code d'intégration.
Tout d'abord, vous devez installer et activer le plugin iFrame. Lors de l'activation, le plugin commencera à fonctionner immédiatement sans aucune configuration nécessaire. Allez-y et modifiez ou créez un article ou une page. Ensuite, ajoutez un bloc de code court.
Après cela, vous pouvez utiliser ce shortcode pour saisir votre code iFrame.
[iframe src="URL goes here"]
Remplacez simplement L'URL va ici avec l'URL du contenu que vous souhaitez intégrer sur votre site. Nous intégrons une carte Google.
Vous devrez peut-être utiliser l'option Intégrer pour obtenir l'URL directe du contenu. Vous devez utiliser uniquement l'URL, pas le reste du code d'intégration. Ensuite, prévisualisez ou publiez votre message. Vous devriez voir la carte Google intégrée sur votre site.
Vous pouvez éventuellement ajouter des paramètres au shortcode iFrame pour modifier l'affichage du contenu intégré. Par exemple, vous pouvez définir la largeur et la hauteur, et ajouter ou supprimer une barre de défilement ou une bordure. Vous pouvez trouver des détails sur la page du plugin iFrame.
Si vous utilisez l'éditeur classique, vous pouvez simplement coller le shortcode dans votre article ou page. Vous n'avez pas besoin de basculer vers la vue Texte.
Si vous préférez ne pas utiliser de plugin iFrame, vous pouvez créer le code iFrame manuellement. Pour ce faire, vous devez ajouter un bloc HTML dans l'éditeur de contenu WordPress.
Tout d'abord, vous devez coller ce code dans votre bloc HTML.
<iframe src="URL goes here"></iframe>
Remplacez simplement «L'URL va ici» par l'URL directe du contenu que vous souhaitez intégrer. Vous n'avez besoin que de l'URL elle-même.
Ici, nous intégrons une carte de Google.
Vous pouvez ajouter des paramètres supplémentaires à la balise HTML. Par exemple, vous pouvez définir la largeur et la hauteur de votre iFrame. Le code ci-dessous signifie que votre contenu intégré affichera 600 pixels de large et 300 pixels de haut.
<iframe src="URL goes here" width="600" height="300"></iframe>
Cela est utile si vous devez limiter le contenu incorporé à un espace plus petit.
Nous espérons que cet article vous a aidé à apprendre à intégrer facilement du code iFrame dans WordPress. Vous pouvez également consulter notre guide ultime sur les façons de supprimer les fiches CSS inutilisées, afin de gagner en vitesse de chargement. Il s'agit d'un point SEO essentiel. D'ailleurs, votre site est-il optimisé pour le référencement naturel ?