WordPress é um sistema de gerenciamento de conteúdo robusto que alimenta mais da metade de todos os sites da Internet. O CRM integrado facilita a criação de um site, mesmo que você nunca tenha escrito um programa de computador antes. Embora seja tão fácil exibir um bloco de texto normal em um site WordPress, o mesmo não pode ser dito para o código de computador. Um trecho de código deve ser exibido adequadamente para que os visualizadores possam analisá-lo e entendê-lo. E é aí que entram os blocos de código do WordPress.
Se você quer saber como usar blocos de código no WordPress, você veio ao lugar certo. Neste artigo, vamos orientá-lo por todo o processo para que você possa começar a compartilhar trechos de código com seus leitores. Continue lendo para saber mais.
Como usar blocos de código no WordPress
Exibir um programa de computador como um texto de página da Web normal pode ser desastroso. Muitos usuários acharão difícil visualizar e entender. Felizmente, muitos editores do WordPress têm um recurso de blocos de código que permite exibir um programa de computador em um formato de código.
Felizmente, usar blocos de código para exibir código de computador é relativamente fácil. Para começar, você precisará mudar para o editor nativo do WordPress, pois alguns plugins de texto podem não ter o recurso. Depois de fazer isso, siga estas etapas para adicionar um bloco de código em uma página do site:
- Abra a página da Web à qual deseja adicionar um bloco de código clicando no botão “Novo”.
- Digite “/code” e pressione “Enter”.
- Digite ou cole o código que deseja que seja exibido e pressione a tecla “Enter”.
- Você também pode usar a barra de ferramentas do bloco de código para personalizar a aparência do código que acabou de escrever. Por exemplo, você pode usar o botão “B” para deixar uma linha em negrito ou o botão “i” para colocá-la em itálico.
- Quando terminar de criar sua página da Web, clique no botão “Visualizar” para ver como o bloco de código ficará em uma versão ativa.
- Se estiver satisfeito com os resultados finais, clique no botão “Atualizar” para que outras pessoas também vejam o bloco de código.
Como alterar a tipografia do seu bloco de código
A tipografia fala muito e pode fazer ou quebrar a estética não apenas do seu bloco de código, mas também de toda a página da web. Para alterar a tipografia do seu bloco de código, siga estas etapas:
- Destaque o bloco de código cuja tipografia você deseja alterar.
- Clique no ícone “Configurações” no canto superior direito da tela.
- Na seção “Tipografia”, especifique sua tipografia preferida.
- Clique no botão “Atualizar” para salvar as alterações.
Você pode personalizar ainda mais a estética do bloco alterando a cor, o plano de fundo, o espaçamento entre letras e o espaçamento entre linhas.
Por exemplo, se você tem um site com tema escuro, também pode querer que seu bloco de código tenha um plano de fundo diferente.
Como excluir um bloco de código no WordPress
Os blocos de código não são permanentes e, assim como qualquer outro elemento de uma página da Web do WordPress, você pode excluí-los. Veja como proceder no processo:
- Abra a página da Web ou a postagem que contém o bloco de código que você deseja excluir.
- Clique no bloco de código que deseja excluir para destacá-lo.
- No widget que aparece logo acima do bloco de código, clique nos três pontos.
- Nas opções, selecione “Remover código”.
A ação acima deve excluir todo o bloco de código da página da web. Alternativamente, você pode simplesmente selecionar o bloco e pressionar a tecla “Delete”. Você também pode pressionar as teclas “Ctrl” + “Shift” + “Z” ao mesmo tempo e isso deve obter os mesmos resultados.
Como editar um bloco de código já publicado
De vez em quando, você está fadado a cometer erros. Você também pode se deparar com uma maneira melhor de executar a ideia por meio do código. O WordPress permite que você edite blocos de código já existentes seguindo as instruções abaixo:
- Abra a página que contém o bloco de código que você deseja editar.
- Clique em “Editar”.
- Clique no bloco de código para ativar a edição de código.
- Depois de fazer as alterações, clique no botão “Atualizar”.
Como adicionar um bloco de código ao seu site WordPress usando um plug-in
Se você costuma adicionar snippets de código ao seu site, talvez seja melhor obter um plug-in mais robusto para ajudá-lo. Um poderoso e excelente bloco de código popular é o Sintaxe Realçador Evoluído plugar.
Este plugin tem uma vantagem sobre o Editor nativo do WordPress porque:
- Ele destaca o número de linhas em um trecho de código
- Suporta várias linguagens de programação
- Ele permite que seus visualizadores copiem e colem o código exibido
Veja como usar o plug-in para gerenciar melhor os snippets de código em seu site:
- Instale e ative o Sintaxe Realçador Evoluído plugar.
- Abra a página ou poste se quiser adicionar um bloco de código.
- Ative a edição e clique no botão de adição.
- Pesquise por “SyntaxHighLighter Evolved” e abra o primeiro resultado que aparecer.
- Cole ou escreva o código no bloco de código disponível.
- Clique no ícone de configurações no canto superior direito da tela e navegue até a guia “Bloquear”.
- Especifique como deseja que sua numeração apareça e quais linhas de código deseja destacar.
- Você também pode ativar “Tornar URLs clicáveis” se quiser tornar seu código clicável.
Para alterar a cor e o esquema de formatação do seu bloco de código, siga estas etapas:
- Vá para “Configurações” e navegue até a seção “SyntaxHighlighter”.
- Mude o tema do seu bloco.
- Clique em “Salvar” e “Visualizar” para visualizar como as alterações ficarão no modo ao vivo.
Perguntas frequentes adicionais
Como você faz um código bloquear um link clicável?
Para fazer um código bloquear um link usando o editor do WordPress, siga estas etapas:
1. Selecione a linha de código que deseja que funcione como um link.
2. No widget pop-up, selecione o ícone de link. Como alternativa, você pode pressionar as teclas “Ctrl” + “K” no teclado.
3. Insira a URL para a qual deseja vincular o código e pressione a tecla “Enter”.
Posso destacar o código usando o editor de bloco de código fornecido pelo editor do WordPress?
Não, o bloco de código fornecido pelo editor nativo do WordPress não permite que os usuários copiem e colem o código. Para fazer isso, você precisará da ajuda de um plug-in avançado de edição de blocos de código, como o plug-in “SyntaxHighligher Evolved”.
O Elementor possui um recurso de blocos de código?
Elementor é um popular plug-in de arrastar e soltar usado para criar sites WordPress. Infelizmente, se você estiver usando o plug-in para criar sites, não encontrará um bloco que permita formatar programas de computador em seu site. Portanto, você deve mudar para o editor WordPress convencional para concluir a tarefa.
Coloque seu site em funcionamento
Se você administra um blog de programação ou simplesmente gosta de compartilhar trechos de código em seu site, saber como usar blocos de código no WordPress é super importante. Os blocos de código proporcionarão aos seus leitores um tempo fácil e, em geral, aumentarão a experiência do usuário do seu site. E como você pode ver, inserir blocos de código é um processo relativamente fácil, especialmente com o editor nativo do WordPress.
Você já tentou usar os blocos de código que o WordPress fornece? E o plug-in SyntaxHighlighter Evolved? Por favor, compartilhe conosco sua experiência na seção de comentários abaixo.