Come incorporare iFrame in WordPress

La condivisione di contenuti online è una pratica comune. Potresti essere perplesso, tuttavia, quando cerchi di capire come incorporare determinati tipi di contenuto. La condivisione di file di grandi dimensioni o elementi specifici da altri siti Web può essere una sfida a volte.

Fortunatamente, esiste una pratica di web design abbastanza semplice che puoi utilizzare per visualizzare tipi specifici di contenuto sul tuo sito Web WordPress. L'uso dell'HTML per creare Inline Frame (iFrame) può semplificare la condivisione di immagini, video e altri media online.

In questo articolo, esploreremo i diversi usi degli iFrame su un sito web. Seguiremo anche i passaggi per la creazione di iFrame, sia manualmente che con un plug-in. Iniziamo!

Usi iFrame

Quando utilizzi un iFrame, crei essenzialmente un piccolo portale sul tuo sito Web che consente di visualizzare i contenuti da qualche altra parte. Questo può essere utile in diversi scenari.

L'utilizzo di un iFrame significa che non è necessario ospitare effettivamente i file che si desidera visualizzare. Il contenuto rimane nella sua posizione originale e può essere visualizzato attraverso il frame sul tuo sito. Un modo in cui questa tecnica può essere utile è quando si desidera visualizzare file di grandi dimensioni. Un iFrame può portare quel contenuto sul tuo sito web senza rallentarne la velocità di caricamento.

Vale la pena notare che gli iFrame sono l'unico tipo di frame consentito in HTML5. Esistono diversi tipi di contenuti che potresti utilizzare per visualizzare, tra cui:

• Immagini: puoi utilizzare iFrame per mostrare immagini di alta qualità da una galleria esterna ed evitare di dover scendere a compromessi a causa delle dimensioni del file.
• Video: l'hosting dei tuoi video su una piattaforma come YouTube o Vimeo e l'utilizzo di un iFrame per posizionarli sul tuo sito Web possono migliorare l'esperienza dell'utente liberando spazio di archiviazione sul tuo sito Web.
• Altri contenuti Web: mettere in evidenza i contenuti di altri siti Web, come pagine di portfolio o ricette, può portare facilmente contenuti ricchi al tuo pubblico.

Quando usi iFrame, puoi anche evitare complicate regole sul copyright. Diversi tribunali hanno stabilito che l'utilizzo di un iFrame per visualizzare materiale protetto da copyright non costituisce una violazione del copyright in tutti i casi.

Un sito Web può anche includere script per impedire che il suo contenuto venga incluso in un iFrame. Tuttavia, ti consigliamo di accreditare sempre il creatore originale di qualsiasi contenuto che utilizzi o di richiedere una consulenza legale se non sei sicuro di come procedere.

Utilizzo di iFrame con un plug-in

Uno dei modi più semplici per utilizzare iFrame su un sito Web WordPress è utilizzare un plug-in iFrame. Fortunatamente, ci sono diverse opzioni molto apprezzate tra cui scegliere.

Passaggio 1: scarica e configura un plug-in iFrame

Per il nostro esempio, utilizzeremo il plug-in Advanced iFrame. È flessibile, semplice da usare e molto apprezzato:

Dopo aver installato e attivato il plug-in, troverai una nuova voce di menu Advanced iFrames nella dashboard di WordPress. Advanced iFrame ha un set piuttosto ampio di opzioni. Ti consigliamo di iniziare con la scheda Opzioni e rivedere il video "QuickStart":

Quindi, puoi scorrere verso il basso e rivedere alcune delle opzioni del plug-in. Questi sono tutti impostati con molte spiegazioni utili e scelte facili da selezionare:

Advanced iFrame fornisce anche un iFrame checker gratuito, che controllerà qualsiasi URL fornito per vedere se contiene script che impediscono l'inclusione del contenuto in un iFrame. È una buona idea eseguire qualsiasi URL tramite questo strumento prima di utilizzarlo in un iFrame sul tuo sito web.

Ti consigliamo di rivedere anche la scheda Impostazioni di base . Lì puoi personalizzare gli elementi dell'iFrame come altezza, larghezza e bordi della cornice:

Dopo aver configurato le impostazioni del plug-in per soddisfare le tue esigenze, puoi iniziare a utilizzare iFrame sul tuo sito web.

Passaggio 2: utilizzare il blocco iFrame avanzato

Nell'Editor blocchi di WordPress ora avrai a disposizione un blocco iFrame avanzato :

Se hai difficoltà a trovare questo blocco la prima volta che vuoi usarlo, sarà nella categoria Widget .

