Comment ajouter des extraits de code dans WordPress

Si vous souhaitez ajouter des extraits de code à votre site WordPress, alors vous êtes au bon endroit.

Habituellement, les gens copient les codes et les collent dans les fichiers de thème WordPress. C'est un processus simple mais ce processus est destiné aux utilisateurs experts.

Pour les utilisateurs débutants et intermédiaires, copier-coller peut sembler intimidant. C'est pourquoi j'écris ce post.

De plus, les utilisateurs experts peuvent bénéficier d'avantages car je vais vous montrer comment ajouter facilement des extraits de code.

Commençons!

Raisons d’ajouter des extraits de code à votre site WordPress

Tout d’abord, WordPress est le créateur de sites Web le plus populaire en raison de ses paramètres conviviaux pour les débutants et de ses fonctionnalités centrées sur l’utilisateur.

Cependant, l’ajout de codes personnalisés peut étendre la puissance de votre WordPress sans casser votre site Web.

Disons que vous disposez d'une manière ou d'une autre de codes qui peuvent être implémentés sur votre site Web. Mais où et comment allez-vous les publier ?

C'est là qu'intervient l'option de collage de code. C'est un excellent moyen de doter votre site Web de fonctionnalités innovantes.

Une autre raison d’utiliser du code personnalisé est que c’est un moyen efficace d’étendre la puissance de votre WordPress.

Presque pour chaque besoin, vous trouverez un plugin WordPress. Mais est-il judicieux d’installer des plugins pour tous les besoins et d’alourdir votre site ?

Si vous pouvez gérer le problème avec un petit ensemble de code, vous devriez le faire.

Cela dit, examinons le processus d'ajout de code personnalisé à votre site Web WordPress.

Façons d'ajouter des codes personnalisés

Il existe plusieurs façons d’ajouter des codes personnalisés à votre site Web WordPress. Avant de discuter de cette partie, je souhaite que vous installiez un plugin de sauvegarde WordPress afin que vos nouveaux codes ne cassent rien sur votre site.

En cas de problème, vous pouvez restaurer la version précédente à partir de la sauvegarde et faire revenir votre site à un stade antérieur. Cela étant dit, un autre aspect de l’ajout d’extraits de code est de savoir où les ajouter.

Habituellement, vous pouvez ajouter des codes aux fichiers de modèles de thème, tels que index.php. Il existe d'autres fichiers PHP dans lesquels vous pouvez coller directement vos codes.

La méthode la plus populaire, je suppose, consiste à ajouter des extraits de code à function.php. Du moins, c'est ce que vous verrez dans la plupart des didacticiels disponibles.

Mais je vais vous montrer la meilleure méthode qui vous aidera le plus lorsque vous changez de thème ou que vous souhaitez arrêter la fonctionnalité à un moment donné.

Cependant, voici quelques-unes des méthodes que vous pouvez utiliser pour ajouter votre code personnalisé à votre site WordPress.

Comment ajouter des extraits de code dans WordPress (FluentSnippets)

La première étape consiste à ajouter du code personnalisé avec un plugin appelé FluentSnippets. D’ailleurs, ce plugin a été développé par nos soins (votre WPManageNinja préféré). Si vous êtes déjà un utilisateur Fluent (utilisant des produits Fluent), vous savez à quel point nos plugins maintiennent la qualité.

Première étape – installer le plugin gratuit

Accédez à Plugins > Ajouter un nouveau plugin et recherchez FluentSnippets.

Cliquez sur le bouton Installer maintenant .

Cliquez maintenant sur le bouton Activer et votre plugin sera activé.

Revenez à votre tableau de bord WordPress et localisez FluentSnippets dans le panneau de gauche. Vous verrez un bouton indiquant Créer votre premier extrait de code . Alternativement, vous pouvez toujours appuyer sur le bouton Nouvel extrait en haut à droite.

Deuxième étape : coller vos extraits de code

Collez maintenant votre extrait et donnez-lui un nom. Vous pouvez écrire une description si vous le souhaitez. Après tout, dites-lui où exécuter et cliquez sur le bouton Créer un extrait .

Vous pouvez également définir une certaine priorité avec des nombres, plus le nombre est bas, plus la priorité sera élevée.

Lorsque vous disposez d’un certain nombre d’extraits, vous pouvez les organiser en groupes. Vous pouvez également attribuer des balises pour retrouver facilement vos extraits.

Il existe une option appelée Advanced Conditional Logic. Si vous l'activez, vous pouvez filtrer vos extraits et les laisser s'exécuter lorsqu'ils remplissent la condition.

