WordPress et CMS 3/4

Modification de WordPress

Un travail classique dans la gestion d’un site WordPress est la customisation d’un élément de WordPress. Une solution a faible cout est une intervention sur le CSS de WordPress directement dans l’éditeur de WordPress, via le menu « Apparence »  > « Editeur de thème » puis la première « Je comprends »

Regardez bien que vous êtes sur la « Feuille de style style.css » en haut à droite.

Supposons que vous souhaitez cacher la zone indiquée en vert sur ce template et que vous ne trouviez par l’option dans le backoffice:

La solution vient d’une modification en CSS de cet élément que l’on doit en premier trouver grâce aux outils de développement Web de votre navigateur. L’accès à cet outil sous Chrome peut se faire via une sélection de l’élément et click droit « Inspecter »:

Dans la zone en bas de Chrome s’ouvre une séries d’outils très utile pour tout développement Web y compris pour WordPress.

Grâce à l’inspecteur nous pouvons identifier l’élément HTML qui gère cette partie que nous voulons modifier et tester en réel l’impact des instructions CSS sur le site. En surlignant aussi dans l’onglet « Elements » nous vérifions que nous englobons bien l’icone et le mot  » Un commentaire »

Testons la modification de CSS directement sur Chrome dans l’éditeur de style sur le tag <li> nous ajoutons « display:none; »  sur « element.style » à droite:

Bien sur cette modification n’est pas pérènne, nous devons identifier de manière unique l’ID ou la classe de ce tag <li> pour faire une règle CSS plus viable.

Nous surlignons toujours à gauche le bon tag, à droite on désactive la règle de « element style », et en faisant un clic à droite sur le + on ajout une règle pour le tag « li.post-comment-link.meta-wrapper » qui identifie de manière précise notre tag.

Une fois que l’on a vérifier que cette règle est opérationnelle:

Nous pouvons copier cette règle dans notre fichier style.css via l’éditeur de style dans le backoffice de WordPress sinon la règle ne serait que temporairement dans notre navigateur. Ajoutons cette règle avec un commentaire dans le fichier style.css en toute fin du fichier pour que toutes les règles s’appliquent avant:

« Mettre à jour le fichier » et aller vérifier sur le site en frontal avec encore une fois un clic droit Inspecter sur la zone où devrait être le commentaire:

Nous pouvons inspecter et aller consulter la ligne du fichier CSS en cliquant sur la feuille de style pour vérifier que tout est fonctionnel dans l’onglet « Source » des outils de développement du navigateur.

Cette solution est une solution pour rapidement customiser son site WordPress, j’aurai préféré trouver dans le code source du programme l’endroit qui génère cette information mais parfois ce n’est pas possible rapidement.

Dans tous les cas, je voulais montrer l’utilisation des outils de développement Web inclus dans les navigateur avec l’inspecteur de page pour localiser un élément précis du code HTML avec son CSS associé. Nous aurons une autre façon de faire avec l’utilisation du site WordPress en local pour pousser avec Filezilla le fichier style.css depuis notre ordinateur vers le serveur.

Il faut aussi indiquer aussi que cette modification sera écrasée par une mise à jours du thème/template c’est pour cela que nous allons faire une copie en local de notre WordPress et créer un thème enfant dont les modifications perdureront dans le temps.

Installation en local de WordPress

Le serveur du www.master-ctn.mines-ales.fr symbolise le site en production ou en pré-production (vu qu’il est caché par un accès via la demande de login/password de type htaccess). Cette façon de travailler est classique, le site officiel dit en production, un site sur un serveur identique avec les réglages et les logiciels similaires dit de pré-production pour tester avant le passage en production.

Il faut aussi une version additionnelle sur votre ordinateur en local pour avoir une version dite de développement avec tous les messages de debug activable, permettre de modifier une image sans le cycle d’upload à chaque modification, une version facilement customizable/défigurable sans avoir d’impact sur la production.

