Plaque chauffante du personnalisateur de thème WordPress

Plaque chauffante du personnalisateur de thème WordPress
  1. 1. Introduction au personnalisateur de thème WordPress
  2. 2. Interagir avec le personnalisateur de thème WordPress
  3. 3. En train de lire: Plaque chauffante du personnalisateur de thème WordPress
  4. 4. Extension de la chaudière de personnalisation du thème WordPress
  5. 5. Plate-forme de personnalisation de thème – Options conditionnelles, thèmes enfants et plug-ins

Mise à jour: cet article a été modifié le 19 février 2013 pour refléter les modifications apportées à la chaudière de personnalisation de thème.


J’espère que vous avez lu et apprécié les deux premiers articles de la série Theme Customizer – Introduction à WordPress Theme Customizer et Interagir avec Theme Customizer. Il est maintenant temps de passer au plat principal et de commencer à assembler le passe-partout du personnalisateur de thème que vous pourrez utiliser dans vos thèmes. Ce message contient quelques longs blocs de code, alors faites attention aux commentaires en ligne.

Remarque: Si vous préférez simplement utiliser le passe-partout tout de suite, vous pouvez le télécharger à partir de Github et modifier les champs du tableau $ options en le connectant au crochet de filtre ‘thsp_cbp_options_array’.

Ce que nous créons

Structure du répertoire du générateur de thèmes

Structure du répertoire du générateur de thèmes

  • customizer.php – Il s’agit du fichier passe-partout principal du personnalisateur de thème, celui qui ajoute des sections, des paramètres et des contrôles à l’aide des données du tableau d’options.
  • custom-controls.php – Classes de contrôles personnalisés et un crochet d’action qui vous permet d’ajouter vos propres contrôles personnalisés
  • helpers.php – Fonctions d’assistance, utilisées pour récupérer les options de thème, les options par défaut, etc..
  • options.php – Exemples d’options et un crochet de filtre qui vous permet de modifier le tableau d’options et d’utiliser vos propres champs
  • customizer-controls.css – CSS de base pour le contrôle personnalisé de la radio remplacé par l’image

L’idée est de pouvoir copier ces fichiers dans un sous-répertoire de votre répertoire de thème, d’inclure le fichier customizer.php à partir de votre functions.php et de changer tout ce que vous aimez, y compris et surtout le tableau d’options, en utilisant les crochets du générateur de thèmes du Boilerplate (expliqué dans la partie 4). Mise à jour: Auparavant, vous deviez simplement modifier options.php, mais l’utilisation de crochets rend les choses beaucoup plus propres.

Prenons maintenant un exemple réel: nous allons ajouter un contrôle de texte à une nouvelle section de personnalisation de thème. Le tableau est placé dans une fonction d’assistance et un filtre lui est appliqué lorsqu’il est renvoyé. De cette façon, vous pouvez ajouter plus d’options à partir d’un thème enfant ou d’un plugin. C’est ici:

