************************************************************************************************
*
* IDCOM « ULTIMATE » V3
*
************************************************************************************************

• Le Duplicator IDCOM « ULTIMATE » V3 embarque les fonctionnalités suivantes :

*** Options générales (dans les grandes lignes…) :

* Général :

– Checkbox pour activer/désactiver Barba JS (librairie permettant de recharger les pages sans rechargement de page) ;
– Checkbox pour afficher (ou pas) une animation de chargement (preloader) ;
– Réglage de l’année de naissance du site ;
– Réglage du format du copyright (année de naissance du site + année courante ou année de naissance du site seule) ;
– Champ pour renseigner l’identifiant du gtag ;
– Champ pour renseigner l’identifiant de la meta de vérification de la Google Search Console ;
– Checkbox permettant d’activer la comptabilisation des vues (articles, pages, et produits) ;
– Champ permettant de renseigner un libellé dans une sorte de « bandeau d’information » (totalement facultatif… mais je l’ai laissé au cas où…) ;

* Gestion des liens vers les réseaux sociaux :

– Champs pour renseigner les liens vers les réseaux sociaux suivants :
– Facebook ;
– Instagram ;
– Twitter ;
– Pinterest ;
– Tumblr ;
– Checkbox permettant d’afficher (ou pas) le lien vers le flux RSS du site ;

* Gestion du blog (archive.php) :

– Affichage des articles en liste ou en grille ;
– Réglage des proportions des images des articles (16:9, 4:3, 2:1, etc.) ;
– Réglage du bouton « Lire plus » ;
– Image par défaut de l’entête ;
– Réglage du « pré-sous-titre » (<span>) ;
– Réglage du sous-titre (<h2>) ;
– Réglage de la citation + auteur de la citation + image de fond (facultatif…) ;
– Réglage de la bannière publicitaire (facultatif…) ;

• Note : l’archive.php propose un affichage similaire au fichier search.php, avec pour seule différence un affichage différent des titres, sous-titres, etc. ;

*** Options de la boutique (dans les grandes lignes…) :

* Général :

– Réglage du nombre de produits par page ;
– Réglage du nombre de colonnes de produits ;
– Réglage du libellé des produits « Nouveauté » ;
– Réglage du nombre de jours, à partir de la publication d’un produit, durant lequel un produit est considéré comme étant une « nouveauté » ;
– Réglage du libellé des produits en promotion ;
– Réglage des proportions des images des produits (products archive) ;
– Réglage des proportions des images d’un produit (single product) ;

* Produits :

– Réglage du titre de la page d’accueil de la boutique ;
– Réglage de la description de la page d’accueil de la boutique ;
– Réglage de l’image par défaut de l’entête de la boutique ;
– Réglage du « pré-sous-titre » de la page d’accueil de la boutique (<span>) ;
– Réglage du sous-titre de la pag d’accueil de la boutique (<h2>) ;
– Réglage de la citation, de l’auteur, et de l’image de fond par défaut de la boutique (facultatif…) ;
– Réglage de la bannière publicitaire par défaut de la vboutique (facultatif…) ;
– Checkbox permettant de configurer, sur la page d’un produit, si les images sont à gauche et les données du produit à droite, ou vice-versa ;

************************************************************************************************

• « Stockage » des données des Options générales et des Options de la boutique :

– Ces données sont stockées dans la fonction idcom_get_global_site_data(), fonction déclarée dans le custom.php. La fonction est instanciée dans le custom.php, et retourne une variable $site_data (variable globale) qui est appelée partout où il le faut, de sorte à avoir accès aux « données globales » partout où l’on pourrait en avoir besoin.

************************************************************************************************

• Gutenberg :

– Dans le répertoire /config/ du thème, le fichier gutenberg.php permet de renseigner les blocs Gutenberg à utiliser ;
– La déclaration d’un bloc est assez simple, et chaque bloc doit être déclaré dans la fonction idcom_register_acf_blocks(), comme ceci :

// WP Editor
acf_register_block_type(array(
‘name’ => ‘editor’, // déclarer le nom du bloc « editor »
‘title’ => __(‘Éditeur de texte’,’idcomcrea’), // Renseigner la fonction du bloc
‘render_template’ => $tpl.’editor/tpl.php’, // renseigner le nom du bloc pour cibler le répertoire de celui-ci
‘category’ => ‘idcom’,
‘icon’ => ‘welcome-write-blog’, // Changer éventuellement l’icône relative au bloc (WordPress Dashicons)
‘keywords’ => array(‘éditeur’,’texte’,’paragraphe’), // Indiquer des mots-clés relatifs à la fonction du bloc
‘post_types’ => array(‘post’, ‘page’), // Définir ici si le bloc peut être utilisé pour les pages, les articles (posts), ou les deux
‘mode’ => ‘edit’,
‘enqueue_assets’ => function(){
wp_enqueue_style(‘idcom-gtbg-editor’, GUT.’editor/style/index.php’, array(), IDCOMv, ‘all’); // Feuille de style du bloc : modifier le nom « editor » selon le nom du bloc créé ou à créer, pour cibler la bonne feuille de style
}
));