NOTA: si vous utilisez un ordinateur de l’IMT Mines Alès prévue pour la formation, Wamp est installé dans le dossier C:\Developpement\Wamp64\ et vous pouvez le démarrer avec l’utilisateur .\wamp . Je donne la procédure, si vous souhaitez travailler avec vos ordinateurs.

Nous allons donc installer un wordpress en local grâce aux logiciels Wamp (Windows) /Mamp(MacOs) qui package l’installation d’Apache/Php/PhpMyAdmin/Mysql (d’où le nom de ces MAMP/WAMP/LAMP concatenant justement ces logiciels)  pour un usage de développement de manière simple.

Après l’installation, nous allons vérifier que Wamp fonctionne via l’icone en bas à droite dans la barre dite de « Notification » :

Wamp est démarré et les services Apache/Mysql sont bien actif l’icone est VERT

Le plus rapide pour vérifier que votre installation fonctionne en local est de trouver le fichier appelé phpinfo via une de ces URLs (une seule doit fonctionner, à noter et à conserver):

  • http://127.0.0.1/?phpinfo.php=1
  • http://127.0.0.1/phpinfo.php
  • http://127.0.0.1:8887/phpinfo.php
  • http://127.0.0.1:8888/phpinfo.php
  • http://127.0.0.1:8080/phpinfo.php
  • http://127.0.0.1:8888/MAMP/phpinfo.php
  • http://127.0.0.1:8888/MAMP/phpinfo.php

NOTES TECHNIQUES:

  • 127.0.0.1 est l’IP de votre ordinateur normalement on peut la remplacer par localhost
  • :80 est le port par défaut des connexions http donc pour aller sur le site de l’IMT il faut entrer http://www.mines-ales.fr:80/ mais tous les navigateurs utilisent le 80 par défaut et le masquent dans la barre d’adresse
  • :8888, :8887 , :8080 sont des ports de connexions, si on avait pas de port de connexion, notre ordinateur ne pourrait avoir qu’une seule connexion à un seul site. Ici, tous les installation du logiciel Apache devraient utiliser le port 80 mais pour éviter des problèmes d’installation chaque outil comme Wamp/Mamp utilise un port « un peu à lui ». On doit chercher dans la documentation pour trouver quel est le « bon »
  • Si deux logiciels utilisent le même port, il y a conflit, un des deux s’arrête
  • On peut modifier les ports pour éviter le conflit ci-dessus

Normalement, vous devez avoir une page similaire à cela si vous avez bien trouver votre phpinfo (le numéro de version de PHP peut être différent):

Si vous avez cette page, cela doit indiquer que nous avons la bonne URL pour trouver votre serveur apache et que ce dernier fonctionne plutôt très bien.

Il y a une information que nous avons besoin, c’est le DOCUMENT_ROOT, pour trouver dans quel dossier nous pouvons mettre des sites web pour y travailler dessus en local:

Dans mon cas, et surement dans le votre, c’est le dossier C:\Developpement\Wamp64\www\ sous MacOS c’est /Applications/MAMP/htdocs/.

NOTA SOUS MACOS: le logiciel MAMP assure le démarrage des services apache et mysql comme indiqué ci-dessous, le bouton Start Servers (remplacé par Stop Servers) permet de les démarrer

Les cases cochées indiquent que les service Apache et Mysql sont démarrés

Reprise POST aparté MacOS, donc nous avons un serveur Apache dont nous connaissons le Document_Root et l’URL pour aller sur le phpinfo (il y a plusieurs méthodes pour trouver ces informations).

Nous devons ensuite créer un dossier dans le Document_Root pour par exemple pouvoir installer plusieurs WordPress, par exemple dans mon cas ctn20_jean mais cela peut être n’importe quoi (si vous voulez un seul wordpress, le dossier DOCUMENT_ROOT est disponible).

Placer le pacakge duplicator et le fichier installer.php fourni avec ce package :

