WordPress: Avec et sans plugin

WordPress: Avec et sans plugin

Considérez le nombre de fois que vous avez visité un site Web mais que vous avez trouvé du contenu provenant d’un site Web complètement différent sur leur page Web. Qu’il s’agisse de vidéos, d’images ou de pages de portfolio, les voir sur un site Web complètement différent soulève la question du « partage de contenu valide ».

De plus, si vous possédez un site Web exécutant mon contenu multimédia, vous devrez à un moment donné faire face à des problèmes de stockage pour votre contenu vidéo/audio/image. Le téléchargement de vidéos, d’images et de ce contenu sur vos serveurs occupent de l’espace. Il n’y a que peu d’espace d’hébergement à votre disposition avant que tout ne s’épuise.

Qu’il s’agisse de partage de contenu ou d’espace de stockage, ces problèmes sont résolus en incorporant le contenu d’un site Web ou d’un domaine distinct sur vos publications et le moyen le plus simple de le faire est d’utiliser des IFrames.

Qu’est-ce qu’IFrame ?

Les IFrames sont utilisés sur presque tous les sites Web et pages Web de nos jours et pour une bonne raison. IFrames vous permet de créer un support pour afficher du contenu ou des pages Web vers et depuis un site Web complètement différent sans avoir à vous soucier du vol du contenu ou des allégations de droit d’auteur.

La façon dont les IFrames fonctionnent essentiellement est qu’ils vous permettent d’afficher une page Web différente sur une partie de votre propre page Web en l’incorporant. Le code à l’intérieur d’une page Web intégrée n’est pas directement accessible, ce qui crée un certain sentiment de protection du contenu.

Pourquoi devrions-nous utiliser iFrame ?

De toute évidence, il existe d’autres méthodes pour intégrer du contenu, telles que l’utilisation d’éléments Web AJAX ou HTML5 ou autres, mais dans de nombreux cas, iFrame est simplement un meilleur choix. D’une part, l’intégration iFrame est utilisée pour le contenu inter-domaines, généralement le contenu visuel. Cela signifie qu’un utilisateur de site Web peut librement demander les ressources sélectionnées à partir d’un site Web distinct et les afficher, mais il est interdit d’accéder ou de manipuler l’élément ou le code lui-même.

De plus, vous pouvez facilement placer des publicités sur votre site Web à l’aide d’IFrames et configurer plusieurs iFrames dans une seule page Web sans trop de difficultés. Ceci est toujours utile si vous souhaitez monétiser votre site Web.

Intégration de contenu visuel à l’aide d’IFrames

Les iFrames sont également beaucoup utilisés pour intégrer du contenu visuel et audio. Qu’il s’agisse de vidéo, d’audio ou d’images, c’est une excellente idée d’utiliser des iFrames pour prévisualiser ce contenu, car vous pouvez facilement les héberger sur des serveurs et des sources externes et les lier facilement sans aucune difficulté.

Cela facilite le partage de votre contenu, car d’autres propriétaires de sites Web peuvent également facilement utiliser vos vidéos sur leurs publications. De plus, l’audience et les analyses Web sont également partagées avec vous.

WordPress-Iframe-Demo-YTVid

De plus, le téléchargement vers des sites Web tiers tels que Youtube, Vimeo, Dailymotion, etc. permet d’économiser de l’espace tout en conservant l’accessibilité.

Comment intégrer iFrame dans sans plugin

L’intégration de iFrame est plus facile que vous ne l’imaginez. La méthode traditionnelle consiste à utiliser les attributs HTML

  

Ensuite, si vous le souhaitez, vous pouvez ajouter plus de paramètres à votre balise. Vous pouvez définir la fenêtre de l’IFrame en utilisant les paramètres :

  • Largeur hauteur – Pour la hauteur et la largeur de la fenêtre iFrame, définissez des valeurs en Px
  • Bordure de cadre – Pour afficher ou masquer la bordure du cadre, utilisez les valeurs « 0 » ou « 1 ».
  • Aligner – Pour définir l’alignement des pages de la fenêtre, utilisez les valeurs « gauche » « droite » « droite » « haut » « bas ».
  • Défilement – Pour désactiver ou activer le défilement à l’intérieur de la fenêtre. Utilisez les valeurs « oui », « non » ou

