Transmissões do Twitch no WordPress: Instruções

Você quer Incorpore transmissões do Twitch em seu site WordPresspara dar aos seus visitantes acesso a conteúdo ao vivo diretamente no seu site. Esta é uma maneira eficaz de envolver sua comunidade e aumentar o tempo de permanência. Aqui está um guia detalhado sobre como fazer isso com segurança e eficiência.

Existem várias maneiras de incorporar transmissões do Twitch no WordPress, sendo o editor Gutenberg o método mais fácil para instalações modernas do WordPress. Analisaremos todas as opções comuns para que você possa escolher a opção certa para você.

1. De acordo com o bloco de Gutenberg

Desde o WordPress 5.0, o editor Gutenberg é o padrão. Ele oferece um bloco dedicado para transmissões do Twitch, facilitando a incorporação.

Etapa 1: adicionar um novo bloco Abra a postagem ou página onde você deseja incorporar o fluxo. Clique no +ícone (Adicionar bloco) e procure por “Twitch”. Selecione o bloco Twitch.

Etapa 2: Insira a URL do Twitch O bloco solicitará que você insira uma URL do Twitch. Aqui você pode:

A URL de uma transmissão ao vivo específica (por exemplo https://www.twitch.tv/dein_streamer_name)
A URL de um VOD (vídeo sob demanda, por exemplo https://www.twitch.tv/videos/123456789)
A URL de um clipe (por exemplo https://www.twitch.tv/dein_streamer_name/clip/AmazingClipName)

Cole a URL desejada e clique em “Incorporar”. O WordPress cuida do resto e gera o código de incorporação apropriado.

Etapa 3: ajuste as opções de bloco (opcional) Após a incorporação, você verá o reprodutor de transmissão no editor. No painel lateral direito (Configurações do bloco), você encontrará mais opções:

Largura e altura: Você pode especificar valores absolutos de pixels ou larguras percentuais. Para uma exibição responsiva, uma largura percentual (por exemplo, 100%) e uma altura fixa são frequentemente recomendadas, ou você pode deixar o comportamento padrão para dimensionamento automático.
Mostrar chat: Habilite esta opção se quiser exibir o chat do Twitch junto com a transmissão.
Reprodução automática: A reprodução automática está desativada por padrão. Por razões de usabilidade (reprodução de áudio inesperada) e de desempenho (poluição sonora direta), você não deve habilitar a reprodução automática, a menos que tenha um caso de uso muito específico em que ela seja esperada.
Domínio “pai”: Para que a incorporação funcione corretamente, especialmente se forem necessários bate-papo ou certas interações, o Twitch pode exigir um domínio "pai" nos parâmetros de incorporação. Isso geralmente é feito automaticamente nas configurações do bloco, mas é importante ao usar o método manual (veja abaixo).

Vantagens do bloco de Gutenberg:

Extremamente fácil de usar.
Não é necessária intervenção manual de código.
O WordPress cuida dos ajustes necessários.

2. Via oEmbed (obsoleto)

O WordPress suporta o oEmbed para muitos serviços externos, incluindo o Twitch. Isso significa que muitas vezes você só precisa colocar o URL em uma nova linha no seu editor, e o WordPress o converterá automaticamente no código de incorporação apropriado. Isso funciona tanto no editor clássico quanto no editor Gutenberg (se você simplesmente colar uma URL em um bloco de parágrafo).

Etapa 1: Copie o URL do Twitch Acesse a transmissão do Twitch ou VOD que você deseja incorporar e copie o URL completo da barra de endereço do seu navegador.

Etapa 2: cole o URL no editor Cole o URL copiado em uma nova linha no seu editor do WordPress. Certifique-se de que não há mais nada nesta linha.

Exemplo:

https://www.twitch.tv/dein_streamer_name

https://www.twitch.tv/videos/123456789

Etapa 3: Salvar/Atualizar Quando você salva ou atualiza a postagem, o WordPress converte automaticamente a URL para o player.

Vantagens do oEmbed:

Ainda mais simples que o bloco de Gutenberg se você quiser apenas o jogador sem bate-papo.
Também funciona em versões mais antigas do WordPress com o editor clássico.

Desvantagem:

Menos opções de personalização diretamente no editor; Para bate-papo etc., você precisa do método de código de incorporação completo.

3. Via código de incorporação do Twitch (iframe)

Este método é o mais flexível e oferece mais opções de personalização. É ideal se você deseja controlar parâmetros específicos, como posição do chat, reprodução automática ou outras opções do jogador.

Etapa 1: gerar código de incorporação do Twitch

Para um canal ao vivo: Vá para o canal do streamer (por exemplo https://www.twitch.tv/dein_streamer_name). Clique no ícone “Compartilhar” abaixo do player de vídeo. Selecione “Incorporar”.
Para um VOD/Destaque/Clipe: Abra o vídeo/clipe. Clique no ícone “Compartilhar”. Selecione “Incorporar”.

Uma janela é aberta com o código de incorporação. Você pode ajustar várias opções aqui antes de copiar o código:

Largura e altura: Ajuste o tamanho do player.
Mostrar chat: Adicione ou remova a janela de bate-papo.
Domínios “pais”: Este é um ponto importante para a segurança e funcionalidade do Twitch incorporado. Você deve inserir o(s) domínio(s) dos quais o fluxo será incorporado. Por exemplo: YourDomain.de. Se você não fizer isso, poderão ocorrer erros (por exemplo, "Erro 404: Não encontrado" para o bate-papo ou o fluxo não carregará). Adicione cada domínio e subdomínio do qual o embed é acessado neste campo (por exemplo seudominio.de, www.seudominio.de, blog.seudominio.de).

Copie o gerado -Código.

Exemplo de um código de incorporação: (Observe os espaços reservados NOME_DO_SEU_CANAL_AQUI e SEU_DOMÍNIO_PRINCIPAL_AQUI)

Para incorporar ainda mais o chat, o código ficaria assim:

Um aviso: O pai Os parâmetros são cruciais para a funcionalidade e a segurança. Sem especificar o(s) domínio(s) correto(s), o embed não será carregado corretamente ou o chat exibirá erros.

Etapa 2: Insira o código no WordPress

No editor Gutenberg: Adicione um bloco “HTML personalizado” e cole o copiado -código lá.
No Editor Clássico: Mude do modo “Visual” para o modo “Texto” (antigo “modo HTML”) e cole o código onde quiser.

Vantagens do código de incorporação direta:

Controle máximo sobre tamanho, bate-papo e comportamento do jogador.
Útil para casos de uso específicos, como adicionar parâmetros adicionais (por exemplo silenciado=verdadeiro para partida silenciosa).

Desvantagens:

Requer um conhecimento básico de HTML.
Mais propenso a erros se os parâmetros não forem definidos corretamente.

4. Plugins do Twitch

Existem plugins do WordPress que facilitam a integração com o Twitch. Um exemplo seria “IncorporarPress" ou plugins específicos do Twitch. No entanto, os recursos nativos do WordPress (bloco Gutenberg, oEmbed) já oferecem opções suficientes na maioria dos casos.

Quando um plugin pode ser útil:

Se você precisar de recursos especiais que vão além da incorporação padrão (por exemplo, vários fluxos ao mesmo tempo, listas de fluxos automáticas, opções de estilo específicas que não podem ser resolvidas via CSS).
Se você usar o editor clássico e o manual método, mas precisa de mais opções do que oEmbed.

E é aqui que o plugin StreamWP entra em ação.

StreamWP

O StreamWP está atualmente em desenvolvimento e será lançado em breve.

Conclusão

Incorporar transmissões do Twitch no WordPress é simples graças ao editor Gutenberg e ao suporte ao oEmbed. Para máximo controle e ajustes individuais, o direto O código do Twitch oferece a maior flexibilidade, mas requer a configuração correta dos domínios pais.

Incorporar streams do Twitch no WordPress é incrivelmente fácil graças aos blocos nativos e funções oEmbed e pode ser feito manualmente iframe-Adaptações para necessidades especiais podem ser refinadas.

Fontes: