Comment ajouter des extraits de code personnalisés dans WordPress (méthode la plus simple)

Recherchez-vous un moyen simple et direct d’ajouter des extraits de code WordPress à votre site Web ?

Apprendre WordPress ne concerne pas seulement les thèmes et les outils. Parfois, c'est le pouvoir subtil des extraits de code qui donne à un site sa saveur unique.

La personnalisation parfaite que vous recherchez ? C'est réalisable avec le bon code, mais le problème est que même la plus petite erreur peut détruire votre site Web.

Dans cet article, nous allons vous montrer comment ajouter facilement des extraits de code personnalisés dans WordPress sans casser votre site Web.

Que sont les extraits de code dans WordPress ?

Sous l’interface conviviale de WordPress se cache un monde de code qui alimente chacun de ses mouvements.

Ces minuscules fragments de code, appelés extraits de code, sont des outils compacts mais puissants qui instruisent WordPress sur des fonctionnalités spécifiques.

Exploiter la puissance de ces extraits de code peut faire la différence entre un site Web WordPress générique et un site adapté à vos besoins précis.

Considérez-les comme l’équivalent WordPress des sorts qui, lorsqu’ils sont lancés correctement, peuvent donner d’excellents résultats sur le frontend.

Comment ajouter des extraits de code personnalisés dans WordPress

Pour ajouter des extraits de code personnalisés dans WordPress, vous pouvez compter sur la simplicité et les fonctionnalités de WPCode. Suivez les étapes ci-dessous pour commencer.

1. Installez et activez le plugin WPCode

WPCode est le meilleur moyen pour les utilisateurs de WordPress d'ajouter des extraits de code personnalisés à leurs sites sans avoir à manipuler le fichier functions.php ni à craindre de casser le site à la moindre erreur.

Le plugin d’extrait de code facilite l’ajout d’extraits de code à n’importe quelle partie de votre site WordPress, y compris le pied de page et l’en-tête. Vous pouvez insérer le code personnalisé de votre choix directement depuis votre tableau de bord plutôt que de modifier directement le fichier functions.php .

Pour commencer, vous devrez installer et activer le plugin WordPress sur votre site Web. Cela ajoutera le plugin au panneau de menu de gauche de votre tableau de bord WordPress, à partir duquel vous pourrez commencer à ajouter rapidement des codes personnalisés.

2. Créez le code personnalisé (PHP, CSS, HTML)

Si le code personnalisé est déjà prêt, ignorez cette étape et passez à la suivante. Pour ceux qui créent le code personnalisé à partir de zéro, voici un exemple.

Pour ce guide, nous allons créer un code personnalisé qui évite les conflits de thèmes qui empêchent l'affichage correct des valeurs Radio et Checkbox dans WPForms.

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

Le code ci-dessus utilise CSS pour résoudre le problème de conflit de thème, mais comme mentionné précédemment, vous pouvez également créer un code avec PHP et HTML.

3. Ajoutez votre code personnalisé (nouvel extrait)

Dans la barre de menu d’administration de WordPress, cliquez sur l’option Extraits de code , puis sur le bouton Ajouter un nouveau . Puisque vous venez d'installer le plugin, votre liste sera vide.

Vous serez ensuite redirigé vers la page Ajouter un extrait . Ici, vous pouvez soit ajouter votre propre code unique, soit sélectionner un extrait de code dans la bibliothèque prédéfinie.

Cliquez sur le bouton Utiliser l'extrait à côté de l'option Ajouter votre code personnalisé (nouvel extrait) pour insérer votre nouveau code.

Maintenant, tout ce que vous avez à faire est de donner un nom à l'extrait et de simplement copier et coller le code personnalisé que vous avez créé dans l'espace Code Preview du plugin WPCode.

Depuis que nous avons créé le code en CSS, dans le menu déroulant Type de code , nous avons sélectionné CSS Snippet . Vous pouvez le modifier en fonction du code que vous avez créé.

Ensuite, faites défiler jusqu’à l’onglet Insertion . Maintenant, sélectionnez Insertion automatique et, dans la liste déroulante Emplacement , choisissez l'option En-tête à l'échelle du site .

Selon le type de code que vous créez, vous pouvez même choisir de l'ajouter en tant que [/] Shortcode à vos pages/articles.

Si vous souhaitez attribuer des balises à votre extrait de code, faites défiler jusqu'à la section Informations de base . Cela vous aidera à classer vos exemples de code par sujet et par fonction.

Lorsque vous souhaitez afficher plusieurs snippets au même endroit, le paramètre Priorité vous permet de choisir l'ordre dans lequel ils sont traités.

Ensuite, la fonction sophistiquée Smart Conditional Logic vous permet de révéler ou de masquer des extraits de code insérés automatiquement en fonction d'un ensemble de critères.

Enfin, tout ce que vous avez à faire est de cocher l’option Actif et d’appuyer sur le bouton Enregistrer l’extrait avant de quitter le plugin !

4. Gestion des erreurs dans le code personnalisé

Une faute de frappe dans le plugin ou le fichier de thème spécifique au site peut instantanément rendre votre site indisponible pour les visiteurs lorsque vous utilisez des extraits de code.

Une erreur de syntaxe ou une erreur de serveur interne 500 apparaîtrait sur votre site. Vous devrez utiliser un client FTP pour annuler vos modifications manuellement.

La fonctionnalité unique du plugin WPCode est qu'il identifiera et désactivera automatiquement toute instance d'erreur de syntaxe dans le code.

Un message d'erreur utile s'affichera pour que vous puissiez l'utiliser lors du débogage des erreurs. Au fur et à mesure que vous ajoutez votre code personnalisé, la validation intelligente des extraits de code de WPCode détectera toutes les erreurs.

Lorsque vous passez votre souris sur le problème, une fenêtre contextuelle contenant des instructions sur la façon de le résoudre apparaîtra.

5. Gérer vos extraits de code personnalisés

Si vous disposez de plusieurs extraits de code, WPCode facilite incroyablement leur gestion grâce à une interface conviviale et à la bibliothèque d'extraits de code.

Les extraits de code peuvent être enregistrés sans être activés sur votre site Web, et vous pouvez ultérieurement activer ou désactiver l'extrait à tout moment.

De plus, vous pouvez utiliser des balises pour classer vos extraits de code et les filtrer en fonction de leur type et de leur emplacement.

Vous avez également la possibilité d’exporter des extraits de code particuliers ou de les exporter tous en masse. Accédez simplement à Extraits de code »Outils et sélectionnez l’option Exporter .

Le plugin vous permet également d'importer des extraits si vous déplacez votre site Web vers un nouveau serveur. Accédez à Extraits de code » Outils » Importer et téléchargez le fichier d’exportation.

FAQ sur les extraits de code personnalisés

L'ajout d'extraits de code personnalisés est un sujet de convivialité populaire parmi nos lecteurs. Voici quelques réponses rapides à quelques-unes des questions les plus fréquemment posées :

Quel est le meilleur gestionnaire d’extraits de code pour WordPress ?

WPCode est un excellent choix pour gérer et exécuter des extraits de code dans WordPress, offrant une organisation rationalisée et des capacités d'intégration transparentes.

Comment ajouter du CSS à un extrait de code dans WordPress ?

Dans WPCode, accédez simplement à la section + Ajouter un nouveau , saisissez le CSS souhaité et assurez-vous de sélectionner le type CSS avant de l'enregistrer et de l'activer.

Comment ajouter du code personnalisé à WordPress sans plugins ?

Vous pouvez introduire du code personnalisé directement dans le fichier functions.php de votre thème. Cependant, un outil dédié comme WPCode assure une gestion des extraits de code plus sûre et plus organisée.

Comment ajouter du code php personnalisé à WordPress ?

Pour PHP, accédez à l'interface de WPCode, choisissez + Add New , collez votre code PHP, puis enregistrez. Assurez-vous toujours qu’il est d’abord testé sur un site de thème enfant intermédiaire.

Ensuite, découvrez comment exiger une adresse e-mail pour les téléchargements de fichiers

Ne serait-il pas formidable si les utilisateurs de WordPress devaient vous donner leur adresse e-mail avant de pouvoir télécharger un fichier ? Découvrez comment inciter les visiteurs de votre site WordPress à partager leur adresse e-mail afin qu'ils puissent télécharger un fichier.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd’hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro comprend de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.