Blog

O senhor quer aprender a colar trechos da Web no WordPress?

Publicamos muitos Tutoriais do WordPress que pedem aos usuários que adicionem trechos de código ao WordPress.

Copiar e colar código nos arquivos de tema do WordPress pode parecer fácil para usuários experientes, mas pode ser intimidador para iniciantes.

Neste artigo, mostraremos ao senhor como copiar e colar trechos de código da Web no WordPress sem danificar seu site.

Por que adicionar snippets de código ao seu site WordPress?

O WordPress é o melhor construtor de sites do mundo devido à flexibilidade que oferece. É muito fácil adicionar novos recursos e funcionalidades ao seu site e pode ajudar a criar praticamente qualquer tipo de site.

Compartilhamos todos os tipos de dicas e truques que o senhor pode usar para melhorar seu site. Algumas dessas dicas solicitarão que o senhor adicione código ao WordPress.

Embora seja opcional adicionar trechos de código personalizados ao seu site e seja possível encontrar plugins para fazer a mesma tarefa, às vezes um simples trecho de código é mais eficiente.

Muitas vezes, adicionar trechos de código pode ser uma maneira fácil de corrigir muitos erros comuns do WordPress, melhore seu Segurança do WordPresse adicionar novos recursos ao seu site.

Dito isso, vamos dar uma olhada em como adicionar trechos de código ao seu site WordPress com segurança.

Quais são as melhores maneiras de adicionar snippets de código no WordPress?

É importante mencionar que, antes de começar a adicionar snippets de código ao seu site WordPress, você deve instalar e usar um plugin de backup do WordPress.

Isso mantém seu site WordPress seguro, e o senhor sempre pode restaurá-lo a partir de um backup, caso algo dê errado.

Ao adicionar snippets ao WordPress, o senhor pode encontrar instruções para adicioná-los aos arquivos de modelo de tema do WordPress, como index.php, single.php, e muito mais.

Esses snippets são úteis apenas para esses arquivos de tema específicos, portanto, o senhor terá de adicioná-los diretamente ou Criar um tema filho do WordPress.

No entanto, a maioria dos snippets de código será adicionada à seção functions.php . Alguns tutoriais recomendam adicioná-lo diretamente ao arquivo, mas há alternativas muito melhores que permitem que o senhor proteja suas alterações no futuro.

Dessa forma, se o senhor mudar o tema, sua funcionalidade personalizada não será removida.

Há diferentes maneiras de editar os arquivos do WordPress, dependendo do método que o senhor escolher para adicionar trechos de código personalizados ao seu blog do WordPress ou site.

Dito isso, vamos dar uma olhada em algumas das maneiras mais fáceis para iniciantes de adicionar trechos de código personalizados no WordPress.

Método 1: Adicionar código personalizado com o plug-in WPCode (fácil)

Usar um plugin de trechos de código é a maneira mais segura e amigável para iniciantes de adicionar código ao WordPress.

O WPCode permite adicionar e gerenciar facilmente trechos de código personalizados em seu site, sem precisar editar os arquivos do tema.

Ele vem com validação inteligente de snippet de código para ajudar o senhor a evitar erros comuns de código. Isso evita que o senhor danifique seu site ao adicionar trechos de código.

O WPCode também tem uma biblioteca de códigos integrada que facilita a localização de todos os códigos mais comuns. trechos de código mais populares do WordPress. O senhor pode adicionar esses trechos de código escritos por especialistas com apenas alguns cliques.

A melhor parte é que ele permite que o senhor gerencie todos os trechos de código em uma tela central e pode até mesmo organizá-los usando tags.

Observação: O método WPCode é útil para trechos que precisam ser adicionados ao functions.php . Se o senhor for solicitado a adicionar um trecho de código em outros arquivos de tema, esse método não funcionará.

Como editar e adicionar código ao WordPress com o WPCode

Se for usar o plugin WPCode para adicionar código ao WordPress, o senhor adicionará código diretamente no painel de administração do WordPress.

Primeiro, o senhor precisa instalar e ativar o plug-in gratuito WPCode plugin. Para obter mais detalhes, consulte nosso guia para iniciantes sobre Como instalar um plug-in do WordPress.

