Gostaria de adicionar snippets personalizados de JavaScript ou PHP ao seu site? Este tutorial oferece várias opções sobre como adicionar esses trechos de código ao seu site, com instruções passo a passo para cada maneira opcional que você escolher para adicionar seu trecho de código. 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. Quer seja para alargar a funcionalidade do seu tema WordPress ou para alargar a funcionalidade de qualquer plugin.
Com este guia útil, poderá escolher facilmente a forma como pretende adicionar os snippets ao seu site. Depois de ter selecionado o seu método de implementação, pode começar a explorar a documentação do programador para escolher os snippets que pretende adicionar ao seu site!
Para ver o conjunto de snippets disponíveis, explore a nossa documentação para programadores.
Consulte o nosso tutorial em vídeo para obter uma visão mais prática de como conseguir adicionar PHP ou Javascript personalizados ao seu site.
Opções de implementação
Há uma série de abordagens disponíveis para adicionar PHP ou Javascript para personalizar as suas necessidades específicas, não só 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 snippets ao seu site.
Uma das muitas razões pelas quais recomendamos vivamente a utilização deste plugin para adicionar snippets personalizados ao seu site é o facto de ter uma verificação incorporada antes de guardar o seu snippet. Se faltar um ponto e vírgula ou se for adicionado um parêntesis extra, o snippet não será guardado. Isto evita que quaisquer problemas que possa ter, como erros de JavaScript ou mesmo erros PHP Fatal, possam ocorrer no seu site devido a um snippet copiado e colado incorretamente. E sim, mesmo com a versão gratuita, receberá esta auditoria extra antes de o seu snippet ser ativado.
Nota: Para saber mais sobre este plugin, consulte o sítio para obter mais informações, incluindo documentação específica.
Assim que o plugin estiver instalado, navegue até ao menu Code Snippets no menu do lado esquerdo do seu painel de controlo do WordPress e selecione + Add Snippet.
Em seguida, basta clicar em Adicionar seu código personalizado (novo snippet) e, em seguida, clicar no botão azul Usar snippet para criar um novo snippet.
Quando o ecrã do novo snippet aparecer, dê-lhe um nome que faça sentido para que você e os administradores do seu site compreendam a sua finalidade. No menu suspenso Tipo de código, selecione PHP.
Nota: Todos os snippets do WPForms encontrados em toda a nossa documentação de desenvolvedor 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 carregará o script. Isso ajuda a reduzir a necessidade de carregar scripts que não se aplicam a todas as páginas.
Para efeitos deste tutorial, vamos adicionar 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, verá a secção Inserção. Apenas para este snippet em particular, seleccionaremos Inserção automática para o Método de inserção e Apenas frontend para a Localização.
Depois de adicionar o snippet, clique em Salvar snippet. Isto guardará o snippet, mas não o activará automaticamente. Depois de ter guardado inicialmente, verá que o estado do snippet está definido como Inativo por predefinição. Basta alternar o interrutor de Inativo para Ativo e clicar em Atualizar para definir o snippet como Ativo.
Criar um plug-in específico do site
Nota: A utilização deste método específico só é recomendada se estiver familiarizado com a edição de ficheiros PHP e o carregamento direto para o seu servidor ou através do seu programa FTP favorito.
Se é um utilizador avançado e gostaria de manter todos os seus scripts personalizados num único ficheiro no seu site, pode facilmente criar o seu próprio plugin exclusivo para armazenar estes snippets.
Se pretender obter mais informações sobre como criar um plug-in específico do sítio, consulte este tutorial.
Para criar um plugin, tem de seguir estes passos.
- 1. Utilizando o seu editor de texto favorito, 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. Comprimir ou zipar o ficheiro.
- 4. Inicie sessão no seu administrador do 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. Uma vez ativado o plugin, pode agora ver o ficheiro a partir do editor Plugins ".
Nota: O WordPress nunca recomenda a realização de alterações em tempo real a qualquer um dos seus ficheiros, incluindo ficheiros de plugins e temas.
Utilizar o functions.php dentro de um tema filho
Nota: A utilização deste método específico só é recomendada se estiver familiarizado com a edição de ficheiros PHP e o carregamento direto para o seu servidor ou através do seu programa FTP favorito.
Criar um tema filho é (novamente) mais para utilizadores avançados. Trata-se de uma solução alternativa para os seus ficheiros de tema, a sua folha de estilos incluída no tema, mas também para quaisquer funções personalizadas que possa querer utilizar, como as descritas nos tutoriais e snippets para programadores do WPForms.
Os nossos amigos da WPBeginner elaboraram um excelente artigo sobre como criar um tema filho. Este tutorial inclui até um vídeo para o acompanhar.
Nota: Nunca recomendamos a edição direta dos ficheiros do seu tema. Se o autor do tema lançar uma atualização do tema, todas as edições que tiver feito serão perdidas. A utilização de um tema filho reduzirá esta possibilidade de manter o tema atualizado sem perder quaisquer personalizações que possa fazer ao longo do processo.
Para este exemplo, vamos criar um tema filho a partir do tema Twenty Twenty do WordPress. Para o fazer, siga os passos abaixo.
- 1. Crie uma nova pasta no seu ambiente de trabalho chamada twentytwenty-child
- 2. Criar 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. Guarde este ficheiro na sua pasta twentytwenty-child e dê-lhe o nome de style.css.
- 4. Dentro desta mesma pasta, crie um novo documento e dê-lhe o nome functions.php. A única coisa que este ficheiro terá de ter é a etiqueta PHP aberta:
<?php.
- 5. Comprimir ou zipar a pasta twentytwenty-child.
- 6. Inicie sessão no seu administrador do WordPress e, em Aparências " Temas, clique em Adicionar novo para carregar o ficheiro twentytwenty-child.zip que acabou de criar. Quando solicitado, active também este tema.
- 7. Agora, no seu administrador do WordPress, verá que activou o tema Twenty Twenty Child.
Quando estes passos estiverem concluídos, verá que tem um tema filho do Twenty Twenty a funcionar e um ficheiro functions.php em branco ao qual pode adicionar snippets, bem como uma folha de estilos em branco à qual pode adicionar as suas próprias CSS personalizadas.
Seu tema ainda funcionará como antes, carregando todos os arquivos e estilos necessários primeiro. No entanto, quaisquer snippets personalizados que 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 adicionados.
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 o seu código de eventos inesperados. Por isso, independentemente da abordagem que escolher, é uma boa ideia fazer sempre cópias de segurança do seu sítio. Desta forma, terá acesso a versões mais antigas dos ficheiros de código, se necessário.
FAQ
P: Como é que isto 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. Basta encontrar a opção acima que lhe seja mais fácil para adicionar quaisquer fragmentos de código, incluindo os fragmentos de código WPForms mencionados na secção Tutoriais e fragmentos.