Como adicionar PHP ou JavaScript personalizado para WPForms

Você gostaria de adicionar trechos personalizados de JavaScript ou PHP ao seu site? Este tutorial lhe dará várias opções de como adicionar esses snippets ao seu site com instruções passo a passo para cada forma opcional que você escolher para adicionar o snippet. Adicionar trechos de código personalizados ao seu site com PHP ou JavaScript pode ampliar a funcionalidade do seu site para atender às suas necessidades específicas. Seja para ampliar a funcionalidade do tema do WordPress ou para ampliar a funcionalidade de qualquer plug-in.

Com este guia útil, você poderá escolher facilmente a maneira como deseja adicionar os snippets ao seu site. Depois de selecionar seu método de implementação, você poderá começar a explorar a documentação do desenvolvedor para escolher quais snippets deseja adicionar ao seu site!

Para dar uma olhada no conjunto de snippets disponíveis, explore nossa documentação para desenvolvedores.

Consulte nosso tutorial em vídeo para obter uma visão mais prática de como adicionar PHP ou Javascript personalizados ao seu site.

Opções de implementação

Há 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ê queira adicionar.

Uso do plug-in WPCode (recomendado)

Usar o plug-in WPCode é muito rápido e fácil para adicionar snippets ao seu site.

Um dos muitos motivos pelos quais recomendamos enfaticamente o uso desse plug-in para adicionar snippets personalizados ao seu site é o fato de ele ter uma verificação integrada antes de salvar o snippet. Se um ponto e vírgula for esquecido ou um colchete extra for adicionado, o snippet não será salvo. Isso evita que problemas como erros de JavaScript ou até mesmo erros fatais de PHP ocorram 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 esse plug-in, consulte o site para obter mais informações, inclusive a documentação dedicada.

Depois que o plug-in estiver instalado, navegue até o menu Code Snippets no menu do lado esquerdo do painel do WordPress e selecione + Add Snippet.

Em seguida, basta clicar em Add Your Custom Code (New Snippet) e, depois, no botão azul Use Snippet para criar um novo snippet.

Quando a tela do novo snippet for exibida, dê ao snippet um nome que faça sentido para que você e os administradores do site entendam sua finalidade. No menu suspenso Tipo de código, selecione PHP.

Observação: todos os snippets do WPForms encontrados em toda a nossa documentação para desenvolvedores serão 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 carregará 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.

In the Code Preview section, add your snippet just under the <?php. Here is an example to use for the purpose of this documentation.

/**
 * 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. Apenas para esse snippet específico, selecionaremos Auto-Insert para o método de inserção e Frontend Only para o local.

Observação: a configuração Location depende do que seu código precisa fazer. Escolha Frontend Only se o seu código alterar apenas a aparência ou o funcionamento dos formulários nas páginas públicas do seu site.

Se o seu código precisar funcionar em qualquer lugar, como para validação ou processamento de formulários, escolha Corra para todos os lados em vez disso. Por exemplo, ganchos como wpforms_process_validate necessidade Corra para todos os lados para funcionar corretamente.

Depois de adicionar o snippet, clique em Save Snippet (Salvar snippet). Isso salvará o snippet, mas não o ativará automaticamente. Após o salvamento inicial, você notará que o status do snippet está definido como Inativo por padrão. Basta alternar a chave de Inativo para Ativo e clicar em Atualizar para definir o snippet como Ativo.

O WPCode oferece uma maneira muito simples e fácil de adicionar snippets ao seu site

Criação de um plug-in específico do site

Observação: o uso desse método específico só é recomendado se você se sentir à vontade para editar arquivos PHP e fazer upload diretamente para o servidor ou por meio do seu programa FTP favorito.

Se você for um usuário avançado e quiser manter todos os seus scripts personalizados em um único arquivo no seu site, poderá criar facilmente seu próprio plug-in exclusivo para armazenar esses snippets.

Se você quiser obter mais informações sobre como criar um plug-in específico para o site, consulte este tutorial.

Para criar um plug-in, você precisará seguir estas etapas.

1. Usando seu editor de texto favorito, crie um novo arquivo. Em seguida, adicione as seguintes linhas à parte superior 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. Comprima ou zip o arquivo.
4. Faça login no seu administrador do WordPress e, em Plugins, clique em Add New (Adicionar novo). Siga as instruções na tela para carregar e ativar o arquivo .zip que acabou de criar.
5. Depois de ativar o plug-in, você poderá ver o arquivo em Plugins " Editor.

Observação: O WordPress nunca recomenda fazer alterações ao vivo em nenhum de seus arquivos, inclusive nos arquivos de plug-ins e temas.

Uso do functions.php em um tema filho

Criar um tema filho é (novamente) mais para usuários avançados. Essa é uma solução alternativa para seus arquivos de tema, sua folha de estilo incluída no tema, mas também para quaisquer funções personalizadas que você queira usar, como as descritas nos tutoriais e snippets para desenvolvedores do WPForms.

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

Observação: Nunca recomendamos a edição direta dos arquivos do tema. Se o autor do tema lançar uma atualização para o tema, toda e qualquer edição que você tenha feito será perdida. O uso de um tema filho reduzirá essa chance de manter o tema atualizado sem perder as personalizações que você possa ter feito ao longo do caminho.

Para este exemplo, vamos criar um tema filho a partir do tema Twenty Twenty do WordPress. Para fazer isso, siga as etapas abaixo.

1. Crie uma nova pasta em sua área de trabalho chamada twentytwenty-child
2. Crie um documento de texto e 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 esse arquivo dentro da pasta twentytwenty-child e chame-o de style.css.
4. Dentro dessa mesma pasta, crie um novo documento e nomeie-o functions.php. A única coisa que esse arquivo terá que ter é a tag open PHP: <?php.

5. Comprima ou zip a pasta twentytwenty-child.
6. Faça login no administrador do WordPress e, em Appearances " Themes ( Aparências " Temas), clique em Add New (Adicionar novo ) para carregar o arquivo twentytwenty-child.zip que você acabou de criar. Quando solicitado, ative esse tema também.
7. Agora, no administrador do WordPress, você verá que ativou o tema Twenty Twenty Child.

Agora você pode adicionar PHP ou JavaScript personalizados usando um tema filho

Quando essas etapas forem concluídas, você verá que agora tem um tema filho do Twenty Twenty em funcionamento e um arquivo functions.php em branco para adicionar trechos, bem como uma folha de estilo em branco à qual 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, todos os snippets personalizados que você usar da documentação do desenvolvedor do WPForms serão adicionados ao tema filho functions.php e personalizarão os formulários com base nos snippets 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, independentemente da abordagem que você escolher, é 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. Basta encontrar a opção acima que seja mais fácil para você adicionar qualquer trecho de código, inclusive os trechos de código do WPForms mencionados na seção Tutoriais e trechos.

Como adicionar PHP ou JavaScript personalizado para WPForms