Como adicionar trechos de código personalizados no WordPress (método mais fácil)

Você está procurando uma maneira fácil e direta de adicionar trechos de código WordPress ao seu site?

Aprender WordPress não envolve apenas temas e ferramentas. Às vezes, é o poder sutil dos trechos de código que dá a um site um sabor único.

Aquela personalização perfeita que você procura? Isso é possível com o código certo, mas o problema é que mesmo o menor erro pode corromper o seu site.

Neste artigo, mostraremos como adicionar facilmente trechos de código personalizados no WordPress sem danificar seu site.

O que são trechos de código no WordPress?

Por baixo da interface amigável do WordPress, existe um mundo de código que impulsiona cada movimento seu.

Esses pequenos fragmentos de código, chamados de trechos de código, são ferramentas compactas, mas poderosas, que instruem o WordPress sobre funcionalidades específicas.

Aproveitar o poder desses snippets pode fazer a diferença entre um site WordPress genérico e outro adaptado exatamente às suas necessidades.

Considere-os o equivalente em WordPress aos feitiços, que, quando lançados corretamente, podem trazer excelentes resultados no frontend.

Como adicionar trechos de código personalizados no WordPress

Para adicionar trechos de código personalizados no WordPress, você pode contar com a simplicidade e funcionalidade do WPCode. Siga as etapas abaixo para começar.

1. Instale e ative o plug-in WPCode

WPCode é a melhor maneira para os usuários do WordPress adicionarem trechos de código personalizados aos seus sites sem ter que mexer no arquivo functions.php ou se preocupar em quebrar o site devido ao menor erro.

O plugin de snippet de código facilita a adição de snippets a qualquer parte do seu site WordPress, incluindo rodapé e cabeçalho. Você pode inserir qualquer código personalizado diretamente de seu painel, em vez de editar diretamente o arquivo functions.php .

Para começar, você precisará instalar e ativar o plugin WordPress em seu site. Isso adicionará o plug-in ao painel de menu esquerdo do painel do WordPress, de onde você poderá começar a adicionar códigos personalizados rapidamente.

2. Crie o código personalizado (PHP, CSS, HTML)

Se você já tem o código personalizado pronto, pule esta etapa e passe para a próxima. Para quem está criando o código personalizado do zero, aqui está um exemplo.

Para este guia, criaremos um código personalizado que evita conflitos de tema que fazem com que os valores de Radio e Checkbox não sejam exibidos corretamente em WPForms.

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

O código acima usa CSS para corrigir o problema de conflito de tema, mas como mencionado anteriormente, você também pode criar um código com PHP e HTML.

3. Adicione seu código personalizado (novo snippet)

Na barra de menu de administração do WordPress, clique na opção Code Snippets e depois no botão Add New . Como você acabou de instalar o plugin, sua lista estará vazia.

Você será direcionado para a página Adicionar trecho . Aqui, você pode adicionar seu próprio código exclusivo ou selecionar um trecho de código da biblioteca predefinida.

Clique no botão Usar snippet próximo à opção Adicionar seu código personalizado (novo snippet) para inserir seu novo código.

Agora, tudo que você precisa fazer é dar um nome ao snippet e simplesmente copiar e colar o código personalizado que você criou no espaço Code Preview no plugin WPCode.

Como criamos o código em CSS, no menu suspenso Tipo de código , selecionamos CSS Snippet . Você pode alterá-lo com base no código que criou.

Em seguida, role para baixo até a guia Inserção . Agora, selecione Inserção automática e, no menu suspenso Local , escolha a opção Cabeçalho em todo o site .

Dependendo do tipo de código que você está criando, você pode até optar por adicioná-lo como um [/] Shortcode às suas páginas/postagens.

Se você deseja atribuir tags ao seu snippet de código, role para baixo até a seção Informações básicas . Isso o ajudará a categorizar seus exemplos de código por tópico e função.

Quando você deseja mostrar vários trechos no mesmo local, o parâmetro Prioridade permite escolher a ordem em que eles serão processados.

Em seguida, o sofisticado recurso Smart Conditional Logic permite revelar ou ocultar trechos inseridos automaticamente com base em um conjunto de critérios.

Finalmente, tudo que você precisa fazer é marcar a opção Ativo e clicar no botão Salvar Snippet antes de sair do plugin!

4. Tratamento de erros em código personalizado

Um erro de digitação no plug-in específico do site ou no arquivo de tema pode tornar seu site indisponível instantaneamente para os visitantes quando você usa trechos de código.

Um erro de sintaxe ou erro interno do servidor 500 apareceria em seu site. Você precisará usar um cliente FTP para reverter suas alterações manualmente.

O recurso exclusivo do plugin WPCode é que ele identificará e desabilitará automaticamente quaisquer instâncias de erros de sintaxe no código.

Uma mensagem de erro útil será mostrada para você usar na depuração de erros. À medida que você adiciona seu código personalizado, a validação inteligente de trecho de código do WPCode encontrará erros.

Ao passar o mouse sobre o problema, um pop-up com instruções sobre como resolvê-lo aparecerá.

5. Gerenciando seus trechos de código personalizados

Se você tiver vários trechos de código, o WPCode torna incrivelmente fácil gerenciá-los com uma interface amigável e a biblioteca de trechos.

Os snippets de código podem ser salvos sem serem ativados em seu site, e você pode ativar ou desativar o snippet posteriormente sempre que desejar.

Além disso, você pode usar tags para categorizar seus trechos de código e filtrá-los com base no tipo e localização.

Você também tem a opção de exportar trechos de código específicos ou exportar todos eles em massa. Basta navegar até Code Snippets »Tools e selecionar a opção Exportar .

O plugin também permite importar snippets se você estiver mudando seu site para um novo servidor. Vá para Trechos de código »Ferramentas» Importar e carregue o arquivo de exportação.

Perguntas frequentes sobre snippets de código personalizados

Adicionar trechos de código personalizados é um tópico popular de usabilidade entre nossos leitores. Aqui estão algumas respostas rápidas para algumas das perguntas mais frequentes:

Qual é o melhor gerenciador de trechos de código para WordPress?

WPCode é a melhor escolha para gerenciar e executar trechos de código no WordPress, oferecendo organização simplificada e recursos de integração perfeita.

Como adiciono CSS ao trecho de código no WordPress?

No WPCode, basta navegar até a seção + Adicionar novo , inserir o CSS desejado e selecionar o tipo de CSS antes de salvar e ativar.

Como adiciono código personalizado ao WordPress sem plug-ins?

Você pode introduzir código personalizado diretamente no arquivo functions.php do seu tema. No entanto, uma ferramenta dedicada como WPCode garante um gerenciamento de snippets mais seguro e organizado.

Como adiciono código php personalizado ao WordPress?

Para PHP, acesse a interface do WPCode, escolha + Add New , cole seu código PHP e salve. Sempre certifique-se de que ele seja testado primeiro em um site de tema filho de teste.

A seguir, aprenda como exigir um endereço de e-mail para downloads de arquivos

Não seria ótimo se os usuários do WordPress tivessem que fornecer seus endereços de e-mail antes de baixar um arquivo? Descubra como fazer com que os visitantes do seu site WordPress compartilhem seus endereços de e-mail para que possam baixar um arquivo.

Crie seu formulário WordPress agora

Pronto para construir seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos de WordPress.