Le système de modèles

WP Customer Area est entièrement personnalisable dans la manière d’afficher l’information. De la structure générale des pages au simple élément dans une liste, vous êtes libre d’apporter vos modifications visuelles selon vos envies.

Introduction

Chaque extension implémente ses modèles dans son propre répertoire. Ainsi, si vous souhaitez modifier la façon dont :

Les fichiers clients sont affichés, jetez un oeil dans le dossier /customer-area/src/php/core-addons/customer-private-files
Le compte client est affiché, intéressez-vous au dossier /customer-area/src/php/core-addons/customer-account
La page de création d’un nouveau fichier privé est affichée, parcourez le dossier /customer-area-collaboration/src/php/customer-new-private-page
etc.

Si vous consultez le code source du plugin, vous remarquerez que toutes les pages client sont toutes situées dans leur propre dossier d’extension et que ce dernier débute toujours par customer-.

Les développeurs apprécieront l’ajout d’un réglage permettant l’affichage des informations de débogage indiquant précisément quel modèle est utilisé dans la page. Il vous suffira d’afficher le code source de votre navigateur et de visualiser les commentaires ajoutés. Ce paramètre est disponible dans Réglages > WP Customer Area > Site puis Débogage des modèles.

Procédure de modification des modèles

Pour éviter de perdre vos modifications lors d’une mise à jour du plugin, vous pouvez copier les modèles modifiés dans le dossier /wp-content/ ou directement dans votre thème sous /wp-content/themes/NOM_DU_THEME :

Créez un dossier intitulé /customer-area/ ;
Créez un sous-dossier que vous nommerez /templates ;
Localisez le fichier de modèle que vous souhaitez modifier ;
Effectuez les modifications sans oublier de sauvegarder les changements ;
Vous devriez être en mesure de voir les modifications immédiatement en ligne.

Versions de modèles

Vous remarquerez que tous nos modèles commencent par un bloc de code requis gérant la version du template et le changelog. Après avoir dupliqué le modèle, vous devez incrémenter le dernier chiffre de sa version actuelle.

Ex. Si vous mettez à jour à partir du modèle 3.2.0, vous devriez l’incrémenter en 3.2.1 afin que vous soyez notifié plus tard s’il y a des changements à refléter dans ce modèle. Ne mettez pas à jour les autres chiffres car ils sont déjà utilisés par WP Customer Area.

Donc, le bloc de code suivant:

<?php
/** Template version: 3.1.0
*
* -= 3.1.0 =-
* - Add hooks
*
* -= 3.0.0 =-
* - Initial version
*
*/
?>

Deviendra alors ceci:

<?php
/** Template version: 3.1.1
*
* -= 3.1.1 =-
* - My own personal class customization
* - Added new button
*
* -= 3.1.0 =-
* - Add hooks
*
* -= 3.0.0 =-
* - Initial version
*
*/
?>

Liste de modèles

Pour voir quels modèles ont été redéfinis, vous pouvez afficher la page Customer Area > Statut > Modèles. Vous obtiendrez alors des informations sur :

quels modèles ont été redéfinis, et quels modèles sont les originaux
si le numéro de version correspond bien au numéro de version du modèle original (utile pour voir si vous devez mettre à jour des modèles redéfinis après une mise à jour du plugin)

Astuce : si vous portez les modifications dans votre thème, n’oubliez pas de créer un thème enfant pour éviter de perdre vos changements suite à une mise à jour ou déportez le dossier directement dans /wp-content/customer-area/templates

Structure générale

Toutes les pages définies dans WP Customer Area – à l’exception des pages de détail des contenus privés, suivent la même structure.

Le modèle à copier est nommé customer-page.template.php et peut être trouvé dans /customer-area/src/php/core-classes/templates/.

Sections de page

En plus de pouvoir personnaliser une structure de page dans son ensemble, vous pouvez vous limiter à une section particulière de celle-ci. Ainsi, chaque page est divisée en 4 zones : un en-tête (header), un pied de page (footer), une colonne latérale (sidebar) et une zone de contenu (content).

Par convention, chaque section de page correspond à un fichier que l’on retrouve dans le nom du modèle de page, juste après le slug. Vous pouvez trouver le slug de chaque page dans Customer Area > Statut > Pages de WP Customer Area.

myslug-header.template.php pour l’en-tête ;
myslug-content.template.php pour le contenu ;
myslug-sidebar.template.php pour la colonne latérale (si besoin) ;
myslug-footer.template.php pour le pied de page.

Bien évidement, toutes les pages n’affichent pas forcément du contenu dans toutes les zones à la fois. C’est par exemple le cas en cas si aucune colonne latérale n’est affichée. Ceci explique que certains de ces modèles ne sont pas présent dans le plugin. Il vous suffira simplement de créer ce fichier de modèle dans votre répertoire templates et celui-ci sera utilisé.

Listing de contenu

Les pages de listing de contenu sont chargées d’afficher le contenu privé.

Voici les modèles que vous pouvez réutiliser dans votre thème (vous pouvez trouver le slug de chaque page dans Customer Area > Statut > Pages de WP Customer Area) :

myslug-content-item.template.php représente un élément de contenu dans la liste sur la page de contenu principale – par exemple dans la page Mes fichiers ;
myslug-content-item-dashboard.template.php représente un élément de contenu dans la liste de la section correspondante du tableau de bord – par exemple les Fichiers récents ;
myslug-content-item-empty.template.php est affiché en l’absence de contenu ;
myslug-content-item-empty-category_archive.template.php est affiché en l’absence de contenu dans une page de catégorie ;
myslug-content-item-empty-date_archive.template.php est affiché en l’absence de contenu dans une page d’archive par date.

Page de contenu simple

WP Customer Area affiche automatiquement les détails d’un contenu privé juste après sa description (l’auteur, le propriétaire, la date de publication, le lien de téléchargement pour un fichier privé, etc.).

Là encore, vous pouvez y apporter vos modifications avec le modèle myslug-single-post-footer.template.php. Il sera utilisé pour afficher ces informations juste au-dessous des détails du contenu.

Extensions

Les extensions fonctionnent elles aussi avec ce même système de modèles. De par leur nombre, il serait fastidieux et inutile de tous les lister ici. Vous avez à votre disposition des outils pour les développeurs qui vous permettent de voir sur chaque page, en direct dans le code source HTML, quels sont les modèles utilisés.

Documentation