Come aggiungere PHP o JavaScript personalizzati per WPForms

Volete aggiungere snippet JavaScript o PHP personalizzati al vostro sito? Questo tutorial vi darà diverse opzioni su come aggiungere questi snippet al vostro sito, con istruzioni passo-passo per ogni modalità opzionale che sceglierete per aggiungere il vostro snippet. L'aggiunta di snippet di codice personalizzati al vostro sito con PHP o JavaScript può estendere la funzionalità del vostro sito per le vostre esigenze specifiche. Che si tratti di estendere le funzionalità del vostro tema WordPress o di estendere le funzionalità di qualsiasi plugin.

Grazie a questa utile guida, potrete scegliere facilmente il modo in cui aggiungere gli snippet al vostro sito. Una volta scelto il metodo di implementazione, si può iniziare a esplorare la documentazione per sviluppatori per scegliere quali snippet aggiungere al proprio sito!

Per dare un'occhiata alla serie di snippet disponibili, esplorate la nostra documentazione per sviluppatori.

Per una visione più pratica di come aggiungere PHP o Javascript personalizzati al vostro sito, consultate il nostro video tutorial.

Opzioni di implementazione

Esiste una serie di approcci per aggiungere PHP o Javascript per personalizzare le vostre esigenze specifiche, non solo per WPForms ma per qualsiasi codice personalizzato che desideriate aggiungere.

Utilizzo del plugin WPCode (consigliato)

L'uso del plugin WPCode è super veloce e facile per aggiungere snippet al vostro sito.

Uno dei tanti motivi per cui consigliamo vivamente l'uso di questo plugin per l'aggiunta di snippet personalizzati al vostro sito è che ha un controllo incorporato prima di salvare lo snippet. Se manca un punto e virgola o viene aggiunta una parentesi in più, lo snippet non verrà salvato. In questo modo si evita che eventuali problemi, come errori JavaScript o addirittura errori fatali PHP, si verifichino sul sito a causa di uno snippet copiato e incollato in modo errato. E sì, anche con la versione gratuita, riceverete questa verifica supplementare prima che il vostro snippet venga reso attivo.

Una volta installato il plugin, andare al menu Code Snippets dal menu laterale sinistro della dashboard di WordPress e selezionare + Aggiungi snippet.

Successivamente, è sufficiente fare clic su Aggiungi il tuo codice personalizzato (Nuovo snippet), quindi fare clic sul pulsante blu Usa snippet per creare un nuovo snippet.

Quando appare la schermata del nuovo snippet, assegnargli un nome che abbia senso per voi e per gli amministratori del vostro sito, in modo da capirne lo scopo. Dal menu a tendina Tipo di codice, selezionare PHP.

Ai fini di questa esercitazione, aggiungeremo il seguente 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);

Successivamente, verrà visualizzata la sezione Inserimento. Solo per questo particolare snippet, selezioneremo Auto-Insert per il metodo di inserimento e Frontend Only per la posizione.

Una volta aggiunto lo snippet, fare clic su Salva snippet. Questa operazione salverà lo snippet, ma non lo attiverà automaticamente. Dopo il salvataggio iniziale, si noterà che lo stato dello snippet è impostato per default su Inattivo. È sufficiente spostare l'interruttore da Inattivo ad Attivo e fare clic su Aggiorna per impostare lo snippet come Attivo.

Creazione di un plugin specifico per il sito

Se siete un utente avanzato e volete conservare tutti i vostri script personalizzati in un unico file sul vostro sito, potete facilmente creare un plugin unico per memorizzare questi snippet.

Per ulteriori informazioni su come creare un plugin specifico per il sito, consultare questo tutorial.

Per creare un plugin, è necessario seguire i seguenti passaggi.

• 1. Utilizzando l'editor di testo preferito, creare un nuovo file. Aggiungete quindi le seguenti righe all'inizio del file:
  <?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. Salvare il file come wpforms-custom-snippets.php.
• 3. Comprimere o zippare il file.
• 4. Accedere all'amministrazione di WordPress e, alla voce Plugin, fare clic su Aggiungi nuovo. Seguite le istruzioni sullo schermo per caricare e attivare il file .zip appena creato.
• 5. Una volta attivato il plugin, è ora possibile visualizzare il file dall'Editor dei plugin.

Utilizzo di functions.php all'interno di un tema figlio

La creazione di un tema figlio è (di nuovo) più per gli utenti avanzati. Si tratta di una soluzione alternativa ai file del tema, al foglio di stile incluso nel tema, ma anche alle funzioni personalizzate che si desidera utilizzare, come quelle descritte nei tutorial e negli snippet degli sviluppatori di WPForms.

I nostri amici di WPBeginner hanno messo insieme un eccellente articolo su come creare un tema figlio. Questo tutorial include anche un video da seguire.

Per questo esempio, creeremo un tema figlio dal tema WordPress Twenty Twenty. Per farlo, seguite i passaggi seguenti.

• 1. Creare una nuova cartella sul desktop denominata twentytwenty-child
• 2. Creare un documento di testo e queste righe:
  <?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. Salvare questo file nella cartella twentytwenty-child e chiamarlo style.css.
• 4. All'interno di questa stessa cartella, creare un nuovo documento e chiamarlo functions.php. L'unica cosa che questo file dovrà essere è il tag open PHP: <?php.

• 5. Comprimere o zippare la cartella twentytwild-child.
• 6. Accedere all'amministrazione di WordPress e in Aspetti " Temi, fare clic su Aggiungi nuovo per caricare il file twentytwenty-child.zip appena creato. Quando viene richiesto, attivare anche questo tema.
• 7. Ora vedrete che nell'amministrazione di WordPress avete attivato il tema Twenty Twenty Child.

Una volta completati questi passaggi, vedrete che ora avete un tema figlio funzionante di Twenty Twenty e un file functions.php vuoto a cui aggiungere gli snippet e un foglio di stile vuoto a cui aggiungere il vostro CSS personalizzato.

Il tema continuerà a funzionare come prima, caricando prima tutti i file e gli stili necessari. Tuttavia, gli snippet personalizzati che si utilizzano dalla documentazione per sviluppatori di WPForms saranno aggiunti al functions.php del tema figlio e personalizzeranno i moduli in base agli snippet aggiunti.

Questi sono solo alcuni dei modi in cui è possibile aggiungere facilmente PHP o JavaScript personalizzati al proprio sito.

Note

Quando si aggiunge qualsiasi tipo di codice personalizzato al sito, è importante preservare il codice da eventi imprevisti. Per questo motivo, a prescindere dall'approccio scelto, è buona norma eseguire sempre un backup del sito. In questo modo, avrete accesso alle versioni precedenti dei file di codice, se necessario.

FAQ

D: Come mi aiuta ad aggiungere codice personalizzato a WPForms?

R: Questo tutorial non è specifico per gli snippet di codice di WPForms, ma per qualsiasi snippet di codice. Basta trovare l'opzione più facile per aggiungere qualsiasi snippet di codice, compresi quelli di WPForms menzionati nella sezione Tutorial e snippet.