• Répertoire des blocs Gutenberg :

– Les blocs Gutenberg sont répertoriés dans le répertoire /templates/gutenberg/
– Chaque bloc doit scrupuleusement respecter la même arobrescence, comme suit :

/templates/gutenberg/mon-bloc/
/templates/gutenberg/mon-bloc/index.php -> fichier de redirection vers la racine du site (sécurité)
/templates/gutenberg/mon-bloc/tpl.php -> le template du bloc, contenant le code-source HTML
/templates/gutenberg/mon-bloc/style/ -> répertoire de la feuille de style (less)
/templates/gutenberg/mon-bloc/style/style.less -> la feuille de styles incluant les medias queries adéquates
/templates/gutenberg/mon-bloc/js/ -> répertoire du javascript
/templates/gutenberg/mon-bloc/js/src.js -> fichier javascript relatif au bloc (si nécessaire, par exemple dans le cas d’un diaporama)

ATTENTION : si un bloc doit contenir du javascript, il ne faut surtout pas y mettre des requêtes ajax, pour des questions de sécurité. En effet : le thème embarque une fonction qui compile les fichiers javascript de chacun des blocs, les obfusque, puis les injecte dans le <head> du site (seule méthode permettant d’affecter du javascript à un bloc, dans le cadre de l’utilisation avec Barba JS).

La fonction de compilation des fichiers javascript des blocs Gutenberg est dans le fichier gutenberg.php, ainsi que la classe PHP permettant d’obfusquer le code injecté. L’obfuscation du javascript permet de crypter le code, et surtout de ne l’injecter que sur une seule ligne. De ce fait, le code reste viable même lorsque le code HTML du site est minifié et le site mis en cache.

• NOTE : lors de la création d’un nouveau bloc Gutenberg, il suffit de dupliquer le dossier « _base » dans le répertoire des blocs, puis de modifier le dossier dupliqué avec le nom du bloc désiré, et enfin d’éditer les fichiers tpl.php, style.less, et src.js.

• NOTE pour l’édition du fichier src.js : il faut encapsuler le code javascript dans une fonction, sans pour autant ajouter la directive $(document).ready ou jQuery(document).ready. En effet : lors de la compilation des fichiers javascript des blocs Guteberg, les fonctions sont injectées dans le <head>. Les fichiers barba.js et no-barba.js (utilisés respectivement selon l’activation/non-activation de Barba JS) se chargent de recréer l’appel aux fonctions injectées dans le <head> et les rendent fonctionnelles dès le chargement du DOM.

ATTENTION : pour tout bloc dont le fichier src.js contient une fonction javascript, il faut, pour que la fonction puisse être exécutée en front, la déclarer dans un attribut du conteneur HTML du bloc, en l’occurrence l’attribut « data-idcom-js ». Par exemple :

// src.js :
function idcomSlider(){

// My code…

}

// tpl.php :
<?php

global $wp;

?>
<section class= »my-section » data-idcom-js= »idcomSlider »>
…
</section>

Sans cette déclaration la console retournera une erreur javascript indiquant que la fonction n’existe pas.

• NOTE relative au fichier main.js : le fichier main.js est lui-même encapsulé dans une fonction, la fonction idcomInit(). Tout code javascript doit donc être intégré dans cette fonction, c’est donc cette fonction qu’il faut, si besoin, rédiger les requêtes ajax pour plus de sécurité. La fonction idcomInit() embarque des fonctions comme par exemple la gestion du bouton « Go to top », l’affichage du champ de recherche en pleine page, la gestion du menu en place sur le thème (menu évidemment à adapter ou réécrire selon chaque projet).

************************************************************************************************

• Arborescence des fichiers .less :

– Pour permettre le bon fonctionnement des blocs Gutenberg, avec ou sans Barba JS, et permettre aussi une économie de rédaction dans les variables, l’arborescence des fichiers .less est un tantinet différente de l’historique thème IDCOM :

– Détail de l’arborescence des fichiers .less :

/css/style.less -> ce fichier se contente d’effectuer les imports des autres fichiers ;
/css/utils.less -> les fonctions utiles ;
/css/globals.less -> ce fichier contient toutes les variables et classes « globales » ;
/css/custom-columns.less -> ce fichier contient des classes de « colonnage » avec un pas de 5%, utile pour par exemple créer des lignes avec 5,7, 9 colonnes, etc. ;
/css/woo.less -> ce fichier contient le style retravaillé des pages Woocommerce « globales » (Panier, Mon compte, paiement) ;
/css/woo-custom.less -> ce fichier contient le style personnalisé de la partie Woocommerce ;
/css/desktop.less -> styles globaux pour les grandes résolutions
/css/tablet.less -> styles globaux pour les résolutions « tablette »
/css/mobile.less -> styles globaux pour les résolutions « mobile »