Após a ativação, basta acessar Code Snippets ” + Add Snippet em seu painel de administração do WordPress. Em seguida, clique no ícone Add New (Adicionar novo) botão.

Isso o levará a uma tela em que poderá escolher um snippet da biblioteca predefinida ou adicionar seu código personalizado.

Para adicionar código personalizado, clique no botão Use snippet na opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)).

Na próxima tela, comece dando um nome ao snippet para ajudá-lo a se lembrar dele. Em seguida, cole seu código na caixa. Certifique-se de escolher o tipo de código correto no menu suspenso à direita.

Em seguida, role a tela para baixo até a seção “Inserção”. Aqui, o senhor pode optar por usar o snippet de código como um shortcode que o senhor pode copiar e colar manualmente em qualquer lugar do seu site.

Ou o senhor pode selecionar o método “Auto Insert” para escolher um local (função do WordPress) onde o trecho de código será inserido automaticamente.

O senhor pode escolher entre locais como Run Everywhere, Frontend Only, Admin Only, Site Wide Header, After Post, Between Posts, Before Paragraph e outros.

A melhor parte do WPCode é que, além das várias opções de inserção automática, ele também vem com opções de lógica condicional fáceis de usar para iniciantes. Isso permite que o senhor selecione quando o código deve ser carregado.

Quando terminar de adicionar o código, alterne a chave de “Inativo” para “Ativo” no canto superior direito.

Em seguida, clique no botão Salvar snippet botão.

Quando o snippet estiver ativo, ele será adicionado automaticamente ou exibido como shortcode, dependendo do método de inserção escolhido pelo senhor.

Para obter instruções detalhadas, consulte nosso guia sobre Como adicionar facilmente snippets de código personalizados no WordPress.

Como adicionar código ao no cabeçalho e no rodapé do WordPress

Às vezes, talvez seja necessário apenas adicionar código ao header.php ou footer.php files. O plug-in WPCode também pode ajudar o senhor a fazer isso facilmente.

Isso é útil quando o senhor precisa adicionar um código de rastreamento para Google Analytics, Google AdSense, Pixel do Facebook, TikTok Pixele muito mais para seu site.

Além disso, ele permite que você gerencie todos os códigos de cabeçalho e rodapé em um só lugar, evita erros manuais e permite que você atualize ou alterar seu tema sem preocupações.

Observação: Esse método funciona melhor para scripts de rastreamento, CSS personalizado e Código JavaScript.

Ir para Trechos de código ” Cabeçalho e rodapé e, em seguida, insira seu snippet de código na seção de cabeçalho, corpo ou rodapé do seu site.

Certifique-se de clicar no botão “Save Changes” (Salvar alterações) e seus snippets de código estarão ativos em seu site.

Para obter mais detalhes, consulte nosso guia sobre Como adicionar código de cabeçalho e rodapé no WordPress.

Método 2: Adicionar código personalizado em um plug-in WordPress específico do site

Outra opção flexível é usar um plugin do WordPress específico do site. Esse é um plugin personalizado que o senhor pode criar para seu próprio site e usar para salvar todo o seu código personalizado.

A vantagem desse método é que seu código não depende do tema e permanecerá ativo mesmo quando o senhor mudar de tema. Ele também não é afetado por qualquer Atualizações do WordPress em seu site.

Observação: Esse método só é aplicável a trechos de código que precisam ser adicionados ao functions.php .

Se estiver usando um plugin específico do site, o senhor pode usar o editor de plugin integrado do WordPress para adicionar seu código personalizado.

Primeiro, o senhor precisará ir para Plugins ” Plugin Editor e, em seguida, selecione seu plug-in no menu suspenso denominado “Select plugin to edit:”.

O editor carregará o plug-in específico do seu site. Em seguida, o senhor pode simplesmente adicionar o código à página.

Quando terminar, certifique-se de clicar no botão “Update File” (Atualizar arquivo) para salvar as alterações.

Se algo estiver faltando em seu código ou puder danificar seu site, o editor de plug-ins desfará automaticamente suas alterações.

