WP Customer Area a été conçu pour être le plus modulable possible. Si vous avez les bases en développement de thème pour WordPress, vous trouverez ici d’utiles informations pour personnaliser votre espace client.
Supports de thèmes
WP Customer Area fournit une liste de theme_supports. Merci de consulter la documentation sur la fonction add_theme_support pour plus de détails.
Feuilles de styles personnalisées
Indique à WP Customer Area que votre thème fournit sa propre feuille de style (ceci masquera l’option CSS dans la page de réglages de WP Customer Area). Ceci désactivera les skins WP Customer Area.
add_theme_support( 'customer-area.stylesheet' );
Menu de navigation personnalisé
Indique à WP Customer Area que votre thème s’occupe déjà d’afficher le menu de navigation (ceci masquera l’option d’ajout automatique du menu de navigation dans les réglages du plugin).
add_theme_support('customer-area.navigation-menu');
Templates personnalisés
Indique à WP Customer Area que votre thème fournit déjà ses propres templates pour les contenus privés (ceci masquera les options liées au ‘single post footer’ pour les types de posts en question).
add_theme_support('customer-area.single-post-templates', array(
'cuar_private_file', // Personnaliser l'affichage dans single-cuar_private_file.php
'cuar_private_page', // Personnaliser l'affichage dans single-cuar_private_page.php
'cuar_conversation', // Personnaliser l'affichage dans single-cuar_conversation.php
'cuar_project', // Personnaliser l'affichage dans single-cuar_project.php
'cuar_tasklist', // Personnaliser l'affichage dans single-cuar_tasklist.php
));
Templates personnalisés alternatifs
Depuis 7.2.0
Parfois, vous aurez besoin d’une hiérarchie plus complexe pour vos templates de contenus privés. C’est pourquoi nous avons introduit la possibilité pour vous d’ajouter d’autres templates. Quand vous afficherez une page de contenu privé, WP Customer Area tentera de trouver les templates listés ci-dessous dans le dossier de votre thème, et dans l’ordre suivant :
- single-cuar_private_file-test.php
- single-cuar_private_file.php
- cuar-single.php
- cuar.php
- single.php
Note : Dans cet example, nous avons supposé que le contenu de fichier privé affiché avait “test” en tant que slug.
Récupérer l’espace client complet avec une seule fonction
Depuis 7.2.0
Les templates de contenus privés avaient été initialement conçus pour vous permettre de construire votre propre et unique design, et vous aviez donc à utiliser toutes nos différentes fonctions pour ré-afficher le menu, la colonne latérale, le pied de page, etc…
Cependant, certains d’entre vous avaient besoin d’utiliser les templates de contenus privés juste pour créer un template en pleine largeur qui pourrait ressembler à celui utilisé pour vos pages, donc nous avons introduit une nouvelle fonction que vous pouvez utiliser dans vos templates de contenus privés qui affichera tout l’espace client d’un coup. Cette fonction est appelée cuar_the_single_content(); et doit être utilisée à la place de the_content(); dans l’un des templates suivants :
- single-cuar_private_file-test.php
- single-cuar_private_file.php
- cuar-single.php
- single.php
Note : Dans cet example, nous avons supposé que le contenu de fichier privé affiché avait “test” en tant que slug.
Templates de pages personnalisés
Depuis 7.2.0
Tout comme pour les templates de contenus privés, nous avons introduit la possibilité pour vous de créer différents templates de pages personnalisés dans le dossier de votre thème. Quand vous afficherez une page de listing privée, WP Customer Area tentera de trouver les templates listés ci-dessous dans le dossier de votre thème, et dans l’ordre suivant :
- page-dashboard.php
- page-550.php
- cuar-page.php
- cuar.php
- page.php
Note : Dans cet example, nous avons supposé que le contenu de fichier privé affiché avait “test” en tant que slug et 550 comme ID.
Librairies personnalisées
Indique à WP Customer Area que votre thème fournit déjà ses propres styles et fichiers javascript pour la librairie jquery.select2 (sinon, les fichiers nécessaires à cette librairie seront récupérés depuis le dossier de WP Customer Area).
C’est également un moyen de désactiver une librairie si vous voulez en utiliser une autre comme alternative. Dans ce cas, vous devriez également faire en sorte d’écrire le nouveau code javascript et d’inclure les fichiers correspondant (JS/CSS). Par exemple, la ligne suivante indique au plugin que votre thème va se charger d’inclure les fichiers requis pour le script jQuery Select2. Néanmoins, le plugin sera toujours chargé de fournir le code pour activer la librairie jQuery Select2 sur les éléments appropriés.
add_theme_support('customer-area.library.jquery.select2', array('files'));
Si nous voulons complètement désactiver la librairie jQuery Select2 et la remplacer par notre propre alternative, nous devons indiquer au plugin que nous ne voulons pas seulement omettre l’inclusion des fichiers, mais également que nous voulons omettre tout markup pour cette librairie.
add_theme_support( 'customer-area.library.jquery.select2', array( 'files', 'markup' ) );
D’autres librairies peuvent également être désactivées. Si nous ne spécifions pas de tableau en tant que paramètre, le plugin assume que votre thème s’occupe de tout pour cette librairie (fichiers, markups, …).
add_theme_support('customer-area.library.bootstrap.dropdown');
add_theme_support('customer-area.library.bootstrap.transition');
add_theme_support('customer-area.library.bootstrap.collapse');
Note: consultez le fichier /plugins/customer-area/src/core-classes/plugin.class.php à la fonction enable_library pour avoir une liste complète des librairies utilisées par WP Customer Area.
Styles personnalisés
Depuis 7.0.0
Si vous souhaitez personnaliser les styles CSS de WP Customer Area, et si vous avez les compétences de base en matière de développement de thème, vous devriez remarquer que nous utilisons un sélecteur personnalisé : body.customer-area-active .cuar-css-wrapper. Nous l’utilisons pour réinitialiser tous les styles CSS dans l’espace client afin d’empêcher les autres thèmes ou plugins WordPress d’interférer avec l’interface.
Cela signifie que si vous voulez éditer quelque chose dans l’espace client, vous devrez préfixer toutes vos règles CSS avec notre sélecteur. L’intégration d’autres plugins WordPress ou la personnalisation CSS de sous-thèmes/thème peut être effectuée en recompilant les fichiers CSS dans le sélecteur CSS WPCA, en utilisant par exemple un compilateur LESS.
body.customer-area-active .cuar-css-wrapper {
@import (less) "my-plugin/styles.css"; // Or paste the content file instead if using an online LESS compiler
}
De cette façon, les règles devraient ressembler à ceci :
body.customer-area-active .cuar-css-wrapper .my-plugin-title {
font-size: 2em;
}
body.customer-area-active .cuar-css-wrapper .my-plugin p {
margin-bottom: 15px;
}
Depuis 7.10.0
Vous pouvez désormais désactiver les réinitialisations CSS afin de permettre l’intégration de plugins tiers dans la zone. Cela vous permettra d’intégrer des composants qui nécessitent des feuilles de style CSS externes.