Ensuite, collez simplement votre code dans le éditeur de texte de votre article sur , et cela devrait afficher votre article facilement. Par exemple, nous pouvons simplement prendre l’URL « https://themegrill.com » et l’utiliser comme source. Et créez une balise pour notre page intégrée. Ensuite, en utilisant les attributs ajoutés pour la personnalisation, nous obtenons,

 

WordPress-Iframe-Demo-Code-Without-Plugin

Cela devrait donner le résultat de :

WordPress-IFrame-Demo-Without-Plugin

Après ce processus, vous devriez pouvoir intégrer facilement n’importe quelle page dans vos publications. Que ce soit ses images, son contenu visuel, audio ou plus.

De plus, les sites Web de contenu tels que Youtube ont une fonction d’intégration intégrée pour vous permettre de partager le contenu. Cliquez simplement sur Partager et intégrer et copiez l’URL donnée.

Intégrer des iFrames à l’aide de plugins

Désormais, les plugins peuvent facilement configurer iFrames et ajouter plus de personnalisations. Maintenant, nous ne pouvons pas expliquer la méthode de travail de chaque plugin, mais l’idée de base devrait être universelle, et la plupart des plugins d’intégration populaires devraient fonctionner dans le même processus.

Donc à ce sujet, nous avons choisi ce plugin Advanced iFrame de Michael Dempfle.

WordPress-Iframe-plugin-Advanced-iFrame

Ce plugin fonctionne en vous permettant d’insérer son [advanced_iframe] shortcode au lieu de l’attribut IFrame et même en fournissant une interface utilisateur pour créer vos shortcodes iframe personnalisés. C’est mieux car supprime les balises IFrame à des fins de sécurité. De plus, le plugin ajoute plus de personnalisation à vos balises et facilite généralement votre travail.

Tout d’abord, installons ce plugin. Si vous n’êtes pas sûr du processus d’installation des plugins, reportez-vous ici.

Il existe deux façons d’utiliser ce plugin, l’une directement en utilisant les paramètres donnés et l’autre en utilisant l’interface utilisateur du plugin.

1. Directement en utilisant le Shortcode :

La manière directe d’utiliser Advanced iFrame est identique à l’utilisation de la balise HTML iFrame, mais à la place nous utilisons son shortcode.

Une fois que vous avez ouvert des messages, vous devriez pouvoir voir un « Ajouter un iframe avancé » bouton.

Cliquez sur le bouton et il devrait insérer un shortcode iFrame par défaut dans l’éditeur.

WordPress-Iframe-with-plugin-Demo-Code

Si les paramètres n’ont pas changé, le shortcode par défaut doit être :

 [advanced_iframe src="//www.tinywebgallery.com" width="100%" height="600"] 

Cette URL et ces paramètres iFrame par défaut peuvent être modifiés via l’interface utilisateur des paramètres du plugin, mais nous en traiterons plus tard.

Pour l’instant, nous pouvons simplement modifier l’URL source de n’importe quel site Web dont nous avons besoin et modifier les paramètres du shortcode de la même manière que nous ajoutons des paramètres à une balise HTML iFrame.

Les paramètres (dont la fonctionnalité et l’utilisation sont également identiques aux paramètres de la balise HTML) fournis sont :

  • Largeur hauteur – Les valeurs sont en Px ou en pourcentage
  • Défilement – Les valeurs sont « oui » ou « non ».
  • Bordure de cadre – Les valeurs sont définies avec « 0 » ou « 1 »
  • Hauteur/largeur de la marge – pour définir la hauteur et la largeur de la marge
  • Autoriser la transparence – pour activer ou désactiver la transparence du cadre

Modifions donc certains paramètres et ajoutons-en quelques autres. Pour cet exemple, construisons notre shortcode comme :

 [advanced_iframe src="https://themegrill.com" width="500px" height = "500px" frameborder="1" scrolling="no" allowtransparency=”yes”] 

Votre message enregistré avec le shortcode doit afficher la fenêtre iFrame comme suit :

WordPress-Iframe-With-Plugin-DemoPv

2. En utilisant l’interface utilisateur des paramètres :

Le processus de création de shortcodes et d’ajout de paramètres peut être difficile pour quelqu’un qui découvre ou HTML, c’est pourquoi le développeur a fourni une interface utilisateur facile à utiliser pour créer nos shortcodes personnalisés.

