Documentation

Sommaire

1. Documentation
   1. Sommaire
   2. Setup
      1. Installation
      2. Infos pratiques
      3. Versions
      4. Langue
      5. Réglages
         1. Textdomain
         2. Supports
         3. Menu
      6. ACF Paths
   3. Plugins loader
   4. Tools
      1. super_var_dump($var)
      2. slugify($text, string $divider = ‘-‘)
      3. lasai_date_diff($date1, $date2)
      4. import_hebergement_image( $base64_img, $title, $parent )
   5. Enqueues
   6. Customizer
   7. Couleurs
   8. Blocks Gutenberg
      1. Blocks natifs
      2. Blocks ACF
         1. Section
         2. Bouton
         3. Maillage
         4. Call to action
         5. Hébergements
      3. Comment modifier un block dans le thème enfant ?
      4. Création automatique du scss dans assets
   9. Hebergements
   10. Webservice
       1. Activer Thelis
       2. Activer Ctoutvert
       3. Import des hébergements
          1. Importer les traduction des hébergements
          2. Traduction des images importées
       4. Disponibilités en temps réel

Setup

Installation

1. Installer et activer le thème parent
2. Installer et configurer les plugins obligatoires (configurer WP SCSS pour le thème enfant)
3. Installer et activer le thème enfant
4. Synchroniser les champs ACF
5. Configurer les options dans le Customizer
6. Have fun 😉

Infos pratiques

Le thème parent charge le style du thème enfant.
Le thème enfant charge le style du thème parent.

Les fichiers PHP sont automatiquement pris en compte dans le thème enfant, si vous les placez dans le répertoire identique au parent.

Les fichiers SCSS des blocks sont automatiquement compilés et appelés. Vous avez juste à créer et modifier le fichier SCSS du block dans son répertoire /assets/blocks/nomdublock

Pour soumettre des évolutions, ou rapporter des bugs, vous pouvez créer des tickets sur le tableau Trello :
https://trello.com/b/BFQbaIZH/tableau-agile

Versions

La version du thème est définie par TVDLC_VERSION. Nous l’incrémenterons au fur et à mesure des mises à jour.

Le thème parent et le thème enfant sont disponibles sur BitBucket :
https://bitbucket.org/SylvainNascimento/lasai/src/main/

Langue

La variable globale $ls_lang contient le code de langue actuelle, que WPML soit installé ou non.
Pour l’appeler, il suffit d’écrire “global $ls_lang;”

Réglages

Textdomain

Le text domain pour les champs traduisible est “lasai”.

Supports

Le thème supporte par défaut “title-tag”, “post-thumbnails” et “custom-logo”.

Menu

Le thème comporte un menu “menu-1”.

ACF Paths

Le thème nécessite ACF pour fonctionner. Lors de l’activation, il faut synchroniser les champs JSON par défaut. Ces champs sont synchronisés depuis lasai/assets/admin/acf-json. Une fois le thème enfant activé, la synchronisation reste active, mais la sauvegarde se fait dans le thème enfant : lasai-child/assets/admin/acf-json.

Plugins loader

Le thème a besoin de plugins pour fonctionner.

Certains sont inclus directement dans le thème :

• ACF PRO
• ACF Customizer
• ACF Editor Palette
• WP SCSS

D’autres sont chargés depuis la librairie WordPress :

• ACF Font Awesome

Les plugins sont chargés à l’aide de TGM-Plugin-Activation-2.6.1 (/lib/TGM-Plugin-Activation-2.6.1/)

Tools

L’idée de tools.php est de stocker des fonctions utiles au développement.

super_var_dump($var)

Affiche le contenu du var dump formaté dans des balises <pre>, donc beaucoup plus lisible.

slugify($text, string $divider = ‘-‘)

Transforme en slug le contenu de $text. Possibilité de choisir le séparateur grâce à $divider (“-” par défaut).

lasai_date_diff($date1, $date2)

Retourne le nombre de jour séparant 2 dates

import_hebergement_image( $base64_img, $title, $parent )

Importe une image en base 64 dans la médiathèque, et l’attache à un hébergement $parent.

Enqueues