Utilisez votre navigateur pour aller sur votre site en local en modification l’URL qui a été trouvé avec phpinfo. Dans mon cas, c’est http://127.0.0.1/phpinfo.php que je transforme en URL correcte:

  • http://127.0.0.1:80 pour l’adresse de mon serveur et son port 80 (:80 est optionnel c’est le port par défaut de http, pour https c’est :443)
  • / indique le dossier DOCUMENT_ROOT du serveur, je parle du / précédent phpinfo.php
  • Je retire le reste pour indiquer mon dossier ctn20_jean

J’ouvre donc un navigateur à cette adresse http://127.0.0.1/ctn20_jean/

Mon URL trouvée ci-dessous correspond donc bien au dossier DOCUMENT_ROOT de mon serveur Web Apache installé par Wamp/Mamp en local.

Je peux en cliquant sur installer.php commencer la duplcition en local de mon WordPress.

La plus part des réglages sont fait automatiquement par Duplicator, la seule information qu’il faut disposer c’est le compte root et son mot de passe de l’utilisateur de la base de données Mysql en étape 2.

Etape 1, tout est au vert, l’installation peut se faire, appuyez sur « Next »

Indiquer les informations suivantes:

  • création d’une nouvelle base de données en sélectionnant « Create New Database »
  • localhost:3308 ou localhost:8889 sur Mac indique que le serveur Mysql se trouve sur le même PC
  • ctn20_jean est le nom de ma base de données, c’est pour faire identique au serveur www.master-ctn.mines-ales.fr mais on peut mettre ce que l’on souhaite wp2020, etc.
  • root est l’utilisateur administrateur de Mysql il a le droit de créer de nouvelles base de données dans Mysql
  • Mot de passe…. attention Wamp par défaut n’a pas de mot de passe pour l’utilisateur root parfois le mot de passe est mysql ou admin ou root. La documentation de l’outil indique ce réglage

Attention, on doit modifier dernièrement les informations de cette copie d’écran localhost devient localhost:3308 sur Wamp et localhost:8889 sur Mamp

Le bouton « Test Database » permet de vérifier que la connexion au logiciel de base de données Mysql fonctionn correctement et que l’installation peut se faire.

Avant dernière étape, l’opération finale de duplication va être réalisée. On peut modifier les réglages par défaut à ce moment précis mais je déconseille de le faire sauf pour régler un problème précis.

NOTA TECHNIQUE: L’onglet fermé « Replace » permet de gérer certains problèmes de passage du site web du serveur en local (ou vice versa) de type une URL vers une image qui en local indiquerait http://www.master-ctn.mines-ales.fr/ctn20_jean/logo.gif.

Etape finale, tout s’est bien passé, il faut bien indiquer qu’il vaut mieux retirer les fichiers d’installation temporaires surtout en cas de duplication sur un serveur car un hacker pourrait les exploiter pour trouver vos mots de passes. En local, c’est plus pour garder la bonne habitude de les effaccer:

En appuyant sur le bouton « Admin Login » vous devriez retrouver votre site web WordPress opérationnel en local, maintenant allons le modifier grandement…

Création d’un thème enfant dans WordPress

