Comment Afficher une iFrame sur WordPress : Guide Complet pour Tous les Niveaux

L’intégration d’une iFrame dans WordPress est une tâche courante pour de nombreux utilisateurs, que ce soit pour afficher des vidéos, des cartes, des formulaires ou d’autres contenus externes. Dans cet article, nous allons explorer comment afficher une iFrame sur WordPress de différentes manières, en fonction de votre niveau de compétence. Que vous soyez débutant ou développeur avancé, vous trouverez une méthode adaptée à vos besoins.

Exemple avec l’intégration d’un plan :

Méthode 1 : Utiliser l’Éditeur Gutenberg (Pour les Débutants)

Si vous utilisez l’éditeur Gutenberg (intégré par défaut dans WordPress), ajouter une iFrame est très simple :

1. Ajouter un bloc HTML personnalisé :
   • Dans votre éditeur de page ou d’article, cliquez sur le bouton « + » pour ajouter un nouveau bloc.
   • Recherchez le bloc « HTML personnalisé » et / ou « Code court » et sélectionnez-le.
2. Coller le code de l’iFrame :
   • Collez le code HTML de votre iFrame dans le bloc. Par exemple :

<iframe src="https://www.example.com" width="600" height="400"></iframe>

1. Ajustez les attributs width et height selon vos besoins.
2. Enregistrer et prévisualiser :
   • Une fois le code ajouté, enregistrez votre page et prévisualisez-la pour voir l’iFrame en action.

Méthode 2 : Utiliser un Plugin (Pour les Intermédiaires)

Si vous préférez une solution plus intuitive sans toucher au code, vous pouvez utiliser un plugin dédié. Voici comment procéder :

1. Installer un plugin d’iFrame :
   • Rendez-vous dans Extensions > Ajouter dans votre tableau de bord WordPress.
   • Recherchez un plugin comme IFrame Widget ou Embed Iframe.
   • Installez et activez le plugin.
2. Configurer l’iFrame via le plugin :
   • Une fois le plugin activé, vous trouverez une nouvelle option dans l’éditeur Gutenberg ou dans les widgets (selon le plugin choisi).
   • Saisissez l’URL de l’iFrame et configurez les paramètres (largeur, hauteur, bordures, etc.).
3. Enregistrer et publier :
   • Enregistrez vos modifications et publiez la page pour afficher l’iFrame.

Méthode 3 : Ajouter une iFrame Manuellement dans le Code (Pour les Avancés)

Pour ceux qui sont à l’aise avec le code, vous pouvez ajouter une iFrame directement dans le fichier de votre thème ou dans un modèle de page. Voici comment :

1. Accéder au fichier de votre thème :
   • Allez dans Apparence > Éditeur de thème dans votre tableau de bord WordPress.
   • Sélectionnez le fichier où vous souhaitez ajouter l’iFrame (par exemple, page.php ou single.php).
2. Insérer le code de l’iFrame :
   • Ajoutez le code HTML de l’iFrame à l’endroit souhaité. Par exemple :

<iframe src="https://www.example.com" width="100%" height="500"></iframe>

1. Enregistrer les modifications :
   • Sauvegardez le fichier et vérifiez que l’iFrame s’affiche correctement sur votre site.

Méthode 4 : Utiliser un Shortcode (Pour les Développeurs)

Si vous souhaitez réutiliser une iFrame à plusieurs endroits, vous pouvez créer un shortcode personnalisé. Voici les étapes :

1. Ajouter le code du shortcode dans functions.php :
   • Ouvrez le fichier functions.php de votre thème.
   • Ajoutez le code suivant pour créer un shortcode :

function custom_iframe_shortcode($atts) { $atts = shortcode_atts(array( 'src' => 'https://www.example.com', 'width' => '600', 'height' => '400' ), $atts); return '<iframe src="' . esc_url($atts['src']) . '" width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '"></iframe>'; } add_shortcode('iframe', 'custom_iframe_shortcode');

Dans l’éditeur de page, utilisez le shortcode comme suit :

[iframe src="https://www.example.com" width="800" height="600"]