/ **
* Fonction d'assistance qui contient un éventail d'options de thème.
*
* @return array $ options Tableau d'options de thème
* @uses thsp_get_theme_customizer_fields () défini dans customizer / helpers.php
* /
fonction thsp_get_theme_customizer_fields () {

/ *
* Utilisation de la fonction d'assistance pour obtenir la capacité requise par défaut
* /
$ required_capability = thsp_settings_page_capability ();

$ options = tableau (


// ID de section
'new_customizer_section' => tableau (

/ *
* Nous vérifions s'il s'agit d'une section existante
* ou un nouveau qui doit être enregistré
* /
'existing_section' => faux,
/ *
* Arguments liés à la section
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => tableau (
'title' => __ ('Nouveau titre de section', 'my_theme_textdomain'),
'description' => __ ('Description de la nouvelle section', 'my_theme_textdomain'),
'priorité' => 10
),

/ *
* le tableau 'champs' contient tous les champs qui doivent être
* ajouté à cette section
* /
'champs' => tableau (

/ *
* ==========
* ==========
* Champ de texte
* ==========
* ==========
* /
// ID de champ
'new_text_field' => tableau (
/ *
* Définition d'arguments associés
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => tableau (
'default' => __ ('Valeur de texte par défaut', 'my_theme_textdomain'),
'type' => 'option',
'capacity' => $ required_capability,
'transport' => 'rafraîchir',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Contrôler les arguments liés
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => tableau (
'label' => __ ('Nouvelle étiquette de contrôle de texte', 'my_theme_textdomain'),
'type' => 'text', // Contrôle du champ de texte
'priorité' => 1
)
)

)

),

);

/ *
* Le crochet de filtre 'thsp_customizer_options' vous permettra de
* ajouter / supprimer certaines de ces options d'un thème enfant
* /
return apply_filters ('thsp_customizer_options', $ options);

}

Mise à jour: Le tableau reste le même, mais maintenant vous pouvez également passer le tableau d’options à un crochet de filtre, voir la partie 4 pour plus de détails.

Ça a l’air compliqué à première vue, je sais, mais laissez-moi vous expliquer.

le $ options tableau se compose de section (s) (une seule dans ce cas – new_customizer_section), chaque section a ses arguments, ses champs et une valeur booléenne (existing_section) pour indiquer s’il s’agit d’une nouvelle section, ou nous ajoutons simplement des champs à une existante une. Le tableau d’arguments est identique à celui auquel vous passeriez $ wp_customize-> add_section méthode. Le tableau des champs est légèrement plus complexe.

Mise à jour: tableau de choix dans les arguments de contrôle est maintenant un tableau multidimensionnel.

Chaque champ se compose d’un paramètre de personnalisation et d’un contrôle de personnalisation. C’est pourquoi nous avons des tableaux setting_args et control_args. Ils sont presque exactement les mêmes que les tableaux d’arguments auxquels vous devez transmettre $ wp_customize-> add_setting et $ wp_customize-> add_control les méthodes. La seule différence est le tableau «choix» dans les arguments de contrôle, $ wp_customize-> add_control nécessite que ce soit un simple tableau clé => valeur paire et nous utilisons un tableau multidimensionnel à la place.

De cette façon, il est possible de transmettre plus de données à chacun des choix, donc si vous chargez, par exemple, des polices Google dans votre thème, vous pourrez avoir des chaînes qui vous permettront de charger la police correcte dans le tableau de choix . Vous pouvez voir un exemple de cela thème qui utilise Customizer Boilerplate.

Donc, si vous connaissez déjà ces trois méthodes, tout est très familier.

L’ajout d’un contrôle de case à cocher est presque le même, il vous suffit de remplacer «type» par «case à cocher» dans le tableau «control_args»:

/ *
* ==============
* Champ de case à cocher
* ==============
* /
'new_checkbox_field' => tableau (
'setting_args' => tableau (
'default' => true,
'type' => 'option',
'capacity' => $ required_capability,
'transport' => 'rafraîchir',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => tableau (
'label' => __ ('Nouvelle étiquette de contrôle radio', 'my_theme_textdomain'),
'type' => 'case à cocher', // Contrôle de champ de case à cocher
'priorité' => 2
)
),

La radio et les commandes de sélection sont presque les mêmes, il vous suffit de spécifier des choix donnés:

/ *
* ===========
* ===========
* Champ radio
* ===========
* ===========
* /
'new_radio_field' => tableau (
'setting_args' => tableau (
'default' => 'option-2',
'type' => 'option',
'capacity' => $ thsp_cbp_capability,
'transport' => 'rafraîchir',
),
'control_args' => tableau (
'label' => __ ('Nouvelle étiquette de contrôle radio', 'my_theme_textdomain'),
'type' => 'radio', // Commande radio
'choix' => tableau (
'option-1' => tableau (
'label' => __ ('Option 1', 'my_theme_textdomain')
),
'option-2' => tableau (
'label' => __ ('Option 2', 'my_theme_textdomain')
),
'option-3' => tableau (
'label' => __ ('Option 3', 'my_theme_textdomain')
)
),
'priorité' => 3
)
),

/ *
* ============
* ============
* Sélectionnez un champ
* ============
* ============
* /
'new_select_field' => tableau (
'setting_args' => tableau (
'default' => 'option-3',
'type' => 'option',
'capacity' => $ thsp_cbp_capability,
'transport' => 'rafraîchir',
),
'control_args' => tableau (
'label' => __ ('Nouvelle étiquette de champ de sélection', 'my_theme_textdomain'),
'type' => 'select', // Select control
'choix' => tableau (
'option-1' => tableau (
'label' => __ ('Option 1', 'my_theme_textdomain')
),
'option-2' => tableau (
'label' => __ ('Option 2', 'my_theme_textdomain')
),
'option-3' => tableau (
'label' => __ ('Option 3', 'my_theme_textdomain')
)
),
'priorité' => 4
)
)

Et enfin, deux types de contrôles complexes intégrés à WordPress – le téléchargement de fichiers et le téléchargement d’images:

/ *
* ===========
* ===========
* Téléchargement de fichiers
* ===========
* ===========
* /
'new_file_upload_field' => tableau (
'setting_args' => tableau (
'default' => '',
'type' => 'option',
'capacity' => $ thsp_cbp_capability,
'transport' => 'rafraîchir',
),
'control_args' => tableau (
'label' => __ ('Téléchargement de fichier', 'my_theme_textdomain'),
'type' => 'upload', // Contrôle du champ de téléchargement de fichier
'priorité' => 5
)
),

/ *
* ============
* ============
* Téléchargement d'image
* ============
* ============
* /
'new_image_upload_field' => tableau (
'setting_args' => tableau (
'default' => '',
'type' => 'option',
'capacity' => $ thsp_cbp_capability,
'transport' => 'rafraîchir',
),
'control_args' => tableau (
'label' => __ ('Téléchargement d'image', 'my_theme_textdomain'),
'type' => 'image', // Contrôle du champ de téléchargement d'image
'priorité' => 6
)
)

Notez que j’ai utilisé «Type» => «option» en définissant des arguments pour tous ces champs. Cela permettra à toutes les valeurs d’être stockées en une seule valeur dans votre base de données. L’alternative est ‘Type’ => ‘theme_mod’ mais pour l’instant, restons avec “option”.

Utilisation du tableau d’options pour ajouter des sections, des paramètres et des contrôles de personnalisation

Si vous ne savez pas comment interagir avec WordPress Theme Customizer, allez vérifier, car c’est ce que nous allons faire maintenant. La seule différence est qu’au lieu d’ajouter des sections, des paramètres et des contrôles un par un, nous automatiserons le processus à l’aide du tableau sérialisé que nous avons créé. Sautons juste dedans:

fonction thsp_cbp_customize_register ($ wp_customize) {

/ **
* Contrôles personnalisés
* /
require (dirname (__ FILE__). '/custom-controls.php');


/ *
* Obtenez tous les champs en utilisant une fonction d'aide
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Obtenez le nom de l'entrée DB sous laquelle les options seront stockées
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Parcourez le tableau et ajoutez des sections de personnalisation
* /
foreach ($ thsp_sections as $ thsp_section_key => $ thsp_section_value) {

/ **
* Ajoute une section de personnalisation, si nécessaire
* /
if (! $ thsp_section_value ['existing_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Ajouter une section
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // fin si

/ *
* Parcourez le tableau des «champs» dans chaque section
* et ajouter des paramètres et des contrôles
* /
$ thsp_section_fields = $ thsp_section_value ['champs'];
foreach ($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value) {

/ *
* Vérifiez si 'option' ou 'theme_mod' est utilisé pour stocker l'option
*
* Si rien n'est défini, la méthode $ wp_customize-> add_setting sera par défaut à 'theme_mod'
* Si «option» est utilisé comme type de paramètre, sa valeur sera stockée dans une entrée
* {préfixe} table _options. Le nom de l'option est défini par la fonction thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. «[». $ thsp_field_key. ']';
} autre {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Ajouter une fonction de rappel par défaut, si aucune n'est définie
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Ajoute des paramètres de personnalisation
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
* Ajoute un contrôle de personnalisation
*
* La valeur 'section' doit être ajoutée au tableau 'control_args'
* afin que le contrôle puisse être ajouté à la section actuelle
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* La méthode $ wp_customize-> add_control requiert que 'choix' soit une simple clé => paire de valeurs
* /
if (isset ($ thsp_field_value ['control_args'] ['choix'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['Choices'] as $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['choix'] = $ thsp_cbp_choices;
}


// Vérifier le type de contrôle
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nouveau WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
new WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nouveau WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} autre {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // fin pour foreach

} // fin pour foreach

}
add_action ('personnaliser_register', 'thsp_cbp_customize_register');

En parcourant toutes les sections, en ajoutant celles qui n’existent pas déjà, puis en parcourant tous les champs de chaque section, en ajoutant un paramètre et un contrôle pour chacune. C’est tout ce qui se passe ici.

Rappelez-vous que nous avons utilisé ‘type’ => ‘option’ pour tous les paramètres? C’est pourquoi nous avons maintenant “My_theme_options [$ thsp_field_key]” pour les paramètres et les sections. Cela stockera toutes les valeurs dans un tableau sérialisé que vous pourrez récupérer en utilisant get_option (‘my_theme_options’). Ou vous pouvez simplement utiliser les fonctions d’assistance définies dans helpers.php pour récupérer à la fois les valeurs actuelles et les valeurs par défaut pour tous les champs:

/ **
* Obtenez les valeurs des options
*
* Tableau contenant toutes les valeurs des options
* La valeur par défaut de l'option est utilisée si l'utilisateur n'a pas spécifié de valeur
*
* @uses thsp_get_theme_customizer_defaults () défini dans /customizer/options.php
* @return array Valeurs actuelles pour toutes les options
* @since Theme_Customizer_Boilerplate 1.0
* /
fonction thsp_cbp_get_options_values ​​() {

// Récupère l'option par défaut
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analyse les options stockées avec les valeurs par défaut
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Retourne le tableau analysé
return $ thsp_cbp_options;

}


/ **
* Obtenir les valeurs par défaut des options
*
* Renvoie un tableau contenant les valeurs par défaut de toutes les options
*
* @uses thsp_get_theme_customizer_fields () défini dans /customizer/options.php
* @return array $ thsp_option_defaults Valeurs par défaut pour toutes les options
* @since Theme_Customizer_Boilerplate 1.0
* /
fonction thsp_cbp_get_options_defaults () {

// Récupère le tableau contenant tous les champs d'options de thème
$ thsp_sections = thsp_cbp_get_fields ();

// Initialise le tableau pour contenir les valeurs par défaut pour toutes les options de thème
$ thsp_option_defaults = array ();

// Boucle dans le tableau des paramètres d'option
foreach ($ thsp_sections as $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['champs'];

foreach ($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value) {

// Ajouter une clé de tableau associatif au tableau par défaut pour chaque option du tableau de paramètres
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} autre {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Retourne le tableau par défaut
return $ thsp_option_defaults;

}

Il n’y a qu’une autre chose que je devrais mentionner: la fonction de rappel de nettoyage que nous avons spécifiée dans le tableau ‘setting_args’. La fonction est définie dans extend.php et exécute simplement les données via wp_kses_post une fonction:

/ **
* Fonction de rappel de nettoyage du thème Customizer
* /
fonction thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Où partir d’ici?

Pour l’instant, vous pouvez utiliser cette plaque de personnalisation du thème dans vos thèmes, tout ce que vous avez à faire est de le télécharger à partir de Github, de le copier dans le répertoire de votre thème et d’inclure le fichier principal de functions.php, qui est 100% fonctionnel et assez bon pour la plupart thèmes.

Puisque votre thème n’est pas “comme la plupart des thèmes”, la semaine prochaine, nous verrons comment étendre le passe-partout en utilisant son filtre et ses crochets d’action.

J’adorerais savoir comment vous pensez que ce passe-partout pourrait être amélioré ou étendu, alors s’il vous plaît, lancez-vous dans les commentaires.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map