Como Adicionar PHP ou JavaScript Personalizado para WPForms

Gostaria de adicionar trechos personalizados de JavaScript ou PHP ao seu site? Este tutorial dar-lhe-á várias opções sobre como adicionar estes trechos ao seu site com instruções passo a passo para cada forma opcional que escolher para adicionar o seu trecho. Adicionar trechos de código personalizados ao seu site com PHP ou JavaScript pode estender a funcionalidade do seu site para as suas necessidades específicas. Seja para estender a funcionalidade do seu tema WordPress ou para estender a funcionalidade de qualquer plugin.

Com este guia útil, poderá escolher facilmente a forma como pretende adicionar os trechos ao seu site. Assim que tiver selecionado o seu método de implementação, pode começar a explorar a documentação do programador para escolher os trechos que gostaria de começar a adicionar ao seu site!

Para ver a variedade de trechos disponíveis, explore a nossa documentação do programador.

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

Opções de Implementação

Existem várias abordagens disponíveis para adicionar PHP ou Javascript para personalizar as suas necessidades específicas, não apenas para WPForms, mas para qualquer código personalizado que deseje adicionar.

Utilizar o plugin WPCode (recomendado)

Utilizar o plugin WPCode é super rápido e fácil para adicionar trechos ao seu site.

Uma das muitas razões pelas quais recomendamos vivamente a utilização deste plugin para adicionar trechos personalizados ao seu site é que ele tem uma verificação integrada antes de guardar o seu trecho. Se um ponto e vírgula for omitido ou um parêntese extra for adicionado, o trecho não será guardado. Isto impede que quaisquer problemas que possa experienciar, como erros de JavaScript ou mesmo erros fatais de PHP, ocorram no seu site devido a um trecho copiado e colado incorretamente. E sim, mesmo com a versão gratuita, receberá esta auditoria extra antes de o seu trecho ser ativado.

Após a instalação do plugin, navegue até ao menu Code Snippets no menu do lado 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 aparecer o ecrã do seu novo trecho, dê um nome ao trecho que faça sentido para si, para que você e os administradores do seu site compreendam o seu propósito. No menu suspenso Code Type, selecione PHP.

Para o propósito deste tutorial, vamos adicionar o seguinte trecho.

Na secção Pré-visualização do Código, adicione o 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, verá a secção Inserção. Para este trecho em particular, selecionaremos Inserção Automática para o Método de Inserção e Apenas Frontend para a Localização.

Depois de adicionar o seu trecho, clique em Guardar Trecho. Isto guardará o trecho, mas não o ativará automaticamente. Assim que guardar inicialmente, notará que o estado do trecho é definido como Inativo por defeito. Simplesmente alterne o interruptor de Inativo para Ativo e clique em Atualizar para definir o trecho como Ativo.

Criar um Plugin Específico do Site

Se for um utilizador mais avançado e quiser manter todos os seus scripts personalizados num único ficheiro no seu site, pode facilmente criar o seu próprio plugin exclusivo para armazenar estes trechos.

Se desejar mais informações sobre como criar um plugin específico do site, consulte este tutorial.

Para criar um plugin, terá de seguir estes passos.

• 1. Usando o seu editor de texto preferido, crie um novo ficheiro. Em seguida, adicione as seguintes linhas ao topo do ficheiro:
  <?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. Guarde o ficheiro como wpforms-custom-snippets.php.
• 3. Comprima ou zipe o ficheiro.
• 4. Inicie sessão no seu painel WordPress e, em Plugins, clique em Adicionar Novo. Siga as instruções no ecrã para carregar e ativar o ficheiro .zip que acabou de criar.
• 5. Assim que ativar o plugin, poderá ver o ficheiro em Plugins » Editor.

Usar functions.php dentro de um tema filho

Criar um tema filho é (novamente) mais para utilizadores avançados. Esta é uma solução alternativa aos ficheiros do seu tema, à sua folha de estilos incluída com o tema, mas também para quaisquer funções personalizadas que possa querer usar, como as descritas nos tutoriais e snippets para programadores da WPForms.

Os nossos amigos da WPBeginner prepararam um artigo excelente sobre como criar um tema filho. Este tutorial inclui até um vídeo para que possa acompanhar.

Para este exemplo, vamos criar um tema filho a partir do tema do WordPress Twenty Twenty. Para o fazer, siga os passos 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. Guarde este ficheiro 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 ficheiro terá de ter é a tag PHP de abertura: <?php.

• 5. Comprima ou zipe a pasta twentytwenty-child.
• 6. Inicie sessão no seu painel de administração do WordPress e, em Aparência » Temas, clique em Adicionar Novo para carregar o ficheiro twentytwenty-child.zip que acabou de criar. Quando solicitado, ative também este tema.
• 7. Agora verá no seu painel de administração do WordPress que ativou o tema Twenty Twenty Child.

Quando estes passos forem concluídos, verá que tem um tema filho funcional do Twenty Twenty e um ficheiro functions.php em branco para adicionar snippets, bem como uma folha de estilos em branco à qual pode adicionar o seu próprio CSS personalizado.

O seu tema continuará a funcionar como antes, carregando primeiro todos os ficheiros e estilos necessários. No entanto, quaisquer snippets personalizados que utilize da documentação para programadores da WPForms seriam adicionados ao functions.php do tema filho e personalizariam os formulários com base nos snippets que 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 o seu código de eventos inesperados. Assim, independentemente da abordagem que escolher, é uma boa ideia fazer sempre backup do seu site. Dessa forma, terá acesso a versões mais antigas dos ficheiros de código, se necessário.

FAQ

Q: Como é que isto me ajuda a adicionar código personalizado ao WPForms?

R: Este tutorial não é específico para snippets de código do WPForms, mas sim para qualquer snippet de código. Simplesmente, encontre qual a opção acima que lhe é mais fácil para adicionar quaisquer snippets de código, incluindo os snippets de código do WPForms mencionados na secção Tutoriais e Snippets.