Como usar o bloco de HTML personalizado do WordPress

O Bloco de HTML personalizado permite adicionar conteúdo HTML e editá-lo sem ter que visualizar a página ou postar como HTML. Você pode incorporar HTML e até mesmo usá-lo para marcar seu texto e, em seguida, convertê-lo em um bloco de parágrafo com texto estilizado, se desejar. Este bloco é ótimo para quem prefere trabalhar em HTML e é uma das melhores formas de incorporar certos tipos de código, como o Google Maps.

Neste artigo, daremos uma olhada mais de perto no Bloco de HTML personalizado. Veremos como adicioná-lo às suas postagens e páginas, veremos suas configurações e opções, veremos dicas sobre como usá-lo e veremos as perguntas mais frequentes.

Inscreva-se no nosso canal no Youtube

Como adicionar o bloco de HTML personalizado à sua postagem ou página

Para adicionar o Bloco de HTML personalizado ao seu conteúdo, coloque o cursor onde deseja que o bloco apareça e selecione a ferramenta Inserter. Uma caixa de pesquisa será aberta, onde você pode inserir um termo de pesquisa ou percorrer as opções. Pesquise por html e selecione o bloco quando ele for exibido nos resultados.

Como alternativa, você pode digitar / html onde deseja que o bloco apareça e pressionar Enter ou selecioná-lo nas opções acima da área do bloco.

Agora você tem um bloco de HTML personalizado em seu conteúdo, onde pode adicionar HTML. Veremos alguns exemplos com código à medida que examinamos as configurações.

Configurações e opções de bloqueio de HTML personalizado

Ao contrário da maioria dos blocos, o Bloco HTML personalizado não inclui opções na barra lateral do editor. Você encontrará todas as opções de que precisa na barra de ferramentas.

Barra de ferramentas de bloco HTML personalizado

Clique em qualquer lugar dentro do bloco para ver suas ferramentas. Se você não vir todos, clique sob o bloco em uma nova área, e então o resto das ferramentas serão exibidas quando você selecionar o bloco novamente.

Cada bloco tem seus próprios controles específicos onde você pode selecionar opções para o bloco. Um pequeno conjunto de opções de bloco acima da barra de ferramentas permite que você altere o tipo de bloco, converta em blocos e abra as opções.

Vejamos cada configuração em detalhes.

Bloco ou estilo de alteração de HTML personalizado

Selecionar HTML nas opções abre uma caixa suspensa onde você pode transformar o bloco em outros tipos de blocos. As opções incluem Código, Colunas ou Grupo.

Código - transforma o Bloco de HTML personalizado em um Bloco de código para que você possa exibir diferentes tipos de código.

Colunas - coloca o bloco dentro das colunas.

Grupo - adiciona o bloco a um grupo para que você possa ajustá-lo como um bloco único.

Ferramenta para arrastar blocos HTML personalizados

A ferramenta de arrastar inclui seis pontos que você pode agarrar com o mouse para movê-lo.

Em seguida, basta arrastar o bloco para qualquer lugar que desejar no conteúdo e soltá-lo. Uma linha azul aparecerá indicando onde o bloco será solto conforme você o arrasta.

Depois de ver que a linha azul aparece onde deseja o bloco, solte o botão do mouse e o bloco será colocado em seu novo local.

Mover bloco HTML personalizado

As setas para cima e para baixo movem o bloco uma seção de conteúdo sempre que você clica nelas. A tela irá rolar conforme o bloco se move automaticamente para seu novo local. Esta é uma maneira fácil de mover o bloco uma seção ou duas.

Bloco de HTML personalizado HTML e visualização

Os botões HTML e Visualizar permitem selecionar como o bloco funciona com HTML no editor. O botão HTML é selecionado por padrão. Isso mostra o HTML em sua forma de código, em vez de executá-lo. Este exemplo mostra o HTML de um mapa do Google.

Selecionar Visualizar mostra como o HTML ficará no frontend conforme é executado no navegador. É fácil alternar entre as visualizações para editar o HTML e ver como ele ficaria para o usuário final. Esta é uma excelente forma de fazer edições e visualizar rapidamente os resultados. Este exemplo mostra um mapa do Google embutido como apareceria no conteúdo.

Como outro exemplo, aqui está um pouco de HTML para adicionar estilo a uma linha de texto. Esta é a visualização HTML, onde posso criar e editar o HTML.

Aqui está o modo de visualização que mostra como ficará no front end.

Opções de bloqueio de HTML personalizado

