Jars

Spécialiste WordPress

Spécialiste SEO

Writer

Guitariste

Afro.Num

0

Votre panier est vide.

Jars

Spécialiste WordPress

Spécialiste SEO

Writer

Guitariste

Afro.Num

Article

Quand et comment utiliser du code sur un site WordPress ?

juin 9, 2021 Développement Web, WordPress
Quand et comment utiliser du code sur un site WordPress ?

Comme je le disais dans un article précédent, WordPress devient un outil entièrement personnalisable lorsqu’on le maîtrise et qu’on sait y joindre du code. Dans cet article, j’exposerai les raisons qui pourraient faire recourir  à une utilisation de code sur WordPress et je prendrai le soin de notifier comment cela peut se faire.

Modification d’une page ou d’un article WordPress

Pour modifier votre page web depuis le tableau de bord en vous servant de WordPress, il vous suffira de vous servir de l’éditeur de code intégré à votre page builder. Si vous utilisez Gutenberg (l’éditeur classique de WordPress) il vous suffit de trouver l’éditeur de bloc pour en faire un bon usage.  Il est tout de même préférable de n’utiliser cette section que quand on souhaite coder une section de sa page, et non la page entière. Quand vous voudrez modifier le code de la page entière, vous devrez faire recours à une alternative que nous verrons dans la suite.

Pour écrire du HTML, trouvez sur l’éditeur classique et désormais sur Elementor ( qui est une page builder très utilisée aujourd’hui) le bloc ‘’HTML Personnalisé’’ et écrivez votre code.

Quand vous voudrez modifier le HTML de toute une section, il vous suffira de cliquer sur les trois points en haut de cette section vers la droite et de choisir l’option : Modifier en HTML.

Quand vous voudrez modifier le HTML de l’ensemble de votre article, il vous suffira de cliquer sur les paramètres de la page dans l’angle droit (Menu déroulant>outils et options) ou vous pouvez utiliser le raccourci Ctrl + Shift + Alt + M qui vous permettra d’accéder à l’éditeur de codes de la page.

Modification de la description d’un produit (WooCommerce) ou d’un bloc de texte sur Elementor

La plupart des interfaces WordPress utilise l’éditeur TinyMCE. C’est un éditeur très simple qui s’utilise un peu comme le logiciel d’écriture Word ! Il vous suffira d’écrire votre texte et de le mettre en forme à votre guise. Quand vous voudrez modifier le code source de cet éditeur beaucoup plus utilisé au niveau des produits ( avec WooCommerce), ou au niveau d’Elementor ( une section de paragraphe ou de texte),il vous suffira de cliquer sur l’onglet ‘’Text’’

Modification du thème WordPress utilisé

Ici, il est souvent conseillé d’opter pour une modification du code source du thème enfant ou child-theme. Un thème enfant… ? Je vous explique.

Chaque thème WordPress conditionne l’apparence du site WordPress et a ses propres fichiers dans le dossier wp-content. Ce même thème a aussi un second thème identique qui comporte aussi les fonctionnalités de base du thème et qui, surtout, permet de modifier le code source du thème parent sans le toucher. Un exemple : je suppose que vous voulez modifier l’apparence d’un thème qui s’appelle ‘’Jars’’. Ce thème est le thème parent et il a une autre version de qu’on appelle le thème enfant. Ce thème enfant est dénommé child-theme. Lorsque vous voudrez modifier son code, il vous suffira de modifier le code du thème enfant. Les avantages de cette pratique sont énormes : cela vous évite de générer un bug dans tout le site et vous permet surtout de revenir rapidement en arrière au cas où vous aurez endommagé le code source du site. Le thème enfant est souvent fourni lorsqu’il s’agit d’un thème Premium et on peut le créer lorsqu’il s’agit d’un thème retrouvé sur l’interface de thèmes de WordPress.

Modifier le code d’une extension WordPress

Bien évidemment, qui parle d’extension parle de fichiers de codes sources qui s’exécutent au besoin. Quand il s’agira de modifier une extension, il sera donc question de retrouver le fichier de l’extension pour le modifier. Il arrive, en effet que l’on veuille changer l’apparence d’un plugin, ou que l’on veuille y ajouter une autre fonctionnalité. Il y a d’autres pratiques auxquelles vous pourrez recourir au besoin.

Utiliser une extension WordPress pour modifier le code de son thème.

Lorsqu’il s’agira d’insérer des bouts de codes sur WordPress (par exemple, si vous voulez insérer dans le head un pixel de vérification, ou dans le footer une API de Tidio ou autres),il est conseillé d’opter pour une extension qui évite de casser le site en cas d’erreurs. Il existe plusieurs extensions pour cela ( Visual developper ou CSS Hero quand il s’agira d’ajouter ou de modifier du CSS, Code Snippets quand il s’agira de modifier le fichier functions.php,  Insert Headers and Footers  pour modifier le footer ou le header).

Modifier un thème WordPress sans extension, et sans recourir aux fichiers

Lorsque vous avez un bout de codes à ajouter à votre site WordPress, il vous suffit de le faire en éditant le thème directement sur WordPress. Tableau de bord > Apparences > Éditer le thème. Attention ! Préférez une modification du thème enfant si vous en avez. Dans le cas contraire, pensez  à la créer avant de faire une modification que ce sera.

Avec cette interface, vous avez accès  à plusieurs fichiers PHP et autres comme le fichier styles.css qui contient les informations de votre thème. Vous pourrez modifier ces fichiers comme vous voudrez. Absolument pas la mer à boire ; sauf qu’il faudra faire attention !

Ajouter du CSS à votre thème

Lorsque vous serez en train de développer un projet plus ou moins complexe, vous pourriez vouloir modifier l’apparence globale de votre site en modifiant son CSS. Pour cela :

Tableau de bord > Personnalisation > Ajouter du CSS

5/5

Et voilà ! Ce n’est pas sorcier et ce n’est pas de la Maggie. Modifier entièrement un thème, une extension ou recoder son thème n’est pas aussi compliqué qu’on pourrait l’imaginer. Surtout, si vous êtes un habitué du code, vous pouvez bien être à l’aise sur WordPress ! Il vous suffira de vous y mettre. Ne manquez pas de me notifier en commentaires vos impressions sur cet article.

Étiquettes:
2 Comments
  • Orpheric ALLAGBE 4:38 juin 19, 2021 Répondre

    Waohh ! Du bon boulot….
    C’était l’une de mes difficultés avant, pour moi, la possibilité de coder difficilement sur WordPress, constituait en moi un blocage, à rentrer dans l’univers des CMS. Je me souviens même récemment avoir refusé deux commandes de personnalisation de thèmes WordPress et d’intégration de moyens de paiements sur woocommerce. Tellement j’avais la flemme d’entrer dans les CMS, puisque je voulais à tout prix coder tout, absolument tout sans CMS.
    Je comprend maintenant à l’adage qui dit <>.

    Merci Ricardo

Commenter