• NOTE sur le fichier globals.less : ce fichier embarque donc diverses variables « préformatées », et classes utilisées un peu partout dans les fichiers de styles. Une nomenclature pour la gestion des couleurs est mise en place, pour n’avoir à les renseigner que dans ce fichier, et ainsi permettre de réutiliser les blocs Gunteberg de sites en sites avec cette même nomenclature.

Exemple pour la couleur primaire :

/* Primary color ( bleu marine ) */
@ab: #11003c; // Couleur primaire « standard »
@ab-a: fade(@ab, @alpha); // Couleur primaire avec transparence, selon la variable @alpha (75%)
@ab-lt: #210665; // Couleur primaire « light »
@ab-lt-a: fade(@ab-lt, @alpha); // Couleur primaire « light » avec transparence, selon la variable @alpha (75%)
@ab-dk: #0a0024; // Couleur primaire « dark »
@ab-dk-a: fade(@ab-dk, @alpha); // Couleur primaire « dark » avec transparence, selon la variable @alpha (75%)

Pour la couleur secondaire, la nomenclature décale les lettres de sorte à ce qu’une couleur soit identifiée selon 2 lettres seulement, en l’occurrence :

@bc;

Couleur tertiaire :

@cd;

Etc.

Chaque couleur est déclinée selon des classes :

.ab-t { color: @ab; }
.ab-lt-t { color: @ab-lt; }
.ab-dk-t { color: @ab-dk; }

.ab-bg { background: @ab; }
.ab-bg.alpha { background: @ab-a; }

.ab-lt-bg { background: @ab-lt; }
.ab-lt-bg.alpha { background: @ab-lt-a; }

.ab-dk-bg { background: @ab-dk; }
.ab-dk-bg.alpha { background: @ab-dk-a; }

.ab-bg,
.ab-lt-bg,
.ab-dk-bg {
color: @white;
a { color: @white; }
a:hover { color: @white; }
}

Ça peut paraître abrupte, comme nomenclature, mais c’est assez pratique.

Au niveau des classes propres à Bootstrap, celles-ci figurent en partie dans le fichier globals.less, par exemple :

/* Buttons */

.btn {
.transition(.25s);
display: inline-block;
position: relative;
border-radius: 0 !important;
border: none;
outline: none;
line-height: 0;
}

.btn-xs {
padding: 6px 12px;
font-size: 13px;
line-height: 15px !important;
}

.btn-sm {
padding: 8px 14px;
font-size: 14px;
line-height: 16px !important;
}

.btn-md {
padding: 10px 16px;
font-size: 15px;
line-height: 17px !important;
}

.btn-lg {
padding: 12px 20px;
font-size: 17px;
line-height: 19px !important;
}

.btn-xl {
padding: 14px 26px;
font-size: 19px;
line-height: 21px !important;
}

/* Primary */
.btn-primary {
background: @ab;
color: @white;
border: solid 1px @ab;
}

.btn-primary:hover,
.btn-primary:focus {
background: @bc;
border: solid 1px @bc;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.btn-primary.btn-empty {
background: @white;
color: @ab;
}

.btn-primary.btn-empty:hover {
color: @bc;
text-shadow: 0 0 0 rgba(0,0,0,0);
}

/* secondary */
.btn-secondary {
background: @bc;
color: @white;
border: solid 1px @bc;
}

.btn-secondary:hover,
.btn-secondary:focus {
background: @ab;
border: solid 1px @ab;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.btn-secondary.btn-empty {
background: @white;
color: @bc;
}

.btn-secondary.btn-empty:hover {
color: @ab;
text-shadow: 0 0 0 rgba(0,0,0,0);
}

Etc.

************************************************************************************************

• Arborescence des fichiers PHP :

Les fichiers archive.php, search.php, single.php et 404.php sont pleinement fonctionnels. Selon le projet à traiter, les fichiers archive.php, search.php peuvent nécessiter des modifications, mais la base est là.

• Woocommerce :

La gestion de la partie Woocommerce s’effectue dans le fichier woo_custom.php situé dans le répertoire /config/. Ici aussi, l’essentiel est prévu, et géré via les hooks :

– Listing des produits (archive « classique » et archive des mots-clés) ;
– Page d’un produit incluant un diaporama et un style « de base » ;

************************************************************************************************

• Objectif de cette « matrice » :

– Favoriser la capacité à réutiliser ce qui a déjà été codé ;
– Embarquer les fichiers et fonctions de base, et favoriser les bonnes pratiques ;
– Permettre à chacune et chacun d’étoffer sa propre matrice selon cette base, pour coder plus vite et mieux chaque site ;
– Permettre d’utiliser Gutenberg avec plus de pointillisme (ça n’est pas du tout une obligation, mais Gutenberg est puissant… et offre de pouvoir réutiliser, dans ce contexte, chaque bloc déjà codé) ;