Le pré-requis
Connaitre Javascript et PHP, et accessoirement HTML/CSS.
Choisir son thème et créer un thème enfant. C’est important pour éviter qu’une mise à jour du thème vienne écraser tout votre travail. De nombreux tutos expliquent déjà comment faire mais je prendrais peut-être le temps d’en faire un aussi…
Installer un module complémentaire qui permet d’intégrer à une page ou un article les données. Pour ma part j’ai choisi XYZ PHP Code qui m’a semblé le plus simple à mettre en oeuvre après de rapides tests.
Organiser son travail, préparer ses répertoires
Afin de retrouver ses petits, il est nécessaire de créer une arborescence pour s’y retrouver dans quelques semaines/années. Car même si tout fonctionnera très bien en plaçant tout dans le même répertoire, il est toutefois plus simple de s’y retrouver par la suite quand c’est un peu rangé.
Je ne suis pas un champion dans l’organisation des répertoires donc ce n’est pas vraiment un modèle à suivre. Mais cela permet de montrer à quoi ressemble l’architecture des dossiers pour la suite.
Exemple 1 :
Un Foo bar
Avant d’aller dans le dur on va créer une base très simple. Une page PHP (mon_test.html.php) qui se situera dans le [chemin]/html/mon_test.html.php ou on se contentera d’un simple affichage d’un texte :
<?php print '<b>Toto</b> va au <i>ski</i>'; ?>
Dans le tableau de bord WordPress allez dans le module XYZ PHP Code (en bas dans la barre latérale de gauche).
Sur la page d’accueil cliquer sur « Add New PHP Code Snippet »
Dans tracking Name, donnez un titre plutôt explicite pour votre module (pas comme pour cet exemple).
Attention le tracking name ne peut comporter que des lettres des chiffres et des tirets.
Dans PHP code, appelez le fichier créé précédement. ON aurait pu intégrer directement le code dans ce bloc, mais quand on aura des morceaux plus évolués à intégrer, il sera plus aisé de travailler avec ce type d’appel.
On clique sur Update puis Back.
De retour sur la page principale du module XYZ PHP Code, si tout s’est bien passé on retrouve une nouvelle ligne.
Il suffit maintenant simplement de récupérer notre snippet (un copier coller du texte [xyz-ips…]) et de le coller dans une page ou un article.
On enregistre le tout et on teste… et si tout est ok (surtout le chemin d’accès) notre texte s’affiche dans notre page.
Exemple 2 :
Un exemple un peu plus complexe
Pour analyser des données, il est souvent nécessaire de manipuler des graphiques et des cartographies. Pour cela, nous utiliserons la bibliothèque echarts (https://echarts.apache.org/) qui propose une grande variété d’objets de visualisation de données et une documentation très fournie.
Nous allons donc afficher des données, provenant par exemple d’une base de données et l’intégrer à un graphique.
Pour cela créer un répertoire (ici : pluviometrie) avec en dessous l’arborescence vue au début.
- définir le chemin d’accès aux scripts dans le fichier functions.php (qui se trouve à la racine du sous-thème) en ajoutant la ligne suivante :
define('WWW_ROOT_PLUVIOMETRIE', ABSPATH.'/src/pluviometrie/'); // chemin pour le module pluviomerie
// éventuellement les appels aux ressources utilisées via composer
// DBB
use tommyknocker\pdoDatabaseClass;
$GLOBALS['db'] = (isset($GLOBALS['db'])) ? $GLOBALS['db'] : new PDODb($config["dbParams"][PARAMS]);
$db = $GLOBALS['db'];2. Création du controller (_observation_temps.inc.php qui se situe dans src/pluviometrie/controller)
<?php
require_once(WWW_ROOT_PLUVIOMETRIE.'config/_init.php');
try{
$sel_serie_data = "date_obs, precipitation, temp_mini, temp_maxi";
$db->where("date_obs", $annee."-%", "LIKE");
$db->orderBy("date_obs", "ASC");
$rs_serie_meteo = $db->setReturnType(PDO::FETCH_GROUP|PDO::FETCH_UNIQUE|PDO::FETCH_ASSOC)->get('pluviometrie', null, $sel_serie_data);
$sel_pie_precipitations = "ANY_VALUE(MONTH(date_obs)) as num_mois, ANY_VALUE(MONTHNAME(date_obs)) as name, ROUND(SUM(precipitation), 1) as value";
$db->groupBy("num_mois");
$db->where("date_obs", $annee."-%", "LIKE");
$db->orderBy("num_mois", "ASC");
$rs_pie_precipitations = $db->setReturnType(PDO::FETCH_GROUP|PDO::FETCH_UNIQUE|PDO::FETCH_ASSOC)->get('pluviometrie', null, $sel_pie_precipitations);
}
catch (Exception $e) {
echo "une erreur a été levée<br>";
echo $db->getLastQuery()." <br> ";
var_dump($db->getLastError());
}3. Dans _init.php on initialise la création de l’appel à la classe de manipulation de la base de données (ce qui peut aussi être fait dans functions.php)
<?php
if ( ! session_id() ) {
@session_start();
}
$config_name = "config.json";
define('PATH_CONFIG', WWW_ROOT_PLUVIOMETRIE.'config/'); // chemin pour les classes
// chargement du fichier de configuration
$config = json_decode(file_get_contents(PATH_CONFIG.$config_name), true);
// $db = new PDODb($config["dbParams"][PARAMS]);
$GLOBALS['db'] = (isset($GLOBALS['db'])) ? new PDODb($config["dbParams"][PARAMS]) : $GLOBALS['db'];
$db = $GLOBALS['db'];
?>4. Création du fichier template (mainfile.html.php)
<section>
<div class="row">
<div class="col-xs-12 col-md-9">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-header">
<h4></h4>
</div>
<div class="card-body">
<div id="graph_meteo_div" style="width: 100%;height:500px;"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-header">
<h4>Répartition du cumul des précipitations</h4>
</div>
<div class="card-body">
<div id="repart_precip_div" style="width: 100%;height:500px;"></div>
<?php
require_once(WWW_ROOT_PLUVIOMETRIE.'js/graph_data.js.php');
?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Pour plus de simplicité et surtout afin de pouvoir réutiliser notre développement dans d’autres pages indépendamment des données reçues nous allons créer 2 scripts js distincts.
5. graph_data.js.php
<script type="text/javascript" >
function serieTempPluie() {
var chartDom = document.getElementById('graph_meteo_div');
var myChart = echarts.init(chartDom);
var option;
const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Precipitation', 'Minimales', 'Maximales']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: <?php print json_encode(array_keys($rs_serie_meteo)); ?>
}
],
yAxis: [
{
type: 'value',
name: 'Temperatures',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} °C'
}
},
{
type: 'value',
name: 'Precipitation',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} mm'
}
},
],
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
series: [
{
name: 'Precipitation',
type: 'bar',
yAxisIndex: 1,
data: <?php print json_encode(array_column($rs_serie_meteo, "precipitation")); ?>
},
{
name: 'Minimales',
type: 'line',
data: <?php print json_encode(array_column($rs_serie_meteo, "temp_mini")); ?>
},
{
name: 'Maximales',
type: 'line',
data: <?php print json_encode(array_column($rs_serie_meteo, "temp_maxi")); ?>
}
]
};
option && myChart.setOption(option);
}
function repartPrecipitation() {
var chartDom = document.getElementById('repart_precip_div');
var myChartRepart = echarts.init(chartDom);
var option;
option = {
legend: {
top: 'bottom'
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: <?php print json_encode(array_values($rs_pie_precipitations)); ?>
}
]
};
option && myChartRepart.setOption(option);
}
serieTempPluie();
repartPrecipitation();
</script>6. Création d’un nouveau module XYZ : on retour donc dans le module XYZ PHP pour créer un nouveau Snippet. En tracking name on le nommera Meteo. Puis on insère le code suivant :
<?php
require_once("src/pluviometrie/html/observation_temps.html.php");
?>7. Enfin dans l’article voulu on insère l’appel au snippet.
On obtient le résultat suivent : https://richard-pichet.fr/suivi-temperatures-et-meteo-a-saint-sulpice-de-pommeray/
Les sources de cet exemple sont sur GitHub : https://github.com/thanathz/wordpress-echarts#wordpress-echarts