À propos, vous pouvez écrire des scripts pour PHP, PHP + HTML, CSS et JS.

Le moyen le plus simple de copier et coller du code se fait ici. Vous pouvez aller voir les paramètres même s'il n'y a pas grand chose à faire là-bas.

Collez le code dans votre fichier de thème

WordPress, par défaut, est livré avec une multitude de fonctionnalités à appliquer à votre site. Les thèmes ont souvent des fonctionnalités riches et des options de personnalisation. Mais lorsque vous avez besoin de quelque chose d’exact, vous pouvez ajouter des codes écrits par vous-même.

Voici le fichier function.php pour sauvegarder votre dos. Eh bien, vous pouvez trouver le fichier dans chaque thème, mais je veux que vous suiviez le chemin le plus sûr. C'est pourquoi je vous propose de créer un thème enfant.

Ne vous laissez pas submerger. Un thème enfant réside sous le thème principal et fonctionne comme les parents. Et l'avantage, c'est que si quelque chose ne va pas, seuls les brunchs seront touchés plutôt que l'arbre (thème principal).

Première étape – Créer un thème enfant

Pour créer un thème enfant, vous devez accéder aux dossiers de votre site via un client FTP comme FileZilla. Vous pouvez également y accéder en utilisant le gestionnaire de fichiers à partir duquel le site est hébergé.

Une fois connecté avec succès, accédez à wp-content > thèmes . Lorsque vous y accédez, vous pouvez voir les dossiers de tous les thèmes installés sur votre site Web.

Vous devez maintenant créer un dossier pour le thème enfant que vous souhaitez créer. Donnez un nom au dossier. Je vous suggère d'écrire un nom descriptif pour éviter toute confusion à l'avenir. Disons que le nom de votre thème est tropica, vous pouvez nommer votre thème enfant comme tropica_childtheme.

Deuxième étape – Ajouter un fichier CSS

Après avoir créé le dossier, ajoutez un fichier style.css à l'intérieur. Sur votre éditeur de texte, collez le code suivant :

 /* Theme Name: My Child Theme Theme URI: https: //mysite.com/ Description: This is a new child theme I have created for experimentation. Author: Your Name Author URI: https: //mysite.com/ Template: parenttheme Version: 0.1 */

N'oubliez pas de remplacer vos informations par le contenu factice. Assurez-vous d'écrire correctement le nom du thème parent (ici c'est tropica). Une autre chose importante est que vous devez appeler le CSS du thème parent dans le fichier style.css de votre thème enfant.

Vous pouvez le faire en ajoutant simplement le code suivant :

 @import url("../parenttheme/style.css");

Ici, le « thème parent » est tropica. Droite?

N'oubliez donc pas d'écrire correctement le nom de votre thème parent. Une fois que vous avez terminé, enregistrez votre fichier sous style.css dans le dossier de votre thème enfant.

Étape 3 – Créez un fichier function.php

La prochaine chose est que vous devez créer un fichier function.php pour votre thème enfant. Ouvrez votre éditeur de texte et collez la balise PHP suivante :

 <?php //* Write your code here

Enregistrez maintenant ce fichier sous Functions.php et ajoutez-le au dossier du thème enfant. Faites également glisser ce dossier vers le répertoire de thèmes de votre site à l'aide de votre client FTP.

Quatrième étape – Activez votre thème

Il est temps d'activer votre thème. Pour ce faire, accédez à Apparence > Thèmes dans le panneau de gauche de votre tableau de bord WordPress. Vous pouvez voir le thème enfant que vous avez créé ici. Cliquez sur le bouton Activer et votre thème enfant commencera à fonctionner.

Cinquième étape – Ajoutez vos extraits de code

Ici pour faire la tâche principale. Pour ajouter des extraits de code au thème enfant, accédez à Apparence > Editeur de fichiers de thème . Sélectionnez maintenant function.php ou tout autre fichier que vous souhaitez personnaliser.

Voici un exemple de fonctions.php

Lorsque vous avez terminé, cliquez sur Mettre à jour le fichier et vos modifications seront mises en œuvre sur votre site Web. Rechargez simplement le site et vérifiez par vous-même !

Conclusion

Vous savez maintenant comment ajouter des extraits de code personnalisés à vos sites WordPress. Utilisons nos connaissances et rendons votre site plus puissant que jamais avec vos codes personnalisés. J'espère que ce n'est plus une tâche difficile d'ajouter des codes.