Duplicator et Debug WordPress avec Eclipse PDT

Objectif: configuration de wordpress (duplicator ou fresh install) opérationnelle avec un debug dans Eclipse PDT

Etape 1 : Configuration d’EasyPhp/Wamp/Mamp

Pour activer le debuggeur xdebug dans les outils de développement, la toute première étape est de localiser le « bon » fichier php.ini. En effet, votre ordinateur peut contenir plusieurs fichiers php.ini dans différents dossier pour gérer un PHP en version de test, en version de production, en sauvegarde ou un fichier php.ini si vous écrivez du PHP en utilisation en mode CLI (CLI=client).

Etape 1.1: Localiser et Ouvrir le fichier php.ini

Pour localiser le fichier php.ini actif, il faut soit créer un fichier phpinfo.php à la racine du DocumentRoot d’apache contenant le code suivant:

<?php phpinfo(); ?>

Ouvrir la page correspondante dans le navigateur via par exemple l’URL: http://127.0.0.1/phpinfo.php

Vous pouvez trouver l’URL de votre serveur local apache par défaut en cherchant sur internet Mamp phpinfo car souvent cette page phpinfo.php existe par défaut.

Vous obtenez l’ensemble des réglages du PHP dans Apache et surtout le « bon » fichier php.ini:

 

Maintenant, regardons si le xdebug est activé, si on trouve l’information « with Xdebug » comme dans l’image ci-dessous:

Information que xdebug est actif dans la page phpinfo

Pour activer le xdebug s’il n’est pas activé, il faut donc ouvrir ce fichier pour vérifier/modifier/ajouter les lignes suivantes:

  • activer la ligne qui indique le xdebug, cette ligne ne doit pas commencer par un ; (qui indique un commentaire) mais par zend_extension
  • la ligne  zend_extension doit indiquer un fichier valide de xdebug par exemple:
    zend_extension="c:/wamp/bin/php/php5.6.2/zend_ext/php_xdebug-2-5.6-vc11-x86_64.dll"
    
    xdebug.remote_enable = on

La modification des lignes ci-dessus dans le fichier php.ini est à sauvegarder et le redémarrage d’Apache doit permettre d’activer enfin le xdebug. Pour le vérifier, ouvrez de nouveau l’URL vers le fichier phpinfo.php. Vous trouverez normalement une indication que le xdebug est bien activité et que le mode remote debug est aussi actif :

Les réglages ci-dessous peuvent être ajouté ulterieurement au fichier php.ini:

zend_extension="c:/wamp/bin/php/php5.6.2/zend_ext/php_xdebug-2-5.6-vc11-x86_64.dll"
xdebug.remote_autostart=on
xdebug.remote_enable=on
xdebug.remote_handler="dbgp"
xdebug.remote_host=127.0.0.1
;xdebug.remote_connect_back=1
xdebug.remote_port=9000
xdebug.remote_mode=req
xdebug.show_local_vars=1

 

Vu que vous êtes sur la page phpinfo.php, localisez aussi le dossier DocumentRoot d’Apache.

Vous trouvez pour votre serveur web apache le dossier DOCUMENT_ROOT de votre installation. NOTEZ LE C’EST UN REGLAGE IMPORTANTE. Ce dossier sera l’espace de travail (« workspace ») à indiquer à Eclipse PDT/PHP et le lieu d’installation de votre wordpress.

Habituellement c’est ce type de valeur mais cela peut varier:

  • Pour Wamp dans le dossier c:\wamp64\www
  • Pour Mamp dans le dossier /Applications/Mamp/htdocs
  • Pour EasyPhp dans c:\Programmes\EsayPhp\www

Vous pouvez le localiser avec le fichier phpinfo.php

 

Etape 1.2:Installation en local de wordpress « fresh install »

Si vous utilisez Duplicator, l’etape 1.2 correspondante est ci-dessous.

Le téléchargement des fichiers de wordpress peut être réalisé à partir de ce site Web : https://fr.wordpress.org/

Il faut dé-zipper les fichiers et les placer dans un dossier WordPress du DocumentRoot d’Apache (le dossier DocumentRoot est le dossier que voit Apache sur votre disque dur) en les copiant:

Copier-wordpress-DocumentRoot

 

Etape 1.2:Installation en local de wordpress « duplicator »

Pour Duplicator, normalement, vous disposer de 2 fichiers, 1 install.php et un fichier zip appelé package/paquet en VF.

Créer un sous dossier dans le DocumentRoot d’Apache et installer les 2 fichiers ci-dessus.

 

Etape 1.3: Création de la base de données et d’un utilisateur de la base de données WordPress

