Resumo de IA
Você gostaria de adicionar snippets de JavaScript ou PHP personalizados ao seu site? Este tutorial lhe dará várias opções sobre como adicionar esses snippets ao seu site com instruções passo a passo para cada maneira opcional que você escolher para adicionar seu snippet. Adicionar snippets de código personalizados ao seu site com PHP ou JavaScript pode estender a funcionalidade do seu site para suas necessidades específicas. Seja para estender a funcionalidade do seu tema WordPress ou estender a funcionalidade de qualquer plugin.
Com este guia útil, você poderá escolher facilmente qual maneira deseja adicionar os snippets ao seu site. Depois de selecionar seu método de implementação, você pode começar a explorar a documentação do desenvolvedor para escolher quais snippets você gostaria de começar a adicionar ao seu site!
Para dar uma olhada na variedade de snippets disponíveis, explore nossa documentação do desenvolvedor.
Consulte nosso tutorial em vídeo para uma visualização mais prática de como adicionar PHP ou Javascript personalizado ao seu site.
Opções de Implementação
Existem várias abordagens disponíveis para adicionar PHP ou Javascript para personalizar suas necessidades específicas, não apenas para WPForms, mas para qualquer código personalizado que você deseje adicionar.
Usando o plugin WPCode (recomendado)
Usar o plugin WPCode é super rápido e fácil para adicionar snippets ao seu site.
Uma das muitas razões pelas quais recomendamos fortemente o uso deste plugin para adicionar snippets personalizados ao seu site é que ele possui uma verificação integrada antes de salvar seu snippet. Se um ponto e vírgula for esquecido ou um colchete extra for adicionado, o snippet não será salvo. Isso evita quaisquer problemas que você possa experimentar, como erros de JavaScript ou até mesmo erros fatais de PHP, de acontecerem em seu site devido a um snippet copiado e colado incorretamente. E sim, mesmo com a versão gratuita, você receberá essa auditoria extra antes que seu snippet seja ativado.
Observação: Para saber mais sobre este plugin, consulte o site para obter mais informações, incluindo documentação dedicada.
Após a instalação do plugin, navegue até o menu Code Snippets no menu lateral do seu painel do WordPress e selecione + Add Snippet.
Em seguida, basta clicar em Add Your Custom Code (New Snippet) e, em seguida, clicar no botão azul Use Snippet para criar um novo snippet.
Quando a tela do seu novo snippet aparecer, dê um nome que faça sentido para você, para que você e os administradores do seu site entendam seu propósito. No menu suspenso Code Type, selecione PHP.
Observação: Todos os snippets do WPForms encontrados em nossa documentação para desenvolvedores seriam adicionados como um snippet PHP, mesmo os snippets que usam JavaScript, com exceção de snippets CSS específicos. Isso é para garantir que, se não houver um formulário WPForms na página, o snippet não carregaria o script. Isso ajuda a reduzir a necessidade de carregar scripts que não se aplicam a todas as páginas.
Para fins deste tutorial, adicionaremos o seguinte snippet.
Na seção Code Preview, adicione seu snippet logo abaixo do <?php. Aqui está um exemplo para usar para fins desta documentação.
/**
* Trigger submit from checkbox click
*
* @link https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/
*/
function wpf_dev_automatic_submit_form() {
?>
<script type="text/javascript">
jQuery(function($){
var event = jQuery.Event("submit");
jQuery("input:checkbox").change(
function()
{
// when any checkbox is checked, trigger this function
if( jQuery(this).is(":checked") )
{
// only run this function for the form ID 3046
jQuery("#wpforms-form-3046").submit();
}
}
);
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_submit_form', 30);
Em seguida, você verá a seção Insertion. Apenas para este snippet em particular, selecionaremos Auto-Insert para o Insert Method e Frontend Only para o Location.
Depois de adicionar seu snippet, clique em Save Snippet. Isso salvará o snippet, mas não o ativará automaticamente. Após salvar inicialmente, você notará que o status do snippet é definido como Inactive por padrão. Simplesmente alterne o interruptor de Inactive para Active e clique em Update para definir o snippet como Active.
Criando um Plugin Específico do Site
Observação: O uso deste método em particular é recomendado apenas se você se sentir confortável editando arquivos PHP e fazendo upload diretamente para o seu servidor ou através do seu programa FTP favorito.
Se você for um usuário mais avançado e quiser manter todos os seus scripts personalizados em um único arquivo no seu site, você pode facilmente criar seu próprio plugin exclusivo para armazenar esses snippets.
Se você quiser mais informações sobre como criar um plugin específico do site, consulte este tutorial.
Para criar um plugin, você precisará seguir estas etapas.
- 1. Usando seu editor de texto favorito, crie um novo arquivo. Em seguida, adicione as seguintes linhas no topo do arquivo:
<?php
/*
Plugin Name: WPForms Custom Code Snippets
Plugin URI: https://wpforms.com/
Description: Plugin para adicionar snippets de código personalizados
Author: WPForms Team
Version: 1.0
Author URI: https://wpforms.com/
*/ - 2. Salve o arquivo como wpforms-custom-snippets.php.
- 3. Compacte ou zipe o arquivo.
- 4. Faça login no seu administrador do WordPress e, em Plugins, clique em Adicionar Novo. Siga as instruções na tela para carregar e ativar o arquivo .zip que você acabou de criar.
- 5. Depois de ativar o plugin, você pode ver o arquivo em Plugins » Editor.
Observação: O WordPress nunca recomenda fazer alterações em tempo real em nenhum dos seus arquivos, incluindo arquivos de plugin e tema.
Usando functions.php dentro de um tema filho
Observação: O uso deste método em particular é recomendado apenas se você se sentir confortável editando arquivos PHP e fazendo upload diretamente para o seu servidor ou através do seu programa FTP favorito.
Criar um tema filho é (novamente) mais para usuários avançados. Esta é uma solução alternativa para os arquivos do seu tema, sua folha de estilos incluída com o tema, mas também para quaisquer funções personalizadas que você possa querer usar, como as descritas nos tutoriais e snippets para desenvolvedores do WPForms.
Nossos amigos do WPBeginner prepararam um artigo excelente sobre como criar um tema filho. Este tutorial inclui até um vídeo para você acompanhar.
Observação: Nós nunca recomendamos editar diretamente nenhum dos arquivos do seu tema. Se o autor do tema lançasse uma atualização para o tema, todas as edições que você teria feito seriam perdidas. Usar um tema filho reduzirá essa chance de manter seu tema atualizado sem perder nenhuma personalização que você possa fazer ao longo do caminho.
Para este exemplo, vamos criar um tema filho a partir do tema do WordPress Twenty Twenty. Para fazer isso, siga as etapas abaixo.
- 1. Crie uma nova pasta na sua área de trabalho chamada twentytwenty-child
- 2. Crie um documento de texto com estas linhas:
<?php
/*
Theme Name: Twenty Twenty Child
Theme URI: http://yoursite.com/twenty-twenty-child/
Description: Twenty Twenty Child Theme
Author: Your name
Author URI: http://yoursite.com
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentychild
*/ - 3. Salve este arquivo dentro da sua pasta twentytwenty-child e nomeie-o style.css.
- 4. Dentro desta mesma pasta, crie um novo documento e nomeie-o functions.php. A única coisa que este arquivo terá além de ser a tag PHP aberta é:
<?php.
- 5. Compacte ou zipe a pasta twentytwenty-child.
- 6. Faça login no seu admin do WordPress e em Aparência » Temas, clique em Adicionar Novo para enviar o arquivo twentytwenty-child.zip que você acabou de criar. Quando solicitado, ative este tema também.
- 7. Agora você verá no seu admin do WordPress que ativou o tema Twenty Twenty Child.
Quando essas etapas forem concluídas, você verá que tem um tema filho funcional do Twenty Twenty e um arquivo functions.php em branco para adicionar trechos, bem como uma folha de estilos em branco onde você pode adicionar seu próprio CSS personalizado.
Seu tema ainda funcionará como antes, carregando todos os arquivos e estilos necessários primeiro. No entanto, quaisquer trechos personalizados que você usar da documentação do desenvolvedor do WPForms seriam adicionados ao functions.php do tema filho e personalizariam os formulários com base nos trechos que você adicionar.
E essas são apenas algumas maneiras diferentes de adicionar facilmente PHP ou JavaScript personalizado ao seu site.
Notas
Ao adicionar qualquer tipo de código personalizado ao seu site, é importante preservar seu código de eventos inesperados. Portanto, não importa qual abordagem você escolha, é uma boa ideia sempre fazer backup do seu site. Dessa forma, você terá acesso a versões mais antigas dos arquivos de código, se necessário.
FAQ
P: Como isso me ajuda a adicionar código personalizado ao WPForms?
R: Este tutorial não é específico para trechos de código do WPForms, mas para qualquer trecho de código. Simplesmente encontre qual opção acima é mais fácil para você adicionar quaisquer trechos de código, incluindo os trechos de código do WPForms mencionados na seção Tutoriais e Trechos.