Outra maneira de adicionar código personalizado a um plugin específico do site é usar o FTP. Para obter mais detalhes, consulte nosso guia para iniciantes sobre Como usar o FTP para fazer upload de arquivos no WordPress.

Basta abrir seu site usando seu aplicativo preferido cliente FTPe, em seguida, clique com o botão direito do mouse no arquivo do plug-in e selecione a opção “View/Edit” (Exibir/Editar).

Isso abrirá o arquivo para que o senhor possa adicionar seus trechos de código. Quando o senhor salvar e carregar o arquivo novamente, as alterações serão exibidas automaticamente.

Para obter mais detalhes, consulte nosso guia sobre como criar um plugin específico para seu site.

Método 3: Como adicionar código personalizado ao Functions.php ou a outros modelos de tema

Por fim, não há problema em adicionar trechos de código diretamente à seção functions.php do tema. No entanto, recomendamos que o senhor use as outras opções acima, pois há algumas desvantagens.

Primeiro, se o senhor atualizar seu arquivo tema do WordPresse todas as suas alterações desaparecerão.

Em seguida, o código que o senhor adicionou só funcionará se estiver usando esse tema específico.

Dito isso, vamos dar uma olhada em como copiar e colar corretamente os trechos de código e evitar a quebra do seu site.

Se o senhor estiver adicionando trechos de código diretamente ao functions.php ou em qualquer outro modelo de página, o senhor pode adicionar o código navegando até Appearance ” Theme Editor em seu painel de administração do WordPress.

Em seguida, o senhor pode selecionar o arquivo na coluna da direita e ele será aberto no editor.

O tutorial que o senhor está seguindo dirá onde pode adicionar o trecho de código, mas, se não for o caso, será necessário adicionar o código na parte inferior do arquivo, abaixo de todo o código presente.

Outra alternativa é usar o FTP do seu hospedagem WordPress para adicionar código personalizado aos arquivos do seu tema.

Basta conectar seu cliente FTP ao site e, em seguida, acessar wp-content ” themes ” your-theme-folder e clique com o botão direito do mouse no arquivo que precisa ser editado.

Em seguida, clique na opção “View/Edit” (Exibir/Editar) para abrir o arquivo no editor de texto e adicionar o trecho de código.

Solução de problemas de erros de PHP ao adicionar código personalizado

Existem alguns erros comuns que os iniciantes cometem ao adicionar trechos de código personalizado aos seus sites WordPress. Felizmente, a maioria desses erros pode ser evitada e corrigida facilmente.

Vamos dar uma olhada nesses erros e nas melhores maneiras de corrigi-los.

1. Uso incorreto das tags de início e fim do PHP

O WordPress é escrito principalmente em PHP que tem uma sintaxe específica que informa ao seu servidor que o código a seguir precisa ser processado pelo PHP. Veja como é um trecho típico de código PHP:

// PHP Begin Tag
<?php
  
// Rest of the code goes here
  
// PHP End Tag
?>

Todo o seu código PHP precisa estar dentro da tag <?php e ?> tags.

A tag PHP end é muito importante em arquivos que alternam entre PHP e HTML. Isso inclui a maioria dos arquivos de tema do WordPress que usam tags PHP juntamente com HTML.

O senhor precisa se certificar de que, se estiver colando seu código em um local em que a tag de início do PHP não esteja fechada, precisará adicionar seu código sem a tag de início do PHP.

<?php
// Some pre-existing code
 
// your custom code
 
?>

Se o senhor estiver colando o código personalizado fora ou depois da tag de fim do PHP, precisará adicionar também a tag de início do PHP.

<?php
// Some pre-existing code
?> 
 
// Your custom code snippet
<?php 
 
?>

Quase 90% de todos os erros são causados pelo posicionamento incorreto das tags de início ou fim do PHP. Observar seu código o ajudará a entender se o senhor precisa ou não adicionar as tags de início ou fim do PHP em seu snippet de código personalizado.

