Formation PUB020 : WordPress, 2023 Aménager notre environnement pour travailler efficacement

9.1 Ouvrir un projet WordPress dans PhpStorm


Comme pour tout site Web, il est possible d'éditer le code d'un site WordPress avec un éditeur simple. Il est cependant plus intéressant d'utiliser un environnement de développement plus évolué tel que PhpStorm afin de profiter des nombreuses fonctionnalités qu'il offre (voir la fiche Choisir un IDE pour coder en PHP).

Édition d'un site WordPress avec PhpStorm

Pour éditer un site WordPress avec PhpStorm, suivez ces étapes.

Note : selon votre version de PhpStorm ou le système d'exploitation utilisé, certaines étapes pourraient apparaître dans un ordre légèrement différent.

  • Suivez d'abord la procédure d'installation de WordPress.
  • Ouvrez PhpStorm.
  • Si vous avez déjà un projet ouvert, refermez-le (File / Close Project).
  • Sélectionnez New Project from Existing Files.

    New project from existing files

  • Selon votre environnement de travail, choisissez un de ces scénarios :
    • Avec un environnement tel que AMPPS ou XAMPP, choisissez le scénario Web server is installed locally, source files are located under its document root.
    • Avec un environnement virtualisé tel que Docker, Devilbox ou Homestead, choisssez Source files are in a local directory, no Web server is yet configured.
  • Retrouvez le dossier racine de votre site WordPress.

    Si vous travaillez sous AMPPS, vous aurez quelque chose du genre C:\Program Files\Ampps\www\monsite sous Windows ou /Applications/AMPPS/www/monsite sous Mac.

    Si vous travaillez sous Devilbox, le chemin ressemblera à .../devilbox/data/www/monsite/htdocs.

    Cliquez ensuite sur Project Rootdans le haut de l'écran avant de faire Finish.

  • Allez dans le menu File / Settings... (Windows) ou PhpStorm / Preferences (Mac).
  • Rendez-vous dans PHP / Servers.
  • Cliquez sur le + pour ajouter un serveur.
  • Donnez-lui un nom significatif (ex : AMPPS ou Devilbox).
  • Dans la zone Host, entrez l'une de ces valeurs :
    • Si vous n'avez pas de nom de domaine local, entrez 127.0.0.1
    • Si vous avez configuré un nom de domaine local (ce sera obligatoirement le cas avec Devilbox), entrez-le (ex : monsite.dvl.to).
  • Seulement si vous travaillez avec un environnement virtualisé tel que Docker, Devilbox ou Homestead, cochez Use path mappings.

    Vous devez indiquer le chemin sur le serveur virtuel qui correspond à la racine du projet. Par exemple, sous Devilbox, la racine correspond au chemin /shared/httpd/monsite/htdocs.

    Servers

  • Vous devez maintenant définir une configuration à l'aide de Run / Edit Configurations. Ceci créera un point d'entrée pour lancer votrre projet ou pour le déboguer.
    • Cliquez sur le + en haut de la zone de gauche.
    • Sélectionnez PHP Web Page.
    • Nommez la configuration (ex : index).
    • Dans la liste déroulante des serveurs, sélectionnez le serveur que vous venez de configurer.
    • Entrez l'URL de départ du site Web.
      • Si vous n'avez pas de nom de domaine local, entrez /monsite, ce qui donnera l'URL http://127.0.0.1/monsite.
      • Avec un nom de domaine local, conservez seulement la barre oblique (/).

        PHP Web Page

  • Cliquez sur OK.
  • Vous pouvez désormais lancer votre site WordPress en cliquant sur le bouton Run dans le haut de l'écran ou en appuyant sur Maj + F10.

Configurer PhpStorm pour WordPress

PhpStorm est tout à fait adapté pour programmer efficacement un site WordPress.

Pour tirer profit de toutes ses fonctionnalités, vous devez effectuer les configurations suivantes :

  • Allez dans le menu File / Settings... (Windows) ou PhpStorm / Preferences (Mac).
  • Sélectionnez PHP / Frameworks.
  • Dans la sectionWordPress, cochez Enable WordPress Integration.
  • Dans la zone WordPress installation path, retrouvez le dossier racine de votre projet, soit celui où se trouve le fichier wp-config.php.

    WordPress

    Si vous ne spécifiez pas un dossier valide, vous obtiendrez le message « Please specify a valid WordPress root directory (directory should contain 'wp-admin' and 'wp-includes' subdirectories) »

    Please specify a valid WordPress root directory

  • Toujours dans Settings, sélectionnez Editor / Code style / PHP.
  • Dans le coin supérieur droit de la fenêtre, cliquez sur Set from... puis choisissez WordPress. Ceci permettra à PhpStorm d'ajuster votre code pour répondre aux normes établies pour les programmes WordPress.

    Predefined style - WordPress

 

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre