Comment intégrer des iFrames dans WordPress

Partager du contenu en ligne est une pratique courante. Cependant, vous pourriez être perplexe lorsque vous essayez de comprendre comment incorporer certains types de contenu. Le partage de fichiers volumineux ou d'éléments spécifiques provenant d'autres sites Web peut parfois être un défi.

Heureusement, il existe une pratique de conception Web assez simple que vous pouvez utiliser pour afficher des types de contenu spécifiques sur votre site Web WordPress. L'utilisation de HTML pour créer des cadres intégrés (iFrames) peut simplifier le partage d'images, de vidéos et d'autres médias en ligne.

Dans cet article, nous allons explorer les différentes utilisations des iFrames sur un site Web. Nous passerons également en revue les étapes de création d'iFrames, à la fois manuellement et avec un plugin. Commençons!

Utilisations d'iFrame

Lorsque vous utilisez un iFrame, vous créez essentiellement un petit portail sur votre site Web qui permet de visualiser le contenu d'ailleurs. Cela peut être utile dans plusieurs scénarios.

L'utilisation d'un iFrame signifie que vous n'avez pas besoin d'héberger les fichiers que vous souhaitez afficher. Le contenu reste à son emplacement d'origine et peut être visualisé à travers le cadre de votre site. Cette technique peut être utile lorsque vous souhaitez afficher des fichiers volumineux. Un iFrame peut apporter ce contenu sur votre site Web sans ralentir ses vitesses de chargement.

Il convient de noter que les iFrames sont le seul type de cadre autorisé en HTML5. Il existe une variété de différents types de contenu que vous pouvez les utiliser pour afficher, notamment :

• Images : vous pouvez utiliser des iFrames pour afficher des images de haute qualité à partir d'une galerie extérieure et éviter d'avoir à faire des compromis en raison de la taille du fichier.
• Vidéos : l'hébergement de vos vidéos sur une plate-forme comme YouTube ou Vimeo, et l'utilisation d'un iFrame pour les placer sur votre site Web, peuvent améliorer l'expérience utilisateur tout en libérant de l'espace de stockage sur votre site Web.
• Autre contenu Web : la mise en évidence du contenu d'autres sites Web, tels que des pages de portfolio ou des recettes, peut facilement apporter un contenu riche à votre public.

Lorsque vous utilisez des iFrames, vous pouvez également éviter les règles de copyright compliquées. Plusieurs tribunaux ont statué que l'utilisation d'un iFrame pour afficher du matériel protégé par le droit d'auteur ne constitue pas une violation du droit d'auteur dans tous les cas.

Un site Web peut également inclure des scripts pour empêcher son contenu d'être inclus dans un iFrame. Cependant, nous vous recommandons de toujours créditer le créateur original de tout contenu que vous utilisez, ou de demander un avis juridique si vous ne savez pas comment procéder.

Utilisation d'iFrames avec un plugin

L'un des moyens les plus simples d'utiliser des iFrames sur un site Web WordPress consiste à utiliser un plugin iFrame. Heureusement, il existe plusieurs options très appréciées parmi lesquelles choisir.

Étape 1 : Téléchargez et configurez un plug-in iFrame

Pour notre exemple, nous allons utiliser le plugin Advanced iFrame. Il est flexible, simple à utiliser et très bien noté :

Après avoir installé et activé le plugin, vous trouverez un nouvel élément de menu Advanced iFrames dans votre tableau de bord WordPress. Advanced iFrame dispose d'un ensemble d'options assez complet. Vous voudrez commencer par l'onglet Options et revoir la vidéo « Démarrage rapide » :

Ensuite, vous pouvez faire défiler vers le bas et passer en revue certaines des options du plugin. Ceux-ci sont tous configurés avec de nombreuses explications utiles et des choix faciles à sélectionner :

Advanced iFrames fournit également un vérificateur iFrame gratuit, qui vérifiera toute URL que vous fournissez pour voir si elle contient des scripts qui empêchent le contenu d'être inclus dans un iFrame. C'est une bonne idée d'exécuter n'importe quelle URL via cet outil avant de l'utiliser dans un iFrame sur votre site Web.

Vous voudrez également revoir l'onglet Paramètres de base . Là, vous pouvez personnaliser les éléments de l'iFrame tels que la hauteur, la largeur et les bordures du cadre :

Une fois que vous avez configuré les paramètres du plug-in pour répondre à vos besoins, vous pouvez commencer à utiliser iFrames sur votre site Web.

Étape 2 : Utiliser le bloc iFrame avancé

Dans l'éditeur de blocs WordPress, vous aurez maintenant un bloc Advanced iFrames disponible :

Si vous avez du mal à trouver ce bloc la première fois que vous souhaitez l'utiliser, il se trouvera dans la catégorie Widgets .

