Adquirir a habilidade de mostrar código de forma eficaz no WordPress é de extrema importância para blogueiros e criadores de conteúdo que publicam consistentemente código online para seu público utilizar. O código de computador, como pretendido, gera uma nova saída visual no front-end de um site, diferente das tags, barras e colchetes presentes nos trechos de código reais.
No entanto, isso cria uma situação difícil para os indivíduos que escrevem sobre desenvolvimento e design, pois precisam de um meio de apresentar o código adequadamente sem que ele execute sua funcionalidade pretendida, como gerar um botão ou aplicar estilos a um bloco de parágrafo.
Simplificando, ao criar uma postagem de blog que inclua um trecho de código como exemplo, é imperativo impedir a execução do código. Essa abordagem permite que os leitores percebam o código em sua forma original, visualizem-no em um bloco bem formatado e até mesmo copiem seu conteúdo para seus próprios empreendimentos de desenvolvimento.
Este guia visa demonstrar vários métodos para exibição de código no WordPress, independentemente do tema WordPress escolhido. Além disso, ajudará você a determinar o método mais adequado para seu fluxo de trabalho específico.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agoraO que acontece quando você adiciona código normal no WordPress?
Quando você adiciona código regular diretamente em uma postagem ou página do WordPress, sem tomar nenhuma medida específica, o código pode causar consequências indesejadas. O WordPress possui mecanismos integrados que processam e limpam automaticamente o conteúdo para garantir a segurança e a funcionalidade adequada. Como resultado, quando o código regular é adicionado, ele pode ser modificado ou removido completamente pelo WordPress.
Aqui estão algumas coisas que podem acontecer quando você adiciona código regular no WordPress:
- Alteração de código: o WordPress pode alterar o código removendo ou modificando certos elementos para evitar possíveis riscos de segurança ou conflitos com a funcionalidade da plataforma. Isso pode fazer com que o código não seja executado conforme o esperado ou produza erros.
- Remoção de código: o WordPress possui filtros e medidas de segurança que podem remover certos tipos de código considerados inseguros ou desnecessários. Isso pode levar à remoção de trechos de código importantes ou do próprio bloco de código inteiro.
- Distorção visual: o código normalmente contém caracteres especiais, símbolos e formatação que podem interferir na apresentação visual do seu conteúdo WordPress. Isso pode causar problemas de formatação, desalinhamento ou o código aparecendo como texto simples em vez de ser renderizado como código.
- Execução do código: em alguns casos, se o código não for adequadamente higienizado ou manipulado, ele poderá ser executado e executar a funcionalidade pretendida. Isso pode ter consequências não intencionais, como criar botões, alterar a aparência do conteúdo ou até mesmo afetar o funcionamento geral do seu site.
Para superar esses problemas e exibir o código com segurança no WordPress, é recomendável usar métodos apropriados ou plug-ins projetados especificamente para exibir trechos de código. Esses métodos garantem que o código seja formatado, preservado e exibido corretamente sem nenhuma modificação ou execução indesejada.
Aqui vamos adicionar o seguinte código HTML no snippet:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Este trecho de código específico emprega elementos de estilo HTML para gerar três blocos de conteúdo adornados em verde, completos com cabeçalhos e parágrafos.
No entanto, nossa intenção é apresentar o código não processado em uma postagem de blog, em vez de permitir que ele seja renderizado nos blocos fornecidos.
Os seguintes resultados podem ser observados quando o código é colado diretamente no WordPress Gutenberg Block Editor:
Diante do exposto, fica evidente que o WordPress se empenha em empregar o código para sua função primordial de geração de conteúdo. No entanto, ele remove o estilo do código, deixando de apresentar o resultado desejado aos leitores.
Para evitar tais circunstâncias, defendemos fortemente a utilização de um dos métodos enumerados abaixo para fins de exibição de código.
4 maneiras de exibir código no WordPress
As técnicas a seguir são organizadas em ordem crescente de dificuldade e oferecemos abordagens específicas adaptadas a indivíduos que obtêm satisfação ao compor código e conteúdo em editores de markdown, em vez de utilizar o WordPress.
Método 1: Usando o Gutenberg Block Editor
O editor Gutenberg inclui um bloco de código pré-existente que facilita a apresentação de trechos de código preservando sua formatação e sem executar o código.
Para começar, acesse um post ou página no WordPress e selecione um dos botões Adicionar Bloco.
Selecione um dos botões "Adicionar bloco" para continuar.
Ao fazer isso, a variedade de blocos disponíveis será revelada. Você tem a opção de pesquisar o bloco "Código" ou inserir uma palavra-chave como "código" na barra de pesquisa.
Ao localizar o bloco de código, identificável por seus ícones de colchetes, clique nele para inserir uma seção de código na postagem.
Atualmente, uma área com a sugestão "Compose code…" deve estar visível para você.
O editor WordPress Gutenberg oferece suporte a markdown, permitindo a descoberta e inserção de blocos de código por meio do uso de uma barra (/) seguida da entrada de "C" ou "Código" no editor. O WordPress exibirá subsequentemente todos os blocos pertinentes, facilitando um processo de inserção mais conveniente.
É importante observar a distinção entre o bloco de código e o bloco de HTML personalizado. Embora o bloco HTML personalizado seja destinado à inclusão de código HTML personalizado a ser renderizado no front-end, o bloco Code foi projetado especificamente para a adição de código bruto para fins de exibição.
Atualmente, é o momento apropriado para replicar o código desejado e inseri-lo na área designada como "Escrever código..."
O código que você forneceu agora está incluído no bloco de código designado.
Um aspecto vantajoso do bloco Code é sua aderência à formatação de espaços e tabulações dentro do trecho de código original. Consequentemente, o código exibido deve manter sua consistência visual com a fonte da qual foi copiado.
Para exibir seu código em sua postagem ou página do WordPress, conclua o procedimento clicando no botão "Publicar". Além disso, você tem a opção de obter uma representação visual de sua aparência antes da publicação selecionando "Visualizar".
Depois de clicar no botão "Publicar", acesse a versão ao vivo da postagem para verificar se o trecho de código está sendo exibido como código bruto.
Como observado, o bloco Code é caracterizado pela sua simplicidade, mas serve ao propósito essencial de preservar a formatação ao apresentar o código nas postagens do blog.
Consulte a captura de tela fornecida abaixo. Neste exemplo específico, o trecho de código original permanece inalterado; ele é meramente apresentado no front-end dentro de uma caixa cinza.
Para aumentar o destaque do bloco de código, é aconselhável considerar a modificação de sua aparência padrão.
Para acessar as opções de estilo disponíveis para o bloco, selecione o bloco de código e clique no botão Configurações (ícone de engrenagem). Esta ação abrirá a aba Bloco, exibindo exclusivamente as configurações de Bloco aplicáveis ao bloco selecionado, ou seja, o Bloco de Código nesta instância.
Tem-se a possibilidade de personalizar o bloco de código de acordo com as preferências pessoais, incluindo a opção de modificar aspectos como texto e cores de fundo.
Método 2: Usando um Plug-in
Por favor, utilize seu método de instalação de plugin preferido para incorporar o plugin Enlighter – Customizable Syntax Highlighter em seu site WordPress.
Uma vez ativado, o plug-in estará totalmente funcional e permitirá que você insira o código em qualquer postagem/página por meio do bloco Gutenberg ou do botão Inserir do Editor Clássico.
Se você estiver usando o WordPress Gutenberg Block Editor, acesse uma postagem na qual deseja exibir o código. Selecione um dos botões Adicionar bloco (identificado pelo símbolo "+") para revelar a variedade de blocos disponíveis.
Examine ou insira uma palavra-chave pertencente ao bloco Enlighten Sourcecode. Prossiga clicando no respectivo bloco para incorporá-lo à postagem.
O bloco Enlighter Highlighter aparece subseqüentemente na interface do Block Editor, apresentando um título designado intitulado "Generic Highlighting" e um campo de entrada de texto rotulado "Insert Sourcecode..."
Insira ou copie e cole o código desejado para exibição no WordPress no campo de texto designado "Inserir código-fonte...".
Em sua capacidade de realçador de sintaxe, o plug-in retém todas as preferências e tabulações de formatação. Ao obter satisfação com o resultado, selecione o botão "Publicar".
Ao utilizar essa funcionalidade, você pode acessar a interface do usuário de sua postagem para observar o mesmo conteúdo dos visitantes do site.
O plug-in Enlighter fornece um tema padrão simplista para exibição de código, acompanhado por números de linha que auxiliam no processo de estruturação e referência.
Como mencionado anteriormente, utilizar um plug-in para exibir código na plataforma WordPress oferece vantagens distintas quando comparado a métodos alternativos. Um exemplo ilustrativo dessa vantagem é a funcionalidade de front-end fornecida pelo plug-in de sintaxe Enlighter, em que as linhas de código são realçadas dinamicamente à medida que o usuário percorre o conteúdo.
Além disso, dentro da caixa de código localizada no canto superior direito, existem vários botões que aprimoram a experiência do usuário. Notavelmente, um desses botões permite a apresentação do código em formato de texto simples, sem números de linha.
O segundo botão, denominado "Copiar para a área de transferência", facilita a duplicação instantânea de todo o conteúdo da caixa de código, permitindo que os usuários transfiram e colem convenientemente o código em qualquer programa desejado.
Por fim, o terceiro botão abre o código em uma nova janela, apresentando-o em uma janela do navegador formatada como texto simples.
O plug-in Enlighter oferece uma variedade de temas e ferramentas de personalização robustas para adaptar a aparência da caixa de código de acordo com suas preferências. Se preferir não utilizar o tema padrão, você pode navegar de volta para sua postagem no WordPress e selecionar o bloco Enlighter Sourcecode atualmente ativo.
Esta ação revelará a barra lateral do Bloco no WordPress. Caso não apareça imediatamente, certifique-se de clicar no botão Configurações (ícone de engrenagem) localizado no canto superior direito da janela do WordPress.
A opção de personalização inicial a ser considerada é o campo Idioma, pois ele instrui o plug-in sobre qual idioma de código exibir, habilitando a formatação apropriada e os recursos de destaque.
Existe uma seleção considerável de linguagens de codificação a serem consideradas, portanto, examine a lista e selecione a mais adequada.
O recurso Linhas especiais enfatiza as linhas designadas, permitindo que os usuários insiram números de linha separados por vírgulas.
Consequentemente, as linhas designadas que você especificou são enfatizadas visualmente para todos os indivíduos que acessam o site.
O parâmetro Lineoffset fornece um meio de iniciar seu snippet de codificação em um determinado número de linha, sendo vantajoso ao apresentar um subconjunto de código de um conjunto maior de linhas.
Evidentemente, inserindo o valor "10" no campo Lineoffset, a totalidade da caixa de código inicia a partir da linha número 10.
Método 3: usando uma ferramenta codificadora
Visite o site do Codificador HTML W3Docs. Na página, você encontrará dois campos de caixa adjacentes. O esquerdo é designado para colar seu código, enquanto o direito exibe a versão codificada que você pode copiar e colar no WordPress.
Antes de prosseguir, é necessário especificar o tipo de preservação de código desejado:
- Selecione JavaScript Unicode se planeja colar código contendo elementos JavaScript.
- Opte por símbolos HTML se estiver trabalhando com HTML.
Insira o código desejado a ser exibido no WordPress no campo designado à esquerda. Em seguida, localize e selecione o botão Codificar localizado acima no lado direito.
O resultado final pode parecer desconcertante; no entanto, é essencialmente um amálgama de elementos HTML com o objetivo de preservar a totalidade do código inserido, evitando qualquer ativação não intencional ou exibição de conteúdo alternativo no front-end.
Por favor, clique no botão "Copiar".
Retorne ao WordPress e acesse o post ou página pretendida. Prossiga para selecionar o menu Opções (representado por três pontos verticais) localizado no canto superior direito. Posteriormente, opte pelo recurso Code Editor.
A interface atual apresentará o Code Editor em vez do Visual Block Editor. Localize a seção desejada para exibição do código e insira seu HTML codificado no editor.
Se você estiver usando o editor clássico do WordPress, é necessário navegar até a guia Texto, que corresponde ao Editor de código no Gutenberg Block Editor.
Selecione a opção "Atualizar" ou "Publicar" para finalizar a postagem e prossiga para o front-end da postagem para observar sua apresentação visual.
Você poderá observar o código inalterado que foi inicialmente inserido no codificador, antes da inclusão dos elementos de codificação HTML. É importante observar que os codificadores não fornecem nenhum recurso de estilo, o que torna essa abordagem ideal para obter uma estética organizada e minimalista.
Método 4: Usando um Código de Acesso Personalizado
A criação de um shortcode personalizado cumpre a tarefa de inserir blocos de código reutilizáveis sem a necessidade de copiar e colar manualmente. É exatamente por isso que os códigos de acesso personalizados fornecem uma oportunidade robusta para exibição de código na plataforma WordPress.
As vantagens de utilizar códigos de acesso personalizados para apresentação de código são as seguintes:
- Códigos de acesso personalizados permitem salvar seções de código complexas para reutilização futura, eliminando a necessidade de digitar trechos de código longos repetidamente.
- É possível definir estilos CSS personalizados para marcadores de código e contêineres.
- Os códigos de acesso podem ser empregados por qualquer usuário, permitindo que outros colaboradores aproveitem facilmente seus marcadores e blocos de código com um simples clique.
A criação de um shortcode personalizado exige proficiência na modificação de arquivos de tema do WordPress, trabalhando com código PHP e potencialmente desenvolvendo plugins do WordPress. Como resultado, criar um código de acesso personalizado para WordPress pode representar dificuldades para pessoas novas no PHP.
No entanto, o resultado final oferece uma abordagem consideravelmente mais simples para exibir o código na plataforma WordPress.
Tem-se a liberdade de escolher qualquer nome desejado para o shortcode personalizado e estabelecer várias alternativas, como [html] [/html] e [css] [/css], para acomodar diversas linguagens de programação.
Esteja ciente de que, para realçar a sintaxe ideal, é aconselhável utilizar códigos de acesso personalizados em conjunto com o Editor de texto (no WordPress Classic) ou a caixa HTML personalizada ao trabalhar com o Editor de bloco Gutenberg do WordPress.
O objetivo é construir um shortcode sob medida que permita aos usuários inserir ou inserir código dentro dos limites delimitados das tags de abertura e fechamento do shortcode.
O objetivo é desenvolver um shortcode personalizado que permita aos usuários inserir ou inserir código nas tags de abertura e fechamento designadas do shortcode.
Empacotando
A exibição do código no WordPress é crucial para compartilhar conceitos de programação, garantindo precisão, melhorando a estética e promovendo a colaboração. Ele permite que os desenvolvedores eduquem seu público, forneçam evidências concretas, aprimorem a experiência do usuário e incentivem o envolvimento da comunidade. Apresentar trechos de código promove transparência, confiança e informações confiáveis. Códigos de acesso ou plug-ins personalizados podem garantir uma exibição de código visualmente atraente e bem estruturada. O compartilhamento de código facilita discussões, feedback e inovação. No geral, a exibição de código eficaz no WordPress é essencial para a disseminação do conhecimento, garantia de qualidade e crescimento da comunidade de desenvolvimento do WordPress.
