L’utilisation d’un CMS comme WordPress facilite la création d’un site. Cependant, il est parfois nécessaire d’ajouter du code CSS ou HTML personnalisé ou de modifier un code existant afin de pouvoir créer ou personnaliser un type de contenu, de style ou de mise en page.

Heureusement, dans WordPress, nous pouvons facilement modifier le code HTML et CSS du thème, du site ou simplement de certains contenus.

Dans les prochaines parties de ce didacticiel, vous apprendrez à modifier le code Web et à l’ajouter à votre site WordPress.

Soumettez votre projet gratuitement sur Codeur.com, recevez quinze offres et choisissez le fournisseur WordPress idéal.

Trouvez un expert WordPress

Modifier le code HTML pour des pages ou des articles spécifiques

Le changement ouAjouter un code HTMLMême CSS est possible directement lors de la modification d’une page ou d’un article spécifique. Il existe de nombreuses façons d’ajouter du code dans l’éditeur Gutenberg de WordPress, mais il est tout à fait possible de le faire en utilisant également l’éditeur classique.

Voici les différentes façons d’interagir avec le code à l’aide de l’éditeur classique ou de Gutenberg.

Apportez des modifications au code HTML à l’aide de l’éditeur classique

Si vous avez déjà utilisé l’éditeur classique de WordPress, vous aurez sûrement remarqué les deux onglets en haut à droite de la fenêtre d’édition:

C’est de l’onglet texte Que vous pouvez modifier ou ajouter du code HTML ou CSS à l’article ou à la page que vous modifiez.

Éditeur HTML WordPress

L’onglet  » Visuellement « Cela vous permet de voir le résultat visuel de votre page après avoir écrit le code dans le » texte »Revenez simplement à l’onglet« Visuellement Pour suivre le résultat de votre code en direct.

Vous pouvez ajouter du code CSS en modifiant l’attribut de style des balises HTML pour apporter des modifications de style uniquement à ces balises.

Cependant, vous ne pouvez pas ajouter de contenu de conception complexe directement dans l’éditeur de texte WordPress classique.

Changez le HTML de vos pages et articles avec Gutenberg

Il existe plusieurs façons d’ajouter ou de modifier du code HTML / CSS dans l’éditeur WordPress Gutenberg. Personne n’est pire que l’autre, ils sont simplement différents et vous pouvez utiliser ce qui vous convient le mieux en fonction de la disposition de l’espace de travail dans l’éditeur ou du contenu que vous éditez.

Ajouter un bloc HTML personnalisé sur Gutenberg

La première façon d’ajouter du HTML consiste simplement à ajouter un bloc.  » HTML personnalisé À votre page ou à votre article. Ce bloc ouvre une fenêtre d’édition dans laquelle vous pouvez écrire votre code HTML.

HTML personnalisé Gutenberg WordPress

Tout comme l’éditeur classique, vous pouvez modifier l’attribut « style » des balises HTML que vous écrivez, mais contrairement à l’éditeur classique, que vous pouvez ajouter code CSS complexe directement dans ce bloc grâce aux balises <style></style> ::

HTML personnalisé Gutenberg WordPress

Modifier le contenu HTML sur Gutenberg

La deuxième méthode pour ajouter du code HTML et CSS consiste à sélectionner le contenu (paragraphe, titre, etc.) que vous souhaitez modifier, puis à cliquer trois points verticaux En haut de la barre supérieure ou dans le menu flottant, sélectionnez l’option  » Modifier en HTML « . Le contenu sélectionné change et s’affiche dans une fenêtre d’édition HTML.

Édition WordPress HTML Gutenberg

Vous pouvez changer l’attribut « style » des balises HTML pour changer le CSS. En revanche, vous ne pouvez pas ajouter de code CSS complexe aux balises. <style></style> comme vous pourriez avec la première méthode, le bloc « HTML personnalisé ».

Pour voir le résultat de vos modifications, retournez simplement au menu déroulant et cliquez sur  » Modifier visuellement « . Cela vous ramène à l’édition visuelle de votre contenu.

Utilisez l’éditeur de code Gutenberg

La dernière technique que nous vous proposons ici pour changer le code HTML de vos pages ou articles avec l’éditeur Gutenberg de WordPress est d’utiliser l’option d’affichage  » Éditeur de code ».

Vous pouvez trouver cette option dans le menu en haut à droite de votre éditeur.  » Plus d’outils et d’options « Où vous avez le choix entre différents outils et options, y compris l’option visuelle avec » Éditeur visuel « ou alors » Éditeur de code ».

L’éditeur visuel est sélectionné par défaut. Cliquer sur  » Éditeur de code Pour passer à l’affichage du HTML pour tout votre contenu et modifier le HTML.