No entanto, muitos arquivos de tema do WordPress, como functions.php podem não ter uma tag de fim de PHP. Isso significa que o senhor pode adicionar seu código na parte inferior do arquivo sem as tags de início ou fim.

Aqui está um exemplo de como isso se parece.

<?php
// Lots of code in your theme's functions.php file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

Lembre-se de que alguns tutoriais podem presumir que o senhor já sabe como usar as tags de início e fim do PHP. Portanto, eles podem simplesmente mostrar ao senhor um trecho de código sem essas tags no lugar.

function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

Às vezes, quando os trechos de código são fornecidos, eles podem ser adicionados a vários locais, de modo que as tags de início e fim do PHP não serão incluídas.

Ao adicionar esse trecho de código nos arquivos do tema, o senhor precisa se certificar de que ele esteja dentro das tags PHP.

2. Erros de aninhamento incorretos

O PHP tem uma sintaxe específica para funções, lógica condicional e loops. Essa sintaxe depende de colchetes que indicam quando uma função começa e quando termina.

Por exemplo, aqui está uma função PHP simples:

<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
?>

Agora, se o senhor quiser adicionar um trecho de código personalizado que não tenha nada a ver com essa função, precisará colocá-lo fora dessa função, assim:

// Pre-existing code in your theme file
<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
?>

Se o senhor não colocar os colchetes curvos iniciais ou finais, isso quebrará o código e aparecerá uma página de erro.

Entendendo os erros de PHP no WordPress

Os erros causados pela adição de código personalizado ao WordPress geralmente resultam em uma mensagem de erro detalhada. A maioria deles é erros de sintaxe, erros de análise ou erros fatais devido a caracteres inesperados.

A boa notícia é que esses erros informarão ao senhor qual linha do código causou o erro.

Em seguida, o senhor pode ir até a linha exata para revisar o código e descobrir o que perdeu.

Para isso, recomendamos o uso de um adequado para edição de código porque eles têm números de linha e realce de sintaxe que podem ajudá-lo a corrigir o problema facilmente.

Se o senhor estiver usando o WPCode ele também vem com um relatório de erros preciso que mostrará ao senhor a linha exata em que ocorreu um erro.

Quando o WPCode encontra um erro que pode impedi-lo de acessar seu área de administração do siteele desativará automaticamente os snippets para que o senhor possa corrigir o problema com segurança.

O que fazer quando seu site WordPress está inacessível?

Antes de tudo, respire fundo e não entre em pânico. Todos os arquivos do seu site ainda estão lá e o senhor pode acessá-los.

Basta conectar-se ao seu site usando um cliente FTP ou o aplicativo gerenciador de arquivos no cPanel em seu hospedagem WordPress conta.

Para obter mais detalhes, consulte nosso guia para iniciantes sobre Como usar o FTP para fazer upload de arquivos para o WordPress.

Em seguida, localize o arquivo em que o senhor adicionou o código que causou o erro e abra-o para editá-lo.

Em seguida, o senhor pode tentar corrigir os problemas com o snippet de código. Se não for possível corrigir esses problemas, basta remover o trecho de código adicionado e salvar as alterações.

Agora, seu site deve voltar ao normal novamente. Se ele ainda estiver apresentando algum erro, baixe uma nova cópia do tema do WordPress e extraia o arquivo zip para o computador.

Depois disso, localize o arquivo em que o senhor fez as alterações anteriormente e carregue-o no servidor, substituindo o arquivo antigo.

Para obter mais maneiras de resolver esses problemas, consulte nosso guia sobre o erros mais comuns do WordPress e como corrigi-los. Se isso não ajudar, siga nosso Guia de solução de problemas do WordPress para realizar um diagnóstico passo a passo.

Esperamos que este artigo tenha ajudado o senhor a aprender como colar trechos de código da Web no WordPress. Talvez o senhor também queira consultar nosso guia sobre como criar um endereço de e-mail comercial gratuito e nossas escolhas do melhor software de bate-papo ao vivo para pequenas empresas.

Se o senhor gostou deste artigo, por favor, assine o nosso Canal do YouTube para tutoriais em vídeo sobre o WordPress. O senhor também pode nos encontrar em Twitter e Facebook.