Comment ajouter et modifier du code dans WordPress (HTML, CSS, PHP)

L'un des principaux attraits de l'utilisation de WordPress est que vous pouvez créer des sites Web sans toucher à une ligne de code, mais vous avez toujours l'entière liberté de modifier le code source si vous le souhaitez.

Si vous savez comment ajouter du code à WordPress en toute sécurité, vous pouvez modifier la conception et les fonctionnalités de votre site Web pour faciliter votre travail. Le type de code que vous décidez d'insérer dépend de vous. Dans WordPress, vous aurez généralement affaire à HTML, CSS et PHP.

Dans cet article, nous allons vous dire quoi faire avant de commencer à ajouter et à modifier du code dans WordPress. Ensuite, nous vous montrerons comment insérer HTML, CSS et PHP dans votre site Web. Nous couvrirons plusieurs approches pour ajouter et modifier du code pour chaque langue.

Que faire avant de modifier le code dans WordPress

Modifier le code existant dans les fichiers principaux de votre site ou y apporter des ajouts comporte toujours un risque. S'il y a des erreurs ou si vous cassez des fonctions existantes, votre site Web peut cesser de fonctionner.

Il est possible de réparer un site Web avec des erreurs dans son code. Mais à moins que vous n'ayez de l'expérience en développement, il peut être difficile de déterminer le code exact qui cause des problèmes.

Dans cet esprit, nous vous recommandons de prendre plusieurs mesures pour sécuriser votre site Web avant de commencer à ajouter ou à modifier du code. Considérez ce processus comme la création d'un environnement sûr pour éviter les problèmes ultérieurs.

1. Sauvegardez votre site Web

Quel que soit le type de site que vous possédez, les sauvegardes sont absolument essentielles. Pourquoi? Parce que si quelque chose ne va pas - un piratage, un conflit de plug-in ou une erreur de code - vous pouvez simplement restaurer une sauvegarde récente pour remettre votre site en marche.

En d'autres termes, la sauvegarde de votre site est le meilleur moyen de protéger votre site Web en cas de problème.

Pour faciliter ce processus, il est préférable d'utiliser un plugin pour s'occuper automatiquement de tout ou générer des copies de votre site Web à la demande.

Bien sûr, nous recommandons Jetpack Backup - une solution complète qui fonctionne en temps réel.

Avec Jetpack, les sauvegardes sont stockées en toute sécurité hors site dans le cloud, il n'y a donc aucune charge sur votre serveur. Et comme une sauvegarde est effectuée à chaque fois que quelque chose change sur votre site, vous pouvez rapidement en restaurer une juste avant qu'une erreur ne se produise, même si votre site est complètement hors ligne.

Si vous choisissez d'utiliser un autre plugin de sauvegarde, cependant, nous vous recommandons d'effectuer une sauvegarde manuelle complète avant de poursuivre les étapes ci-dessous.

2. Utilisez un thème enfant WordPress

Cette mesure ne s'applique que si vous envisagez de modifier votre thème. WordPress vous permet d'apporter les modifications souhaitées au code de n'importe quel thème, mais lorsque vous mettez à jour vers une nouvelle version d'un thème, toutes les personnalisations seront perdues.

Pour éviter cela, vous devrez utiliser un thème enfant. Un thème enfant est un thème secondaire qui extrait les fonctionnalités, fonctionnalités et styles de son thème parent, mais qui ne change pas lorsque vous mettez à jour le parent. Cela signifie que le code que vous ajoutez au thème enfant ne sera pas effacé lorsque vous mettrez à jour le thème parent.

Bien que vous puissiez créer des thèmes enfants manuellement, nous vous recommandons d'utiliser un plugin à la place. L'un des meilleurs outils pour le travail est Child Theme Configurator.

Activez le plugin et allez dans Outils → Thèmes enfants . Sélectionnez l'option pour créer un nouveau thème enfant et sélectionnez votre thème actuel comme parent.

Cliquez sur Analyser et le plugin vérifiera s'il peut créer un thème enfant pour votre sélection. Sous Sélectionner où enregistrer les nouveaux styles, choisissez l'option Feuille de style principale .

Pour l'option de gestion de la feuille de style Sélectionner le thème parent , cliquez sur Utiliser la file d'attente de style WordPress .

Vous pouvez également personnaliser les attributs du thème enfant. Ceux-ci incluent le nom, l'auteur et la description qui apparaîtront lorsque vous naviguez vers Apparence → Thèmes .