Allez sur phpmyadmin, habituellement à l’adresse http://127.0.0.1/phpmyadmin/ ou pour EasyPhp http://127.0.0.1:8887/modules/phpmyadmin3522x121112094748

Puis choisissiez l’onglet Utilisateur

phpmyad-onglet-utilisateur

Puis « Ajouter un utilisateur »

Indiquez les informations suivantes pour créer un utilisateur qui dispose de tous les droits sur une base de données (retenez les informations saisies en les notant dans un coin):

phpmyad-ajout-utilisateur

Vous avez à partir de là, une base de données, un utilisateur et un mot de passe opérationnel que vous noterez pour l’installation de WordPress

Etape 1.4: Installez WordPress

En allant sur l’adresse suivante http://127.0.0.1 vous devriez trouver le dossier wordpress et pouvoir lancer l’installation de WordPress grâce aux informations de la base de données.

Dans le cas de duplicator, les interfaces sont différents mais s’enchainent en laissant les valeurs par défaut.

Vérifier que votre wordpress est opérationnel, l’installation peut échouer parfois…

 

Etape 2 :Installation et configuration d’Eclipse PDT ou Eclipse PHP

Etape 2.1: Installation

Télécharger le fichier zip d’Eclipse depuis http://www.master-ctn.mines-ales.fr/install/windows/ ou http://www.master-ctn.mines-ales.fr/install/macos/

Dézipper le fichier dans un dossier par exemple c:\Developpement\Eclipse ou sur le bureau de votre ordinateur.

Lancer eclipse en trouvant dans ce dossier le fichier eclipse.exe.

Indiquer comme workspace à Eclipse le Dossier DOCUMENT_ROOT conservé pour cette occasion.

Etape 2.2: Réglages d’Eclipse PDT/PHP pour xdebug

Il y a plusieurs moyens de modifier les réglages d’Eclipse PDT/PHP pour que l’IDE prenne en compte le xdebug comme débuggeur par défaut. Dans certaines versions d’Eclipse PDT, le débuggeur configuré est la version payant de Zend Debugger. Il suffit souvent de désactiver ce dernier au profit de xdebug pour que cela fonctionne correctement.

Faire Menu Windows > Preferences puis ouvrir PHP > Debug dans la fenêtre des préférences puis « l’hyperlien » PHP servers… pour éditer le serveur par défaut « Default PHP Web Server ». Dans la fenêtre « Edit Server », sélectionnez l’onglet « Debugger » pour enfin choisir comme Debugger: XDebug. Finish et OK pour valider les modifications.

Nota: il est possible de trouver la liste des serveurs via Menu Windows > Preferences puis ouvrir PHP > Servers mais je trouve pratique de consulter les réglages du débugger dans PHP > Debug.

Ainsi par défaut, le réglage du serveur web par défaut est d’utiliser xdebug.

 

Etape 3: Création d’un projet PHP pour WordPress dans Eclipse PDT/PHP

Après installation de WordPress dans le DocumentRoot d’Apache dans le sous dossier WordPress, nous allons créer un projet PHP portant le même nom pour récupérer les fichiers PHP de WordPress dans Eclipse:

Faire Menu File > New > PHP Project:

File-New-Php Project

Dans la fenêtre de création d’un nouveau projet « New PHP Project » indiquer le nom du projet WordPress et l’option « Create new project in workspace », on peut vérifier que le dossier indiquer par l’interface correspond bien au dossier de l’installation de WordPress:

New-Project

L’importation d’un grand nombres de fichiers de WordPress dasn Eclipse PDT peut prendre jusqu’à quelques dizaines de minutes selon la taille du WordPress et la puissance de votre ordinateur.

WordPress contient quelques pseudo « erreurs » mal détectées par Eclipse, même si le projet est indiqué avec une petite croix rouge, il peut parfaitement fonctionner.

Etape 3.2: Création d’une configuration de Debug

Pour débugger un projet PHP, il faut en premier lieu créer une configuration de Debug, via le Menu Run > Debug Configuration …

Ou via click droit sur un programme PHP > Debug As > Debug Configurations …

Dans la nouvelle fenêtre « Debug Configurations », on peut créer une nouvelle configuration de Debug via le bouton « New Debug Configuration », indiquer un nom (un label) à cette configuration et surtout le fichier à débugger:

PS : on peut noter l’URL qui est affichée dans le bas de l’interface avec l’option « Auto Generate », si on décoche cette option, on peut ainsi modifier une partie de l’URL.

On peut vérifier que le débugger par défaut pour cette configuration est bien indiqué dans l’onglet Debugger : 

On peut laisser un point d’arrêt automatique via l’option « Break at First Line » ou au contraire vouloir laisser l’option décoché pour utiliser d’autres points d’arrêt (voir plus bas).

