Ceci est une liste des liens (tous en anglais) qui me semblent intéressants à ce stade :
- Theme Customization API du Codex WordPress
- des exemples intéressants sur web-profile.com.ua
- Un article bien fait et complet sur http://themefoundation.com/
- Comprehensive Guide to make WordPress Theme Options with Customization API de Narga
- Une série d’articles sur le theme customizer dans code.tutsplus
- et How to leverage the Theme Customizer in your own themes d’Otto on WordPress
- un article complet également de Smashing Magazine
Maintenant que c’est noté, j’expérimente un peu et je ferai ensuite un article pour faire part de ce que j’ai appris !
La suite de cet article correspond à des notes prises pour mon propre usage. Je ne pense pas que ça puisse aider qui que ce soit d’autre…
Où sont rangées les informations saisies ?
Dans la table « PRE_options » (lorsque le prefixe de la base de données est PRE, wp_options si aucun réglage n’a été effectué). Il y a
- une ligne dont le nom est « theme_mods_nom-du-theme » (noter les ‘-‘ et pas ‘_’ pour la partie qui correspond au nom du thème utilisé). L’option_value contient une chaine de caractères parmi laquelle on trouve : « s:21: »unique_theme_settings »;a:2:{s:10: »logo_width »;s:2: »48″;s:11: »logo_height »;s:3: »145″;}} » qui contient donc les deux textes saisis. Attention, c’est rangé sous la forme d’un array dont les deux éléments sont unique_theme_settings[logo_width] et unique_theme_settings[logo_height] !!!
- Egalement une ligne dont le nom est « unique_theme_settings » (mon thème parent est unique) qui contient les autres données : a:3:{s:19: »test_ald_1_textarea« ;s:18: »je change ce texte »;s:11: »logo_upload« ;s:60: »http://dev.prosiad.fr/wp-content/uploads/2014/10/Prosiad.png »;s:14: »favicon_upload« ;s:60: »http://dev.prosiad.fr/wp-content/uploads/2014/10/favicon.png »;}
Mon problème est que j’arrive à afficher le contenu de tout ce qui est stocké dans la ligne « unique_theme_settings » avec
echo '<p>logo_upload : ' . esc_attr( hybrid_get_setting( 'logo_upload' ) ) . '</p>';
Mais la même commande ne fonctionne pas pour logo_width et logo_height qui pour une raison que je ne comprends pas ne sont pas traités de la même manière.
Pour des gens qui n’utilisent pas un thème avec le framework hybrid de Justin Tadlock, la commande serait :
$options = get_option( 'unique' . '_theme_settings', false );
if ( isset ($options[logo_upload])) {
echo '<p>logo_upload : ' . $options[logo_upload] . '</p>';
}
Pourquoi est-ce que [logo-height] et [logo-width] ne sont pas récupérés ?
Quelles sont les différences de réglage entre deux champs qui devraient être similaires
| settings | logo_width | test_ald_1_textarea |
| ‘type’ | non spécifié | ‘option’ |
| ‘transport’ | non spécifié | ‘postMessage’ |
Le Codex pour la fonction ‘$wp_customize->add_setting($id, $args);’ indique que l’argument ‘type’ par défaut est ‘theme_mod’. Le type de ‘logo_width’ est donc ‘theme_mod’. C’est pour ça qu’il est rangé dans une autre ligne de la table ‘PRE_options’….
note : Selon cet article sur stackexchange, ‘theme_mod’ est plus lent et peut même ralentir significativement un site (!). On appelle l’un ou l’autre des deux types en tapant get_theme_mod() calls to get_option()
Quant à « transport », selon le codex :
The ‘transport‘ argument is optional, and defaults to ‘refresh‘. If left to default, then the theme customizer’s preview window will update by completely reloading itself when this setting is changed. If you would prefer to avoid refreshes and improve responsiveness, you can set this to ‘postMessage‘ instead, then handle any styling updates manually with a bit of JavaScript
Je pense que la différence provient de « type »
Avant de modifier le type pour qu’il soit option dans tous mes settings, je teste l’affichage des options avec get_theme_mod :
J’ai défini logo_width comme suit ($prefix = ‘unique’) :
<?php
$wp_customize->add_setting(
"{$prefix}_theme_settings[logo_width]",
array(
'default' => __('Largeur du logo (en px)', 'unique-impact1'),
'sanitize_callback' => 'unique_impact_1_logo_sanitize',
)
);
?>
Pour réussir à le lire, il faut que je cherche d’abord l’array ‘ unique_theme_settings’ puis je visualise l’élément [logo_width] de cet array…
$options = get_theme_mod( 'unique_theme_settings', false ); echo '<p>5. logo_width : ' . $options[logo_width] . '</p>';
Et ça fonctionne ! Mais c’est affreusement compliqué. Je modifie donc la définition des settings logo_width et logo_height comme suit :
$wp_customize->add_setting(
"{$prefix}_theme_settings[logo_width]",
array(
'type' => 'option',
'default' => __('Largeur du logo (en px)', 'unique-impact1'),
'sanitize_callback' => 'unique_impact_1_logo_sanitize',
)
);
Pour voir un changement, il faut que j’aille enregistrer une valeur dans ces options.
Et les deux façons suivantes d’afficher logo_width fonctionnent maintenant !
// needs hybrid framework
echo '<p>logo_width : ' . esc_attr( hybrid_get_setting( 'logo_width' ) ) . '</p>';
// works in any wordpress theme but 'unique' has to be changed into 'your-theme-prefix'
$options = get_option( 'unique' . '_theme_settings', false );
if ( isset ($options[logo_upload])) {
echo '<p>logo_upload : ' . $options[logo_upload] . '</p>';
} else {
echo '<p>logo_upload : pas trouvé ! </p>';
}
if ( isset ( $options[logo_width] )) {
echo '<p>logo_width : ' . $options[logo_width] . '</p>';
} else {
echo '<p>logo_width : pas trouvé ! </p>';
}
Je crois bien que j’ai compris l’essentiel. Il me reste maintenant à exploiter ces settings dans mon thème.
