Formation « Développer un thème WordPress sur mesure »

Logiciels et outils nécessaires pour la formation

Lecture : 8 minutes • Pratique : 30 minutes • 4

L'avantage du web c'est qu'il n'y a pas besoin de beaucoup d'outils pour s'y mettre, et en plus ils sont tous gratuits ! Dans ce cours nous allons voir les logiciels nécessaires et les ressources indispensables à tout développeur WordPress.

Les logiciels

Pour développer avec WordPress, il nous faudra principalement 3 ingrédients : un navigateur, un éditeur de code et serveur local ! Mais ne vais pas m’arrêter là et vous montrer quelques autres logiciels et outils indispensables.

Le navigateur

Navigateurs Web

Pour le navigateur, c’est comme vous voulez ! Choisissez parmi Chrome, Firefox ou Safari. Chacun des trois possède une console de développeur évoluée, qui nous aidera beaucoup pendant la conception de nos sites.

Si vous avez du mal à choisir, voici quelques indications :

  • Chrome est actuellement le navigateur le plus utilisé avec 60% de parts de marché
  • Firefox est devenu le navigateur le plus rapide du marché
  • Safari est également très performant

Avec Chrome vous avez l’assurance que votre rendu sera vu correctement sur plus de 60% des machines, mais si vous manquez de RAM, optez pour Firefox ou Safari !

Firefox
Firefox, le panda roux !

Pour ma part, je suis sur Chrome par habitude, mais les versions récentes de Firefox me donnent envie de basculer !

L’éditeur de code

éditeurs de code

Il en existe aujourd’hui pas mal, mais je vais vous en conseiller deux principalement :

Atom

Tout d’abord, Atom, qui est un éditeur gratuit et open source disponible sur Windows, Mac et Linux et développé par GitHub. C’est celui que j’utilise actuellement :

éditeur de texte open source Atom
L’éditeur de code Atom avec un thème sombre

On peut personnaliser l’apparence et ajouter de nombreux modules. Il est très simple à prendre en main, du coup je vous le recommande si vous débutez.

Il est très proche de Sublime Text qui est aussi un très bon choix. On pourrait dire que Sublime est le frère aîné d’Atom.

Visual Studio Code

L’autre c’est Visual Studio Code, alias VSC, développé par Microsoft. Eh oui, ils ont souvent fait des erreurs mais ce logiciel, c’est une très belle surprise. Il est réputé pour être bien plus fluide qu’Atom. De nombreux développeurs y ont basculé et l’adorent :

Visual Studio Code
Visual Studio Code de Microsoft

Il est également gratuit et open source, et disponible pour toutes les plateformes.

PHP Storm

D’autres éditeurs sont pas mal non plus, comme PhpStorm, qui est très adapté pour les développeurs PHP et fournit des outils inédits et avancés. Cependant PhpStorm nécessite une licence payante démarre à 89$ par an.

Nicolas Juen et ses collègues de l’agence parisienne Be Api l’utilisent et l’adorent tandis que les intégrateurs préfèrent VSC.  Voici son avis :

Nicolas Juen
Orateur WordCamp
Développeur PHP

Le conseil Nicolas Juen

Développeur chez Be Api

Voici les fonctionnalités essentielles qui font la force de PHPStorm en tant que développeur PHP et me font gagner énormément de temps :

  • Ses nombreux plugins
  • Son intégration avec WordPress, l’autocomplétion des filtres/actions et l’accès rapide aux filtres/actions
  • La possibilité de mettre les coding standards et l’auto formatage de WordPress
  • L’inspection du code dans un projet pour soulever les variables/méthodes ou autres problématiques
  • Toute la partie refactorisation du code, changement de variables qui est très bien exécutée
  • L’intégration de grunt/gulp, profiler JS, JSX, Vagrant, détection Docker
  • La possibilité de jouer avec GIT depuis l’interface et voir rapidement l’historique d’une fonction

 

Suivez-moi sur Twitter : @raherian • Mon site : Be Api

Quant à Notepad++, c’est un outil d’une autre époque que je vous déconseille.

Un environnement de développement local

Logos des logiciels de serveur local

Indispensable pour travailler un site WordPress depuis sa machine avant de l’envoyer en ligne, l’environnement de développement local peut s’installer facilement au travers de logiciels comme WAMP, MAMP, mais surtout Local By Flywheel qui est dédié à WordPress.

L'interface épurée de Local by Flywheel
L’interface épurée de Local by Flywheel