Etape 3.3: Lancer le Debugger

Maintenant on peut lancer le « Debugger » avec le bouton « Debug » en bas à droite.
Ce qui devrait ouvrir l’URL dans un navigateur intégré à Eclipse PDT et nous proposer de basculer dans la perspective « Debug » d’Eclipse. Il faut confirmer en indiquant que l’on souhaite qu’Eclipse PDT se souvienne de cette réponse pour éviter d’avoir cette fenêtre à chaque fois.

Cela va ouvrir la perspective « Debug » pour Eclipse PDT. Une perspective est un nouvel agencement des différentes fenêtres d’Eclipse PDT. Cette nouvelle organisation doit mettre en avant ce qui est utile au Debug: les variables, quelques dizaines de lignes de codes, si le serveur Apache est en pause sur un fichier et à quel ligne et dans un coin le navigateur intégré d’Eclipse PDT:

Dans l’exemple ci-dessus, le debugger s’est automatiquement mis en pause sur la première ligne de PHP (cf le choix « Break at First Line » est actif dans la Configuration de Debug plus haut).

Pour contrôler l’exécution du programme PHP en mode debug, soit d’exécuter ligne par ligne le programme PHP, on peut utiliser la barre de menu suivante:

  1. Le bouton 1 permet d’activer/désactiver tous les points d’arrêts
  2. Le bouton 2 permet de faire exécuter toutes les lignes de PHP jusqu’au prochain point d’arrêt, si il n’y a plus de point d’arrêt exécute jusqu’à la fin le programme
  3. Le bouton 3 permet d’arrêt la session de debug sans obtenir de résultat
  4. Le bouton 4 permet de débugger en entrant dans les fonctions PHP
  5. Le bouton 5 permet de débugger en exécutant les fonctions PHP sans entrer dedans

Etape 3.4: Les points d’arrêts

Quand on debugger, ce qui est souvent utile  de faire exécuter le programme PHP depuis le début, autrement-dit depuis le lancement du programme PHP, jusqu’à un endroit critique du programme PHP.

On place donc habituellement un point d’arrêt sur une ligne de code juste avant l’ensemble des lignes qui sont à débugger.

La session de Débug démarre, puis on utilise le bouton 2 (Resume ou touche F8) qui déclenche l’exécution du programme PHP jusqu’au premier point d’arrêt. Puis arrivé sur les lignes de code problématiques, on utilise les boutons 4 (Step Into ou touche F5) et 5 (Step Over F6) pour exécuter ligne à ligne, un peu à la manière d’un ralenti.

Une fois les lignes problématiques passées, nous exécutons le reste du programme avec le bouton 2 (Resume ou touche F8) pour obtenir l’affichage de la page dans le navigateur.

Etape 3.5: Relancer le Debug

Une fois la session de debug terminée, on peut relancer le Debug via clic droit > Run As > PHP Web Application

Attention, Eclipse PDT n’accepte d’avoir qu’une seule session de debug, si votre session n’est pas terminée, vous pouvez l’arrêter via le bouton 3 (Terminate ou touche CTRL+F2).

On peut par contre debugger plusieurs pages dans la session de débug, en appelant de nouvelles pages sur le même projet PHP. On peut aussi utiliser un navigateur extérieur pour voir la session de Debug dans Firefox/Chrome ou tout autre navigateur.

 

Etape 3.6: Mettre un point d’arrêt dans le code

Jusque là on lance le debug de tout WordPress mais on pourrait avoir envie de n’avoir le debugger que dans une certaine partie du code par exemple dans les pages du template.

On peut mettre un point d’arrêt (breakpoint en VO) en cliquant « en face » de la ligne que l’on souhaite debugger, un cercle va apparaitre à gauche du numéro de ligne pour indiquer que l’on a un point d’arrêt. Pour retirer un point d’arrêt re-cliquer dessus.

Eclipse-breakpoint

Il peut être utile par exemple d’aller mettre un point d’arrêt en face d’une des pages de template pour vérifier l’enchainement des opérations fabriquant le HTML.

Nous utiliserons cette solution dans le template enfant plus bas dans l’exercice.

Etape 3.7: WordPress mode debug

Modifier le fichier wp_config.php pour avoir définir ces 2 variables pour afficher les erreurs

// Active le mode WP_DEBUG 
define( 'WP_DEBUG', true );

// Création du fichier logging dans le fichier /wp-content/debug.log 
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings 
define( 'WP_DEBUG_DISPLAY', true );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );

// Affiche les requêtes SQL
define( 'SAVEQUERIES', true );

 

WP_DEBUG_DISPLAY peut être préfé à false pour permettre d’utiliser uniquement que le fichier debug.log

