par Anne-Laure DELPECH | 10 Mai 2017 | Thèmes
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 | Electronique - domotique, php
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 | Raspberry Pi
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.
par Anne-Laure DELPECH | 2 Avr 2017 | Raspberry Pi
Comment envoyer, à partir d’un Rasberry Pi, un fichier txt toutes les 20 minutes à un serveur distant ? La réponse passe par une connexion FTP et un cronjob, ou tâche planifiée.
Mes objectifs
Sur un Raspberry Pi, j’ai créé un script Shell qui relève la température, la date et l’heure, le nom du Pi et les écrit dans un fichier txt avec la chaîne de caractère définie dans la commande. Ce script, est décrit dans l’article « Raspberry Pi : Mesurer la température avec un capteur DS18B20. Le fichier texte créé s’appelle [hostname]-status.txt.
Maintenant je veux envoyer ce fichier texte à un serveur distant, en FTP.
Et je veux que cet envoi soit réalisé automatiquement toutes les 20 minutes.
Envoyer un fichier à un serveur distant en FTP
Pour connecter un Pi comme client à un serveur, il faut lui installer une application.
Pour installer le package FTP (j’ai choisi celui qui paraissait le plus léger) :
apt-get install ftp
Maintenant, je peux me connecter à un serveur distant.
Je crée le script send-status.sh, avec droits 744 (exécutable) :
#!/bin/bash
printenv
# check my Hostname variable
ThisHost=$(hostname)
date=$(date)
# There should be no ECHO in a CRON job
echo $ThisHost
# $1 is the variable appended to the file when executed
# example : ./send-status.sh essai would put "essai" in $1
# local file to send
FILE=$ThisHost"-status.txt"
# local directory to pick the file for upload
REPERTOIRE="/home/jf/temp/"
echo $REPERTOIRE$FILE
# https://www.raspberrypi.org/forums/viewtopic.php?t=68541&p=500070
# https://www.raspberrypi.org/forums/viewtopic.php?f=91&t=51222
#credentials to access the remote directory
USERNAME="USERNAME"
PASSWORD="PWORD"
SERVER="URL-DU-SERVEUR"
# remote server directory to upload backup
BACKUPDIR="/My-pi/"
echo "Attempting ftp upload~, ..."
cd $REPERTOIRE
ftp -in $SERVER <<EOMYF
user $USERNAME $PASSWORD
pwd
cd $BACKUPDIR
put $FILE
bye
EOMYF
Lorsque je l’éxécute en ligne de commande (), le serveur reçoit bien le fichier texte.
Le Pi affiche un message de succès (mais si) :
Attempting ftp upload~, ...
257 "/" is the current directory
Donc cette opération est correctement réalisée par la ligne de commande.
Réaliser cette action automatiquement (tâche planifiée)
Nous avons déjà essayé le script à la main avec
cd /home/jf/exec
./send-status.sh OK
Et ça fonctionnait. Maintenant, il faut définir l’environnement d’abord, puis indiquer la commande à exécuter et sa fréquence.
Planifier l’exécution du script
Sur le pi, éditer /etc/crontab avec crontab –e :
Y ajouter à la fin (utiliser SHIFT INS pour coller) :
#env
SHELL=/bin/bash
HOME=/home/jf
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
*/20 * * * * bash /home/jf/exec/send-status.sh OK > /dev/null 2>&1
@reboot bash /home/jf/exec/send-status.sh REBOOT
Attention : il doit obligatoirement y avoir une ligne vide à la fin de crontab….
Il faut créer une première fois /home/jf/snd/cron.log et lui donner des droits d’accès en écriture (664).
Le crontab ne démarrera pas tant qu’on aura pas fait un reboot, donc
reboot
Remarques sur les cron jobs et leur debogage, sur Pi
Un cron job se déclenche dans un environnement différent de celui d’un lancement manuel !
Dans le script j’ai ajouté printenv, qui affiche toutes les variables d’environnement.
Et en principe on peut envoyer le cron vers un fichier log mais sur le Pi en cours, je n’y arrive pas.
Comme le cronjob fonctionne, ça n’est pas grave.
Le fichier /var/log/syslog contient également beaucoup d’informations sur ce qui se passe dans le pi.
le cron job @reboot
la ligne @reboot bash /home/jf/exec/send-status.sh REBOOT exécute la tâche lors du reboot du Pi.
Si je reboot le pi ‘pi-name’, le serveur distant reçoit un fichier pi-name-status.txt contenant
pi hostname, time, statut, temperature
pi-name, Sun 2 Apr 17:13:35 CEST 2017, REBOOT, 21.875
Et maintenant
J’ai terminé cette opération. A vous maintenant !
par Anne-Laure DELPECH | 2 Avr 2017 | Electronique - domotique, Raspberry Pi
Le capteur DS18B20 est un capteur à coût réduit (10 € les 5 capteurs étanches avec câble de 1 mètre ou 8 € les 10 capteurs de base), qui utilise le protocole 1-wire. On peut connecter plusieurs capteurs DS18B20 en série sur un même port du Raspberry Pi. Nous allons voir ici comment connecter un seul thermomètre et en écrire la valeur dans un fichier txt par un script Shell ou PHP.
Connecter le capteur DS18B20
Une description détaillée du capteur DS18B20 est disponible en anglais ici. Le capteur peut mesurer des températures entre -55°C et +125°C et reste précis à 0.5°C sur l’intervalle -10°C à +85°C. Chaque capteur a un numéro de série unique (64 bits) et peut donc être identifié précisément.
Pour une seule sonde, on câble comme dans le schéma de droite (note du 29/12/2019 : ATTENTION, le schéma de droite est faux, le connecteur 1 est raccordé à GND, le connecteur 3 à VCC 3.3V !).
On peut mettre plusieurs capteurs en série (en théorie autant qu’on veut, en pratique il semble qu’il vaille mieux se limiter à 10 capteurs). Dans ce cas, on connecte une seule résistance 4.7 K et plusieurs sondes selon le schéma ci-dessous (note du 29/12/2019 : qui est juste, connecteur 1 raccordé à GND, 3 à VDD 3.3 V).
Paramétrer le Pi pour lire la / les températures
Editer /boot/config.txt pour qu’il contienne la ligne suivante puis redémarrer le Pi :
dtoverlay=w1-gpio
Tester le/les capteurs
En ligne de commande, taper les lignes suivantes
sudo modprobe w1-gpio
sudo modprobe w1-therm
cd /sys/bus/w1/devices
ls
cd 28-xxxx (changer pour correspondre aux numéros de série qui s'affichent)
cat w1_slave
Si le capteur est correctement câblé, on voit apparaître quelque chose qui ressemble à ce qui suit, où t=20187 signifie que la température est 20.187°C :
43 01 4b 46 7f ff 0d 10 bd : crc=bd YES
43 01 4b 46 7f ff 0d 10 bd t=20187
S’il y a plus d’un capteur de température, ls dans /sys/bus/w1/devices affichera plusieurs répertoires.
Installer les drivers sur le Pi
modprobe w1-gpio et modprobe w1-therm sont les drivers pour les capteurs de température. Ils doivent démarrer lorsque le Pi démarre. Pour celà, ajouter les lignes suivantes à /etc/modules :
w1‐gpio
w1‐therm
On redémarre le Pi et les drivers sont maintenant chargés.
Un script PHP pour lire les différentes températures
Noter que pour exécuter un script PHP en ligne de commande, il faut avoir préalablement installé PHP-CLI, avec la commande apt-get install php5-cli .
Le script read-temperature.php (exécutable) contient :
#!/usr/bin/env php
<?php
if (!defined("THERMOMETER_SENSOR_PATH")) {
define("THERMOMETER_SENSOR_PATH", "/sys/devices/w1_bus_master1/28-0000046766b0/w1_slave");
}
// Open resource file for thermometer
$thermometer = fopen(THERMOMETER_SENSOR_PATH, "r");
// Get the contents of the resource
$thermometerReadings = fread($thermometer, filesize(THERMOMETER_SENSOR_PATH));
// Close resource file for thermometer
fclose($thermometer);
// We're only interested in the 2nd line, and the value after the t= on the 2nd line
preg_match("/t=(.+)/", preg_split("/\n/", $thermometerReadings)[1], $matches);
$temperature = $matches[1] / 1000;
// Output the temperature
print $temperature . " °C. \n\r";
?>
On l’exécute avec la commande en ligne php read-temperature.php .
Dans mon cas, il affiche 20.875 ▒C.
Un script Shell pour lire la température
Voir ce projet, en anglais. Il lit plusieurs températures à la fois et les affiche à l’écran du Pi sous la forme 28-0000046766b0=20.937 .
Pour ma part, je n’ai qu’une seule température à lire et je veux l’écrire dans un fichier texte que j’enverrai ultérieurement à un serveur distant.
Je crée le script read-status.sh, (avec encodage UTF8 sans BOM, retours chariot UNIX et droits d’accès 744) qui contient :
#!/bin/bash
# afficher les variables d'environnement (utile pour un cron job)
printenv
# check my Hostname variable
ThisHost=$(hostname)
# Get UTC time
UtcNow= date -u
# There should be no ECHO in a CRON job, so comment this !
echo $ThisHost
# $1 is the variable appended to the file when executed
# example : ./send-status.sh essai would put "essai" in $1
# local file to write into
FILE=$ThisHost"-status.txt"
# local directory to write to file and pick it for upload
REPERTOIRE="/home/jf/temp/"
echo $REPERTOIRE$FILE
#Read last temperature
temperature=$(find /sys/bus/w1/devices/ -name "28-*" -exec cat {}/w1_slave \; | grep "t=" | awk -F "t=" '{print $2/1000}')
# create file and add content to it
cd $REPERTOIRE
cat > $FILE <<EOF # single > will empty and overwrite the file
pi hostname, time, statut, temperature
$ThisHost, $UtcNow, $1, $temperature
EOF
Attention, ce script ne lit que le dernier des capteurs de température.
On l’exécute avec la commande en ligne ./read-status.sh OK .
Dans le répertoire temp, j’ai maintenant un fichier piname-status.txt, qui contient :
pi hostname, time, statut, temperature
piname, Sun 2 Apr 15:01:44 CEST 2017, OK, 21.312
Et maintenant ?
Je peux lire la température mesurée par le Pi et la noter dans un fichier texte à chaque fois que j’exécute ./read-status.sh OK en commande en ligne.
La prochaine étape sera d’envoyer les informations du fichier texte à un serveur externe de manière automatique. J’ai déjà décrit l’utilisation d’un cron job dans l’article « Cron Job sur un hébergement mutualisé OVH » mais je vais le réaliser sur un Raspberry Pi. Cest l’objet de l’article « Raspberry Pi : envoyer en ftp un fichier à un serveur, par Cron Job ».
par Anne-Laure DELPECH | 31 Mar 2017 | Hébergement web
Excédée par le mauvais fonctionnement du serveur cloud managé de mon ancien fournisseur, je me suis tournée vers l’offre d’Infomaniak. Je suis stupéfaite par la clarté et la simplicité d’accès. Les prix sont plus élevés mais comme je dispose d’une solution satisfaisante de sauvegardes, je n’ai plus besoin d’acheter une solution complémentaire. Je m’y retrouve donc.
J’explique ici comment transférer un site existant vers son nouvel hébergement. Cet article est rédigé comme aide-mémoire pour moi mais il pourra également être utile à d’autres.
Situation initiale
Domaine testal.com géré par OVH, avec un hébergement sur un serveur cloud OVH. Le site est sous WordPress, avec un certificat SSL.
Je laisse les domaines sur OVH mais je transfère les sites sur des hébergements d’un serveur cloud managé d’Infomaniak.
Les grandes lignes du transfert
On procède en grandes étapes :
- sauvegarde des fichiers spécifiques et de la base de données du site initial ;
- création d’un site WordPress « blanc » sur l’hébergement Infomaniak ;
- Réglages du site WordPress Infomaniak ;
- Pointage des DNS vers le nouvel hébergement ;
- Activation d’un certificat SSL Let’s Encrypt.
C’est seulement durant la quatrième étape que les internautes sont dirigés vers la nouvelle version du site. Pendant la phase de réglages du site, on peut y accéder (visualisation et tableau de bord WordPress) grâce à un lien de prévisualisation très efficace.
Au fur et à mesure du processus, on note les informations importantes dans un fichier, par exemple la check-list de transfert que j’ai créée en divers formats :
Etape 1 sauvegarde du site initial ;
On veut conserver des fichiers spécifiques et la base de données.
Dans l’ancien hébergement, sauvegarder le contenu de wp-content (hors sauvegardes, on peut zapper les répertoires « langages », « cache » et « upgrade » ) et la base de données (avec un dump, ou directement via phpMyAdmin de l’hébergeur).
On a donc deux fichiers :
- Le contenu de la base de données, au nom du type exemple_2017-03-30_11-41-38.sql.zip
- Les fichiers spécifiques, au nom du type exemple_file_2017_03_30.zip
Etape 2 création d’un site WordPress « blanc » sur l’hébergement Infomaniak ;
2.1 Console d’administration
Accès à la console d’administration Infomaniak avec l’adresse mail et l’identifiant noté sur la check-list (dans les informations à conserver).
2.2 Créer un compte FTP dans l’hébergement infomaniak correspondant
Aller dans l’hébergement défini pour le site à transférer (Anne-Laure pour moi). Créer un utilisateur (accès à l’ensemble du répertoire ou un répertoire spécifique), dans l’onglet FTP/SSH, bouton « AJOUTER ».
Noter les informations suivantes dans la check- list (dans les informations à conserver, partie A) :
| Serveur hôte |
abcd.vps.infomaniak.com |
| Nom compte |
abcd_exemple |
| Mot de passe |
mot-de-passe2 |
2.3 Avec filezilla, transférer les fichiers dans le nouvel hébergement
Les fichiers zip de plus de 40 Mo doivent être uploadés avec filezilla et pas le gestionnaire de fichier en ligne d’infomaniak.
Dans Filezilla, on paramètre le compte comme dans cette copie d’écran, avec les informations notées lorsqu’on a créé le compte FTP de l’hébergement Infomaniak :
dans le compte FTP infomaniak, créer un répertoire ald-utils et y placer le fichier zippé des fichiers de l’ancien site (le répertoire wp-content, exemple_file_2017_03_30.zip). Ca prend du temps. En attendant, on peut créer le site wordpress.
2.4 Création du site WordPress Infomaniak ;
Dans le tableau de bord Infomaniak, cliquer sur le bouton « ajouter un site »
(en fait j’ai créé testal.com et pas test.com) Puis « enregistrer »
On arrive alors à une page « assistant de démarrage ». Cliquer sur « installer mon site wordPress » puis « installation avancée »
Puis installer
Noter l’identifiant WordPress et son mot de passe dans la check-list (partie B).
Nota si on avait déjà créé le site, mais pas installé WordPress, il suffit de cliquer sur le bouton « OFF » de la colonne WordPress pour le site concerné, directement dans l’écran Tableau de bord Infomaniak.
2.5 Créer une base de données à partir du tableau de bord Infomaniak
La base de données créées automatiquement par Infomaniak est malheureusement affublée d’un nom illisible, de type abcd_WP124026, et il n’est pas possible de modifier les informations textuelle pour spécifier à quel site se rapporte la base.
Je préfère donc créer une nouvelle base de données, avec un nom clair du type ‘abcd_testal’ que j’associe ensuite au site WordPress testal.com.
Pour cela, c’est l’onglet « bases de données » puis le bouton « ajouter une base de données ».
lui donner un nom intelligible, ici abcd_testal et activer « créer un nouvel utilisateur ».
Noter qu’on peut créer un mot de passe de bonne qualité simplement en cliquant sur le cadenas ouvert à droite de « mot de passe ». Le cadenas devient alors fermé et vert.
On note soigneusement les informations :
| serveur hôte |
abcd.myd.infomaniak.com |
| Nom de la base |
abcd_testal |
| Nom compte |
abcd_testal |
| Mot de passe |
mot-de-passe3 |
Puis cliquer sur Enregistrer
2.6 paramétrage du site WordPress Infomaniak
Pour prévisualiser le site avant de faire le transfert de DNS, Infomaniak a une url de prévisualisation très bien faite.
Pour pouvoir voir et modifier ce site qui n’existe pas pour les internautes, il faut signifier au serveur Infomaniak d’utiliser le lien preview plutôt que l’url habituelle du site.
Aller dans Site Web / Mon Site WordPress. La liste des sites de l’hébergement s’affiche. Cliquer sur le bouton « Configurer » du site en cours de transfert.
On voit que l’adresse du site est http://testal.com, (et aussi que la base de données est celle créée par Infomaniak).
Cliquer sur le bouton « paramètres ».
Dans « site internet à utiliser », choisir l’adresse preview, de type ‘’ http://abcdgalg.preview.infomaniak.website puis « valider ».
Dans paramètres du site, sélectionner le site internet à utiliser en mode preview, et pas l’adresse normale du site.
Copier-coller l’adresse dans la check-list. On peut par exemple cliquer sur le nom de la base de données et copier le nom du site dans la table prefix_options, champ siteurl
2.7 Modifier la base de données nouvellement créée
https://h2-phpmyadmin.infomaniak.ch/MySQLAdmin/
ouvrir la base de données créée manuellement (pas celle créée par infomaniak)
Y importer la bdd du site d’origine (exemple_2017-03-30_11-41-38.sql.zip)
dans la table prefix_options, modifier :
- siteurl site de prévisualisation http://abcdgalg.preview.infomaniak.website
- home site de prévisualisation http://abcdgalg.preview.infomaniak.website
Copier le prefixe utilisé, par exemple Zzr4ez_, pour les tables et le coller dans la checklist (zone D).
2.8 Décompresser et déplacer les fichiers zippés avec le ftp infomaniak
ftp en ligne https://admin2.infomaniak.com/ftp/index.php?sServer=abcd.vps.infomaniak.com
Dans ald-utils, décompresser exemple_file_2017_03_30.zip.
Ensuite, déplacer les fichiers au bon endroit dans le répertoire wp-content du site en cours de transfert. Je laisse les extensions et thèmes installés automatiquement par infomaniak. Je supprime le sous-répertoire 2017 créé par infomaniak dans le répertoire uploads.
2.9 modifier wp-config
Avec le FTP en ligne Infomaniak éditer wp-config.php
Il contient
define('DB_NAME', DB_NAME');
/** MySQL database username */
define('DB_USER', 'DB_USER');
/** MySQL database password */
define('DB_PASSWORD', 'DB_PASSWORD');
/** MySQL hostname */
define('DB_HOST', 'DB_HOST');
et plus loin
$table_prefix = 'table_prefix';
Remplacer les contenus par les informations suivantes, notées dans la checklist (parties C et D) :
- DB_NAME par le Nom de la base – abcd_testal
- DB_USER par le Nom compte – abcd_testal
- DB_PASSWORD par le Mot de passe – mot-de-passe3
- DB_HOST par le serveur hôte – abcd.myd.infomaniak.com
- et $table_prefix par le Préfixe de base de données – Zzr4ez_
Puis Enregistrer.
Maintenant, lorsqu’on visualise le site, on a le site initial.
2.10 Tester la vitesse du site avant transfert (optionnel)
On peut tester la vitesse des sites dans l’hébergement initial avant de le quitter. On peut utiliser les sites suivants et faire une copie d’écran pour conserver l’information.
Etape 3 Réglage du site (peut être fait après aussi)
Infomaniak installe automatiquement deux extensions intéressantes (les autres ne me semblent pas intéressantes) :
- Count Per Day, qui permet de suivre le nombre de visiteur et le nombre de fois où une page a été lue.
- WP Super Cache, qui accélère les sites.
On peut accéder au tableau de bord WordPress du futur site en suivant le lien de preview et en ajoutant wp-login à la fin. On se connecte avec les informations notées dans la partie B de la check-list.
Je réactive ces deux extensions (elles sont désactivées du fait du changement de base de données).
Etape 4 Pointage des DNS vers le nouvel hébergement
4.1 Pointer vers les bonnes adresses IP
Dans le tableau de bord Infomaniak, un bandeau indique que certains noms de domaines ne sont pas correctement liés à cet hébergement.
C’est normal puisqu’on n’a pas encore indiqué la nouvelle adresse IP de l’hébergement. Pour tous les internautes, l’url du site pointe toujours vers l’ancien hébergement.
Il suffit de cliquer sur « afficher les diagnostics » pour visualiser les recommandations d’Infomaniak :
| testal.com |
AAAA |
2001:db8:0:85a3:0:0:ac1f:8001 |
| testal.com |
A |
81.174.114.61 |
| www. testal.com |
CNAME |
testal.com. |
On peut suivre la propagation avec le tableau de bord Infomaniak ou whatsmydns.
4.2 Modifier l’URL du site
Comme dans le paragraphe 2.6 (paramétrage du site WordPress Infomaniak), on modifie le « site internet à utiliser » pour qu’il redevienne http://testal.com
Etape 5 Activation d’un certificat SSL Let’s Encrypt.
Installation d’un certificat SSL Let’s Encrypt
Cette action ne peut être réalisée que lorsque la propagation des nouveaux DNS est suffisante. Il y aura donc une période d’une durée variant entre quelques dizaines de minute et quelques heures (24 heures max) durant laquelle le site ne sera accessible qu’en http.
Dans le tableau de bord Infomaniak, choisir Certificats SSL dans le menu vertical à gauche.
Sélectionner le site pour lequel on veut un certificat puis cliquer sur « installer ».
Tant que les DNS ne sont pas suffisamment propagé (jusqu’au serveur Let’s Encrypt), on a un message d’erreur comme ci-dessous pour le certificat SSL gratuit :
Une fois que l’erreur a cessé, on sélectionne ce certificat et on l’installe.
Régler l’url utilisée pour le site (https)
Comme dans le paragraphe 2.6 (paramétrage du site WordPress Infomaniak), on modifie le « site internet à utiliser » pour qu’il redevienne https://testal.com . Cette option n’est proposée que lorsqu’on a installé un certificat SSL.
Autres réglages
Je n’ai pas eu besoin de modifier le .htaccess puisqu’Infomaniak gère tout seul.
Optionnel : mesurer la vitesse du site après transfert
https://gtmetrix.com/
https://testmysite.thinkwithgoogle.com/
Il n’y a aucune amélioration liée au nouvel hébergement.
Si maintenant j’active WP Super Cache, avec ses réglages par défaut. Les résultats sont les mêmes, assez décevants…
Et maintenant ?
Je vais maintenant travailler sur le transfert des serveurs de mail et sur l’optimisation de la vitesse des sites.
par Anne-Laure DELPECH | 10 Jan 2017 | astuces rapides, bureautique
Pour partager un contenu ou faire du dépannage, nous pouvons avoir besoin de partager notre écran avec d’autres personnes. C’est très simple si vous avez un compte GMail, il suffit d’utiliser Google Hangout.
Ce qu’il vous faut
Un compte Gmail et c’est tout.
Comment faire
Dans Gmail, cliquer sur la caméra dans la colonne de gauche de l’écran :
Inviter les destinataires
Un écran Google Hangout s’ouvre. Au bout de quelques secondes, l’écran nous invite à envoyer des invitations.
Les destinataires recoivent un mail avec un lien de connexion. c’est très simple pour eux.
Régler le type de partage d’écran
Une fois les invitations lancées, en attendant que tout le monde se connecte, on règle le type de partage d’écran :
- écran entier (onglet par défaut)
- fenêtre d’une application spécifique, choisie parmi celles qui sont déjà ouvertes (deuxième onglet)
Et voilà, notre écran, ou la fenêtre choisie, devient visible de nos invités.
Autres sources d’information
Le document d’aide de Google qui m’a aidé la première fois est Partager votre écran au cours d’un Hangout.
par Anne-Laure DELPECH | 19 Déc 2016 | site web
Dans le cadre de mon abonnement annuel à wpmudev (voir le premier article de cette série abonnement WPMUDEV), j’ai accès à différentes extensions très intéressantes. L’une d’elle est Snapshot Pro, qui permet de sauvegarder les sites automatiquement et de les restaurer en un clic. J’explique ici comment la régler, c’est très simple et très efficace.
L’intérêt de Snapshot Pro
Snapshot Pro est accessible aux abonnés à wpmudev. Lorsqu’on a un abonnement, on peut l’installer sur autant de sites que l’on veut. Cette extension a des fonctionnalités intéressantes :
- Accès à un stockage cloud de WPMU DEV de 10 Go ;
- Sauvegarde en FTP ou SFTP, sur Amazon S3, Dropbox ou Google Drive ;
- Sauvegarde de tout ou partie du site ;
- Automatisation des sauvegardes à périodicité définie ;
- Sauvegarde de sites WordPress simples ou multisites ;
- Restauration de site (multisites compris) en un clic, y compris à partir de la sauvegarde vers Dropbox.
Configuration de Snapshot Pro
Une fois Snapshot Pro installé et activé, il faut le régler. Ca se passe dans le menu Snapshot >> Settings de WordPress.
Je laisse tout tel que c’est réglé initialement. En particulier, les sauvegardes réalisées directement sur l’hébergement du site seront placées dans un répertoire « snapshots », sous /wp-content/uploads/.
Réglage des destinations de sauvegardes
dans le menu Snapshot >> Destinations de WordPress, on règle les destinations possibles pour les sauvegardes. Pour ma part, il y a Dropbox et un hébergement tiers, en FTP.
Destination Dropbox
On donne un nom à cette destination puis on clique sur « save destination ». On donne ensuite l’autorisation dans la fenêtre qui s’ouvre (WPMU DEV Snapshot souhaite accéder à son propre dossier, « Applications › WPMU DEV Snapshot« , dans votre Dropbox.) et c’est fait.
Destination FTP
Pour l’instant, je veux sauvegarder dans un hébergement pro d’OVH. Je remplis donc les informations suivantes :
| Destination Name |
nom hébergement FTP |
| server Address |
ftp.clusterxxxxx.hosting.ovh.net |
| user name |
unusername |
| Password |
unmotdepasse |
| Remote Path |
/Plesk-snapshots/ |
| Connection Protocol |
FTP |
| Server Port |
(vide) |
| Server Timeout |
(vide) |
| Passive Mode |
No |
Attention le ‘remote path’ doit avoir été créé au préalable sur l’hébergement cible.
Une fois que j’ai sauvegardé chaque destination, l’écran « Snapshot » >> « Destination » est comme suit :
Réglage des sauvegardes sur le cloud wpmudev
Dans « Snapshot » >> « Destination », cliquer sur le bouton « Configure Full Backups ». On doit récupérer la clé API de Snapshot et la coller dans notre tableau de bord WordPress. Ensuite, on clique sur « activate managed backup ».
On est alors renvoyé à « Snapshot » et on peut si on le souhaite modifier la fréquence des sauvegardes et le type de messages d’erreur à gérer. J’ai laissé une fréquence hebdomadaire et le log des erreurs cochées par défaut.
Planification des sauvegardes
Dans Snapshot >> Add New, on peut créer de nouvelles planifications de sauvegardes.
Pour une sauvegarde FTP
Réglage d’une sauvegarde planifiée en FTP sur Snapshot Pro – écran 1
Réglage d’une sauvegarde planifiée en FTP sur Snapshot Pro – écran 2
Réglage d’une sauvegarde planifiée en FTP sur Snapshot Pro – écran 3
Pour une sauvegarde Dropbox
On fait exactement la même chose (avec évidemment une destination différente).
Pour ma part, j’utilise les mêmes réglages que pour le FTP à deux différences près :
- backup interval : daily managed snapshot
- keep local archives = yes
Et voilà ! On a maintenant des sauvegardes automatiques sur plusieurs destinations.
par Anne-Laure DELPECH | 19 Déc 2016 | site web
Une fois que l’on a souscrit un abonnement annuel à wpmudev, il faut installer un « dashboard » sur chaque site. Il s’agit d’une extension, disponible sur wpmudev ici. Ses principales fonctionnalités sont :
- Mise à jour automatique des extensions et thèmes wpmudev (pas des autres) ;
- Accès à un tableau de bord global, avec tous les sites gérés ;
- Installation en un clic des extensions wpmudev ;
- Accès temporaire pour le support techniques aux sites ;
Installation du dashboard
On télécharge le fichier zippé en cliquant sur le bouton « download » de la page de l’extension wpmudev dashboard.
Une fois l’extension activée, le site apparaît automatiquement dans la liste des sites gérés dans mon « hub » wpmudev.
Suivi des interruptions de fonctionnement
On peut activer le suivi des « uptimes » dans le hub. wpmudev suit maintenant les pannes du site. Mais je ne reçois pas de notification en cas de panne. Je continue donc à utiliser simultanément le système d’alerte que j’ai créé avec Google Sheets, système que j’ai décrit dans l’article Surveiller des sites automatiquement (http 200) avec Google Sheets et un script.
Et maintenant ?
Dans le prochain article de cette série abonnement WPMUDEV, je vais voir comment créer des sauvegardes automatiques vers wpmudev, DropBox et en FTP.
par Anne-Laure DELPECH | 19 Déc 2016 | site web
Lorsqu’on gère plusieurs sites, on a besoin de pouvoir automatiser certains actes de gestion courante. Au stade où j’en suis, j’ai besoin d’automatiser les actes suivants :
- créer un nouvel hébergement ou un nouveau site (à l’intérieur d’un hébergement), avec des paramètres précis (version de PHP par exemple).
- installer automatiquement les extensions WordPress requises.
- Mettre à jour les extensions de manière centralisée.
- Suivre les pannes.
- Créer des sauvegardes périodiques.
L’hébergement VPS Classic d’OVH, avec Plesk for Resellers, répond correctement aux besoins pour les 4 premiers points. Mais il n’y a aucune alerte automatique en cas de panne et le système intégré de sauvegardes périodique ne m’inspire pas totalement confiance car je ne suis pas certaine de pouvoir restaurer la sauvegarde en cas de problème.
J’ai essayé une option qui me paraissait intéressante en 2016 : ManageWP qui gérait les sauvegardes, le clonage de sites et autres options pour 5 domaines (les sous-domaines sont aussi gérés) moyennant environ $100 par an. Mais après l’été, ils ont installé un nouveau système de sauvegarde et il y avait des erreurs fréquentes. Et comme ce système est incapable de gérer des multisites, j’ai commencé à chercher une autre solution.
La solution que j’ai adoptée pour 2017 est un abonnement à wpmudev. J’ai acheté 1 an d’abonnement pour environ $290 un jour où il y avait une réduction de 50%. C’est cher, mais pour ce prix, on peut gérer un nombre illimité de domaines, on bénéficie d’une assistance 24/24 et 7/7 et d’un accès illimité à une large gamme d’extensions intéressantes (dont certaines pour les multisites). Le seul inconvénient est que l’ensemble de la documentation est en anglais.
Dans les prochains articles de cette série abonnement WPMUDEV, je vais explorer les possibilités ouvertes par cet abonnement.
Commentaires récents