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.
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 →
- Télécharger le thème depuis le repository de thème de WordPress. https://wordpress.org/themes/air-light/
- Dezipper le fichier et le renommer au mon de vôtre futur thème montheme (sans MAJ ou caractères spéciaux)
- Ajouté le thème a votre répertoire
wp-content/themes - 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 - Ouvrir le Terminal,
cdjusqu’au dossier du thème. - Vérifier votre version de node.js
node -v(moi je dois utilisé node version module pour modifier la version vers la 12 avecnvm use 12) - Lt lancer un
npm installdans le dossier du thème (cela va crée le dossier node_modules avec les dépendances) - 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 - Ouvrir Visual Studio Code (ou votre éditeur préférer) et faire un search & replaces (
votrenomdeprojetpeut être différant du nom duthememais sans MAJ ou caractères spéciaux )
- Rechercher :
air-lightRemplace par :votrenomdeprojet - Rechercher :
Air-lightRemplace 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
- 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) - Télécharger le devpackages (depuis le git bouton vert code et plus télécharger. zip) dézipper le dossier
- !! partie un peut inhabituelle !! ( j’ai mis 2 jours à comprendre)
- Ajouté tous les fichiers (pas dans un dossier) à la racine de PROJET donc à la même hauteur que le fichier
confg.phpavec flywheels dans le dossier «public« . Cela vous sera utile pour developper le thème et aussi des plugins. - Modifier le terme « THEMENAME » par votre «
votrenomdeprojet« dans les fichiers suivant - remplacer PROJECTNAME dans les fichiers suivants basés sur votre setup
- le
wp-contentdevrais ê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) - Lancer
npm installà la racine du projet depuis le Terminal (dossierpublic)
https
- Dernier step les fichiers «
localhost-key.pem» et «localhost.pem» qui permettent au https de fonctionner sur le serveur local. - 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
- Les fichiers sont crée .. dans le dossier
public. - 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", - Activez le theme dans wp-admin, lancer gulp et commencer à coder (ou lancer les taches séparées telle que
gulp stylesougulp js) - Pour ensuite coder votre thème toujours lancer
gulpdepuis 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