20240531 inserir codigos em posts wordpress

Como Inserir Códigos de Programação em Postagens WordPress para Fácil Cópia e Formatação

by

Se você é um entusiasta de programação ou está compartilhando tutoriais técnicos em seu blog WordPress, inserir códigos de programação pode ser uma parte essencial do seu conteúdo. No entanto, garantir que esses códigos sejam legíveis e facilmente copiáveis pelos visitantes pode ser um desafio. Neste guia abrangente, vamos explorar as melhores práticas para inserir códigos de programação em suas postagens do WordPress, garantindo uma formatação clara e uma experiência do usuário otimizada. Desde a utilização de plugins de syntax highlighting até a implementação de botões de cópia com um clique, você aprenderá tudo o que precisa para tornar a inserção de códigos em seu blog uma tarefa simples e eficiente.

1. Utilizando Plugins de Syntax Highlighting

Plugins de Syntax Highlighting ajudam a formatar o código de forma que ele fique legível e possa ser copiado facilmente pelos visitantes. Aqui estão dois dos plugins mais populares:

a. Crayon Syntax Highlighter

  1. Instalação e Ativação
    • No painel administrativo do WordPress, vá para Plugins > Adicionar Novo.
    • Pesquise por Crayon Syntax Highlighter.
    • Clique em Instalar Agora e depois em Ativar.
  2. Configuração
    • Após ativar o plugin, vá para Configurações > Crayon para ajustar as opções de formatação e cores conforme suas preferências.
  3. Inserção de Código
    • No editor de postagens ou páginas, clique no ícone do Crayon Syntax Highlighter.
    • Insira o seu código no campo fornecido e selecione a linguagem de programação.

b. SyntaxHighlighter Evolved

  1. Instalação e Ativação
    • No painel administrativo do WordPress, vá para Plugins > Adicionar Novo.
    • Pesquise por SyntaxHighlighter Evolved.
    • Clique em Instalar Agora e depois em Ativar.
  2. Configuração
    • Vá para Configurações > SyntaxHighlighter para ajustar as opções de formatação.
  3. Inserção de Código
    • No editor de postagens, você pode usar shortcodes para adicionar código. Por exemplo:
    html

    [code language="php"]
    <?php
    echo "Hello, World!";
    ?>
    [/code]

2. Utilizando Blocos de Código no Editor Gutenberg

O editor Gutenberg do WordPress possui blocos específicos para inserir código.

  1. Adicionando um Bloco de Código
    • No editor de postagens ou páginas, clique no ícone + para adicionar um novo bloco.
    • Pesquise por Código e selecione o bloco de código.
    • Insira seu código diretamente no bloco.
  2. Estilizando o Código
    • Para melhorar a aparência do código, você pode adicionar estilos personalizados via CSS. Adicione o seguinte código ao seu arquivo style.css do tema ou via o personalizador de CSS:
    css

    pre code {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    }

3. Utilizando Plugins de Copiar Código

Para facilitar ainda mais a cópia do código pelos visitantes, você pode adicionar plugins que permitem copiar o código com um clique.

a. WP Copy Code

  1. Instalação e Ativação
    • No painel administrativo do WordPress, vá para Plugins > Adicionar Novo.
    • Pesquise por WP Copy Code.
    • Clique em Instalar Agora e depois em Ativar.
  2. Configuração
    • Após ativar, o plugin adicionará automaticamente um botão de copiar em todos os blocos de código.

b. Code Snippets

  1. Instalação e Ativação
    • No painel administrativo do WordPress, vá para Plugins > Adicionar Novo.
    • Pesquise por Code Snippets.
    • Clique em Instalar Agora e depois em Ativar.
  2. Inserção de Código
    • Vá para Snippets > Add New e adicione seu código.
    • Use o shortcode [snippet id="1"] para inserir o código nas postagens ou páginas, substituindo “1” pelo ID do snippet.

Conclusão

Inserir códigos de programação em uma postagem do WordPress de forma que os visitantes possam copiar facilmente é simples com as ferramentas e plugins corretos. Utilizando plugins de syntax highlighting como Crayon Syntax Highlighter ou SyntaxHighlighter Evolved, ou aproveitando os blocos de código do editor Gutenberg, você pode garantir que seu código seja legível e facilmente copiável. Adicionar funcionalidades de copiar com um clique através de plugins como WP Copy Code também pode melhorar significativamente a experiência do usuário.

Leave a Comment