La fonction lasai_scripts() enqueue les différents styles et scripts du thème utile sur le front, et également dans le preview Gutenberg (l’éditeur de page).

Voici les ressources incluses :

• Fancybox : Un système de permettant l’ouverture de fichier (image, pdf…) en lightbox. Il suffit d’ajouter la classe “fancybox” à un lien vers un contenu, ou un attribut data-fancybox=”nom-de-la-galerie” pour relier des photos entre elles dans une galerie.
• Font Awesome : Bibliothèque d’icône
• Lasai style : Style principal du thème (appelle le get_stylesheet(), donc le style.css du thème enfant si il est en place).
• JS Cookies : Permet la gestion des cookies par JS. Sert notamment à garder en mémoire les paramètres de recherche de dates.
• Caleran : Calendrier date range picker : https://rettica.com/caleran/docs/readme.html#how-to-use-it
• Functions : Un fichier JS contenant toutes les fonctions appelées dans les autres fichiers.
• General : Un fichier de JS général appelé sur tout le site (vide pour le moment).
• Navigation script : Fichier spécifique à la navigation.
• Form resa script : Fichier spécifique au formulaire de réservation.

La fonction lasai_block_editor_scripts() charge un style CSS uniquement dans l’éditeur de page Gutenberg, ainsi que sync_hebergements.js si on se trouve sur les page admin du custom post type “Hébergements”.

Customizer

customizer_acf() est un fonction déclarant les différentes options du thème accessibles depuis le Customizer WordPress (Apparence -> Personnaliser). Elles sont déclarées grâce à l’extension ACF Customizer, qui permet de supporter les champs ACF dans le Customizer.

Les différents champs d’option du thème sont donc désormais accessible via plusieurs theme_mod :

• En-tête : acf_theme_mod_header
• Couleurs du thème : acf_theme_mod_colors
• Contact : acf_theme_mod_contact
• Réservation : acf_theme_mod_resa
• Moyens de paiement : acf_theme_mod_paiement
• Réseaux sociaux : acf_theme_mod_socials

Couleurs

La fonction set_theme_colors() déclare les différentes couleurs renseignées dans la palette de l’éditeur de page Gutenberg. Les couleurs enregistrées seront donc accessibles depuis les différents blocks (couleur de fond et couleur du texte).

La fonction wp_scss_set_variables() enregistre les différentes couleurs dans des variables CSS incrémentées $color-X.

(Exemple : la première couleur enregistrée sera accessible par $color-1, la seconde par $color-2).

Par défaut color-1 = #000 et color-2 = #fff.

Blocks Gutenberg

Blocks natifs

Pour limiter les possibilités, voici les blocks natifs autorisés par la fonction lasai_allowed_blocks() :

 'core/image',
 'core/paragraph',
 'core/heading',
 'core/list',
 'core/gallery',
 'core/quote',
 'core/file',
 'core/video',
 'core/code',
 'core/html',
 'core/columns',
 'core/separator',
 'core/shortcode',
 'core/spacer',
 'core/embed',

Les slugs des blocks natifs peuvent se retrouver facilement : https://rudrastyh.com/gutenberg/remove-default-blocks.html#block_slugs

Blocks ACF

La fonction lasai_acf_init_block_types() déclare les nouveaux blocks créés via ACF.

Section

Un block permettant de wrapper d’autres blocks dans une section. Permet d’ajouter des backgrounds color ou image.

Bouton

Un simple block de bouton permettant de faire un lien vers une page interne ou externe.

Maillage

Un block permettant de faire du maillage vers d’autres pages :

• Sélection : Une sélection de contenu (articles, pages, ou autre …)
• Pages enfants : Affiche les pages enfant de la page courante, ou d’une page choisie.
• Pages sœurs : Affiche les pages sœurs de la page courante, ou d’une page choisie.
• Taxonomie : Affiche les articles d’une taxonomie (à venir)

Possibilité de choisir le nombre de résultat à afficher, et le nombre d’éléments par ligne.

Call to action

Un block permettant de créer un call to action (idem que ceux généré par maillage).

Hébergements

Un bloc pour afficher les hébergements. Possibilité de choisir un type à afficher.

