Muitas vezes, é essencial mostrar códigos em posts no WordPress, algo bastante comum em sites com tutoriais que envolvam, mesmo que de maneira indireta, alguma linguagem de programação, como o nosso. Pensando nisso, nesse artigo, mostraremos como inserir códigos em posts do WordPress sem esforço.
Se já tentou fazer isso antes alguma vez, viu que nem sempre é possível de forma direta no próprio Gutenberg, editor padrão de postagens do WordPress, seja porque seu código é interpretado literalmente pelo navegador ou porque a caixa de códigos padrão do editor não te oferece tantas funções assim.
A partir da leitura do conteúdo e das dicas a seguir, você conseguirá inserir códigos em posts de forma descomplicada, com recursos extras interessantes e vai captar a atenção do seu público, fazendo com que os códigos estejam acessíveis para ele.
O que é uma caixa de exibição de códigos em posts do WordPress?
Uma caixa de exibição de códigos em posts do WordPress é uma ferramenta importante tanto para blogueiros quanto para desenvolvedores que desejam compartilhar códigos em seus artigos. Com essa funcionalidade, é possível apresentar o código de forma clara e organizada, tornando mais fácil para os leitores compreenderem seu conteúdo.
De forma geral, é comum vê-la como uma caixa retangular que envolve o código, o deixando mais fácil de ler e entendê-lo, tendo mais destaque em contraste com o conteúdo. A fonte monoespaçada ajuda a manter a formatação original do código, enquanto as opções de personalização permitem a definição das cores do fundo e do texto para melhorar a aparência da caixa.
No WordPress, existem vários plugins que permitem a adição de caixas de exibição de códigos em seus posts. O melhor de tudo é que muitos deles são gratuitos, fáceis de instalar e usar, e são compatíveis com a maioria dos temas WordPress. Falaremos sobre eles nos tópicos a seguir.
Quem pode usar uma caixa de exibição de códigos em posts no WordPress?
Qualquer pessoa que publique conteúdo de programação, desenvolvimento web, ou que precise exibir códigos em seus posts. Isso inclui programadores, desenvolvedores web, blogueiros de tecnologia, sites de tutoriais, professores de programação e até mesmo sites de receitas que, em determinada seção, permitem copiar e colar o passo a passo rapidamente, embora esse último seja mais raro de encontrar.
Como inserir código em posts?
Abaixo mostraremos maneiras simples de inserir códigos em posts do WordPress. Todos eles tendem a ser fáceis de fazer, então escolha o que preferir.
1. Insira o bloco de código nativo do WordPress
O próprio WordPress possui uma caixa de exibição de código nativo. Ou seja, dentro do seu editor é possível inserir códigos por meio de um bloco. Ele tende a seguir o design do tema, agrada muitas pessoas e é bem eficiente, se não precisar de funções extras.
Para utilizá-lo, basta, dentro do editor de posts, digitar /code ou /codigo teclar enter.
Depois, insira seu código.
É importante ressaltar que se o design da sua caixa de exibição de códigos não te deixar satisfeito, há como alterar cor da fonte, cor do fundo e tamanho da tipografia. Não são alterações tão absurdas, mas para quem procura algo simples, é mais do que suficiente.
Abaixo você pode ver um exemplo de como a mudança nas cores de fundo e no texto podem fazer uma diferença significativa no design.
Vantagens em usar o bloco de códigos nativo do WordPress
Utilizar o bloco de códigos nativo do WordPress possui diversas vantagens. A primeira e mais essencial de todas é o fato de não precisar fazer nada. Não é necessário instalar plugins, passar por telas de configuração ou aprender uma linguagem nova de programação. Basta usar o que o próprio WordPress já disponibiliza para seus usuários.
Outra vantagem interessante é o fato do bloco nativo de códigos do WordPress se adaptar de forma automática ao tema utilizado e ainda possuir configuração de cores como mostrada mais à cima, o que garante o contraste necessário, caso precise adequar as cores e destacar os códigos de maneira efetiva.
Por último, precisamos citar como vantagem também o fato dos códigos inseridos nos posts permanecerem intactos mesmo após mudança de tema, atualizações do WordPress e ativação e desativação de plugins. Como é algo nativo da própria plataforma, se tem a confiança de que, uma vez inserido o código no campo correto, não precisará se preocupar com isso no futuro.
Desvantagens em usar o bloco de códigos nativo do WordPress
Nem só de vantagens se apresenta o bloco de códigos nativo do WordPress. Uma desvantagem muito citada por defensores de plugins para esse propósito é a falta de funções extras como “copiar”, “mostrar código em nova aba” ou até mesmo aparecer a linguagem de programação sendo utilizada no momento. Esses pontos, embora não sejam essenciais, acrescentam muito à experiência do usuário.
Outra desvantagem considerável é não haver temas para o uso de bloco de códigos. Ou seja, imagine que no seu site existam 70 blocos de exibição de códigos e você deseja mudar o design de todos eles de uma só vez. Com um plugin, seria possível alterar todos com apenas um comando. Se utilizar os blocos nativos, será necessário mudar um por um.
Para finalizar a lista de desvantagens, podemos citar a falta de uma personalização maior do design. Com o modo nativo do Guteberg, só é possível mudar fontes, cor de fundo e cor de texto. Com plugins, se pode inserir imagens, ajustar largura e altura, alternar cores de fundo, dentre inúmeras outras funções.
Dessa forma, é necessário refletir se a simplicidade do bloco é uma bênção ou um problema, já que depende, claro, das suas necessidades e de que experiência deseja oferecer a cada um dos seus usuários.
2. Utilize o plugin Syntax Highliter
Uma outra forma de mostrar código para seus visitantes no WordPress é instalando um plugin com esse propósito. Sim, sabemos que esse método pode parecer “sem sentido” para muitas pessoas, pois o WordPress já possui uma forma nativa de exibição para códigos. Porém, como já tratado anteriormente, muitas dessas ferramentas adicionais possuem recursos além da versão disponibilizada pelo WordPress.
Para resumir, podemos dizer que com plugins auxiliares seus códigos serão mais bonitos e terão mais funcionalidades. Mas isso vem com uma desvantagem: pelo fato do WordPress ter criado um exibidor de códigos nativo, os vários plugins que cumpriam essa função caíram em desuso e deixaram de ser atualizados. Os poucos que sobraram adicionaram ferramentas extras apenas em sua versão profissional. Felizmente, temos o Code Block Pro, que mesmo gratuito oferece uma possibilidade imensa de configurações.
Com a extensão, é possível mostrar o código com visual impactante e bonito, simulando o que programadores veem no VS Code, programa de edição de código para diversas linguagens de programação.
A vantagem desse plugin em particular é que ele foca no design e na simplicidade. Ele foi feito para ser bonito e para deixar os códigos destacados no seu conteúdo. Além disso, ele possui:
- Mais de 25 temas integrados.
- Mais de 140 linguagens de programação.
- Números de linha.
- Destaque da linha ao passar o mouse.
- Estilos de cabeçalho e rodapé.
- Botão copiar.
- Tabulação.
Uma vez instalado, para utilizar o plugin basta ir no editor de postagens do WordPress e digitar /codepro
Assim, insira o código que deseja e o design padrão estará selecionado.
Para configurar mais ainda o plugin, se deseja, clique no bloco de código e vá ao menu lateral direito do editor de postagens do WordPress. Assim, as seguintes configurações serão mostradas.
Line settings (configuração de linhas)
Nas configurações de linhas, podemos permitir o número, destaque, destaque ao passar o mouse e borrar o código em linhas específicas.
Themes (temas)
Em temas, podemos optar por qual design preferimos para nosso editor de códigos. Sinceramente, achamos esse tema padrão bem bonito e, dentre os outros, foi o que mais se destacou no nosso site de testes.
Language (linguagem)
Aqui definimos qual a linguagem de programação utilizada. Isso ajudará ao exibidor de código mostrá-lo da forma correta, realçando a sintaxe da linguagem.
Header type (cabeçalho)
Aqui, como o nome indica, se pode escolher o cabeçalho desejado para seu bloco de exibição de código.
Buttons (botões)
Te permite escolher o botão de cópia do conteúdo do bloco de código. Para nós, o recurso mais essencial que falta na função nativa disponibilizada pelo WordPress.
Font style (estilo da fonte)
Nessa etapa se ajusta o tamanho das fontes e da altura das linhas, bem como a fonte a ser utilizada.
Max height (altura máxima)
É possível configurar uma altura máxima. Com essa configuração, toda vez que seu código ultrapassar essa altura, uma barra de rolagem será mostrada ao lado da caixa permitindo que o usuário a desça para ver o restante do código. Esse recurso é muito útil se o bloco de código for grande e acabar atrapalhando a experiência do visitante do site.
No final de todas essas configurações, o design da caixa para adicionar códigos em posts do WordPress aparece assim:
Mudamos poucas coisas, apenas alteramos o cabeçalho e ajustamos a linguagem utilizada. Ainda assim, se quiser realizar várias alterações, como pôde ver, o plugin é bem versátil e com certeza vai te ajudar a atender suas necessidades.
Vantagems em usar o Code Block Pro
Assim como fizemos uma lista de vantagens e desvantagens de usar a versão nativa do exibidor de códigos, é justo que façamos com o plugin Code Block Pro. Logo no início, podemos perceber que a principal vantagem dele é a possibilidade de alterar e personalizar cada micro detalhe. Com o plugin, é certeza que deixará a sua caixa de códigos da forma que deseja.
Além disso, a função de temas te ajuda a realizar mudanças significativas com apenas um clique. Isso acelera bastante a customização da página como um todo.
Por último, não podemos esquecer da tão desejada função de “copiar código” presente no cabeçalho. Isso ajuda muito o usuário, só quem já seguiu tutoriais de programação ou precisou de scrips específicos sabe como isso te auxilia, principalmente em dispositivos menores.
Desvantagens em usar o Code Block Pro
Se tratando das desvantagens do plugin, a que mais se destaca é a possível falta de necessidade. Se já existe uma função nativa para WordPress, instalar um plugin para isso se torna redundante. Mesmo que se tenha mais possibilidade de edição e temas, a personalização da função nativa já é suficiente para boa parte dos usuários.
Podemos citar como desvantagem também o excesso de personalizações a serem feitas. Claro, sabemos que isso pode ser visto como vantagem, mas vemos que tantas opções assim podem fazer o usuário investir tempo não necessário nisso.
Conclusão - códigos em posts do WordPress
No artigo de hoje mostramos como inserir códigos em posts do WordPress. Fizemos isso de duas maneiras: a primeira utilizando o bloco de exibição de códigos nativo da plataforma e a segunda por meio do plugin Code Block Pro.
Nos comentários, logo abaixo, nos diga qual das duas formas de inserir código você preferiu. Nós, por exemplo, optamos quase sempre pela primeira. Facilidade na produção de conteúdo é uma fator relevante para nós. Com isso, adoraríamos saber a sua opinião a respeito.
Obrigado por ler o conteúdo até aqui. Um forte abraço!