Les attributs que vous choisissez sont réservés à un usage interne. Une fois que vous êtes satisfait des paramètres, cliquez sur Créer un nouveau thème enfant.

Si vous accédez à Thèmes → Apparence , le nouveau thème enfant devrait apparaître parmi les thèmes disponibles.

Une fois le thème enfant configuré, vous pouvez commencer à lui ajouter du code personnalisé. Si vous ne savez pas comment ce processus fonctionne, continuez à lire. Nous vous montrerons comment modifier CSS et HTML dans WordPress dans les sections suivantes.

3. Utilisez un site de développement

Le but d'un site Web intermédiaire est de vous aider à tester le nouveau code et les modifications apportées à votre site dans un environnement sûr. Avec un site de développement WordPress, vous pouvez ajouter du code sans avoir à vous soucier des erreurs critiques ou des temps d'arrêt sur votre site Web en direct.

En règle générale, votre hébergeur offrira une fonctionnalité de mise en scène. Il existe plusieurs options pour les plugins de mise en scène WordPress, mais ils peuvent être un peu difficiles à utiliser. Si vous pouvez accéder à la fonctionnalité de mise en scène via votre panneau de contrôle d'hébergement, il sera beaucoup plus facile de créer des copies de votre site et de pousser les modifications de la mise en scène à la production.

Comment éditer du code HTML, CSS et PHP dans WordPress (10 méthodes)

Apprendre à ajouter du HTML à WordPress est beaucoup plus facile que vous ne le pensez. Néanmoins, le processus changera en fonction du type de code que vous souhaitez utiliser. Commençons par parler de l'ajout de HTML à l'aide des éditeurs de blocs et classiques.

1. Comment modifier le code HTML dans l'éditeur de blocs

Cette méthode vous permet de modifier n'importe quelle page ou publication existante à l'aide de HTML dans l'éditeur de blocs. C'est une méthode simple qui ne devrait poser aucun problème si vous êtes familier avec l'éditeur de blocs.

Pour commencer, ouvrez l'éditeur. Une fois que vous pouvez voir le corps de la page ou de la publication, cliquez sur l'icône à trois points dans le coin supérieur droit de l'écran.

Cliquez maintenant sur l'option qui dit Éditeur de code .

La vue dans le corps de l'éditeur passera des blocs au code. Pour chaque bloc, vous verrez une section différente de code HTML.

Gardez à l'esprit que les éditeurs de code WordPress n'incluent aucune fonctionnalité de surbrillance. Cela signifie que tout le code apparaîtra en texte brut. Vous devrez le lire attentivement si vous souhaitez le modifier ou le compléter.

Vous pouvez basculer entre les interfaces visuelles et de code dans l'éditeur de blocs. Lorsque vous êtes satisfait des résultats, enregistrez les modifications apportées à votre message ou à votre page.

2. Comment modifier le code HTML dans l'éditeur classique

La modification du code HTML à l'aide de l'éditeur classique est simple. Ouvrez la page ou la publication sur laquelle vous souhaitez travailler et localisez l'onglet Texte au-dessus du corps du document.

Cliquez sur l'onglet Texte et vous verrez le contenu de l'onglet Visuel apparaître au format texte brut. Par défaut, tout texte que vous ajoutez sans mise en forme n'inclura aucun code HTML.

Vous pouvez rapidement ajouter du formatage et du code HTML à l'aide des boutons en haut de l'éditeur. L'éditeur classique comprend des options pour le texte en gras ou en italique, les liens, les images, les listes et d'autres types de code.

Il y a aussi la possibilité d'ajouter manuellement du code HTML. Si vous êtes familier avec le HTML, vous pouvez l'insérer ou le modifier dans l'onglet Texte comme vous le souhaitez. L'éditeur vous permet de basculer entre les onglets Visuel et Texte pour voir les résultats.

3. Comment éditer le HTML à l'aide de l'éditeur de thème

WordPress vous permet d'accéder et de modifier des fichiers de thème directement depuis votre tableau de bord. Mais si vous envisagez de modifier des fichiers de thème, nous vous recommandons de configurer un thème enfant au préalable.

Pour accéder à l'éditeur de thème, allez dans Apparence → Éditeur de fichier de thème . Sur la page suivante, vous verrez un éditeur de texte en clair à gauche et une liste de fichiers à droite. Cette liste de fichiers correspond au thème que vous choisissez dans le menu déroulant en haut à droite.

