Souhaitez-vous ajouter des extraits JavaScript ou PHP personnalisés à votre site ? Ce tutoriel vous propose plusieurs options pour ajouter ces snippets à votre site, avec des instructions étape par étape pour chaque option que vous choisissez d'ajouter à votre snippet. L'ajout d'extraits de code personnalisés à votre site avec PHP ou JavaScript permet d'étendre les fonctionnalités de votre site en fonction de vos besoins spécifiques. Qu'il s'agisse d'étendre les fonctionnalités de votre thème WordPress ou d'un plugin.
Grâce à ce guide utile, vous pourrez facilement choisir la manière dont vous souhaitez ajouter les snippets à votre site. Une fois que vous aurez choisi votre méthode de mise en œuvre, vous pourrez commencer à explorer la documentation destinée aux développeurs pour choisir les snippets que vous souhaitez ajouter à votre site !
Pour découvrir la multitude de snippets disponibles, consultez notre documentation destinée aux développeurs.
Veuillez consulter notre tutoriel vidéo pour une vue plus pratique de la manière d'ajouter du PHP ou du Javascript personnalisé à votre site.
Options de mise en œuvre
Il existe un certain nombre d'approches pour ajouter du PHP ou du Javascript afin de répondre à vos besoins spécifiques, non seulement pour WPForms mais aussi pour tout code personnalisé que vous souhaitez ajouter.
Utilisation du plugin WPCode (recommandé)
Le plugin WPCode permet d'ajouter rapidement et facilement des snippets à votre site.
L'une des nombreuses raisons pour lesquelles nous recommandons vivement l'utilisation de ce plugin pour ajouter des extraits personnalisés à votre site est qu'il comporte une vérification intégrée avant l'enregistrement de l'extrait. Si un point-virgule est oublié ou si une parenthèse supplémentaire est ajoutée, le snippet ne sera pas sauvegardé. Cela permet d'éviter que des problèmes tels que des erreurs JavaScript ou même des erreurs PHP Fatal ne se produisent sur votre site à cause d'un extrait copié-collé incorrect. Et oui, même avec la version gratuite, vous recevrez cet audit supplémentaire avant que votre extrait ne soit rendu actif.
Note : 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 Code Snippets dans le menu latéral gauche de votre tableau de bord WordPress et sélectionnez + Add Snippet.
Ensuite, il suffit de cliquer sur le bouton Ajouter votre code personnalisé (Nouvel extrait), puis de cliquer sur le bouton bleu Utiliser l'extrait pour créer un nouvel extrait.
Lorsque l'écran de votre nouvel extrait apparaît, donnez-lui un nom compréhensible pour vous et les administrateurs de votre site afin qu'ils comprennent son utilité. Dans la liste déroulante Type de code, sélectionnez PHP.
Note : Tous les snippets WPForms trouvés dans notre documentation développeur seront ajoutés en tant que snippet PHP, même les snippets qui utilisent JavaScript, à l'exception des snippets CSS spécifiques. Cela permet de s'assurer que s'il n'y a pas de formulaire WPForms sur la page, le snippet ne chargera pas le script. Cela permet de réduire le besoin de charger des scripts qui ne s'appliquent pas à toutes les pages.
Pour les besoins de ce tutoriel, nous allons ajouter l'extrait suivant.
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);
Ensuite, vous verrez la section Insertion. Pour cet extrait en particulier, nous sélectionnerons Auto-Insert pour la méthode d'insertion et Frontend Only pour l'emplacement.
Une fois que vous avez ajouté votre extrait, cliquez sur Enregistrer l'extrait. Cette opération permet d'enregistrer l'extrait, mais ne l'active pas automatiquement. Une fois l'enregistrement effectué, vous remarquerez que l'état de l'extrait est défini sur Inactif par défaut. Il vous suffit de basculer le statut d'Inactif à Actif et de cliquer sur Mettre à jour pour activer l'extrait.
Création d'un plugin spécifique à un site
Remarque : l'utilisation de cette méthode n'est recommandée que si vous êtes à l'aise avec l'édition de fichiers PHP et le téléchargement direct sur votre serveur ou par l'intermédiaire de votre programme FTP préféré.
Si vous êtes un utilisateur un peu 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 pour stocker ces extraits.
Si vous souhaitez obtenir plus d'informations sur la création d'un plugin spécifique à un site, veuillez consulter ce tutoriel.
Pour créer un plugin, vous devez suivre les étapes suivantes.
- 1. À l'aide de votre éditeur de texte préféré, créez un nouveau fichier. Ajoutez ensuite les lignes suivantes au début 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 administrateur WordPress et sous Plugins, cliquez sur Ajouter un nouveau. 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 à partir de l'éditeur" Plugins ".
Note : WordPress ne recommande jamais d'apporter des modifications en direct à vos fichiers, y compris les fichiers des plugins et des thèmes.
Utilisation de functions.php dans un thème enfant
Remarque : l'utilisation de cette méthode n'est recommandée que si vous êtes à l'aise avec l'édition de fichiers PHP et le téléchargement direct sur votre serveur ou par l'intermédiaire de votre programme FTP préféré.
La création d'un thème enfant est (encore une fois) plus pour les utilisateurs avancés. C'est une solution alternative pour 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 telles que celles décrites dans les tutoriels et snippets des 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 que vous pouvez suivre.
Remarque : nous ne recommandons jamais de modifier directement les fichiers de votre thème. Si l'auteur du thème devait publier une mise à jour du thème, toutes les modifications que vous auriez apportées seraient perdues. L'utilisation d'un thème enfant réduira les chances de garder votre thème à jour sans perdre les personnalisations que vous avez pu faire 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 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 devra être est la balise open PHP :
<?php.
- 5. Compressez ou zippez le dossier twentytwenty-child.
- 6. Connectez-vous à votre administrateur WordPress et sous Apparences " Thèmes, cliquez sur Ajouter nouveau pour télécharger 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 enfant Twenty Twenty.
Une fois ces étapes terminées, vous verrez que vous avez un thème enfant fonctionnel de Twenty Twenty et un fichier functions.php vierge auquel vous pouvez ajouter des snippets ainsi qu'une feuille de style vierge à 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 snippets personnalisés que vous utilisez à partir de la documentation du développeur WPForms seront ajoutés au fichier functions.php du thème enfant et personnaliseront les formulaires en fonction des snippets que vous aurez ajoutés.
Et ce ne sont là que quelques exemples des différentes façons dont vous pouvez facilement ajouter du PHP ou du JavaScript personnalisé à votre site.
Notes
Lorsque vous ajoutez un code personnalisé à votre site, il est important de le protéger contre les événements inattendus. Quelle que soit l'approche choisie, il est conseillé de toujours sauvegarder votre site. Ainsi, vous aurez accès aux anciennes versions des fichiers de code en cas de besoin.
FAQ
Q : En quoi cela m'aide-t-il à ajouter du code personnalisé à WPForms ?
R : Ce tutoriel ne concerne pas spécifiquement les extraits de code WPForms, mais tous les extraits de code. Il suffit de trouver l'option ci-dessus qui est la plus facile pour vous d'ajouter n'importe quel extrait de code, y compris les extraits de code WPForms mentionnés dans la section Tutoriels et extraits de code.