Air-Light Starter theme

Air-light Informations

https://airwptheme.com/ || https://airwptheme.com/demo/ https://github.com/digitoimistodude/air-light

Air-light (ou simplement Air) est conçu pour être un point de départ ultra-minimaliste pour un projet WordPress chez Digitoimisto Dude Oy, une agence numérique finlandaise au centre de Jyväskylä.

C’est un Starter thème pas besoin de thème enfant par contre il évolue (sans mise à jours) et sera peut-être différent l’or de votre prochain projet.

Le thème basé sûr _S (_underscore le starter thème de automattic) mais simplifier et customiser.

Plus simple que WP-Rig pour le dévleppement.

Air-Light Starter theme tutorial

Les fonctionnalités qui m’ont motivé à le tester sont

  • Total support pour ACF et Gutenberg
  • Modern CSS avec PostCSS et SCSS en utilisant les CSS : root.
  • Optimisé pour la création de Custom Post type.
  • L’utilisation de GULP pour les tâches.
  • Les Plugins pour les options supplémentaires (woocommerce et customisation de l’admin) prochain tuto.

Installation via DUDSTACK

Plusieurs solutions pour le mettre en place dans une optique de faire un thème sur mesure.

Si cela vous parle ( c’est encore un peut obscur pour moi mais je creuse le sujet ) vous pouvez utiliser leur outil  » DUDSTACK » inspiré de « BEDROCK » pour la création du projet et dans ce cas je vous laisse regarder la doc sur le github.

Local by flywheels ou Mamp

Voici donc le step by Step :

Si comme moi vous utiliser  » local by flywheels ou Mamp » il y a une solution pour installer le thème que je décris ici basé sur leur doc →

Using with Local by Flywheel or other 3rd party development environment · digitoimistodude/air-light Wiki

  1. Télécharger le thème depuis le repository de thème de WordPress. https://wordpress.org/themes/air-light/
  2. Dezipper le fichier et le renommer au mon de vôtre futur thème montheme (sans MAJ ou caractères spéciaux)
  3. Ajouté le thème a votre répertoire wp-content/themes
  4. Télécharger le fichier package.json (click de droite ici et enregistrer le lien sous) et l’enregistrer dans le dossier du thème wp-content/themes/montheme
  5. Ouvrir le Terminal, cd jusqu’au dossier du thème.
  6. Vérifier votre version de node.js node -v (moi je dois utilisé node version module pour modifier la version vers la 12 avec nvm use 12)
  7. Lt lancer un npm install dans le dossier du thème (cela va crée le dossier node_modules avec les dépendances)
  8. il faut ajouter un ficher pour le dev qui n’est pas authoriser dans le repo normal de WordPress phpcs.xml ( click de droite enregistrer sous .) wp-content/themes/montheme
  9. Ouvrir Visual Studio Code (ou votre éditeur préférer) et faire un search & replaces ( votrenomdeprojet peut être différant du nom du theme mais sans MAJ ou caractères spéciaux )
  • Rechercher : air-light Remplace par : votrenomdeprojet
  • Rechercher : Air-light Remplace par : votrenomdeprojet (ma 1ère recherche à fait les 2 en un coup)
  • !! ne pas remplacer « namespace Air_Light; » qui est avec le  » _  » ou rien ne fonctionnera. !!

Partie développement pour les custom post types (CPTs) et ACF

  1. Pour utiliser des « custom post types« , il faut ajouter les 2 fichiers suivant à votre thème dans le dossier " inc/includes " post-type.php et taxonomy.php (click de droite et Enregister le lien sous…) Car ils sont interdits dans le Répo des thèmes de WordPress (se sont des ficher de dev et le répo des thèmes est seulement pour les thèmes ready to go)
  2. Télécharger le devpackages (depuis le git bouton vert code et plus télécharger. zip) dézipper le dossier
  3. !! partie un peut inhabituelle !! ( j’ai mis 2 jours à comprendre)
  4. Ajouté tous les fichiers (pas dans un dossier) à la racine de PROJET donc à la même hauteur que le fichier confg.php avec flywheels dans le dossier « public« . Cela vous sera utile pour developper le thème et aussi des plugins.
  5. Modifier le terme « THEMENAME » par votre « votrenomdeprojet«  dans les fichiers suivant
  6. remplacer PROJECTNAME dans les fichiers suivants basés sur votre setup
  7. le wp-content devrais être classique sur votre installation alors il faut allez changer ça aussi dans les fichiers suivant. (dans leur environnement de dev il utilise d’autres nom de dossiers)
  8. Lancer npm install à la racine du projet depuis le Terminal (dossier public)

https

  1. Dernier step les fichiers « localhost-key.pem » et « localhost.pem » qui permettent au https de fonctionner sur le serveur local.
  2. Dans le terminal:
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout localhost-key.pem -out localhost.pem
Generating a 2048 bit RSA private key
  1. Les fichiers sont crée .. dans le dossier public.
  2. Ouvrir le fichier gulp/config.js et remplacer les lignes 57 et 58: key: "/var/www/certs/localhost-key.pem", cert: "/var/www/certs/localhost.pem", key: "localhost-key.pem", cert: "localhost.pem",
  3. Activez le theme dans wp-admin, lancer gulp et commencer à coder (ou lancer les taches séparées telle que gulp styles ou gulp js)
  4. Pour ensuite coder votre thème toujours lancer gulp depuis le dossier Racine /public

D’autres tutorials arrivent pour leur plugin AIR Helper qui ajoute des fonctionnalité telle que la prise ne charge de woo et l’accès limité à des partie de l’admin.

La création des blocks avec ACF Pro.

La création des CPT ..

Débloquer les features du thème ( sticky menu )

Voici le liens vers mon fichier de projet sous Notion si vous préférez

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.