Par défaut, l'éditeur de thème s'ouvrira avec le fichier Style.css du thème sur lequel vous travaillez. La plupart des fichiers de thème auxquels vous pouvez accéder à l'aide de l'éditeur impliquent CSS ou PHP. Mais vous pouvez modifier plusieurs composants de thème à l'aide de HTML.

Cependant, dans la plupart des cas, les thèmes enfants n'extraient que les fichiers style.css et functions.php par défaut. Donc, si vous souhaitez modifier un fichier HTML, comme footer.html , vous devrez le copier dans le thème enfant avant d'apporter des modifications à l'aide d'un outil de protocole de transfert de fichiers (FTP) ou du panneau de configuration de votre hébergeur.

À l'aide de l'outil de votre choix, accédez à public_html → wp-content → thèmes → votre thème parent. Recherchez le fichier HTML que vous souhaitez modifier et copiez-le dans le dossier de votre thème enfant. Ensuite, ce fichier sera visible dans l'éditeur de thème WordPress.

Vous pouvez trouver vos fichiers HTML dans l'éditeur de thèmes en sélectionnant votre thème enfant dans le menu déroulant en haut à droite de la page, puis en cliquant sur le fichier dans la liste qui s'affiche.

Nous vous recommandons de n'apporter aucune modification lorsque vous modifiez des fichiers de thème, sauf si vous comprenez précisément ce que fait votre code. Sinon, vous risquez de casser des fonctionnalités critiques du thème et de votre site Web.

4. Comment éditer CSS et PHP dans l'éditeur de thème

Pour accéder à l'éditeur de thème WordPress, rendez-vous dans Apparence → Éditeur de fichier de thème . Vous verrez une liste des fichiers que vous pouvez modifier pour votre thème actif sur l'écran suivant. À gauche, vous verrez un onglet d'éditeur affichant le contenu du fichier que vous sélectionnez.

Par défaut, l'éditeur de thème s'ouvrira sur une feuille de style. Le fichier style.css contiendra tous les styles CSS pour le thème. Ceux-ci incluent des classes, des identifiants, des styles de boutons et bien plus encore.

Vous pouvez apporter les modifications souhaitées au fichier style.css . Lorsque vous avez terminé, cliquez sur Mettre à jour le fichier pour enregistrer les modifications.

Ce même processus s'applique aux fichiers PHP. Sélectionnez le fichier .php que vous souhaitez modifier en utilisant le menu à droite. Dans cet exemple, nous éditons le fichier functions.php .

Éditer du code PHP peut être plus délicat que de travailler avec HTML ou CSS. Avec ce dernier, si vous faites une erreur, cela peut affecter le style de votre site Web. En revanche, un code PHP qui ne fonctionne pas peut entraîner des fonctionnalités cassées.

5. Modification du HTML dans un widget WordPress

Comme vous le savez peut-être, les versions récentes de WordPress vous permettent d'éditer des widgets à l'aide de blocs. Cela signifie qu'au lieu des widgets classiques, vous pouvez utiliser la suite complète d'éléments de l'éditeur de blocs dans vos zones widgetisées.

Pour modifier vos zones de widgets, allez dans Apparence → Widgets . Ici, vous pourrez modifier les sections de widgets disponibles pour votre thème.

Certains blocs peuvent ajouter du code HTML personnalisé à vos zones de widget. Cliquez sur le bouton signe plus à côté de l'en-tête Widgets et sélectionnez le bloc HTML personnalisé .

Ajoutez le code que vous voulez dans le bloc et déplacez-le pour changer son emplacement. Lorsque vous avez terminé, cliquez sur le bouton Mettre à jour dans le coin supérieur droit de l'écran.

6. Modification du HTML via cPanel

Si votre hébergeur propose une installation cPanel pour votre compte, vous pouvez l'utiliser pour gérer et modifier les fichiers de votre site Web.

Pour commencer, connectez-vous à votre compte cPanel et recherchez l'option Gestionnaire de fichiers sous FICHIERS.

Le gestionnaire de fichiers vous permet de naviguer dans les fichiers de votre compte d'hébergement. Selon la structure de votre serveur, vous pourriez vous retrouver face à plusieurs dossiers.