Pour le moment je ne m’attarde pas sur le sujet, car ce sera l’objet d’un cours à part entière : Pourquoi travailler en local ? 

Un logiciel FTP

Logiciels FTP

Pour envoyer notre site vers son hébergement il nous faudra un logiciel FTP, du moins dans un premier temps. Dans la formation Industrialisation de sites WordPress, on verra d’autres techniques plus avancées qui nous éviterons de transférer les fichiers manuellement.

Il n’y a pas réellement de logiciels sexy ici, donc vous pouvez prendre soit Filezilla, soit CyberDuck qui fonctionnent en général plutôt bien !

Pour ma part j’utilise Transmit, mais il est payant et disponible uniquement sur Mac. Il est réputé pour être plus rapide que ses concurrents.

Transmit sur Mac
J’aime beaucoup Transmit sur Mac

Un gestionnaire de mots de passe

Dans la création de site web, vous allez devoir stocker un très grand nombre de mots de passe et de données sensibles. Vous aurez : l’accès FTP, la base de données, le compte client hébergeur, le compte administrateur WordPress et éventuellement des clés de licences pour vos extensions. Et cela pour chaque site que vous ferez. Alors simplifiez-vous la vie, utilisez un gestionnaire de mots de passe comme Dashlane ou 1Password :

Capture d'écran du logiciel Dashlane
Votre coffre fort chiffré Dashlane

Le principe est de ne créer qu’un seul mot de passe maitre, qui servira à déverrouiller le coffre fort et récupérer l’identifiant dont on a besoin, de manière automatique pour chaque site grâce à l’extension de navigateur.

Capture d'écran de 1Password
La compagnon de 1Password pour se connecter rapidement

Ce genre de logiciel est devenu indispensable aujourd’hui alors évitez vraiment de tout stocker dans un classeur Excel ou un fichier texte. Assurez vos arrières et dormez sur vos deux oreilles !

Les outils

Voici maintenant quelques outils bien pratiques qui nous seront utiles lors de cette formation.

L’inspecteur de code du navigateur

Le premier outil dont on aura besoin est indispensable, et se trouve au coeur de votre navigateur : c’est la console développeur. Impossible de travailler sans cela. C’est elle qui nous permettra d’inspecter notre code, que ce soit le HTML, le CSS, le Javascript et même les requêtes Ajax. Et quand on en viendra aux performances de notre site la console s’avèrera également utile !

La console de Chrome
La console de Chrome

Pour ouvrir la console faites un clic droit > Inspecter depuis votre page web. utilisez le bouton en haut à gauche de la console pour sélectionner un élément de votre page.

Emmet : l’indispensable

Si je ne devais conseiller qu’un seul outil, ce serait Emmet (anciennement Zen Coding). Il vous fera gagner énormément de temps car Il permet de réduire considérablement le code HTML et CSS que vous devez taper en utilisant des abréviations de syntaxe.

Par exemple taper p.big puis Tabulation générera automatiquement <p class="big"></p>. Pratique non ?

Imaginons ce code HTML :

HTML
index.html
<section class="block">
  <h2>Titre</h2>
  <p>Lorem Ipsum</p>
  <ul class="list">
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
  </ul>
</section>

Avec Emmet il vous suffirait de taper : section.block>h2+(p>lorem)+ul.list>li*4>a{Lien}. Bon je vous avoue que ça fait un peu bizarre lu comme ça. Mais avec un peu d’habitude ça devient très pratique. Et rien ne vous empêche de taper ça en plusieurs fois, lignes après ligne.

Et pour le CSS c’est la même chose ! Ici le principe c’est de taper des abréviations correspondant bien souvent aux initiales des mots, prenons cet exemple :

CSS
style.css
.class {
  display: block;
  text-align: center;
  margin: 10px;
  width: 50%;
  font-weight: bold;
}

Au lieu de tout taper, il suffit d’écrire : db+tac+m10+w50p+fwb et appuyer sur Tabulation. Et le tour est joué ! Là aussi, vous pouvez simplement taper les abréviations ligne par ligne pour faire plus simple.

Vous trouverez pleins d’autres exemples sur la documentation officielle. Emmet est disponible pour tous les éditeurs de code.

Si vous voulez vous entrainer sans rien installer, rendez-vous sur CodePen.io qui est d’ailleurs un très bon outil pour tester du HTML, CSS et JS.

