Tuto pour l'inatallation de WPRig

Voici un petit tuto pour installer WPRig ( en local ) . Mais tout d’abord commençons par le début WPRig c’est quoi?

WP Rig est un STARTER thème moderne pour WordPress, il est conçu pour crée des thèmes rapide et légers avec les standards de développements actuelle.

Du PHP, CSS et JS moderne ici pas de Scss ni de jQuery de base. il minifie le code pour un rendu du thème le plus performant

Je ne vous cache pas que cette manière de travailler est plutôt orientée Dév et peut être perturbante au début. Voici pourquoi je vous propose un tutoriel pour installer la bête …

Une super documentation vidéo est disponible sur le site de wprig.io

L’idée est d’avoir un thème de développement et de un fois terminé on l’exporte sous le nom final tout compressé et optimisé par la moulinette à base de babel gulp et autre.

Installation :

installer le theme wprig dans le dossier themes ( ne pas le renomer) télécharger depuis github :

GitHub – wprig/wprig: A progressive theme development rig for WordPress.

Ou directement cloner dans le bon dossier:
git clone [https://github.com/wprig/wprig.git](https://github.com/wprig/wprig.git)

Modifier le fichier config/config.json (qui est vide par défaut, il vas surcharger le fichier config.default.json) pour adapter le futur nom de thème et nom de l’auteur.

{

"theme": {

"slug": "monsupertheme",

"name": "Mon Super theme",

"author": "John Robert-Nicoud | 6clicks.ch"

},
}

à la suite après la ' , ' on ajoute les autres config ici BrotherSync ( modifier l’url par la vôtre)

"dev": {
      "browserSync": {
        "live": true,
        "proxyURL": "monsupersite.local",
        "bypassPort": "8181",
        "https": true
      }
    }

Dans le terminal dans le bon dossier on lance NPM pour la 1ère installation :

npm run rig-init

i une installation à déjà été faite on peut faire seulement la MAJ

npm install

Setup avec VS Code .. il est recommander d’installer plusieurs extentions pour VS code :

ESLint, which Lint Java Script and ES next
PHPCS, the PHP code sniffer which looks for errors in PHP
Stylelint, which lints CSS
Prettier, the code formatter which auto formats code.

Mais quelques setup sont important pour que tout fonctionne .. dans VSCode allez dans « Settings » et cliquer sur la tab « Workspace » clique sur le petit icon pour passé en édition via json

{

  "prettier.stylelintIntegration": true,
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true,
  "editor.renderWhitespace": "all",
  "stylelint.configOverrides": {
      "rules": {
        "at-rule-empty-line-before": ["always",
          {
            "except": [ "after-same-name", "inside-block", "blockless-after-same-name-blockless", "blockless-after-blockless", "first-nested"],
            "ignore": ["after-comment"]
          }],
            "rule-empty-line-before": ["always", {
              "except": [ "first-nested"],
              "ignore": ["after-comment"]
           }],
           "comment-empty-line-before": ["always",
            {
              "except": ["first-nested"]
            }]
              }

}}

Une fois les setups terminé, on va lancer la compilation du theme car le theme wprig n’est pas fonctionnel en l’état ..

Une fois compiler il est fonctionnel et recompile à chaque changement.

Moi je dois vérifier que la bonne version de « Node.js » est configurée avec un « nvm use 12 » pour charger le ‘ Node version module ‘ en version 12

nvm use 12

et ensuite

npm run dev

Il est possible de désactiver le nimifaction des css en cas de soucis au debug dans le fichier config/config.default.json ligne 30

"debug": {
      "styles": true, // pas miinimisée false = minimisée .. idem pour les autres.
      "scripts": false,
      "phpcs": true
    }

BONUS : SSL local ?

le fait de mettre SSL à true dans le fichier de config est suffisant mais il se peut que le petit cadenas ne soie pas complètement valider et pour fais ça propre voici la marche à suivre :

1: généré le fichier de certificat local:

npm run generateCert

Un dossier BrowserSync est crée dans le theme.

Ouvrir le trousseaux d’acces du mac.
Allez dans system. et faire un drag and drop du fichier ‘wp-rig-browser-sync-root-cert.crt’ dans le trousseau ..
Ouvrir le fichier dans le trousseau il aura souvent le nom ‘localhost’ ou vérifier par date ..
Ouvrir l’onglet » Se Fier » et mettre » toujours approuvé ». Valider mette votre password. et c’est bon .

Il ne reste plus qu’as activer le theme dans l’admin ..

6clicks.ch

6clicks \ WP2 John Robert-NIcoud