Recherchez l'option qui dit public_html ou www . Ces répertoires doivent contenir les fichiers de votre site WordPress.

C'est ce qu'on appelle la racine WordPress annuaire. Une fois ouvert, vous trouverez plusieurs sous-répertoires et fichiers correspondant à votre site WordPress. Si vous faites un clic droit sur l'un de ces fichiers, vous verrez une option Modifier .

Cliquer sur cette option lancera l'éditeur de texte cPanel. Cet éditeur est très simple comparé à n'importe quel logiciel installé localement. Nous vous recommandons de l'utiliser uniquement pour effectuer des modifications HTML mineures.

Pour des mises à jour de code plus complexes, vous souhaiterez utiliser le protocole de transfert de fichiers (FTP) et un éditeur de texte local. Nous vous montrerons comment procéder dans la section suivante.

7. Modification de HTML, CSS et PHP via FTP

FTP vous permet de vous connecter au serveur de votre site Web afin de pouvoir modifier et télécharger des fichiers. Avec FTP, vous pouvez facilement télécharger un grand nombre de fichiers. Ce processus prendrait du temps et serait difficile si vous essayiez de le faire directement via le tableau de bord WordPress.

Plus important encore, FTP peut éditer des fichiers WordPress et ajouter du code HTML, CSS ou PHP à l'aide de n'importe quel éditeur de texte local de votre choix.

Pour vous connecter à votre site Web via FTP, vous aurez besoin d'un client (comme FileZilla) et d'un ensemble d'informations d'identification. La plupart des hébergeurs vous fournissent des informations d'identification FTP lors de l'inscription. Sinon, vous devriez pouvoir créer un nouveau compte FTP via le panneau de contrôle de l'hébergement.

Entrez vos informations d'identification FTP dans votre client FTP préféré et connectez-vous au serveur. Une fois que vous avez établi une connexion, vous verrez une liste de dossiers et de fichiers.

Avec une connexion FTP, vous obtenez un accès complet à tous les fichiers et dossiers de votre compte. Pour trouver vos fichiers WordPress, recherchez le répertoire appelé public , public_html ou www . Ce sont les noms les plus courants pour la racine WordPress annuaire.

Ouvrez le répertoire et localisez le fichier que vous souhaitez modifier. Faites un clic droit dessus et sélectionnez l'option qui dit Modifier . Dans ces exemples, nous utilisons FileZilla, donc le menu affiche View/Edit .

L'option Afficher/Modifier ouvrira le fichier à l'aide de votre éditeur de texte local par défaut. Contrairement à cPanel ou WordPress, les éditeurs dédiés facilitent grandement l'ajout et l'interaction avec le code.

Dans cet exemple, nous modifions wp-config.php , qui est un fichier principal de WordPress.

Vous pouvez ajouter ou modifier n'importe quel type de code à l'aide d'un éditeur de texte. Cela inclut HTML, CSS et PHP. La seule limitation est votre connaissance de chaque langue particulière.

Une fois que vous avez terminé d'ajouter ou de modifier le code WordPress, enregistrez les modifications apportées au fichier et fermez-le. Votre client FTP vous demandera si vous souhaitez remplacer la version existante de ce fichier sur le serveur. Sélectionnez Oui, et c'est tout.

8. Ajout de classes CSS à l'aide de l'éditeur de blocs

Si vous souhaitez utiliser CSS pour personnaliser l'apparence des blocs, l'éditeur de blocs vous permet d'ajouter des classes à n'importe quel élément. Ce processus est également très simple.

Pour ajouter des classes CSS à un bloc, cliquez dessus et ouvrez l'onglet Paramètres . Ensuite, recherchez l'onglet Avancé en bas des paramètres de bloc.

Vous pouvez utiliser le champ Classe(s) CSS supplémentaire(s) pour ajouter une ou plusieurs classes CSS à un bloc spécifique. L'effet que ces classes auront dépend du CSS personnalisé WordPress que vous ajoutez.

9. Comment modifier le CSS dans WordPress Customizer

Le personnalisateur WordPress peut apporter des modifications à l'ensemble du site au style et à la mise en page de votre site Web via une interface visuelle.

Pour accéder au Customizer, allez dans Apparence → Personnaliser . Sur l'écran suivant, vous verrez un menu à gauche et un aperçu de votre site à droite.

L'onglet CSS supplémentaire vous donnera accès à un éditeur de base pour ajouter du CSS personnalisé à votre site Web.