Na extremidade direita da barra de ferramentas, há três pontos em uma pilha vertical. Esses três pontos abrem um conjunto de 10 opções em três divisões que permitem ocultar as configurações, converter em blocos, copiar, duplicar, inserir antes ou depois, mover para, adicionar a blocos reutilizáveis, agrupar ou remover o bloco.

Veja o que as opções do Bloco de HTML personalizado podem fazer:

Ocultar mais configurações - oculta a barra lateral direita, expandindo sua área de trabalho.

Converter em blocos - converte o conteúdo em outros blocos apropriados. O texto será convertido em blocos de parágrafo, imagens em blocos de imagem, etc. O código incorporado, como o código do Google Map que usei no meu exemplo, permanecerá como um bloco HTML personalizado. Se outro HTML dentro do bloco puder ser convertido, ele será removido do bloco e colocado em um bloco diferente.

Copiar - copia o bloco para a área de transferência para que você possa colá-lo em qualquer lugar do editor.

Duplicar - coloca uma duplicata do bloco sob o original.

Inserir antes - adiciona uma área de bloco antes do bloco de HTML personalizado para que você possa colocar outro bloco.

Inserir depois - adiciona uma área após o bloco onde você pode colocar outro bloco.

Mover para - permite mover o bloco para cima ou para baixo com as teclas de seta. Você moverá uma linha azul. Quando chegar ao local desejado, pressione Enter e o bloco será movido instantaneamente.

Adicionar aos blocos reutilizáveis - adiciona o Bloco de HTML personalizado aos seus blocos reutilizáveis ​​para que você possa usá-lo novamente em qualquer página ou postagem.

Grupo - adiciona o bloco a um grupo para que você possa ajustar os blocos como uma única unidade.

Remover bloco - exclui o bloco.

Dicas e práticas recomendadas para usar o bloco HTML personalizado com eficácia

Use este bloco para estilizar seu texto e editar HTML primeiro e, em seguida, use a ferramenta Converter em blocos para criar parágrafos ou outros tipos de conteúdo. Isso dá a você mais controle sobre o conteúdo e é especialmente útil se você não precisar manter a versão HTML. Você pode ver a visualização conforme avança. Isso evita que você precise alternar entre os editores visuais e de código nas configurações do WordPress na barra lateral.

Use este bloco para mapas incorporados, anúncios, vídeos, etc. Isso evita que você tenha que mudar para a visualização do Editor de Código e adicionar o código em outros tipos de blocos, como o Bloco de Parágrafo.

Usar este bloco em vez da versão do Editor de código de suas páginas e postagens evita que você tenha que trabalhar com as tags de página e postagem. Isso cria um ambiente de trabalho mais limpo e mais fácil de usar.

Esteja você adicionando seu próprio HTML ou incorporando o código de outra fonte, use o recurso Visualizar com frequência para garantir que seu HTML será executado da maneira desejada.

Não use a tag de script no bloco. Ele poderia ser removido e seu código não funcionaria.

Perguntas frequentes sobre o bloco de HTML personalizado

O que o Bloco de HTML personalizado faz?

Ele permite que você insira HTML em um campo para que possa trabalhar com ele enquanto mantém a página ou postagem no Editor Visual.

Como o Bloco de HTML personalizado pode ser usado?

Qualquer HTML com as tags suportadas pode ser adicionado. Você pode usar o bloco para anúncios, mapas, vídeos, qualquer coisa com iframes, tabelas, etc. É também uma maneira fácil de marcar seu texto e depois convertê-lo em um Bloco de Parágrafo.

Irá codificar a marcação com cores?

Não, a marcação no bloco se parece com qualquer editor de texto.

O bloco de HTML personalizado executa o HTML?

Ele executa o HTML normalmente no front end. No editor, ele pode executar o HTML ou mostrar o código. Depende de você quem visualiza e pode selecionar entre as duas opções a qualquer momento com um único clique de botão.

Todas as tags HTML são compatíveis?

Não. Você pode ver uma lista de tags HTML que são suportadas na página Código com suporte do WordPress.

Conclusão

Essa é a nossa visão do Bloco de HTML personalizado. Este bloco não é apenas para desenvolvedores. A principal vantagem de usar este bloco é que você não precisa alternar entre o editor visual e o editor de código para trabalhar com HTML. Isso significa que você pode trabalhar com o resto do seu conteúdo sendo exibido normalmente. Você pode então trabalhar com HTML no bloco e visualizá-lo a qualquer momento. O Bloco de HTML personalizado fornece uma maneira fácil de trabalhar com HTML no editor de bloco.

Nós queremos ouvir de você. Você usa o Bloco de HTML personalizado? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via enterlinedesign / shutterstock.com