Résumé IA
Souhaitez-vous ajouter des extraits de code JavaScript ou PHP personnalisés à votre site ? Ce tutoriel vous présentera plusieurs options pour ajouter ces extraits à votre site, avec des instructions étape par étape pour chaque méthode facultative que vous choisirez. L'ajout d'extraits de code personnalisés à votre site avec PHP ou JavaScript peut étendre les fonctionnalités de votre site pour répondre à vos besoins spécifiques, que ce soit pour étendre les fonctionnalités de votre thème WordPress ou celles de n'importe quel plugin.
Avec ce guide pratique, vous pourrez facilement choisir la méthode d'ajout des extraits à votre site. Une fois que vous aurez sélectionné votre méthode d'implémentation, vous pourrez commencer à explorer la documentation du développeur pour choisir les extraits que vous souhaitez ajouter à votre site !
Pour consulter l'ensemble des extraits disponibles, veuillez consulter notre documentation du développeur.
Veuillez consulter notre tutoriel vidéo pour un aperçu plus pratique de la manière d'ajouter du PHP ou du JavaScript personnalisé à votre site.
Options d'implémentation
Il existe un certain nombre d'approches disponibles pour ajouter du PHP ou du JavaScript afin de personnaliser vos besoins spécifiques, pas seulement pour WPForms mais pour tout code personnalisé que vous souhaitez ajouter.
Utilisation du plugin WPCode (recommandé)
L'utilisation du plugin WPCode est très rapide et facile pour ajouter des extraits à votre site.
L'une des nombreuses raisons pour lesquelles nous recommandons fortement l'utilisation de ce plugin pour ajouter des extraits personnalisés à votre site est qu'il dispose d'une vérification intégrée avant d'enregistrer votre extrait. Si un point-virgule est manquant ou si une parenthèse supplémentaire est ajoutée, l'extrait ne sera pas enregistré. Cela empêche tout problème que vous pourriez rencontrer, tel qu'une erreur JavaScript ou même des erreurs fatales PHP, de se produire sur votre site en raison d'un extrait copié et collé incorrect. Et oui, même avec la version gratuite, vous bénéficierez de cette vérification supplémentaire avant que votre extrait ne soit activé.
Remarque : Pour en savoir plus sur ce plugin, veuillez consulter le site pour plus d'informations, y compris la documentation dédiée.
Une fois le plugin installé, accédez au menu Extraits de code dans le menu latéral gauche de votre tableau de bord WordPress et sélectionnez + Ajouter un extrait.
Ensuite, cliquez simplement sur Ajouter votre code personnalisé (Nouvel extrait), puis cliquez sur le bouton bleu Utiliser l'extrait pour créer un nouvel extrait.
Lorsque votre nouvel écran d'extrait apparaît, donnez un nom à l'extrait qui ait du sens pour vous afin que vous et les administrateurs de votre site compreniez son objectif. Dans le menu déroulant Type de code, sélectionnez PHP.
Remarque : Tous les extraits WPForms trouvés dans notre documentation du développeur seraient ajoutés en tant qu'extrait PHP, même les extraits qui utilisent JavaScript, à l'exception des extraits CSS spécifiques. Ceci est fait pour s'assurer que s'il n'y a pas de formulaire WPForms sur la page, l'extrait ne chargera pas le script. Cela permet de réduire la nécessité de charger des scripts qui ne s'appliquent pas à toutes les pages.
Aux fins de ce tutoriel, nous allons ajouter le extrait de code suivant.
Dans la section Aperçu du code, ajoutez votre extrait de code juste sous le <?php. Voici un exemple à utiliser aux fins de cette 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);
Ensuite, vous verrez la section Insertion. Pour cet extrait de code particulier uniquement, nous sélectionnerons Insertion automatique pour la Méthode d’insertion et Front-end uniquement pour l’Emplacement.
Une fois que vous avez ajouté votre extrait de code, cliquez sur Enregistrer l’extrait. Cela enregistrera l’extrait, mais ne l’activera pas automatiquement. Une fois que vous avez enregistré initialement, vous remarquerez que le statut de l’extrait est défini sur Inactif par défaut. Basculez simplement le commutateur de Inactif à Actif et cliquez sur Mettre à jour pour définir l’extrait comme Actif.
Création d’un plugin spécifique au site
Remarque : L’utilisation de cette méthode particulière est uniquement recommandée si vous êtes à l’aise avec la modification de fichiers PHP et le téléchargement directement sur votre serveur ou via votre programme FTP préféré.
Si vous êtes un utilisateur plus avancé et que vous souhaitez conserver tous vos scripts personnalisés dans un seul fichier sur votre site, vous pouvez facilement créer votre propre plugin unique pour stocker ces extraits de code.
Si vous souhaitez plus d’informations sur la façon de créer un plugin spécifique au site, veuillez consulter ce tutoriel.
Pour créer un plugin, vous devrez suivre ces étapes.
- 1. À l’aide de votre éditeur de texte préféré, créez un nouveau fichier. Ensuite, ajoutez les lignes suivantes en haut du fichier :
<?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. Enregistrez le fichier sous le nom wpforms-custom-snippets.php.
- 3. Compressez ou zippez le fichier.
- 4. Connectez-vous à votre administration WordPress et sous Plugins, cliquez sur Ajouter. Suivez les instructions à l’écran pour télécharger et activer le fichier .zip que vous venez de créer.
- 5. Une fois que vous avez activé le plugin, vous pouvez maintenant voir le fichier dans Plugins » Éditeur.
Remarque : WordPress ne recommande jamais d’apporter des modifications en direct à l’un de vos fichiers, y compris les fichiers de plugin et de thème.
Utilisation de functions.php dans un thème enfant
Remarque : L’utilisation de cette méthode particulière est uniquement recommandée si vous êtes à l’aise avec la modification de fichiers PHP et le téléchargement directement sur votre serveur ou via votre programme FTP préféré.
La création d'un thème enfant s'adresse (encore une fois) davantage aux utilisateurs avancés. C'est une solution alternative à vos fichiers de thème, votre feuille de style incluse avec le thème, mais aussi pour toutes les fonctions personnalisées que vous pourriez vouloir utiliser, comme celles décrites dans les tutoriels et extraits pour développeurs de WPForms.
Nos amis de WPBeginner ont rédigé un excellent article sur la création d'un thème enfant. Ce tutoriel comprend même une vidéo pour vous guider.
Remarque : Nous ne recommandons jamais de modifier directement les fichiers de votre thème. Si l'auteur du thème publiait une mise à jour, toutes les modifications que vous auriez apportées seraient perdues. L'utilisation d'un thème enfant réduira cette possibilité de maintenir votre thème à jour sans perdre aucune personnalisation que vous pourriez apporter en cours de route.
Pour cet exemple, nous allons créer un thème enfant à partir du thème WordPress Twenty Twenty. Pour ce faire, veuillez suivre les étapes ci-dessous.
- 1. Créez un nouveau dossier sur votre bureau appelé twentytwenty-child
- 2. Créez un document texte et ajoutez ces lignes :
<?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. Enregistrez ce fichier dans votre dossier twentytwenty-child et nommez-le style.css.
- 4. Dans ce même dossier, créez un nouveau document et nommez-le functions.php. La seule chose que ce fichier contiendra sera la balise PHP d'ouverture :
<?php.
- 5. Compressez ou zippez le dossier twentytwenty-child.
- 6. Connectez-vous à votre administration WordPress et, sous Apparence » Thèmes, cliquez sur Ajouter pour téléverser le fichier twentytwenty-child.zip que vous venez de créer. Lorsque vous y êtes invité, activez également ce thème.
- 7. Vous verrez maintenant dans votre administration WordPress que vous avez activé le thème Twenty Twenty Child.
Une fois ces étapes terminées, vous verrez que vous avez un thème enfant fonctionnel de Twenty Twenty avec un fichier functions.php vide pour ajouter des extraits, ainsi qu'une feuille de style vide dans laquelle vous pouvez ajouter votre propre CSS personnalisé.
Votre thème fonctionnera toujours comme avant, en chargeant d'abord tous les fichiers et styles nécessaires. Cependant, tous les extraits personnalisés que vous utiliserez de la documentation pour développeurs WPForms seraient ajoutés au fichier functions.php du thème enfant et personnaliseraient les formulaires en fonction des extraits que vous ajoutez.
Et ce ne sont là que quelques-unes des différentes façons d'ajouter facilement du PHP ou du JavaScript personnalisé à votre site.
Notes
Lorsque vous ajoutez un code personnalisé, il est important de le préserver des événements imprévus. Quelle que soit l'approche choisie, il est toujours conseillé de sauvegarder votre site. Ainsi, vous aurez accès aux anciennes versions des fichiers de code si nécessaire.
FAQ
Q : Comment cela m'aide-t-il à ajouter du code personnalisé à WPForms ?
R : Ce tutoriel n'est pas spécifique aux extraits de code WPForms, mais à tout extrait de code. Trouvez simplement l'option qui vous convient le mieux pour ajouter des extraits de code, y compris ceux mentionnés dans les sections Tutoriels et Extraits.