Les hébergements sont affichés avec les filtres disponibles et un formulaire de recherche de dates.

Comment modifier un block dans le thème enfant ?

Lors de la déclaration du block dans le thème parent, la fonction the_current_theme_block_style() va vérifier si le style du bloc existe dans le thème enfant. Pour modifier un block depuis le thème enfant, il suffit de recréer les fichiers à l’identique, dans le répertoire à l’identique.

Exemple
Pour modifier le block bouton, créer le répertoire suivant dans le thème enfant : “/partials/blocks/button”.
Puis créer les deux fichier button.php et button.scss.

Le fichier PHP sera automatiquement pris en compte par WordPress, ce qui n’est pas le cas du fichier SCSS.
Pour y parvenir, le thème a prévu une fonctionnalité.

Création automatique du scss dans assets

Le scss du block nomdublock.scss dans le répertoire “/partials/blocks/nomdublock/” génère automatiquement un fichier SCSS dans le répertoire “/assets/scss/” nommé : “block-nomdublock.scss”. Il contient le ”@import “../../partials/blocks/nomdublock/nomdublock.scss”.

Cela permet au plugin WP SCSS de compiler le SCSS dans le dossier “assets/scss” vers le “assets/css”.

Cette génération automatique de fichier est gérée par la fonction auto_generate_css().

Hebergements

Le custom post type “Hébergement” est enregistré grâce à la fonction register_hebergements().

La fonction register_type_taxonomy() enregistre une taxonomie “Types”, appliquée uniquement aux hébergements.
Elle contiendra les types d’hébergements (“Locatif”, “Emplacement”), et les sous-types (Locatifs -> Mobile-home, Bungallows..)

La fonction register_option_taxonomy() enregistre une taxonomie “Options”, qui permet d’affilier des options aux hébergements (Animaux acceptés, barbecue…)

Le contenu peut être synchronisé en webservice.

Webservice

Le webservice en place permet 2 fonctionnalités et supporte Thelis et Ctoutvert.

Le HTTPS est obligatoire pour que l’API tampon fonctionne dans le thème parent.

La fonction get_ws_directory_uri() permet d’afficher le répertoire de l’API tampon utilisée en fonction du prestataire choisi (Thelis / Ctoutvert).

Activer Thelis

Pour activer le webservice Thelis, il faut demander l’autorisation à Thelis, et leur envoyer les IP des serveurs de dev et de prod à autoriser.
Il faut aussi qu’ils affilient le camping au compte de l’agence.

Activer Ctoutvert

Pour activer le webservice Ctoutvert, il faut simplement qu’ils activent le webservice pour ce client et qu’il affilient le compte de l’agence au camping.

Import des hébergements

La fonction sync_hebergements() permet l’import des hébergements.
Elle fait appel au fichier sync_hebergements.php, qui traite les données récupérées depuis l’API, et les importe dans WordPress.
Cette fonction est appelée via AJAX, dans le JS admin des hébergements.

Un bouton “Importer les hébergements” est disponible sur l’administration des hébergements.

Importer les traduction des hébergements

Pour traduire les hébergement, il convient d’abord de les importer en Français.
Il faut ensuite installer et configurer WPML, puis se rendre dans l’administration des hébergement dans la langue à traduire.
Cliquer alors sur “Importer les hébergements”.
Les hébergements sont alors importés dans la langue choisie, et sont affiliés à l’hébergement Français.

Traduction des images importées

Se rendre dans les paramètres WPML, puis dans l’onglet “Médias”. Il suffit alors de lancer la duplication des médias pour les traductions.

Disponibilités en temps réel

La fonction check_disponibilites() est appelée en ajax dès qu’un hébergement est visible dans le viewport de l’utilisateur.

Elle fait appel à display_disponibilite() qui prépare l’URL d’appel à l’API tampon, puis va formater le retour dans format_disponibilite.php.

Ce retour formaté est ensuite envoyé dans “partials/loops/content-disponibilite.php”.

Ce fichier affiche la disponibilité dans le call to action hébergement.
Il est commun à Thelis et Ctoutvert, on peut donc y modifier le contenu avec les variables communes établies.