Dopo aver fatto clic sul blocco Advanced iFrame , verrà caricato automaticamente con il contenuto dal sito Web del creatore del plug-in. Puoi configurare il blocco utilizzando le opzioni Blocco sul lato destro della pagina:

Qui puoi aggiungere l'URL del contenuto che desideri visualizzare nell'iFrame. Sarai anche in grado di sovrascrivere alcune delle impostazioni del plugin, se necessario.

Passaggio 3: visualizza l'anteprima del tuo sito

Se hai testato il tuo URL con il controllo iFrame, dovresti essere a posto. Tuttavia, è sempre meglio visualizzare in anteprima le modifiche prima di pubblicare i contenuti. Dovresti vedere un'anteprima dal vivo del tuo iFrame mentre lo modifichi e apporti modifiche.

Puoi anche utilizzare l'opzione Anteprima nell'angolo in alto a destra della finestra di modifica, per visualizzare il post nel contesto dei menu e delle barre laterali del tuo sito.

Utilizzo di iFrame senza plug-in

Se non vuoi lavorare con un plug-in ma desideri comunque utilizzare iFrame, sei fortunato! Puoi applicare manualmente il codice ai tuoi post e alle tue pagine per includere i contenuti iFramed.

Passaggio 1: inserire un codice di incorporamento

Se desideri incorporare contenuti come un video di YouTube sul tuo sito web, dovrai individuare il codice di incorporamento fornito da YouTube. Puoi trovarlo sotto un video facendo clic su Condividi .

Questo farà apparire un menu di opzioni di condivisione. Ti consigliamo di selezionare Incorpora per ottenere il codice necessario per il tuo iFrame.

Si aprirà una finestra separata con un'anteprima di come sarà il contenuto incorporato. Sarai quindi in grado di copiare uno snippet di codice iFrame.

Puoi anche selezionare la casella Inizia alle se desideri che gli spettatori inizino automaticamente a visualizzare i contenuti a un determinato orario.

Successivamente, tornerai al tuo post di WordPress e aggiungerai il blocco HTML personalizzato . Puoi trovarlo nella categoria Formattazione .

Dopo aver aggiunto questo blocco al tuo post, puoi semplicemente incollare il codice di incorporamento che hai copiato dalla pagina di YouTube.

Successivamente, ti consigliamo di assicurarti che l'incorporamento funzioni correttamente e abbia l'aspetto desiderato. Puoi fare clic su Anteprima nel blocco HTML personalizzato per vedere se il tuo iFrame funziona.

Con ciò, hai posizionato con successo un iFrame sul tuo sito web. Lo stesso processo funzionerà per qualsiasi piattaforma che ti fornisca codici di incorporamento.

Passaggio 2: personalizza i tuoi iFrame

Se non sei ancora del tutto soddisfatto del modo in cui l'iFrame viene visualizzato sul tuo post o sulla tua pagina, puoi regolare manualmente alcuni dei valori nel codice. Ti consigliamo di utilizzare Cascading Style Sheets (CSS) per personalizzare completamente l'aspetto degli iFrame sul tuo sito web.

Il tag iFrame consente una serie di proprietà personalizzate. Tuttavia, è importante notare che molti di questi non sono più supportati da HTML5. Probabilmente dovrai esaminare il CSS del tuo tema come accennato in precedenza, poiché potresti non essere in grado di sovrascrivere determinate formattazioni direttamente nel blocco HTML personalizzato .

Passaggio 3: controlla regolarmente il contenuto dell'iFrame

Quando utilizzi iFrame, ti consigliamo di controllare regolarmente il contenuto incorniciato. Dal momento che stai aprendo una finestra su contenuti su cui potresti non avere alcun controllo editoriale o di qualità, potrebbe causare un problema sul tuo sito Web in qualsiasi momento.

Ad esempio, se il video che abbiamo utilizzato nel nostro esempio viene rimosso dal suo canale YouTube, il nostro post conterrà un player non funzionante. Questo è un po' più ovvio di un collegamento interrotto, in quanto lascerà un impatto visivo sul tuo sito web. Il controllo periodico del contenuto iFrame consente di modificare o rimuovere qualsiasi supporto che non funziona più.

Ottimizza il tuo sito con WP Engine

L'utilizzo di iFrame sul tuo sito Web può far funzionare le cose senza intoppi, pur incorporando contenuti multimediali e dinamici. Qui a WP Engine, conosciamo l'importanza di comprendere importanti concetti di web design e avere accesso alle migliori risorse per sviluppatori disponibili.

Inoltre, ci impegniamo ad aiutarti a fornire le migliori esperienze digitali ai tuoi clienti. Abbiamo una vasta selezione di piani di hosting WordPress completamente gestiti, così puoi concentrarti sulla progettazione di bellissimi siti web!