Como Adicionar PHP ou JavaScript Personalizado para WPForms

Gostaria de adicionar trechos personalizados de JavaScript ou PHP ao seu site? Este tutorial oferece várias opções sobre como adicionar esses trechos ao seu site, com instruções passo a passo para cada maneira opcional que você escolher. Adicionar trechos 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 a maneira como deseja adicionar os trechos 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 trechos você gostaria de começar a adicionar ao seu site!

Para dar uma olhada na variedade de trechos disponíveis, explore nossa documentação do desenvolvedor.

Por favor, veja 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 o 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 trechos ao seu site.

Uma das muitas razões pelas quais recomendamos fortemente o uso deste plugin para adicionar trechos personalizados ao seu site é que ele possui uma verificação integrada antes de salvar seu trecho. Se um ponto e vírgula for omitido ou um colchete extra for adicionado, o trecho não será salvo. Isso evita que quaisquer problemas que você possa experimentar, como erros de JavaScript ou até mesmo erros fatais de PHP, ocorram em seu site devido a um trecho copiado e colado incorretamente. E sim, mesmo com a versão gratuita, você receberá essa auditoria extra antes que seu trecho seja ativado.

Após a instalação do plugin, navegue até o menu Code Snippets no menu lateral esquerdo do seu painel 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 trecho.

Quando a tela do seu novo trecho aparecer, dê um nome ao trecho 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.

Para o propósito deste tutorial, adicionaremos o seguinte trecho.

Na seção Visualização de Código, adicione seu trecho logo abaixo do <?php. Aqui está um exemplo para usar para o propósito 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 Inserção. Para este trecho em particular, selecionaremos Inserção Automática para o Método de Inserção e Somente Frontend para a Localização.

Depois de adicionar seu trecho, clique em Salvar Trecho. Isso salvará o trecho, mas não o ativará automaticamente. Assim que você salvar inicialmente, notará que o status do trecho é definido como Inativo por padrão. Simplesmente alterne o interruptor de Inativo para Ativo e clique em Atualizar para definir o trecho como Ativo.

Criando um Plugin Específico do Site

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 trechos.

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 for adding custom code snippets
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 painel 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ê poderá ver o arquivo em Plugins » Editor.

Usando functions.php dentro de um tema filho

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 em tutoriais e snippets para desenvolvedores do WPForms.

Nossos amigos da WPBeginner prepararam um artigo excelente sobre como criar um tema filho. Este tutorial inclui até um vídeo para você acompanhar.

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
/*
Nome do Tema: Twenty Twenty Child
URI do Tema: http://yoursite.com/twenty-twenty-child/
Descrição: Tema Filho do Twenty Twenty
Autor: Seu nome
URI do Autor: http://yoursite.com
Template: twentytwenty
Versão: 1.0.0
Licença: GNU General Public License v2 ou posterior
URI da Licença: http://www.gnu.org/licenses/gpl-2.0.html
Texto do Domínio: twentytwentychild
*/
• 3. Salve este arquivo dentro da sua pasta twentytwenty-child e nomeie-o como style.css.
• 4. Dentro desta mesma pasta, crie um novo documento e nomeie-o como functions.php. A única coisa que este arquivo terá além da tag PHP de abertura é: <?php.

• 5. Compacte ou zipe a pasta twentytwenty-child.
• 6. Faça login no seu painel do WordPress e, em Aparência » Temas, clique em Adicionar Novo para carregar o arquivo twentytwenty-child.zip que você acabou de criar. Quando solicitado, ative este tema também.
• 7. Agora você verá no seu painel 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 personalizados 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.

Perguntas Frequentes

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 quaisquer trechos 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 nas seções Tutoriais e Trechos.