SAVEQUERIES permet de créer une variable $wpdb->queries contenant les requêtes SQL.

 

Etape 4: Thème enfant

Pour éviter qu’une mise à jours du thème choisi n’entraine la perte de vos réglages. Il faut faire un thème enfant…

En premier lieu, localiser votre thème actif dans l’interface du backoffice de wordpress. Puis trouvez, le dossier correspondant à ce thème dans le dossier d’installtion de wordpress. Par exemple, mon thème actif est nude, j’ai donc le dossier suivant (nude doit être remplacé par le nom de votre thème dans votre installation bien sur) :

wp-contents/themes/nude

Créer un dossier voisin de ce dossier avec -child à la fin du nom

wp-contents/themes/nude-child

C’est dans ce dossier que l’on va créer notre thème enfant.

Créer un fichier style.css

wp-contents/themes/nude-child/style.css

Ce fichier peut être ouvert avec Eclipse PDT/PHP et indiquer les informations suivantes:

/**
* Theme Name: Nude child
* Author: Pierre JEAN 
* Author URI: 
* Template: nude
* Description: Nude child
* Version: 1.0
* Tags: translation-ready, custom-background
* Text Domain: nude
* License: GNU GPL v3
* License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/
/* Ajouter des réglages CSS ci-dessous */

La valeur la plus importante en fait est la ligne Template.

A partir de là, pour récupérer les réglages par défaut de votre style parent, vous pouvez soit:

  • Copier coller tous les réglages CSS du fichier parents, simple et efficace
  • Faire une importation HTML avec la ligne suivante @import url(« ../nude/style.css »);
  • Ajouter le fichier functions.php avec le hook wp_enqueue_scripts

Créer un fichier functions.php dans le dossier du theme enfant est une bonne méthode actuellement car elle ne dépend pas du navigateur et elle nous permet de tester un hook (add_action):

<?php
function appelStyleCssParent(){
    wp_enqueue_script( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action('wp_enqueue_scripts', 'appelStyleCssParent' );
?>

Etape 5: Liste des pages d’un template WordPress:

  • single.php affichage d’un article seul
  • page.php affichage d’une page seule
  • page<nom>.php qui affichera directement la page qui s’appelle <nom>
  • home.php gestion de la page d’accueil
  • tag.php affichage des pages tags (tag-<nom du tag>.php pour afficher les page liées au tag.
  • archive.php affichage des archives (par catégorie, par label, par auteur, etc.).
  • category.php affichage par catégorie ( category-<nom catégorie>.php)
  • search.php affichage des résultats d’une recherche.
  • 404.php page de gestion de l’erreur 404
  • <nom page>.php par exemple mentions-legales.php
  • author.php affichage d’un auteur et des ses ressources liées
  • date.php affichage par date précise (année, mois ou jour) des articles
  • loop.php gestion de la boucle principale de WordPress
  • one-column-page.php pour affichage sur une seule colonne donc sans sidebar

Pour voir le système de choix des enchaînements de pages dans les tablettes de nombreux diagrammes sont disponibles sur le Web par exemple sur le site WordPress.

Voici quelques informations sur les fonctions classiques d’un thème et l’organisation d’un page en sous pages:

 

On peut donc retoucher une page en la copiant dans le dossier enfant. Copier donc le fichier page.php depuis le template parent dans le dossier enfant puis faire une modification par exemple autour de the_title() qui permet d’afficher le titre d’une page. Si vous voulez modifier un article dans ce cas là, il faut prendre le fichier single.php.

NOTA: dans le fichier single.php on peut voir un appel à un sous fichier qui va fabriquer le contenu, par exemple dans le thème twentynineteen, la ligne suivante va chercher un autre fichier

get_template_part( 'template-parts/content/content', 'single' );

Il suffit de refabriquer l’enchainement de dossier et de fichier content-single.php pour remplacer le contenu

/twentynineteen-child/template-parts/content/content-single.php

On peut aussi faire des templates différents pour une catégorie d’article ou pour une page dont on a son ID en appelant par exemple un fichier single-1.php pour avoir ce template pour l’article numéro 1. Il existe aussi par titre du fichier , catérogie, etc.

Nous allons faire un second template en créant dans le dossier du template enfant un fichier single-2.php avec ce contenu:

<?php
/*
Template Name: Nouveau template 2 de single.php
Template Post Type: post, page
*/
get_header();
?>

DEBUT DU NOUVEAU TEMPLATE
<?php the_title(); ?>

Vous pouvez choisir le template à appliquer à un article en l’éditant comme indiqué sur cette copie d’écran:

Bien sur la conception d’un template de page ou de post/article est longue c’est pourquoi on reprend souvent des thèmes en les customisant selon le besoin.

 

 

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.