Démarrer un projet Impreza
Le thème Impreza est un thème WordPress polyvalent et hautement personnalisable qui offre de nombreuses fonctionnalités et options de conception pour la création de sites web. Cette documentation explique la marche à suivre pour quelqu’un qui ne connaît pas Impreza, ou est un aide-mémoire des fonctions et des classes qu’on utilise moins au fil des projets. Cette structure n’est pas coulée dans le béton, il s’agit d’une base solide de raccourcis pour bien démarrer un projet. Je vous invite tout de même à maintenir, mettre à jour et bonifier la plate-forme, afin de l’adapter constamment aux nouvelles technologies du web qui évoluent rapidement.
Démarrer le serveur DEV
Voici les étapes à suivre pour partir le DEV d’un site web avec WordPress.
- Aller sur https://cineticweb.com/login_up.php et se connecter avec le mot de passe enregistré sur LastPass (choisir ADMIN).
FYI Plesk est le gestionnaire des serveurs utilisés pour tous nos sites hébergés. - Dans le panneau d’administrateur, aller dans l’onglet Subscriptions et cliquer sur cinetic.dev (default)
- Cliquer sur Add subdomain et ajouter le nom en minuscule (name) et cliquer sur OK
- Dans Hosting & DNS, cliquer sur DNS et sélectionner et enable name servers
- Dans Settings (DNS), écrire 3600 seconds (aka 1 heure) dans TTL (aka Time to Live) et cliquer Save.
- Demander à Kevin d’aller faire la passe-passe dans Digital Ocean. Une fois fait, passer à l’étape suivante.
- Dans Hosting & DNS > Digital Ocean DNS > Cocher le subdomain > Resync. Attendre ensuite que le domaine resolve. NE JAMAIS FAIRE « RESYNC ALL ».
- Revenir au Dashboard et cliquer sur SSL/TLS Certificate
- Installer la version gratuite Let’s Encrypt (en bas)
- Sécuriser le domain name et cliquer sur Get it free.
- Revenir au Dashboard. Dans l’onglet “Get started”, cliquer sur “WordPress”
- Écrire titre (i.e. Impek), choisir la langue (French), username cinetic, password Cinetic6185!, email info@cinetic.ca
N.B. Ne pas toucher à la database et les automatic update settings. - Télécharger la dernière version d’Impreza (cliquer sur le bouton vert un peu plus bas sur cette page)
- Retourner sur le File Manager (dashboard) et aller dans wp-content -> themes et drag and drop les 2 fichiers zip (Impreza child.zip + Impreza.zip) à partir de votre Finder
- Sélectionner les 2 fichiers importés et cliquer sur Archive -> Extract files -> OK
- Supprimer les fichiers et thèmes non utilisés. Cliquer sur “Skip the recycle bin” et “Yes remove”
- Aller sur le site (i.e. impek.cinetic.dev/wp-admin) et se connecter
- Aller dans l’onglet Apparence -> themes et activer Impreza child
- Activer Impreza sur le site externe.
- Cliquer sur Créer Site à partir de zéro (si ce n’est pas déjà choisi). Aller dans les extensions ensuite.
- Installer et activer les extensions Impreza (UpSolutionCore, WPBakery Page Builder, FileBirdPro, Custom Post Type UI, Duplicate Page, Converter for Media). Si certaines extensions ne veulent pas s’installer, s’assurer que le thème et que UpSolution core soit à jour.
- Installer et activer les autres extensions nécessaires (i.e. All-in-One WP Migration Unlimited Extension, Yoast SEO, WPForms, etc.)
- Aller dans l’onglet À propos et cliquer sur Activer Marque blanche pour changer le nom du theme (i.e. Impek) et ensuite Save
- Créer la page d’accueil vide
- Aller dans Comptes -> tous les comptes pour enlever la barre du site
- Aller dans Réglages et :
- -> Général -> changer fuseau horaire
- -> Lecture -> ne pas indexer moteurs de recherche
- -> Lecture -> cocher que c’est la page statique – page d’accueil
- -> Commentaries -> désactiver (voir screenshot)
- -> Permaliens -> Titre de la publication
Vous êtes maintenant prêts à commencer à coder votre site!
Démarrer le serveur avec un vrai nom de domaine
- Aller dans Subscriptions, puis cliquer sur le bouton “Add Subscription”.
- Choisir Blank Website.
- Ajouter le registered domain name. Setter le service plan à WordPress.
- Toujours dans ce dialog, dans la section Additional subscription settings > System user credentials, générer un nouveau password (il sera plus long que celui d’origine). Envoyer le username et le password à Kevin. Add subscription then.
- Dans le dashboard, aller dans Dev Tools > PHP, et sélectionner la version de PHP la plus récente. Faire OK.
- Toujours dans Dev Tools, cliquer sur Create Website.
- Sélectionner WordPress, et suivre les étapes 10 à 15 de la procédure habituelle pour des sous-domaines cinetic.dev.
- Attendre que le domaine resolve.
- Retourner dans le dashboard, cliquer sur SSL/TSL Certificates. Cliquer sur Let’s Encrypt et cocher Include www.
Créer un hébergement
- Aller dans l’onglet Subscriptions > Add Subscription
- Choisir Blank website > Registered Domain Name
- Remplir les champs (Registered domain name, Service plan = WordPress, générer un nouveau mot de passe) Laisser le reste tel quel.
- IMPORTANT: Envoyer le username et password à Kevin dans Slack (Ensuite, Kevin part le FTP et ajoute les credentials à la note qu’il partage avec Brian)
- Dashboard > PHP > Mettre la version la plus récente
- Installer WordPress (même si le domaine n’est pas resolvable) dans Get Started > WordPress. Remplir les mêmes champs que d’habitude (Website title, Langue (Français), User (cinetic), Password (Cinetic6185!), Email (info@cinetic.ca). Install.
- Onglet WordPress > Plugins > Installer All In One
- Dashboard > Files > wp-content > plugins > drag le zip de All In One Unlimited > Extract Files > Delete le zip.
- Si on doit installer un backup: Files > wp_content > aiwm-backups
- Si on doit installer Imprez: Files > wp_content> themes
Installation de Impreza
Après avoir acheté le thème, vous pouvez installer le thème de deux manières : via la fonction de téléchargement de thème de WordPress ou via FTP.
Installation via WordPress
Étape 1 : Accédez à Apparence > Thèmes.
Étape 2 : Cliquez sur Ajouter un nouveau, puis appuyez sur le bouton Téléverser un thème.
Étape 3 : Trouvez l’archive Impreza.zip sur votre ordinateur et cliquez sur le bouton Installer maintenant.
Étape 4 : Après l’installation, le thème doit apparaître à la page Apparence > Thèmes, où vous pouvez l’activer.
Installation via FTP
Étape 1 : Connectez-vous à votre hébergement via un logiciel FTP.
Étape 2 : Décompressez l’archive Impreza.zip sur votre ordinateur.
Étape 3 : Téléversez le dossier du thème extrait dans wp-content/themes de votre installation WordPress.
Étape 2 : Sélectionner Momentum comme template pour la repository. Donner un nom au projet. Vous pouvez ajouter une description mais cette étape est optionnelle. Laisser la repository en mode privé. Appuyer sur Create repository.
Étape 6 : Dans le dossier htdocs de MAMP : Applications/MAMP/htdocs, créer un nouveau dossier pour le projet. Décompresser WordPress à la racine de ce nouveau dossier : Applications/MAMP/htdocs/documentation.
Mise à jour Impreza
Extensions à ne pas mettre à jour:
- WooCommerce (versions rapprochées = ok)
- Monetico
- Paysafe
- WP Google Maps pro Add-on
- ACF (Pour les sites codés à bras)
Marche à suivre pour mettre à jour Impreza version 7 et moins
- Faire un backup du site.
- Désactiver toutes les extensions.
- Mettre à jour WordPress à la dernière version.
- Dans Apparence > Thème, activer le thème Impreza (le thème Parent, pas le Child Theme!)
- Mettre à jour le thème à la dernière version.
- Activer l’extension UpSolution Core et la mettre à jour à la dernière version.
- Dans la boîte jaune qui est apparue dans le haut de l’écran, cocher la case et faire OK.
- Dans Apparence > Thème, activer le Child Theme.
- Réactiver et mettre à jour les extensions.
- Vérifier le site pour des anomalies.
Voir la référence sur le site d’Impreza
Licence ACF Pro
Pour utiliser ACF PRO dans un projet, téléchargez le plugin avec le lien ci-dessous.
Clé de licence:
b3JkZXJfaWQ9MTM0NDYzfHR5cGU9ZGV2ZWxvcGVyfGRhdGU9MjAxOC0wNy0wNSAxNDowNzoxNg==
Adobe Font API Token
Pour utiliser une Adobe Font dans Webflow, il faut ajouter le API token suivant:
2f14692f52352c185df2f6dfb38cdd2f763e8962
Éditeur de page WP Bakery
Voici les réglages à activer ou à désactiver pour l’éditeur de page WP Bakery.
Dossier client Cloud
Lors de la création d’un nouveau dossier client sur le cloud de Cinetic, voici les dossiers principaux à ajouter (voir photo).
Cloudflare
CloudFlare est le “golden standard de caching system” sur le web. Pour mettre un site web sur CloudFlare, il faut absolument avoir le domaine (acheté et “hosté” avec Cinetic).
Combiner le plugin WP-Rocket avec CloudFlare est un bon choix, car WP-Rocket minifie les fichiers WordPress tandis que CloudFlare les “host” et réduit le stress sur nos serveurs en plus de rendre la page du site web plus rapidement aux visiteurs.
API ZONE ID et ACCOUNT ID sont auto-générés par CloudFlare. On doit l’ajouter dans WP-Rocket (dans WordPress) lors du set-up du plugin.
Les enregistrements DNS sont tous chez CloudFlare.
*DNS = DOMAIN NAME SERVER
Dans CloudFlare.com, aller dans:
- Speed > Optimization > Content Optimization > Rocket loader > OFF pour éviter des bugs, i.e. menu mobile qui ne s’affiche plus
- Caching > Configuration > Browser Cache TTL > 4 hours en règle générale
- Caching > Cache Rules > créer 2 règles “cache everything” et “wp-admin” (pour ne pas sauvegarder la cache du wp-admin, i.e. on change le mot de passe, mais on le voit juste dans 4 heures)
Ensuite, dans WP-Rocket (dans WordPress), aller dans:
- ADD-ONS, activer Varnish + Compatibilité WebP + CloudFlare
- CloudFlare, entrer la clé API, le email du compte (dev.cinetic.ca) et la zone ID.
N.B. API Zone ID et Account ID sont auto-générés par CloudFlare.
Mode développement = OFF (sauf quand on a un bug de visionnement des pages)
Réglages optimaux = ON
Protocol relatif = OFF