par Anne-Laure DELPECH | 3 Août 2017 | Archives
Dans cet article de la série Utiliser le thème DIVI d’Elegant Themes, je regarde si le système d’importation et exportation de la personnalisation, des options et des modèles du thème Divi est pratique et facile d’utilisation. La réponse est oui, et c’est très très bien fait !
Quels sont les éléments que l’on peut exporter ou importer d’un site à l’autre ?
Divi est très bien fait et on peut exporter l’ensemble des éléments qui composent un thème, ainsi que les modules Divi Builder sauvegardés dans la bibliothèque de modules :
- la personnalisation du thème telle qu’elle est définie dans le menu Apparence >> Personnalisation ;
- Les options du thème telles que réglées dans le menu Divi >> Options ;
- la personnalisation des modules, telle que définie dans le menu Divi >> Personnalisateur de module ;
- les modèles sauvegardés dans la bibliothèque (menu Divi >> bibliothèque Divi).
Le cas particulier d’un thème enfant de Divi
MAJ du 12/10/2017 :
Si on utilise un thème enfant, le processus qui suit fonctionne pour les options du thème enfant et pour la bibliothèque Divi, mais pas pour la personnalisation du thème enfant.
Avec un thème enfant de Divi, je parviens à exporter les options et la bibliothèque divi (theme enfant) mais pas la personnalisation.
L’article How To Package a Divi Child Theme for Sale indique qqu’il faut utiliser l’extension « Customizer Export/Import » de Beaver builder Team. Et ça fonctionne parfaitement, en utilisant la fonction export (onglet tout en bas de personnalisation thème).
Comment exporter les réglages du thème Divi ?
Pour les personnalisations et options, il suffit de cliquer sur un bouton « ↑↓ », comme ici dans la personnalisation du thème.
Importer et exporter des paramètres et modèles Divi
Pour les modèles, il faut cliquer sur un bouton « Importer et exporter » tout en haut de la bibliothèque.
C’est vraiment très simple. A chaque fois, cela crée un fichier Json que l’on sauvegarde avant réutilisation.
Et pour l’importation, comment ça se passe ?
On fait exactement la même chose, après avoir activé le thème Divi, on clique sur le bouton « ↑↓ » (ou « Importer et exporter » pour les modèles), et ça y est, on a importé les personnalisations, réglages ou modèles.
MAJ du 12/10/2017 : pour importer la personnalisation d’un thème enfant de Divi, on utilise l’extension « Customizer Export/Import » comme pour l’exportation (onglet tout en bas de personnalisation thème). Ca fonctionne parfaitement pour importer le fichier .dat généré par la même extension dans un autre site.
Ce qui est vraiment impressionnant, c’est que l’importateur modifie les url des images que l’on avait défini dans les options ou paramètres et place ces images dans la bibliothèque de médias du nouveau site. C’est très très bien fait !
Et c’est là qu’on est vraiment content d’avoir utilisé les couleurs par défaut plutôt que d’avoir défini à la main pour chaque item. Il me suffit de modifier ma palette de couleur par défaut, comme expliqué dans l’article « Régler la palette de couleur par défaut du thème Divi » et ça y est, on a un site différent, dont on ne va peut-être changer que la forme de page d’accueil.
Et maintenant ?
Je vais continuer à explorer ce thème Divi et l’extension Divi Builder. Rendez-vous dans d’autres articles de cette série, Utiliser le thème DIVI d’Elegant Themes !
par Anne-Laure DELPECH | 3 Août 2017 | Archives
Dans ce deuxième article d’une série, Utiliser le thème DIVI d’Elegant Themes, je procède aux premiers réglages du thème Divi nouvellement installé sur le site de test. C’est important de s’organiser pour perdre le moins de temps possible et je me suis rendu compte que je risquais de passer des journées à ajuster les couleurs !
Une option à régler dès le début : la palette de couleurs
Beaucoup de modules, options ou éléments de personnalisation permettent de régler des couleurs. A chaque fois, une palette pré-définie est proposée, ainsi qu’un mode défaut. J’ai donc cherché où, et comment, régler la palette par défaut.
Dans le tableau de bord WordPress, menu Divi >> Options du thème, onglet « Général », on peut définir la palette par défaut, composée de 8 couleurs.
J’ai modifié les 7 couleurs autres que le blanc.
Choisir sa palette de couleur
J’ai choisi une couleur principale Violet #843bbb puis j’ai été voir quelles étaient les couleurs associées dans color-hex. Voici ce qui s’affiche :
Palette de couleur associée au Violet #843bbb selon Color-Hex
J’ai donc décidé de mettre dans ma palette par défaut les couleurs associées en mode triadique, analogue et complémentaire – voir l’article choisir les bonnes couleurs pour un site (hexa, rgb) pour plus de précisions. Et j’ai remplacé le noir par un gris foncé #555555. Voici ma nouvelle palette par défaut :
Nouvelle palette de couleur par défaut dans Divi
Régler la palette de couleur sur « défaut »
Et maintenant, je vais personnaliser le thème (menu Apparence / personnaliser), je règle la palette de couleur sur « défaut ».
Et voilà !
Je ne perdrai pas de temps à définir les couleurs des éléments que je vais probablement créer !
Dans le prochain article de cette série Utiliser le thème DIVI d’Elegant Themes, je vais tenter d’évaluer ce thème et de décider si ça vaut vraiment le coup de l’utiliser.
par Anne-Laure DELPECH | 3 Août 2017 | Archives
L’hébergement Infomaniak propose gratuitement l’accès aux thèmes d’Elegant Themes et de Woocommerce. J’ai voulu essayer d’installer le fameux thème DIVI d’Elegant Themes.
Avant de commencer, sauvegarder !
J’ai fait quelques essais sur un site de test et j’ai eu des problèmes au départ (avant de comprendre ce qui suit). Je vous recommande donc de sauvegarder les fichiers et la base de données avant toute modification.
Il faut noter que Infomaniak fait une sauvegarde automatique toutes les 24 heures. Il est cependant prudent de faire une sauvegarde manuelle de la base de données au cas où, et des fichiers de wp-content si on a fait des modifications dans les dernières 24 heures.
Installer le thème DIVI sur un site WordPress existant
J’ai installé tous les sites WordPress que j’héberge via l’installateur automatique d’Infomaniak. Je crois que l’installateur de thème ne fonctionne pas si on a créé manuellement WordPress.
Aller dans le tableau de bord Infomaniak, menu « sites web » >> « Mon site WordPress » :
Tableau de bord infomaniak : menu « Mon site WordPress »
Cliquer sur le bouton « Configurer » du site à modifier, puis sur le bouton « Paramètres ».
cliquer sur « changer de thème » et choisir « DIVI » :
Installer Divi sur un site WordPress hébergé par Infomaniak
Attention, si les cases « Importer le contenu de démonstration du thème » et « activer le nouveau thème », il y a un risque de plantage du site.
Il faut donc impérativement désactiver ces deux options, comme dans la copie d’écran ci-dessus.
Lorsqu’on clique sur « valider », le thème DIVI (et l’extension Divi Builder) s’installent sur le site mais ne sont pas activés.
Et maintenant ?
Cet article est le premier d’une série sur ce thème DIVI, Utiliser le thème DIVI d’Elegant Themes. Dans le second et le troisième, j’explorerai les premiers réglages ainsi que le transfert d’options, paramètres et modèles de DIVI.
Plus tard, j’affinerai certains réglages et créerai un thème enfant pour ajouter facilement du PHP et du CSS.
par Anne-Laure DELPECH | 1 Août 2017 | Archives
Après avoir exploré les possibilités d’optimiser un site dans le premier article de cette série, Optimiser la vitesse d’un site web, j’applique ce que j’ai appris à ce site. Compression de fichiers et d’images, mise en cache, réglages de l’hébergement, minification de fichiers… J’ai mis en oeuvre ce que j’avais appris. Et ce site se charge en 5 secondes sur mobile maintenant. C’est moins bien que les 2 secondes recommandées par Google, mais c’est « Good » !
L’état initial
Ce site avait déjà été un peu optimisé, et il utilise un thème récent (stargazer).
| item à régler |
Fait ? |
| serveur : php 7 ou plus |
oui, 7.1 |
| serveur : compression des fichiers |
ON |
| serveur : Module Google pageSpeed |
ON |
| extension smush |
version gratuite activée |
| WP superCache |
activée |
| Hummingbird |
NON |
Les réglages du serveur étaient faits : PHP 7.1, compression GZIP et module Google PageSpeed activés.
Certaines images étaient compressées avec l’extension WP Smush gratuite et WP SuperCache assurait la mise en cache.
Il était donc déjà assez rapide. Selon TestMySite.WithGoogle, il se chargeait en 6 secondes sur mobile, ce qui est considéré comme « Fair » (correct).
Ce qui est bizarre, c’est que PageSpeed Insights donne des résultats très mauvais (66 – needs work pour mobile, 54 – Poor pour ordinateur).
Les ajustements
Je complète ce que j’avais déjà fait en suivant les instructions du premier article de cette série (Optimisation d’un site WordPress (Infomaniak, WPmuDev).
J’ai donc installé et activé WP Smush Pro et Hummingbird, puis j’ai compressé les images et réglés les paramètres d’optimisation.
Le résultat est satisfaisant : ce site se charge maintenant en 5 secondes sur mobile, ce que TestMySite de Google juge « Good » !
Chargement en 5 secondes selon Test My Site de Google !
Bizarrement, les mesures de PageSpeed Insights restent mauvaises, avec cependant une petite amélioration en mode mobile :
Les résultats selon Google PageSpeed Insights
Lorsque je regarde les « étapes de résolution du problème » proposées par Page Speed Insights, il me semble que les problèmes sont absolument mineurs…
Et maintenant ?
Je ne comprends pas les résultats de Page Speed Insights. Il y a donc certainement encore quelque chose que je n’ai pas bien compris… A suivre donc !
par Anne-Laure DELPECH | 31 Juil 2017 | Archives
Dans cet article, j’explore pour la première fois l’optimisation d’un site web pour en améliorer la rapidité, tant sur mobile ou tablette que sur un ordinateur. Ce premier article d’une série, Optimiser la vitesse d’un site web, vise seulement à lister quelques tentatives d’amélioration avec les outils, et les connaissances, dont je dispose aujourd’hui. Il sera complété par d’autres articles au fur et à mesure de mes essais, réussites et échecs.
Optimiser un site web, pourquoi ?
Je lis partout (et je l’observe dans ma pratique d’internaute) qu’un site lent à charger perd des visiteurs.
Un bon site doit s’afficher de manière quasi instantanée pour tous les visiteurs, qu’ils aient un faible débit internet ou pas, qu’ils utilisent un ordinateur, une tablette ou un téléphone.
Par ailleurs, la vitesse d’affichage d’un site est un des critères de référencement par les moteurs de recherche.
Est-ce que mon site est rapide ?
Plusieurs outils de test existent. Voici ceux que j’ai utilisés :
Optimiser un site web, comment ?
Fort heureusement, les outils de test cités donnent tous des recommandations.
Ainsi si je teste l’url « https://parcours-performance.com » avec PageSpeed Insights, j’obtiens une note, mais aussi une liste des critères d’optimisation. Pour chaque critère, j’ai des recommandations d’amélioration, et une liste précise de ce qui ne va pas, le cas échéant. Les critères sont les suivants :
Premiers essais d’optimisation
Pour le site « Parcours Performance« , j’ai commencé l’optimisation et les critères suivants sont bons, pour mobile comme pour desktop :
- Afficher en priorité le contenu visible
- Optimiser les images
- Réduire la taille des ressources CSS
- Réduire la taille des ressources HTML
- Réduire la taille des ressources JavaScript
- Éviter les redirections sur la page de destination
Les autres critères ne sont pas encore entièrement bons mais la note globale s’est considérablement améliorée :
| |
Avant |
Après |
| temps de chargement Test My Site |
11 secondes (insuffisante) |
9 secondes (médiocre) |
| Page speed Insights Mobile |
54/100 (Poor) |
70/100 (Needs Work) |
| Page speed Insights Desktop |
63/100 (Poor) |
79/100 (Needs Work) |
Voici ce que j’ai fait pour y arriver :
Passage en PHP 7.1
Fin juillet 2017, plus de 85% des sites WordPress fonctionnaient encore avec des versions de PHP 5.6 et antérieures (voir les statistiques WordPress ici) alors que la version 7 a été lancée en décembre 2016. Il est indispensable de passer tous les sites WordPress à PHP 7 (et même 7.1) car cette nouvelle version contient des améliorations spectaculaires en matière de rapidité et de sécurité.
Ca se fait dans l’espace client (sur OVH ou Infomaniak). Auparavant, on aura pris soin de vérifier la compatibilité du site en installant l’extension « PHP Compatibility Checker » qui permet de mettre en lumière des difficultés.
Activation d’une extension de mise en cache
J’utilise « WP Super Cache« , qui est proposée par défaut sur les installations WordPress d’Infomaniak. Si on ne l’a pas, Il suffit de l’installer et activer. Les réglages par défaut sont satisfaisants.
Comprimer les images
Pour comprimer les images, j’utilise depuis longtemps l’extension gratuite « Smush » et même maintenant l’extension payante (abonnement annuel wpmudev) « Smush Pro » qui apporte quelques avantages supplémentaires.
Autoriser la compression
Sur un serveur Infomaniak, il suffit d’activer la compression des fichiers (cf FAQ Infomaniak).
Evidemment, celà ne comprime pas les fichiers provenant d’autres sources, tels que https://s3.amazonaws.com/…ownloads.mailchimp.com/js/mc-validate.js, que mon site Parcours Performance charge systématiquement.
L’amélioration est significative puisque l’outil de test http://www.whatsmyip.org/http-compression-test/ m’indique que la page d’accueil de Parcours Performance faisait 57.9 KB, en fait maintenant 14.8 KB, soit une amélioration de 74.5% !
Activer le module Google Page Speed
Sur Infomaniak, il suffit également d’activer ce module (cf FAQ 1341 d’Infomaniak). PageSpeed Tools est un module proposé par Google qui permet d’optimiser la performance d’un site côté serveur en fonction de bonnes pratiques recommandées par le moteur de recherche. Sur d’autres hébergements, il faudra voir cette page de Google et faire les réglages à la main si c’est possible.
Activation et réglage de Hummingbird Pro
Avec l’abonnement annuel wpmudev, j’ai accès à de nombreuses extensions, que je peux installer sur autant de sites que je veux. Dans le cadre de l’amélioration de la performance de mon site Parcours Performance, j’ai activé et réglé Hummingbird Pro. Il en existe une version gratuite dans le dépôt d’extensions WordPress. Ici je décris ce que j’ai fait avec la version Pro.
A l’activation de Hummingbird Pro, j’ai réalisé un test du site. La note est 68/100. J’ai réalisé les opérations suivantes :
- leverage browser caching : l’extension propose de régler le cache (set expiry ) à 8 jours et d’aller mettre l’instruction correspondante dans le .htaccess.
- remove render blocking ressources : Hummingbird liste 10 fichiers javascript et 14 fichiers css qui pourraient être chargés après l’apparition du contenu « au dessus de la ligne de flottaison ». Ensuite, il propose « configure script deferring » : on arrive alors dans un menu de « minification », qui permet pour chaque fichier javascript ou css de définir l’option de minification (création d’un fichier de taille réduite), et aussi de dire si le fichier doit être chargé dans le header (donc avant la « ligne de flottaison » de la page) ou le footer. J’ai tout « minifié », sauf le css de font Awesome, chargé de l’extérieur, mais j’ai laissé les fichiers se charger dans le header car il faut que je fasse des essais avant de décider que faire.
- « Host my files on the WPMU DEV CDN » : wpmudev stocke mes fichiers sur un serveur rapide externe.
La note est du test d’Hummingbird est maintenant à 75/100, avec des améliorations à apporter à
- Improve server response time
- Enable compression : Compressing https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js could save 92.2KiB (66% reduction)
- Remove render blocking resources
Et maintenant ?
Je suis plutôt contente du résultat, ou du rapport temps passé / amélioration. Mais il va falloir que j’aille regarder comment faire encore mieux.
Dans un second article de cette série, Optimiser la vitesse d’un site web, je vais réaliser toutes les opérations précédentes pour ce site, knowledge.parcours-performance.com et mesurer systématiquement les gains avec les trois outils de test cités en introduction.
Il me reste, selon PageSpeed Insights, à améliorer les critères suivants :
- Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison : Votre page contient 11 ressources de script et 13 ressources CSS qui bloquent l’affichage de votre page, et donc le retardent. Il faut que je teste ce qui se passe pour chacun des 24 fichiers si, via Hummingbird, je demande à ce qu’ils soient chargés dans le footer…
- Autoriser la compression : Autorisez la compression des ressources suivantes afin de réduire le volume de données transférées de 92,2 Ko (réduction de 66 %). La ressource concernée est https://s3.amazonaws.com/…ownloads.mailchimp.com/js/mc-validate.js qui n’est pas compressée.
- Réduire le temps de réponse du serveur : Lors de notre test, votre serveur a répondu en 0,76 secondes.
- Exploiter la mise en cache du navigateur : Si vous définissez une date d’expiration ou une durée de validité maximale pour les ressources statiques dans les en-têtes HTTP, vous indiquez au navigateur d’aller chercher les ressources déjà téléchargées sur le disque local plutôt que sur le réseau. Les ressources concernées sont https://s3.amazonaws.com/…ownloads.mailchimp.com/js/mc-validate.js (délai d’expiration non spécifié) et https://www.google-analytics.com/analytics.js (2 heures)
Je pense qu’il faut que je voies aussi les éléments suivants :
- Pour les mobiles, activer le mode « AMP ».
- voir l’impact de la version MySQL (cf statistiques WordPress) sur la vitesse et la sécurité : il faut peut-être que je passe en version 10.x (je suis actuellement en version 5.6.35).
par Anne-Laure DELPECH | 3 Juil 2017 | Archives
J’ai fait le choix d’héberger les sites que je gère sur un serveur Infomaniak. Mais j’ai préféré laisser les noms de domaine chez OVH (plus simple, surtout si je retourne chez OVH lorsqu’ils se seront un peu améliorés !). Lorsque je transfère un hébergement (perso ou pro) d’OVH vers Infomaniak, je dois aussi voir comment gérer les emails.
Si le nom de domaine est utilisé par plus d’une personne, il faut autant d’adresses que d’utilisateurs. Dans ce cas, je choisis un hébergement mail (un « MX plan » chez OVH, un « hébergement mail » chez Infomaniak). Mais si il y a un seul utilisateur, l’hébergement gratuit associé à un nom de domaine chez OVH suffit.
J »explique ici comment activer l’hébergement gratuit d’OVH et régler l’adresse mail principale ainsi que ses alias éventuels.
Supprimer l’hébergement « pro » ou « perso » d’origine
Evidemment, cette étape ne sert que si on a préalablement acheté chez OVH un hébergement pour le nom de domaine.
Une fois que le site est transféré sur son nouvel hébergement (voir l’article « Transfert d’un site vers un hébergement Infomaniak« ), il faut le supprimer. Ca se fait en 2 ou 3 étapes :
- Prendre note des réglages liés aux mails dans l’hébergement actuel ;
- sauvegarder (optionnel) les mails précédents avec son client de messagerie ;
- supprimer l’hébergement.
Prendre note
Le plus simple est de faire une copie d’écran de la page emails de l’espace client d’OVH :
Copie d’écran onglet email de l’espace client OVH
Comme ça, je sais quelles sont les adresses à recréer, et je vois aussi d’un coup d’oeil si la boîte mail OVH contient ou non des mails. Dans le cas présent, les mails sont supprimés au fur et à mesure par le client de messagerie qui sert à l’utilisatrice pour lire ses mails.
Il peut également être utile de faire une copie de toutes les redirections créées.
Copie d’écran onglet email, gestion des redirections, de l’espace client OVH
Ici, les deux adresses sont toutes deux redirigées sur une adresse gmail.
Sauvegarde des mails
La méthode varie selon les clients de messagerie. Pour GMail, c’est comme ça :
sur gmail : bouton « mon compte »
sauvegarde des mails de Gmail : accès au menu « sauvegarde »
Puis lien « définir votre contenu »
sauvegarde des mails de Gmail : accès au compte
Puis créer une archive
sauvegarde des mails de Gmail : créer une archive
Ensuite, il suffit de sélectionner les données à archiver puis lancer.
Supprimer l’hébergement
Avant de réaliser l’opération, on vérifie :
- On a soigneusement noté les caractéristiques des adresses mails et leurs redirections éventuelles ?
- On a sauvegardé les mails dans le client de messagerie ?
- Le site web fonctionne correctement dans son nouvel hébergement ?
- Il ne reste aucun fichier non sauvegardé sur l’hébergement (accès FTP) ?
Si c’est oui, on peut supprimer l’hébergement !
Dans l’espace client OVH,
Dans l’espace client OVH, aller dans facturation puis choisir le menu « Mes Services ». Il faut taper une partie du nom de domaine dans le champs en haut à droite du tableau.
OVH : supprimer un hébergement, étape 1
Ensuite, en cliquant sur le +, à gauche de hébergement web + domaine, on voit comment se décompose ce service :
OVH : supprimer un hébergement, étape 2
Puis en cliquant sur le petit engrenage à droit dans la ligne « hébergement web », on a accès à l’option « supprimer l’hébergement ».
OVH : supprimer un hébergement, étape 3
On clique sur « supprimer l’hébergement ». On valide en suivant le lien dans le mail que l’on reçoit immédiatement.
Si on retourne à l’accueil, puis au menu domaine, les infos liées au domaine indiquent une erreur. Ca dure environ 1 heure pour moi de 9h50 à 10h26. Ce n’est qu’à ce moment qu’on peut réaliser la prochaine étape. Pendant ce temps, il est possible que des mails ne soient plus reçus. Mais en principe l’expéditeur en est informé…
Activer l’hébergement gratuit
Toujours dans l’espace client d’OVH, on va dans l’onglet « informations générales » du menu domaines du domaine concerné.
Activer l’hébergement web et email gratuit en cliquant sur le bouton « activer » :
OVH : activer l’hébergement web et mail gratuit
choisir seulement la modification des enregistrements MX (on ne crée pas d’hébergement web) :
OVH : activer l’hébergement gratuit pour les mails uniquement
La commande (gratuite) est traitée par OVH. 2 minutes après, on reçoit un mail nous informant que l’hébergement est créé.
5 minutes après, on a accès au menu « email » pour le domaine. Mais avant, il faut vérifier que OVH a correctement réalisé les modifications :
- Les zones DNS des enregistrements A et AAAA doivent toujours pointer vers l’IP de l’hébergement tiers,
- Le champ TXT commençant par « »google-site-verification= » doit toujours être présent (si on l’avait créé avant)
- Le champ SPF du domaine doit être réglé sur « v=spf1 include:mx.ovh.com ~all »
Il y a eu une période où je rencontrais systématiquement des problèmes à ce stade. Il semblerait que ce soit du passé !
Régler l’adresse mail et ses alias
Créer l’adresse mail
Dans l’espace client OVH, menu « emails » du domaine, cliquer sur le bouton « créer une adresse e-mail ». Avec l’hébergement gratuit, on ne pourra en créer qu’une. On lui affectera la taille de compte la plus élevée (5Go). Pour définir le mot de passe, on pourra utiliser le générateur de mot de passe CompariTech.
Voilà, nous avons défini une adresse mail principale, il nous reste à savoir la lire avec un client de messagerie. Mais nous souhaitons peut-être aussi disposer d’autres adresses, pour le même utilisateur. Nous allons donc créer des « alias ».
Définir des alias
Nous avons comme adresse principale isabelle@domaine.com. Ce sera notre adresse courante et nous ne voulons pas qu’elle devienne trop polluée par des spam, ni qu’elle soit connue de tous.
C’est là qu’interviennent les alias de messagerie ! Ce sont des adresses de messagerie qui n’ont pas de compte dédié et qui doivent donc obligatoirement être redirigée sur une « vraie » adresse.
Par défaut OVH crée un alias intitulé « postmaster@domaine.com » et le redirige sur l’adresse principale (isabelle@domaine.com).
Nous pouvons créer un alias, par exemple test@domaine.com :
Cliquer sur le bouton « Gestion des redirections ».
OVH : créer un alias d’email
Une fois qu’on a validé, on peut expédier des mails à test@domaine.com et il est automatiquement reçu par l’adresse vers laquelle on a redirigé l’alias.
Lire les messages
On peut lire les mails en ligne avec la solution OVH pour l’accès webmail, sur https://mail.ovh.net/roundcube/
Pour lire des emails autrement, il faut utiliser un « client de messagerie ». Ils sont nombreux et OVH a rédigé des guides bien fait sur leur réglage, disponibles ici.
Si vous utilisez Gmail, vous pouvez suivre ces instructions :
Et maintenant ?
Et vous, est-ce que vous avez d’autres solutions pour héberger des comptes email à faible coût ?
par Anne-Laure DELPECH | 3 Juil 2017 | Archives
Dans l’article précédent de cette série Un thème enfant de Twenty Seventeen, nous avons vu comment créer un thème enfant pour le thème Twenty Seventeen de WordPress et créer des modèles de page. Aujourd’hui, nous allons voir comment modifier les caractéristiques de l’image d’en-tête du thème et ajouter des sections à la page d’accueil.
Pour réaliser ces modifications, je me suis beaucoup inspirée de cet excellent article, sur Kinsta.com : A Developer’s Introduction to the Twenty Seventeen Theme.
Modifier les caractéristiques de l’image d’en-tête
Le thème Twenty Seventeen utilise une image de 2000 px de large, 1200 de haut. Je préfère une image moins haute, pour voir le contenu de la page sans avoir à utiliser la barre de défilement dès le début.
Je veux régler la hauteur de l’image à 350 px et utiliser par défaut une autre image. Et il faudra modifier la feuille de style pour supprimer le réglage qui met l’image à 100% de la hauteur d’écran.
Dans functions.php du thème enfant, ajouter :
add_filter( 'twentyseventeen_custom_header_args', 'al17_custom_header_args' );
function al17_custom_header_args( $args ) {
// source https://kinsta.com/blog/twenty-seventeen-theme/
$args['default-image'] = get_theme_file_uri( '/images/al_domotic-2000x350.png' );
$args['height'] = 350 ;
return $args;
}
J’ai ainsi défini une nouvelle image par défaut et réglé la hauteur des images à 350 px.
Dans le répertoire /images/ du thème enfant, ajouter l’image (qui doit faire 2000 x 350 px au lieu de ce qui est défini par le thème twentyseventeen (2000 x 1200 px)
Ensuite, on va dans « personnaliser » le thème et on sélectionne la nouvelle image suggérée. Cependant, elle ne s’affiche pas correctement à ce stade, puisque des règles de style l’interdisent.
Je modifie donc style.css du thème enfant
.has-header-image .custom-header-media img {
height: 350px ;
object-fit: none;
min-height: 0;
}
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-media {
max-height: 550px;
}
}
On notera que je n’ai pas modifié le style pour les petits écrans. Je verrai ça plus tard.
Maintenant, l’image d’en-tête s’affiche comme je le voulais :
Modifier le nombre de sections de la page d’accueil
C’est très simple à réaliser, il suffit d’ajouter cette ligne dans functions.php du thème enfant :
add_filter( 'twentyseventeen_front_page_sections', function(){ return 6; } );
Et maintenant, au lieu de 4 sections paramétrables dans le menu « personnaliser », on en a 6 :
Autres modifications
Si je veux avoir une page d’accueil défilante, je m’inspirerai de l’article cité en introduction et de ces deux articles de wpmudev.com :
Et maintenant ?
Je vais utiliser ce thème enfant pour construire un tableau de bord domotique pour ma maison (voir la série d’article Un tableau de bord domotique).
par Anne-Laure DELPECH | 10 Mai 2017 | Archives
J’ai besoin d’utiliser un thème enfant du thème WordPress Twenty Seventeen. Dans cet article, j’explique comme le créer et le modifier légèrement. D’autres articles de cette série Un thème enfant de Twenty Seventeen expliqueront des modifications plus importantes.
Création d’un thème enfant
A l’aide de Filezilla (ou autre accès en FTP) créer un répertoire 2017-child dans wp-content/themes/ du site WordPress utilisé.
Y placer les trois fichiers suivants :
- functions.php
- style.css
- screenshot.png (optionnel) : une image de votre choix, au format 600 px de large et 450 px de haut.
Dans functions.php, placer le code suivant (source Codex WordPress) :
<?php
add_action( 'wp_enqueue_scripts', 'tw17_child_enqueue_styles' );
function tw17_child_enqueue_styles() {
$parent_style = 'twentyseventeen-style-css'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'tw17-child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
Dans style.css , il doit y avoir l’en-tête suivant :
/*
Theme Name: Twenty Seventeen Child
Theme URI:
Description: Thème enfant de twenty seventeen
Author: ALD
Author URI: https://knowledge.parcours-performance.com/
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Tw17-child
-------------------------------------------------------------- */
Et voilà, maintenant le tableau de bord WordPress me propose le thème « Twenty Seventeen Child ».
Modifier le contenu de la page d’accueil
Par défaut, le thème est réglé avec la page « Accueil » comme page d’accueil statique. Je n’y touche pas.
Par contre, je veux modifier le contenu automatique de cette page.
La page d’accueil statique de Twenty Seventeen
Elle contient d’abord le contenu de la page réglée comme page d’accueil statique puis les contenus des 4 sections définies dans le menu « apparence / Personnaliser / Options du thème ».
Je crée 4 pages, intitulées « Caméra », « Nest », « Eedomus » et « Autres » et je les publie.
Ensuite dans le tableau de bord WordPress, je choisis « apparence / Personnaliser / Options du thème » puis j’affecte chacune des pages créées à l’une des 4 sections.
Pour aller plus loin, voir « How to Customize the Free Twenty Seventeen WordPress Theme« .
Créer des modèles de page
A l’aide de Filezilla (ou autre accès en FTP) copier le fichier page.php du thème Twenty Seventeen (répertoire wp-content/themes/twentyseventeen ).
Placer ce fichier dans un répertoire pages dans wp-content/themes/2017-child/ du site WordPress utilisé. Le renommer (pour moi al-dashboard-1.php) et en modifier le contenu pour que l’en-tête contienne un « template name » :
<?php
/**
* Template Name: maquette section 1 (caméra)
*/
Maintenant, si je vais modifier (ou créer) une page dans le site, dans la barre latérale de droite, dans le bloc « Attributs de la page », la liste déroulante « modèles » me propose « maquette section 1 (caméra) ».
Mais attention, si cette page doit être insérée dans la page d’accueil, seul le contenu créé avec l’éditeur WordPress s’affiche…
Et maintenant ?
Je vais utiliser ce thème enfant pour construire un tableau de bord domotique pour ma maison. J’en explique les étapes de construction dans la série d’article Un tableau de bord domotique. Lorsque je ferai des modifications du thème enfant que je viens de créer, je les expliquerai dans les articles suivants de cette série Un thème enfant de Twenty Seventeen
par Anne-Laure DELPECH | 6 Mai 2017 | Archives
Je poursuis le travail pour créer un tableau de bord domotique de ma maison (série d’article Un tableau de bord domotique. Aujourd’hui, je veux afficher les données de mon thermostat Nest sur une page web.
Ce que je veux faire
J’ai un thermostat Nest auquel j’accède à distance (application android) avec l’email EMAIL et le mot de passe PASSNEST.
Je veux afficher les données de ce thermostat sur une page web hébergée sur Infomaniak. Cette page web est codée en PHP.
J’ai fait de nombreux essais infructueux avant de décider d’essayer d’utiliser le code créé par Guillaume Boudreau sur GitHub. Ca fonctionne à la perfection.
Comment faire ?
La première étape est de télécharger le code de Guillaume Boudreau sous forme d’un fichier zip. Ensuite on le décompresse et on place le fichier nest.class.php dans le répertoire principal de notre site.
Dans le répertoire /pi/ (en droits 740), je crée le fichier pw.php, avec droits 664. Il contient les infos suivantes (remplacer les données en majuscules par vos codes d’accès au thermostat) :
<?php
/*************************
Thermostat Nest
*************************/
// mail ety pw de home.nest.com
$nest_user = 'MAIL_NEST@MAIL' ;
$nest_pw = 'NEST_PW' ;
Ensuite, je crée un fichier fichier nest-test.php dans le répertoire principal de mon site et je lui attribue les droits d’accès 644. Ce fichier contient :
<?php
$path = dirname( __FILE__ );
define( 'ROOT',dirname( __FILE__ ) );
define( 'FILE_URL', "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]" );
define( 'BASE_URL', "https://$_SERVER[HTTP_HOST]" );
$title = "Test suivi des Pi";
include ROOT . '/header-2016.php';
// contient les infos d'id et mot de passe des différents équipements
include_once ROOT . '/pi/pw.php';
// https://github.com/gboudreau/nest-api
require_once 'nest.class.php';
?>
<section class="capteurs">
<h2>Nest thermostat</h2>
<?php
// see https://github.com/gboudreau/nest-api/blob/master/examples.php
// Your Nest username and password.
$username = $nest_user ;
$password = $nest_pw ;
// The timezone you're in.
// See http://php.net/manual/en/timezones.php for the possible values.
date_default_timezone_set('Europe/Paris');
// Here's how to use this class:
$nest = new Nest($username, $password);
// Location information
$locations = $nest->getUserLocations();
// Devices list (thermostats)
$devices_serials = $nest->getDevices();
// Device information
$infos = $nest->getDeviceInfo($devices_serials[0]);
// Last 10 days energy report
$energy_report = $nest->getEnergyLatest();
function jlog($json) {
echo json_encode($json, JSON_PRETTY_PRINT) . "\r\n";
}
?>
<p>Location information : <?php jlog($locations); ?></p>
<p>Devices list (thermostats) : <?php jlog($devices_serials); ?></p>
<p>Device information : <?php jlog($infos); ?></p>
<h4>température : <?php printf("%.02f °%s\n", $infos->current_state->temperature, $infos->scale); ?></h4>
<p>Last 10 days energy report : <?php jlog($energy_report); ?></p>
</section>
<!-- div container ENDS here -->
<?php include_once ROOT . '/footer-2016.php'; ?>
Quant à header-2016.php , il contient :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title><?php echo $title ; ?></title>
<?php
// http://blog.lavoie.sl/2013/02/php-document-root-path-and-url-detection.html
$base_dir = __DIR__; // Absolute path to your installation, ex: /var/www/mywebsite
$doc_root = preg_replace("!${_SERVER['SCRIPT_NAME']}$!", '', $_SERVER['SCRIPT_FILENAME']); # ex: /var/www
$base_url = preg_replace("!^${doc_root}!", '', $base_dir); # ex: '' or '/mywebsite'
$protocol = empty($_SERVER['HTTPS']) ? 'http' : 'https';
$port = $_SERVER['SERVER_PORT'];
$disp_port = ($protocol == 'http' && $port == 80 || $protocol == 'https' && $port == 443) ? '' : ":$port";
$domain = $_SERVER['SERVER_NAME'];
// $full_url = "${protocol}://${domain}${disp_port}${base_url}"; # Ex: 'http://example.com', 'https://example.com/mywebsite', etc.
$full_url = "${protocol}://${domain}${base_url}";
// echo $full_url . "\n" ;
?>
<link rel="stylesheet" href="<?php echo $full_url . '/css/pi-stylesheet.css' ; ?>">
<!--
<script src="script.js"></script>
-->
</head>
<header>
<a data-flickr-embed="true" href="https://www.flickr.com/photos/mattwareham/9109691433" title="Raspberry Pi"><img src="https://c2.staticflickr.com/3/2888/9109691433_292d2aac49_m.jpg" width="240" height="160" alt="Raspberry Pi"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
<h1><a href="<?php echo $full_url ?>">suivi des Pi</a></h1>
</header>
<body>
<div class="container">
et footer-2016.php contient
</div> <!-- END container div -->
<footer>
<p>2017 Suivi des alertes et autres infos Pi</p>
</footer>
</body>
</html>
Le résultat
Ca n’est pas très lisible en l’état, sauf la température du couloir car il s’agit de données au format Json. Si je passe la première chaine de caractère dans https://jsonlint.com/, le texte devient plus lisible :
{
"name": "Lzo",
"address": null,
"city": "Tr\u00e9ogat, FR",
"postal_code": "29720",
"country": "FR",
"outside_temperature": 13.3,
"outside_humidity": 88,
"away": false,
"away_last_changed": "2015-03-16 17:51:33",
"thermostats": ["0XXXXXXXXXXXK"],
"protects": []
}
Et si je veux par exemple afficher la température et l’humidité extérieure selon le Nest, je place le code suivant dans ma page web :
<h4>température et humidité ext : <?php printf("%.02f °%s\n", $locations[0]->outside_temperature, $infos->scale); ?>, <?php printf("%.02f %s\n", $locations[0]->outside_humidity, "%"); ?></h4>
Ca m’affiche :
température et humidité ext : 13.30 °C , 87.00 %
Et voilà !
Et maintenant ?
Avant de voir comment stocker les données dans une base de données, je vais continuer à explorer la manière d’afficher les mesures de tous les capteurs de la maison. Les prochains articles à ce sujet seront également dans la série Un tableau de bord domotique.
par Anne-Laure DELPECH | 26 Avr 2017 | Archives
Dans cette série d’articles, Caméra de surveillance et Raspberry Pi, nous avons vu comment diffuser le flux vidéo d’une caméra de surveillance sur une page web générée par un Raspberry Pi. Mais cette page ne peut être vue que de l’intérieur du réseau local puisque l’adresse IP du Pi, 192.168.10.134, est locale et n’existe pas à l’extérieur. Il en va de même pour le flux vidéo créé par ce Pi.
Attention : sécurité !
Avant de faire ce qui suit, il faut :
- changer le mot de passe du routeur ou de la box pour qu’il soit aussi compliqué que possible : on peut utiliser le générateur de mot de passe de LastPass pour en générer un.
- Dans la caméra de surveillance, supprimer l’utilisateur généré automatiquement par l’appareil et créer deux comptes utilisateurs, avec des identifiants et mots de passe complexes. L’un des comptes a les privilèges d’administrateur, l’autre de visiteur. Le mot de passe ne devrait pas contenir de caractères spéciaux.
- Dans motion.conf, s’assurer que l’url d’accès à la caméra est bien celle d’un simple visiteur, pas d’un administrateur.
Accès : adresse IP fixe ou dynamique
Pour accéder de l’extérieur à un appareil du réseau local, il faut remplir deux conditions :
- connaître l’IP publique du réseau local. Les fournisseurs d’accès à internet, tels que Orange ou Free, fournissent en général des adresses IP variables, mises à jour quotidiennement. Dans ce cas, on ne sait jamais quelle est l’adresse IP publique. Il faut donc un système pour mettre à jour l’IP publique à chaque changement. Quelques fournisseurs d’accès, comme OVH, attribuent une adresse publique fixe et c’est alors plus simple.
- Connaître le port de diffusion HTTP de l’équipement auquel on veut se connecter et indiquer à la box ou au routeur du réseau local qu’il est possible de s’y connecter de l’extérieur.
Connaître l’IP publique du réseau local
Lorsqu’on a un fournisseur d’accès qui n’attribue pas une adresse IP fixe, il faut utiliser des systèmes tels que décrits dans les trois article suivants :
Je n’ai pas vraiment essayé ces solutions puisque mon fournisseur d’ADSL est OVH, qui attribue des adresses IP fixes. Pour savoir quelle est cette IP, on peut soit aller dans son tableau de bord client (OVH pour moi), soit utiliser l’un ou l’autre de ces sites : http://www.portchecktool.com/ ou http://www.canyouseeme.org/
Dans mon cas, l’IP fixe est du genre 109.197.17.66, mais fort heureusement, si un internaute tape http://109.197.17.66 dans son navigateur, il arrive à une page lui demandant un identifiant et un mot de passe (celui de la box ou du routeur).
autoriser l’accès au port de diffusion à partir de l’extérieur
Le pi ‘Nautilus’ émet sur le port 80 son flux HTTP mais le flux vidéo qu’il récupère avec Motion émet sur le port 65535. Ce port est défini dans motion.conf (ou threadx.conf s’il y a plusieurs caméras), paramètre stream_port .
Normalement, même sur IP fixe, il est impossible pour un appareil externe d’accéder au contenu d’un appareil à l’intérieur du réseau local. Notre routeur (ou notre box) interdit qu’une requête HTTP entrante accède à un appareil qui lui est connecté. Si quelqu’un tape http://109.197.17.66:65635 , il arrive à une page d’erreur.
Il faut donc dire au routeur, ou à la box internet, d’ouvrir le port 65535 de l’appareil que l’on veut pouvoir atteindre de l’extérieur.
Pour celà, sur un routeur Netgear DGN2200v4, on va dans le menu ‘paramètres avancés’ du routeur, on choisit « configuration avancée » puis « ouverture de port/déclenchement de port ». On clique sur « ajouter un service » et on crée un service TCP et UDP comme suit :
Maintenant, si je tape http://109.197.17.66:65635 dans un navigateur internet, même à l’extérieur de chez moi, j’accède au flux vidéo généré par le nautilus, dont l’adresse IP interne est 192.168.10.134.
Je peux aussi vérifier la bonne ouverture du port avec les sites http://www.portchecktool.com/ ou http://www.canyouseeme.org/.
Et maintenant ?
Je peux accéder au flux vidéo de ma maison depuis n’importe où dans le monde. Il me reste maintenant à sécuriser la page web d’accès et à y récupérer d’autres informations de la maison.
Commentaires récents