Tout d’abord, cliquez sur le iFrame avancé liste sur le tableau de bord et dirigez-vous vers les paramètres de base. C’est le menu où vous effectuerez la plupart de votre travail.

WordPress-IFrame-Demo-With-Plugin-Settings

Il existe plusieurs valeurs à configurer à des fins diverses. Nous n’en expliquerons ici que les essentiels :

  • URL : Insérez l’URL de la page que vous souhaitez intégrer ici. Le plugin vérifie également si l’URL est valide et autorise l’intégration iFrame.
  • Largeur hauteur: Ici, vous pouvez insérer les dimensions de votre fenêtre iFrame. Vous pouvez insérer les valeurs en pixels ou en pourcentage.
  • Largeur/hauteur de la marge : Insérez la hauteur et la largeur de la marge dans leurs cases respectives.
  • Bordure de cadre: Vous pouvez activer, désactiver ou définir la taille de la bordure de votre iFrame. L’insertion de « 0 » supprime la bordure du cadre.
  • Transparence: Vous pouvez définir la valeur « Oui » ou « Non » ou « Vrai » / « Faux ». L’activation de la transparence rend le transparent et affiche l’arrière-plan dessus.
  • Autoriser le plein écran : Il s’agit d’une fonctionnalité d’intégration de vidéos qui permet à la vidéo d’occuper tout l’écran. Activez ou désactivez-le en utilisant « True » ou « False »

En utilisant ces paramètres, vous pouvez facilement activer votre fenêtre iFrame. Le plugin fournit également des tonnes d’autres fonctionnalités, mais nous ne les passerons pas en revue car cela rendrait l’ensemble du processus complexe et difficile à expliquer.

Cliquez sur « Générer un shortcode » une fois que vous êtes satisfait des paramètres actuels. Cela génère un shortcode personnalisé que vous pouvez copier et coller dans vos publications.

WordPress-Iframe-Demo-Code-With-Plugin-Shortcode-generate

De même, si vous souhaitez que les paramètres actuels restent vos paramètres par défaut, vous pouvez cliquer sur Mettre à jour les paramètres affichés en bas de la fenêtre pour en faire la configuration par défaut.

Cela vous permet d’accéder instantanément au shortcode actuel à l’aide du bouton Ajouter un iFrame avancé que nous avons expliqué à l’étape ci-dessus. De même, réinitialiser les paramètres réinitialise le shortcode par défaut.

Vous pouvez maintenant enregistrer ce shortcode et le coller dans n’importe lequel de vos articles ou pages pour afficher la fenêtre iFrame. Notre shortcode actuel ressemblerait à ceci :

WordPress-Iframe-Demo-Code-With-Plugin-Shortcode-Pv

REMARQUE:

Mais rappelez-vous brièvement que les iFrames ne sont pas la réponse complète au partage de médias. Voici quelques conseils à retenir :

Gardez toujours un contrôle important sur le nombre d’iFrames que vous intégrez sur une seule page Web, car trop d’iFrames peuvent entraver la vitesse de chargement de votre site Web, car le chargement de ressources distinctes sur la page est nécessaire.

De plus, une énorme note d’importance, veille toujours à n’intégrer que du contenu provenant de sites Web fiables. Les pirates peuvent facilement placer une injection malveillante dans leur intégration et provoquer plusieurs types de problèmes pour votre site Web. Alors, soyez conscient du type de contenu que vous partagez

Final:

Maintenant que vous savez comment utiliser les iFrames, vous êtes prêt à aller de l’avant et à partager du contenu entre domaines. Il existe également d’autres moyens d’intégrer du contenu, mais les iFrames sont facilement le meilleur support pour les débutants car ils sont extrêmement faciles à configurer.

Il existe également des alternatives au plugin Advanced iFrame et vous êtes prêt à les expérimenter si vous le souhaitez. Comme nous l’avons expliqué précédemment, leur méthode de travail doit être identique.

Vous voulez continuer à en savoir plus sur les excellents ajouts à votre site Web ? Pensez à parcourir certains de nos autres articles utiles :

All the CMS Templates You Could Ask For.

WordPress: Avec et sans plugin

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.



WordPress: Avec et sans plugin

#Avec #sans #plugin