Como Incorporar iFrames no WordPress

Compartilhar conteúdo online é uma prática comum. Você pode ficar perplexo, no entanto, ao tentar descobrir como incorporar certos tipos de conteúdo. Às vezes, compartilhar arquivos grandes ou itens específicos de outros sites pode ser um desafio.

Felizmente, existe uma prática de web design bastante simples que você pode empregar para exibir tipos específicos de conteúdo em seu site WordPress. O uso de HTML para criar quadros embutidos (iFrames) pode simplificar o compartilhamento de imagens, vídeos e outras mídias online.

Neste artigo, exploraremos os diferentes usos de iFrames em um site. Também veremos as etapas para criar iFrames, manualmente e com um plug-in. Vamos começar!

Usos do iFrame

Ao usar um iFrame, você basicamente cria um pequeno portal em seu site que permite que o conteúdo de outro lugar seja visualizado. Isso pode ser útil em vários cenários.

Usar um iFrame significa que você não precisa realmente hospedar os arquivos que deseja exibir. O conteúdo permanece em seu local original e pode ser visualizado através do quadro em seu site. Uma maneira pela qual essa técnica pode ser útil é quando você deseja exibir arquivos grandes. Um iFrame pode trazer esse conteúdo para o seu site sem diminuir a velocidade de carregamento.

Vale a pena notar que os iFrames são o único tipo de quadro permitido no HTML5. Há uma variedade de tipos diferentes de conteúdo que você pode usar para exibir, incluindo:

• Imagens: você pode usar iFrames para mostrar imagens de alta qualidade de uma galeria externa e evitar comprometer o tamanho do arquivo.
• Vídeos: Hospedar seus vídeos em uma plataforma como YouTube ou Vimeo e usar um iFrame para colocá-los em seu site pode aprimorar a experiência do usuário enquanto libera espaço de armazenamento em seu site.
• Outro conteúdo da Web: destacar conteúdo de outros sites, como páginas de portfólio ou receitas, pode trazer conteúdo rico para seu público com facilidade.

Ao usar iFrames, você também pode evitar regras complicadas de direitos autorais. Vários tribunais decidiram que o uso de um iFrame para exibir material protegido por direitos autorais não constitui uma violação de direitos autorais em todos os casos.

Um site também pode incluir scripts para impedir que seu conteúdo seja incluído em um iFrame. No entanto, recomendamos sempre creditar o criador original de qualquer conteúdo que você usar ou procurar aconselhamento jurídico se não tiver certeza de como proceder.

Usando iFrames com um plug-in

Uma das maneiras mais fáceis de empregar iFrames em um site WordPress é usar um plug-in iFrame. Felizmente, existem várias opções altamente cotadas para escolher.

Etapa 1: Baixe e configure um plug-in iFrame

Para o nosso exemplo, vamos usar o plug-in Advanced iFrame. É flexível, simples de usar e muito bem avaliado:

Depois de instalar e ativar o plug-in, você encontrará um novo item de menu Advanced iFrames no painel do WordPress. Advanced iFrame tem um conjunto bastante extenso de opções. Você vai querer começar com a guia Opções e revisar o vídeo “QuickStart”:

Em seguida, você pode rolar para baixo e revisar algumas das opções do plug-in. Todos eles são configurados com muitas explicações úteis e opções fáceis de selecionar:

Advanced iFrames também fornece um verificador de iFrame gratuito, que verificará qualquer URL que você fornecer para ver se contém scripts que impedem que o conteúdo seja incluído em um iFrame. É uma boa ideia executar qualquer URL por meio dessa ferramenta antes de usá-la em um iFrame em seu site.

Você também deve revisar a guia Configurações básicas . Lá, você pode personalizar os elementos do iFrame, como altura, largura e bordas do quadro:

Depois de definir as configurações do plug-in para atender às suas necessidades, você pode começar a usar iFrames em seu site.

Passo 2: Use o Bloco iFrame Avançado

No WordPress Block Editor, agora você terá um bloco Advanced iFrames disponível para uso:

Se você tiver problemas para encontrar este bloco na primeira vez que quiser usá-lo, ele estará na categoria Widgets .