En premier lieu, retirer les thèmes non utilisé de votre WordPress (Menu Apparence puis choisir chaque Thème non Activé et le bouton « Supprimer » se trouve en bas à droite de chaque thème.

NOTA technique: je supprime les thèmes pour éviter les multiples mises à jours sur des thèmes peut utile, j’économise de la place et je trouve un seul thème dans le dossier des thèmes pour ne pas me tromper de thème et modifier un autre que l’actif…

Allez consulter le dossier wp-content\themes de votre WordPress, dans mon cas dans le dossier C:\Developpement\wamp64\www\ctn20_jean\wp-content\themes , je vais trouver dans mon cas le seul thème disponible twentytwenty . Il faut donc créer un dossier twentytwenty-child à côté de ce dossier:

Ce dossier va contenir les modifications que je souhaite faire sur le thème parent twentytwenty et qui ne seront pas détruites par la mise à jours du thème parent par son concepteur.

Copier le fichier style.css du thème twentytwenty dans le dossier twentytwenty-child, et éditer le avec UltraEdit, Bloc-notes ou tout outil d’édition de code comme dans le cours de Développement Web.

Il faut modifier dans ce fichier style.css le nom du template par exemple en ajoutant CHILD

Theme Name: Twenty Twenty CHILD

et au dessous ajouter cette ligne qui dit que ce thème est enfant du thème contenu dans le dossier twentytwenty:

Template: twentytwenty

Le reste des informations est assez peu critique, vous pouvez modifier à l’envie les informations à droite des deux-points tant que la structure reste identique, par exemple le numéro de version de ce thème.

Par contre, maintenant, il faut retourner dans le backoffice pour activer ce thème comme celui actif sur le site:

En retournant sur le site web en front et en activant les outils de développement Web (CTRL+ALT+I) et en activant l’onglet « Réseau » (Network sur certains navigateur) on peut constater que le feuille de style vient du dossier twentytwenty-child.

Notre modification temporaire du fichier style.css devient donc permanente.

Mais copions maintenant du dossier du thème parant  le fichier footer.php vers le thème enfant et modifions son code pour avoir ce contenu:

     <h2>Wordpress by Master CTN</h2>
      <?php wp_footer(); ?>
   </body>
</html>

Recharger l’affichage site WordPress pour constater le nouveau pied de page pour toutes les pages. Le thème enfant utilise le fichier footer.php pour son affichage alors qu’il utilisera toutes les autres pages dans le thème parent. On peut donc progressivement modifier le thème enfant à partir de la structure des fichiers du thème parent.

Et pour concevoir une page pour un article ou une page seule, il faut créer un fichier singular.php et mettre ce genre de contenu pour avoir le header, un div, le contenu de la page ou de l’article et le footer:

<?php get_header(); ?>

<div id="principal">
<?php the_content(); ?>
</div>

<?php get_footer(); ?>

Retourner sur votre site WordPress en front, choississez un article ou une page et afficher le code source HTML pour voir qu’en bas de page vous trouver le code HTML généré au sein de votre div d’ID principal

Voici quelques élements qui indique les informations que l’on récupéré par WordPress pour concevoir sa charte graphique:

Alors, je recommande quand même de faire un fichier functions.php dans le dossier du thème enfant pour ajouter les appels aux fichiers CSS manquant ici style-rtl.css:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style-rtl.css' );
}

Ce choix se fait si vous voulez ajouter un fichier de style.css a tous les styles CSS du thèmes enfant ou vous souhaitez repartir d’une copie de la version pour tout modifier. Les 2 options sont faisable en fonction de votre stratégie et de la complexité du thème parent.

Dans la conception, j’ai écarté l’ajout de ressource de type images mais il faut coupler ces ajouts avec la modification du CSS et la création dans le thème enfant d’un dossier images.

La ressource de ce site de référence peuvent vous aider ensuite dans toutes les manipulations: https://codex.wordpress.org/

NOTA:

Pour effacer la création du tag <li class=’post-comment-link meta-wrapper’>, il faut intervenir dans le fichier qui se trouve dans  wp-content\themes\twentytwenty\inc\template-tags.php ligne 426.

Le plus simple est donc de copier le dossier wp-content\themes\twentytwenty\inc\ dans le thème enfant avant de retirer les lignes fabriquant le tag sauf que le fichier template.tags.php n’est pas un fichier par défaut de thème enfant, donc il faut aussi copier les fichier index.php et singular.php depuis le thème parent vers le thème enfant pour que cette modification soit prise en compte.

A propos Pierre Jean

Ingénieur de Recherche Centre de recherche LGI2P Ecole des Mines d'Alès Formation TIC&Santé Plus de détails sur Pierre JEAN
Ce contenu a été publié dans CTN. Vous pouvez le mettre en favoris avec ce permalien.