{"id":59448,"date":"2021-10-28T08:35:16","date_gmt":"2021-10-28T08:35:16","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-du-code-personnalise-a-votre-site-wordpress-cest-plus-facile-que\/"},"modified":"2021-10-28T08:35:16","modified_gmt":"2021-10-28T08:35:16","slug":"comment-ajouter-du-code-personnalise-a-votre-site-wordpress-cest-plus-facile-que","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-du-code-personnalise-a-votre-site-wordpress-cest-plus-facile-que\/","title":{"rendered":"Comment ajouter du code personnalis\u00e9 \u00e0 votre site WordPress (c’est plus facile que …"},"content":{"rendered":"

\n<\/p>\n

\u00c9crire du PHP, du CSS et du HTML5 pour modifier un site WordPress peut \u00eatre assez frustrant, mais un bon guide peut le rendre plus facile. Ce n’est pas ce guide. Il s’agit simplement de savoir comment ajouter le code \u00e0 votre site une fois que c’est fait. Ne vous inqui\u00e9tez pas cependant, c’est tout aussi important. Comme il existe plusieurs fa\u00e7ons de le faire, il est utile de conna\u00eetre les diff\u00e9rences entre les diff\u00e9rentes options. Mais d’abord, deux mises en garde :<\/p>\n

    \n
  1. Avant de modifier quoi que ce soit, veuillez faire une copie de sauvegarde. En fait, continuez \u00e0 soutenir leur travail tout au long du processus. Il est \u00e9galement utile d’avoir un fichier s\u00e9par\u00e9 dans lequel coller des extraits de code supprim\u00e9s ou bient\u00f4t utilis\u00e9s.<\/li>\n
  2. Si vous avez install\u00e9 le th\u00e8me de quelqu’un d’autre, n’ajoutez jamais de code aux fichiers functions.php ou style.css de votre th\u00e8me. Si vous le faites, lorsque le th\u00e8me est mis \u00e0 jour, tout votre travail acharn\u00e9 aura disparu.<\/li>\n<\/ol>\n

    Tout au long de la suite de cet article, j’explorerai quelques alternatives, class\u00e9es de la plus simple \u00e0 la plus complexe.<\/p>\n

    <\/span>Plugins WordPress<\/span><\/h2>\n

    \"Plugins<\/p>\n

    Tout comme il existe plusieurs types de modification de code, il existe plusieurs types de plug-ins de code personnalis\u00e9s. Les 2 types les plus courants sont PHP et CSS. Comme vous le savez peut-\u00eatre, PHP r\u00e9git l’architecture et le fonctionnement de WordPress. Donc, si vous essayez de modifier les principales fonctions de votre site Web, d’ajouter ou de modifier une fonction, il existe de nombreux plugins PHP disponibles en t\u00e9l\u00e9chargement qui vous aideront avec cela.<\/p>\n

    De m\u00eame, vous savez probablement aussi ce que fait CSS – il embellit les choses. Et si c’est tout ce que vous voulez modifier, un plugin CSS personnalis\u00e9 vous permettra de le faire avec un minimum de tracas. JavaScript, qui a une relation complexe avec les plugins, se cache en arri\u00e8re-plan. Pour clarifier, c’est un peu diff\u00e9rent car cela fonctionne parfaitement si vous l’ajoutez \u00e0 l’en-t\u00eate, au pied de page ou \u00e0 un sujet enfant, mais pour l’utiliser dans un article, vous devez utiliser un plugin sp\u00e9cial. Quelque chose comme CSS et Javascript Toolbox devrait fonctionner. En passant, pour des raisons de vitesse de votre page, il est pr\u00e9f\u00e9rable de le mettre dans le pied de page.<\/p>\n

    <\/span>\u00c9crivez vos propres plugins<\/span><\/h2>\n

    Il existe des tonnes d’extraits de code WordPress disponibles sur Internet pour changer, d\u00e9sactiver ou modifier certaines fonctions. Cependant, savoir o\u00f9 les placer est essentiel \u00e0 la fonctionnalit\u00e9. Par exemple, si vous avez un extrait qui modifie la fonction d’un plugin, vous voulez qu’il fonctionne quel que soit le th\u00e8me que vous avez activ\u00e9. Il en va de m\u00eame pour les extraits de code qui traitent des modifications \u00e0 l’\u00e9chelle du site. Donc, dans tous les cas, ce pourrait \u00eatre une bonne id\u00e9e de cr\u00e9er un nouveau plugin pour eux. Ne vous inqui\u00e9tez pas, ce n’est pas aussi intimidant qu’il y para\u00eet.<\/p>\n

    L’un des principaux avantages de la cr\u00e9ation d’un plugin est qu’il vous permettra d’activer ou de d\u00e9sactiver le plugin \u00e0 la demande. Il vous permet \u00e9galement d’afficher des informations contextuelles sur le plugin sur les pages du plugin. Le seul inconv\u00e9nient majeur est que toute autre personne ayant la permission de modifier le site peut le d\u00e9sactiver accidentellement, mais un avertissement s\u00e9v\u00e8re devrait pouvoir l’emp\u00eacher.<\/p>\n

    En remarque, vous pouvez \u00e9galement cr\u00e9er un dossier appel\u00e9 mu-plugins dans votre dossier wp-content. Tout fichier PHP ins\u00e9r\u00e9 \u00e0 cet endroit s’ex\u00e9cutera toujours et ne pourra pas \u00eatre activ\u00e9 ou d\u00e9sactiv\u00e9. Cela maintient le code personnalis\u00e9 hors des dossiers de th\u00e8me et de plug-in. Mais ne le faites qu’avec des plugins que vous vous sentez toujours \u00e0 l’aise d’ex\u00e9cuter en arri\u00e8re-plan.<\/p>\n

    <\/span>Fichiers CSS personnalis\u00e9s<\/span><\/h2>\n

    Si les modifications que vous envisagez sont mineures, vous pouvez cr\u00e9er un fichier custom-style.css. Si vous souhaitez pr\u00e9visualiser vos modifications avant de les apporter, vous pouvez toujours utiliser DevTools si vous utilisez Chrome ou une application similaire. Une autre possibilit\u00e9 consiste \u00e0 ajouter du CSS personnalis\u00e9 via votre th\u00e8me WordPress. Certains th\u00e8mes premium, comme notre framework Total, incluent une option de panneau de th\u00e8me pour ajouter un CSS personnalis\u00e9 o\u00f9 vous pouvez facilement le trouver et le modifier. De plus, lorsque vous mettez \u00e0 jour votre th\u00e8me, les param\u00e8tres du tableau de bord de votre th\u00e8me ne doivent pas \u00eatre modifi\u00e9s, de sorte que votre CSS personnalis\u00e9 reste intact.<\/p>\n

    N’oubliez pas que CSS est r\u00e9troactif, ce qui signifie que les r\u00e8gles qui apparaissent plus tard ont toujours la priorit\u00e9 sur les r\u00e8gles qui apparaissent plus t\u00f4t. Ainsi, tout CSS appliqu\u00e9 \u00e0 une feuille distincte remplacera le code par d\u00e9faut de la page. Cela s’applique \u00e9galement au CSS int\u00e9gr\u00e9 dans …<\/p>\n

    <\/span>Th\u00e8mes WordPress pour enfants<\/span><\/h2>\n

    \"Cr\u00e9er<\/p>\n

    Pour les non-initi\u00e9s, un th\u00e8me enfant h\u00e9rite des fonctionnalit\u00e9s d’un autre th\u00e8me, vous permettant de modifier sa mise en page \u00e0 volont\u00e9 (vous pouvez apprendre tout ce que vous voulez savoir dans notre guide des th\u00e8mes enfants WordPress). Ils ont \u00e9t\u00e9 invent\u00e9s dans le but pr\u00e9cis de vous permettre de modifier un th\u00e8me sans perdre les modifications lors de la mise \u00e0 jour. Les th\u00e8mes enfants refl\u00e8tent toutes les modifications que vous apportez au th\u00e8me externe ou “principal”. Par cons\u00e9quent, comme pour l’application d’un effet de calque Photoshop, vous ne modifiez pas r\u00e9ellement le contenu ; vous pouvez le supprimer \u00e0 tout moment pour que les choses redeviennent comme avant.<\/p>\n

    Cr\u00e9er un th\u00e8me enfant lorsque vous souhaitez modifier votre code vous \u00e9vitera bien des maux de t\u00eate et est assez simple (au fur et \u00e0 mesure que les modifications de WordPress progressent). Acc\u00e9dez simplement \u00e0 votre site via FTP et cr\u00e9ez un dossier, puis cr\u00e9ez un fichier style.css qui correspond \u00e0 ce dossier. Il est de pratique courante de le nommer sujet-nom-enfant. Apr\u00e8s cela, tout ce dont vous avez besoin est une ligne dans l’en-t\u00eate de votre nouveau style.css pour d\u00e9finir le mod\u00e8le. Mais il y a aussi des choses utiles \u00e0 avoir, qui peuvent \u00eatre trouv\u00e9es sur la page WordPress Codex.<\/p>\n

    Apportez ensuite les modifications n\u00e9cessaires au sujet actuel sous la ligne @import. Le seul inconv\u00e9nient des th\u00e8mes enfants est la quantit\u00e9 de recherches que vous devez effectuer sur le th\u00e8me principal avant de pouvoir le modifier, sans provoquer d’effets secondaires ou de conflits \u00e9tranges. Et rappelez-vous qu’avec les th\u00e8mes enfants, il vous suffit de sp\u00e9cifier ce qui sera diff\u00e9rent du th\u00e8me d’origine. Pour appliquer les modifications, il suffit de ZIP, de le t\u00e9l\u00e9charger via la page Apparences> Th\u00e8mes de votre tableau de bord WordPress et de l’activer via WordPress. Cela suppose que votre th\u00e8me principal est \u00e9galement charg\u00e9, bien s\u00fbr.<\/p>\n

    <\/span>Affichage du code<\/span><\/h2>\n

    \"Affichage<\/p>\n

    Il existe un autre type de code d’ajout que nous n’avons pas abord\u00e9\u00a0: l’afficher. Si vous \u00eates un concepteur de sites Web et que vous souhaitez montrer comment quelque chose est fait, pr\u00e9sent\u00e9 d’une mani\u00e8re que les t\u00e9l\u00e9spectateurs peuvent copier et coller, il est important de l’\u00e9crire de la bonne mani\u00e8re. La fa\u00e7on dont WordPress interpr\u00e9tera votre code d\u00e9pend de l’utilisation ou non de la section HTML de Visual Post Editor. Le saisir directement dans l’\u00e9diteur visuel fonctionnera pour le neutraliser, mais il n’y a aucun moyen de le mettre dans le bon format ou dans une bo\u00eete de code. L’\u00e9diteur visuel le formatera simplement de la m\u00eame mani\u00e8re que du texte normal. D’un autre c\u00f4t\u00e9, l’\u00e9diteur HTML le convertira en code et ruinera votre site Web. Ne vous inqui\u00e9tez pas, vous pouvez annuler cela.<\/p>\n

    Cependant, il existe un compromis. Vous pouvez surligner et mettre votre code dans un bloc \u00e0 l’aide des balises et , mais cela n’emp\u00eachera pas le code de se d\u00e9clencher. Il ne vous restera plus qu’\u00e0 le mettre dans la police montoype, dans une case, pour montrer qu’il s’agit officiellement de code. Pour l’emp\u00eacher de s’activer, vous devez remplacer les symboles actifs par ce que l’on appelle des entit\u00e9s de personnages amusants. Les versions les plus courantes de celles-ci, et celles qui suffisent \u00e0 neutraliser la plupart du code, changent respectivement (vous pouvez en savoir plus sur l’affichage du code dans notre article sur la fa\u00e7on d’\u00e9crire du code personnalis\u00e9 dans vos articles WordPress).<\/p>\n

    Comme vous pouvez le voir, il existe de nombreuses fa\u00e7ons d’ajouter du code personnalis\u00e9 \u00e0 WordPress, et je vous encourage \u00e0 exp\u00e9rimenter, \u00e0 jouer avec eux et \u00e0 voir lesquels vous conviennent. Y a-t-il d’autres fa\u00e7ons d’ajouter du code personnalis\u00e9 que j’ai manqu\u00e9es\u00a0? Faites-moi savoir dans les commentaires.<\/p>\n

    \n
    \n

    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n