Une fois que vous avez cliqué sur le bloc Advanced iFrame , il se chargera automatiquement avec le contenu du site Web du créateur du plugin. Vous pouvez configurer le blocage en utilisant les options de blocage sur le côté droit de la page :

Là, vous pouvez ajouter l'URL du contenu que vous souhaitez voir apparaître dans l'iFrame. Vous pourrez également remplacer certains paramètres du plugin si nécessaire.

Étape 3 : prévisualisez votre site

Si vous avez testé votre URL avec le vérificateur iFrame, vous devriez être prêt à partir. Cependant, il est toujours préférable de prévisualiser vos modifications avant de publier votre contenu. Vous devriez voir un aperçu en direct de votre iFrame lorsque vous le modifiez et apportez des modifications.

Vous pouvez également utiliser l'option Aperçu dans le coin supérieur droit de votre fenêtre d'édition, afin d'afficher la publication dans le contexte des menus et des barres latérales de votre site.

Utiliser des iFrames sans plugin

Si vous ne voulez pas travailler avec un plugin mais que vous souhaitez quand même utiliser des iFrames, vous avez de la chance ! Vous pouvez appliquer manuellement du code à vos publications et pages pour inclure du contenu iFramed.

Étape 1 : Insérez un code d'intégration

Si vous souhaitez incorporer du contenu tel qu'une vidéo de YouTube sur votre site Web, vous devrez localiser le code d'intégration fourni par YouTube. Vous pouvez le trouver sous une vidéo en cliquant sur Partager .

Cela fera apparaître un menu d'options de partage. Vous voudrez sélectionner Intégrer pour obtenir le code dont vous avez besoin pour votre iFrame.

Une fenêtre séparée s'ouvrira avec un aperçu de ce à quoi ressemblera le contenu intégré. Vous pourrez ensuite copier un extrait de code iFrame.

Vous pouvez également cocher la case Commencer à si vous souhaitez que les téléspectateurs commencent automatiquement à visionner le contenu à un certain code temporel.

Ensuite, vous reviendrez à votre article WordPress et ajouterez le bloc HTML personnalisé . Vous pouvez le trouver dans la catégorie Formatage .

Après avoir ajouté ce bloc à votre message, vous pouvez simplement coller le code d'intégration que vous avez copié à partir de la page YouTube.

Ensuite, vous voudrez vous assurer que l'intégration fonctionne correctement et ressemble à ce que vous voulez. Vous pouvez cliquer sur Aperçu dans le bloc HTML personnalisé pour voir si votre iFrame fonctionne.

Avec cela, vous avez réussi à placer un iFrame sur votre site Web. Le même processus fonctionnera pour toute plate-forme qui vous fournit des codes d'intégration.

Étape 2 : Personnalisez vos iFrames

Si vous n'êtes toujours pas satisfait de la façon dont l'iFrame s'affiche sur votre message ou votre page, vous pouvez ajuster manuellement certaines des valeurs du code. Il est recommandé d'utiliser des feuilles de style en cascade (CSS) pour personnaliser entièrement l'apparence des iFrames sur votre site Web.

La balise iFrame permet un certain nombre de propriétés personnalisées. Cependant, il est important de noter que bon nombre d'entre eux ne sont plus pris en charge par HTML5. Vous devrez probablement étudier le CSS de votre thème, comme nous l'avons mentionné précédemment, car vous ne pourrez peut-être pas remplacer certains formats directement dans le bloc HTML personnalisé .

Étape 3 : Vérifiez régulièrement votre contenu iFrame

Lorsque vous utilisez des iFrames, vous voudrez vérifier régulièrement le contenu encadré. Étant donné que vous ouvrez une fenêtre sur un contenu sur lequel vous n'avez peut-être aucun contrôle éditorial ou de qualité, cela pourrait causer un problème sur votre site Web à tout moment.

Par exemple, si la vidéo que nous avons utilisée dans notre exemple est retirée de sa chaîne YouTube, notre message contiendra un lecteur défectueux. C'est un peu plus évident qu'un lien brisé, car cela laissera un impact visuel sur votre site Web. La vérification périodique de votre contenu iFrame vous permet de modifier ou de supprimer tout support qui ne fonctionne plus.

Optimisez votre site avec WP Engine

L'utilisation d'iFrames sur votre site Web peut assurer le bon fonctionnement des choses, tout en incorporant des médias riches et du contenu dynamique. Chez WP Engine, nous savons qu'il est important de comprendre les concepts importants de conception Web et d'avoir accès aux meilleures ressources pour les développeurs.

De plus, nous nous engageons à vous aider à offrir les meilleures expériences numériques à vos clients. Nous avons une sélection variée de plans d'hébergement WordPress entièrement gérés, afin que vous puissiez vous concentrer sur la conception de beaux sites Web !