Dans notre exemple, nous allons ajouter un paramètre pour modifier la couleur d'arrière-plan du pied de page.
Pour afficher un paramètre dans le personnaliseur, il doit exister dans les paramètres du template.

Ajouter un nouveau paramètre aux paramètres du template

Commençons par créer un nouveau paramètre de template.

Étape 1:Ajouter le style au fichier LESS

Tout d'abord, nous devons ajouter le style qui affiche la couleur d'arrière-plan pour la zone de pied de page:

#jm-footer {background: @JMfooterBackground;}

@JMfooterBackground – Il s'agit d'une variable LESS qui contiendra des informations sur la couleur sélectionnée.

Le style doit être situé dans le fichier layout.less, étant donné que ce fichier contient tous les styles associés à la mise en page du template.

NOTE: la variable LESS doit être précédé des lettres JM.

Étape 2:Définir un nouveau paramètre

Modifiez le fichier templateDetails.xml qui se trouve dans le répertoire suivant :

/templates/[nom-du-template]/

Tous les paramètres qui apparaissent dans l'onglet Modifications de couleur sont situés dans le groupe suivant :

<fields name="params">     <fieldset name="jmcolormodifications" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">     <!-- PARAMETERS -->     </fieldset> </fields>

Tout d'abord, définir un nouvel espacement pour notre paramètre :

<field name="spacer_name" type="spacer" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER"/>

Deuxièmement, définir un nouveau paramètre :

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR"  description="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC" />

Le nom du champ doit être le même que le nom de la variable LESS, dans notre exemple, il s'agit de : JMfooterBackground.

Étape 3:Stocker un nouveau paramètre

Modifiez le fichier jm_template.php qui se trouve dans le répertoire suivant :

/templates/[nom-du-template]/lib/

Ajoutez le code suivant:

$footerbackground = $this->params->get('JMfooterBackground', '#333333');  $bootstrap_vars['JMfooterBackground'] = $footerbackground;

$footerbackground - nom de la variable PHP
JMfooterBackground - nom de la variable LESS
#333333 - valeur par défaut de la variable LESS

Observons l'exemple :

class JMTemplate extends JMFTemplate {     public function postSetUp() {                  /*  put your code below other code within this class */              $footerbackground = $this->params->get('JMfooterBackground', '#333333');          $bootstrap_vars['JMfooterBackground'] = $footerbackground;                  /* make sure the following code is always the last one in this class */                  $this->params->set('jm_bootstrap_variables', $bootstrap_vars);          } }

 

Étape 4:Définir les constantes de langage

Modifier en-GB.tpl_[nom_template].ini qui se trouve dans le répertoire suivant:

/templates/[nom-du-tempalte]/language/en-GB/

ou

/templates/[nom-du-tempalte]/language/fr-FR/

si vous avez une version francisée

Définir les constantes du langage utilisées dans notre exemple :

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Pied de page" PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background" PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choisissez la couleur d'arrière plan pour votre pied de page au lieu de la couleur grise."

Maintenant, notre nouveau paramètre devrait être visible dans l'onglet Modifications de couleur :

 

Ajouter un nouveau paramètre au personnaliseur de thème

Maintenant, nous sommes prêts à ajouter un paramètre au panneau Personnaliseur de Theme.

Étape 1:Définir un nouveau paramètre

Modifiez le fichier templateDetails.xml qui se trouve dans le répertoire suivant :

/templates/[nom-du-template]/

Tous les paramètres qui apparaissent sur le personnaliseur se trouvent du panneau dans le groupe suivant :

<fields name="themecustomiser">     <fieldset name="th-basic-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">         <!-- COLOR PARAMETERS -->     </fieldset>     <fieldset name="th-font-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FONT_SETTINGS_LABEL">         <!-- FONT PARAMETERS -->     </fieldset> </fields>

Tout d'abord, définir un nouvel espacement pour notre paramètre :

<field type="jmacchelper" hidden="true" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER" name="Footer" />

Deuxièmement, définir un nouveau paramètre :

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR" />

Le nom du champ doit être le même que le nom de la variable LESS, dans notre exemple, il s'agit de : JMfooterBackground.

Étape 4: Définir les constantes de langage

Modifier en-GB.tpl_[nom_template].ini qui se trouve dans le répertoire suivant:

/templates/[nom-du-template]/language/en-GB/

ou

/templates/[nom-du-tempalte]/language/fr-FR/

si vous avez une version francisée

Définir les constantes du langage utilisées dans notre exemple :

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Pied de page" PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background" PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choisissez la couleur d'arrière plan pour votre pied de page au lieu de la couleur grise."

NOTE: Dans notre exemple, les constantes de langue sont les mêmes pour les paramètres de template et le Personnalisateur de thème, mais vous pouvez en utiliser des différents pour chacun d'eux si vous en avez besoin.

Maintenant, notre nouveau paramètre devrait être visible sur le panneau du personnaliseur :