Sur Atom c’est très simple à installer. Allez dans Preferences > Packages > Install, cherchez Emmet, et validez ! Redémarrez ensuite le logiciel et le tour est joué !

Conseil

Même si Emmet n'est pas obligatoire, je vous conseille de prendre 15 minutes pour vous y mettre. J'estime taper aujourd'hui 5 à 6 fois moins de HTML et CSS qu'auparavant ! C'est un gros gain de temps que j'estime à plusieurs milliers d'heures depuis quelques années.

Comment savoir si un site utilise WordPress ?

On a vu précédemment que de nombreux sites, dont des grands groupes, utilisent WordPress. Vous vous-êtes peut-être demandé comment savoir si un site était fait avec WordPress ? Ma petite astuce est d’utiliser Wappalyzer, une extension de navigateur, qui vous permettra de détecter les les technologies utilisées par un site : CMS, serveur, librairies JS…

Installez gratuitement Wappalyzer sur votre navigateur :

wappalyzer
Wappalyzer vous donne un aperçu des technologies

Cet outil est très pratique et vous donnera un tas d’informations sur les sites que vous visitez !

Tester la rétro compatibilité de son site

Quand vous développez en HTML, CSS et JS, vous utilisez parfois des technologies récentes pas forcément compatibles avec les anciens navigateurs. Heureusement aujourd’hui on est bien loin du fiasco des années 2010. Mais il est toujours intéressant de vérifier à partir de quel navigateur on est compatible.

Pour cela j’utilise le site Can I Use qui est très bien fait et donne des indications claires. Ici je teste la compatibilité de CSS Grid :

Can I Use CSS Grid
Grid est largement exploitable aujourd’hui dans tous nos projets !

Tester les performances de son site

Aujourd’hui la rapidité d’affichage de votre site est un critère important pour Google : Un site doit être optimisé pour être affiché le plus rapidement possible, que ce soit sur ordinateur ou smartphone, avec une connexion potentiellement limitée.

Pour tester votre site, vous pouvez utiliser le service Google PageSpeed ou encore GT Metrix.

gtmetrix
C’est en grande partie WP Rocket qui va vous aider à obtenir un bon score

Outre le score sur 100, les services vous donneront de nombreuses astuces pour améliorer les temps de chargement de vos sites. Pour l’instant on ne vas pas s’en occuper. Quand le moment sera venu, une extension de cache comme WP Rocket va grandement nous aider !


Pour aller plus loin, je pourrais vous conseiller de versionner votre code avec Git et l’héberger sur GitHub, ou encore d’utiliser des préprocesseurs CSS comme Sass ou Stylus, mais c’est au programme de la formation industrialiser son site que je vous conseille de suivre à la suite de celle-ci. Pour l’instant on peut s’en passer !

Aparté : Au fait, Windows, Mac ou Linux ?

Franchement c’est comme vous voulez ! Sachez que tous les logiciels et outils nécessaires au développement web sont généralement compatibles avec les 3 plateformes, alors ensuite c’est plutôt une question de préférence personnelle et de budget !

Il fut un temps où les outils étaient plus nombreux sur Mac, mais Windows s’est depuis bien rattrapé. De plus aujourd’hui beaucoup d’applications et services que l’on utilise sont des applications web, et donc peu importe le système d’exploitation, ce qui importe c’est d’avoir un navigateur !

J’ai opté pour Mac, pour des question d’ergonomie, d’autonomie, de rapidité et d’encombrement réduit, mais c’est entièrement subjectif.


Vous avez pour le moment tout ce qu’il faut pour continuer. Vous êtes parés avec les bons outils pour aborder cette formation.  On va maintenant passer en revue les bonnes ressources et voir où trouver de l’aide dans la communauté.

4

Questions, réponses et commentaires

  1. Abel

    Le 21 mai 2018

    Bonjour Maxime,

    Je suis dev logiciel et je vais me rafrechir la mémoire avec ton cours. Je dois t’avouer qu’il est pédagogiquement bien conçu. Merci pour ta contribution à la communauté.

    J’en profite aussi pour demander la licence de publication de tes contenus ici. Et aussi j’ai pu remarquer une faute d’ortho dans le texte suivant : « et donc peut importe le »; je pense que c’est PEU.

    1. Maxime BJ

      Le 22 mai 2018

      Salut, merci pour ton message !

      Les contenus de ce site sont en licence standard : tous droits réservés.

      Je corrige la faute, merci 😉

Laisser un commentaire