Depois de clicar no bloco Advanced iFrame , ele será carregado automaticamente com o conteúdo do site do criador do plug-in. Você pode configurar o bloco usando as opções de bloqueio no lado direito da página:

Lá, você pode adicionar a URL do conteúdo que deseja que apareça no iFrame. Você também poderá substituir algumas das configurações do plug-in, se necessário.

Etapa 3: visualize seu site

Se você testou sua URL com o verificador de iFrame, deve estar pronto. No entanto, é sempre melhor visualizar suas alterações antes de publicar seu conteúdo. Você deve ver uma visualização ao vivo do seu iFrame enquanto o edita e faz alterações.

Você também pode usar a opção Visualizar no canto superior direito da janela de edição para visualizar a postagem no contexto dos menus e barras laterais do seu site.

Usando iFrames sem um plug-in

Se você não quer trabalhar com um plugin, mas ainda assim gostaria de usar iFrames, você está com sorte! Você pode aplicar manualmente o código às suas postagens e páginas para incluir conteúdo iFramed.

Etapa 1: inserir um código de incorporação

Se quiser incorporar conteúdo como um vídeo do YouTube em seu site, você precisará localizar o código de incorporação fornecido pelo YouTube. Você pode encontrar isso abaixo de um vídeo clicando em Compartilhar .

Isso abrirá um menu de opções de compartilhamento. Você deve selecionar Incorporar para obter o código necessário para seu iFrame.

Uma janela separada será aberta com uma visualização da aparência do conteúdo incorporado. Você poderá então copiar um snippet de código iFrame.

Você também pode marcar a caixa Iniciar em se quiser que os visualizadores comecem a visualizar o conteúdo automaticamente em um determinado código de tempo.

Em seguida, você voltará à sua postagem do WordPress e adicionará o bloco HTML personalizado . Você pode encontrar isso na categoria Formatação .

Depois de adicionar este bloco à sua postagem, basta colar o código de incorporação copiado da página do YouTube.

Em seguida, certifique-se de que a incorporação esteja funcionando corretamente e tenha a aparência desejada. Você pode clicar em Visualizar no bloco HTML personalizado para ver se seu iFrame está funcionando.

Com isso, você colocou com sucesso um iFrame em seu site. O mesmo processo funcionará para qualquer plataforma que forneça códigos de incorporação.

Etapa 2: Personalize seus iFrames

Se ainda não estiver satisfeito com a forma como o iFrame é exibido em sua postagem ou página, você pode ajustar manualmente alguns dos valores no código. É recomendável que você use Cascading Style Sheets (CSS) para personalizar totalmente como os iFrames aparecem em seu site.

A tag iFrame permite várias propriedades personalizadas. No entanto, é importante observar que muitos deles não são mais suportados pelo HTML5. Você provavelmente precisará investigar o CSS do seu tema, conforme mencionamos anteriormente, pois talvez não seja possível substituir determinada formatação diretamente no bloco HTML personalizado .

Etapa 3: verifique seu conteúdo iFrame regularmente

Ao usar iFrames, você deve verificar o conteúdo emoldurado regularmente. Como você está abrindo uma janela para um conteúdo sobre o qual pode não ter nenhum controle editorial ou de qualidade, isso pode causar um problema em seu site a qualquer momento.

Por exemplo, se o vídeo que usamos em nosso exemplo for retirado de seu canal do YouTube, nossa postagem terá um reprodutor quebrado. Isso é um pouco mais óbvio do que um link quebrado, pois deixará um impacto visual em seu site. Verificar o conteúdo do iFrame periodicamente permite que você altere ou remova qualquer mídia que não esteja mais funcionando.

Otimize seu site com o WP Engine

O uso de iFrames em seu site pode manter as coisas funcionando sem problemas, ao mesmo tempo em que incorpora mídia avançada e conteúdo dinâmico. Aqui na WP Engine, sabemos da importância de entender conceitos importantes de web design e ter acesso aos melhores recursos para desenvolvedores.

Além disso, estamos empenhados em ajudá-lo a fornecer as melhores experiências digitais aos seus clientes. Temos uma seleção diversificada de planos de hospedagem WordPress totalmente gerenciados, para que você possa se concentrar em criar belos sites!