L'ajout de CSS à l'aide du personnalisateur WordPress vous permet de prévisualiser les modifications instantanément.

10. Modification du CSS à l'aide d'un plugin WordPress

Certains plugins WordPress proposent des méthodes alternatives pour ajouter du code personnalisé à WordPress. Dans la plupart des cas, ces plugins visent à vous aider à ajouter du CSS ou du JavaScript personnalisé à WordPress.

Un exemple est Simple Custom CSS et JS. Ce plugin particulier peut ajouter du code CSS, JS et HTML personnalisé à WordPress à partir d'un simple menu.

La sélection de l'option Ajouter un code CSS ouvrira un éditeur. Vous pouvez utiliser cet éditeur pour insérer du CSS personnalisé et choisir où le code ira dans vos fichiers.

Bien que l'ajout de CSS personnalisé avec des plugins soit simple, nous vous déconseillons cette méthode. WordPress vous offre de nombreuses options intégrées pour ajouter et modifier du code CSS. Si vous souhaitez une approche plus pratique, vous pouvez toujours utiliser FTP.

Si vous comptez sur un plugin pour ajouter du CSS personnalisé, le code peut disparaître si vous désinstallez le plugin. De plus, différents plugins ajouteront du code en utilisant des méthodes uniques, de sorte que vos résultats varieront en fonction de l'outil que vous utilisez.

Pouvez-vous ajouter du code JavaScript à WordPress ?

WordPress ne fournit aucune fonctionnalité intégrée pour ajouter du code JavaScript à votre site Web. Contrairement à HTML et CSS, vos seules options avec JavaScript sont d'utiliser des plugins ou d'ajouter le code manuellement via l'éditeur de thème ou FTP.

Habituellement, la façon la plus simple d'ajouter du code JavaScript est d'utiliser un plugin. Si vous choisissez l'approche manuelle, vous pouvez utiliser JavaScript avec WordPress avec la fonction de « mise en file d'attente » de PHP.

Devez-vous optimiser votre code WordPress pour de meilleures performances ?

L'optimisation du code est un terme large qui englobe plusieurs pratiques. Ceux-ci garantissent que votre code s'exécute aussi bien que possible et ne prend pas beaucoup d'espace sur le serveur.

Dans l'ensemble, les extraits de code ne devraient pas occuper trop d'espace de stockage. Pourtant, vous pouvez réduire l'espace qu'ils occupent en utilisant la "minification".

La minification prend votre code HTML et CSS personnalisé et supprime les espaces vides ou les caractères inutiles. Pour vous donner un exemple, voici un simple extrait de code CSS personnalisé :

 p { text-align: center; color: red; }

Si vous prenez ce code et le minimisez, il ressemblera à ceci :

 p{text-align:center;color:red}

La sortie du code reste la même, mais la taille du fichier résultant peut être plus petite. En pratique, la minification du code HTML et CSS ne vous fournira souvent pas de résultats significatifs.

L'exception est lorsque vous avez affaire à des bibliothèques de code massives. Toute réduction de taille entraînera des temps de chargement plus courts pour les visiteurs.

De plus, choisissez soigneusement votre source de code tierce. S'appuyer sur des sites Web réputés et des forums de développeurs experts peut garantir que votre code est efficace, sûr et fonctionnel. En revanche, les extraits aléatoires de blogs inconnus sont plus susceptibles de causer des problèmes, de ralentir votre site et potentiellement de le casser.

Personnalisez WordPress en utilisant HTML, CSS et PHP

Apprendre à ajouter et à modifier du code dans WordPress est plus facile que vous ne le pensez. Même si vous n'êtes pas un développeur, vous pouvez souvent trouver du code qui correspond à vos besoins avec un peu de recherche sur Google. Savoir comment insérer ce code en toute sécurité peut vous permettre de personnaliser votre site Web d'une manière que les plugins seuls ne pourraient peut-être pas faire.

Avant de commencer à apporter des modifications au code de votre site, nous vous recommandons de créer une sauvegarde complète. Si vous allez modifier le CSS ou le PHP de votre thème, vous voudrez également utiliser un thème enfant. Selon l'hébergeur que vous utilisez, vous pouvez également avoir accès à la fonctionnalité de mise en scène. Nous vous recommandons d'utiliser un site Web intermédiaire lors de la modification du code pour des raisons de sécurité.