Édition WordPress HTML Gutenberg

Vous pouvez également utiliser le raccourci clavier suivant « CTRL + MAJ + ALT + M » dans Windows pour afficher l’éditeur de code. Utilisez à nouveau ce raccourci pour revenir à l’éditeur visuel.

L’utilisation des balises <style></style> ne sera pas possible là non plus dans cet éditeur de code, mais comme partout vous pouvez changer le CSS des balises avec l’attribut « style » de chaque balise HTML.

Trouvez le meilleur fournisseur WordPress sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans engagement

Déjà plus de 75000 clients

Trouvez un expert WordPress

Ajouter du CSS personnalisé au thème WordPress

Si vous souhaitez simplement ajouter du code CSS personnalisé à votre thème WordPress, il existe une option pour cela dans WordPress.

Dans le menu principal de WordPress, accédez à  » Voir « Puis la sous-catégorie » Personnaliser »:

Personnaliser le CSS WordPress

Vous serez ensuite dirigé vers l’édition générale de votre sujet. De là, vous pouvez ajouter un code CSS personnalisé en cliquant sur  » CSS supplémentaire Ensuite, écrivez le code CSS dans la zone d’édition fournie:

Ajout de CSS supplémentaire sur WordPress

Il existe d’autres solutions pour ajouter du CSS personnalisé à votre thème ou à une page / publication spécifique. Nous l’avons vu dans la partie précédente lors de la modification du HTML, mais voici d’autres moyens de modifier le CSS personnalisé sur votre site WordPress:

  • Utilisez un plugin de création de page tel que Générateur de pages Elementor ou alors Plugin Divi Builder qui offrent l’ajout d’un CSS personnalisé lors de l’édition du contenu d’une page / article via son interface utilisateur.
  • Installez une extension plus légère qu’un générateur de page afin de pouvoir facilement ajouter du CSS personnalisé à vos sujets, publications ou pages. Sous ces extensions, vous trouverez CSS simple cela fait très bien son travail.
  • Créez une feuille de style personnalisée et ajoutez-la à votre thème pour ajouter de nombreux changements de style à mesure que votre CSS devient grand ou complexe. Par conséquent, Suivez notre tutoriel pour créer un sous-thème dans WordPress.

Personnalisez le CSS ou PHP du thème

Dans certaines situations, vous devez apporter une modification HTML, CSS ou PHP directement à vos fichiers de rubrique. Lorsque vous vous trouvez dans cette situation, la chose la plus importante à faire est de faire attention aux fichiers que vous avez modifiés et aux fichiers ajoutés, supprimés et modifiés dans ces fichiers.

Une erreur d’édition, la suppression d’une ligne de code importante ou l’ajout du mauvais code peut complètement endommager votre sujet et votre site Web Rendez votre site inaccessible. Il est donc important de savoir ce que vous faites lorsque vous mettez vos mains au cœur de votre sujet.

Il est fortement recommandé de ne pas changer de sujet directement, mais de le changerUtilisez un sous-sujet où vous apportez les modifications HTML, CSS ou PHP. Cela permet de protéger votre sujet et de ne perdre aucune modification de code lorsque votre sujet est mis à jour.

Pour personnaliser le code du thème WordPress que vous utilisez, vous pouvez utiliser l’éditeur de code WordPress dans le tableau de bord. Cela peut être fait dans le  » Voir « Puis » Éditeur de thème ».

Cet éditeur vous donne accès à tous les fichiers de votre thème, que vous pouvez ajuster avec soin:

Modifier le thème WordPress

Une deuxième façon d’accéder et de modifier les fichiers de votre rubrique consiste à utiliser une connexion SFTP (ou FTP) que votre hôte vous fournit et à laquelle vous vous connectez via un client FTP tel que FileZilla peut produire.

Conclusion

L’adaptation du HTML et du CSS peut se faire directement via les éditeurs visuels ou de code intégrés à WordPress. Cela facilite la personnalisation, mais limite parfois vos options. Cependant, si vous devez apporter des modifications plus complexes ou PHP, vous devrez modifier vos fichiers de rubrique, ce qui peut être dangereux si vous vous trompez. Nous vous recommandons donc d’éviter les failles de sécurité et les erreurs dans le code Créer un sujet enfant (également appelé sous-rubrique) où vous pouvez modifier le code que vous souhaitez en toute sécurité!

N’hésitez pas à placer une annonce gratuite sur Codeur.com pour trouver rapidement de l’aide auprès d’un pigiste qui peut vous aider à personnaliser votre thème en toute sécurité et à créer le look que vous souhaitez.



Source link

Recent Posts