Je cherche un moyen d'ajouter un nouveau type de contrôle au panneau de prévisualisation en direct personnalisé . J'ai vu comment ajouter de nouvelles sections au panneau en utilisant add_action( 'customize_register'...

Le contrôle que je veux implémenter est un autre type de sélecteur de couleurs. Dans un article précédent , nous voyons comment étendre les classes de base pour ajouter des widgets, mais ce qui me manque ici est un crochet qui me permettra de mettre mon objet dans la portée - WP_Customize_Palette_Control. À

Vous pouvez voir les débuts du code ici . Ce code est dans le functions.phpfichier de mon thème.

Merci pour toute aide. Rob

Je viens de mettre à jour le code. Maintenant, je dois require_onceapporter les cours. Alors maintenant, je n'ai aucune erreur PHP mais mon nouveau contrôle HTML n'apparaît pas.

<?php

require_once( ABSPATH . WPINC . '/class-wp-customize-setting.php' );
require_once( ABSPATH . WPINC . '/class-wp-customize-section.php' );
require_once( ABSPATH . WPINC . '/class-wp-customize-control.php' );

class WP_Customize_Palette_Control extends WP_Customize_Image_Control {  
        public $type    = 'palette';
        public $removed = '';
        public $context;

        public function enqueue() {
                //wp_enqueue_script( 'wp-plupload' );
        }

        public function to_json() {
                parent::to_json();

                $this->json['removed'] = $this->removed;

                if ( $this->context )
                        $this->json['context'] = $this->context;
        }

        public function render_content() {
                ?>
                <label>
                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                        <div>
                                <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
                                <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
                        </div>
                </label>
                <?php
        }
}

//new WP_Customize_Palette_Control();


//add_action('customize_controls_init', 'WP_Customize_Palette_Control');

// add an option to the customize panel

function sci_customize_controls_init($wp_customize) {
    $wp_customize->add_section( 'themename_color_scheme', array(
        'title'          => __( 'Color Scheme', 'themename' ),
        'priority'       => 35,
    ) );

    $wp_customize->add_setting( 'themename_theme_options[color_scheme]', array(
    'default'        => 'some-default-value',
    'type'           => 'option',
    'capability'     => 'edit_theme_options',
) );


$wp_customize->add_control( 'themename_color_scheme', array(
    'label'      => __( 'Color Scheme', 'themename' ),
    'section'    => 'themename_color_scheme',
    'settings'   => 'themename_theme_options[color_scheme]',
    'type'       => 'palette',
    'choices'    => array(
        'value1' => 'Choice 1',
        'value2' => 'Choice 2',
        'value3' => 'Choice 3',
        ),
) );

}

add_action( 'customize_register', 'sci_customize_controls_init' );

Exemple et classe d'utilisation

Vous pouvez voir sur mon thème actuel, comment il est possible de l'utiliser. Vous pouvez également utiliser la classe. Voir cette classe sur Github et cocher la functions.phppour l'inclure.

Démarrer & init

Vous pouvez enregistrer vos paramètres personnalisés pour le personnalisateur de thème via le customize_register crochet:

add_action( 'customize_register', 'themedemo_customize' );
function themedemo_customize($wp_customize) {

    $wp_customize->add_section( 'themedemo_demo_settings', array(
        'title'          => 'Demonstration Stuff',
        'priority'       => 35,
    ) );

    $wp_customize->add_setting( 'some_setting', array(
        'default'        => 'default_value',
    ) );

    $wp_customize->add_control( 'some_setting', array(
        'label'   => 'Text Setting',
        'section' => 'themedemo_demo_settings',
        'type'    => 'text',
    ) );

    $wp_customize->add_setting( 'some_other_setting', array(
        'default'        => '#000000',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'some_other_setting', array(
        'label'   => 'Color Setting',
        'section' => 'themedemo_demo_settings',
        'settings'   => 'some_other_setting',
    ) ) );

}

Utilisation dans le thème:

Utilisez-le, comme dans l'exemple ci-dessous ↓:

echo 'some_setting => ' .get_theme_mod( 'some_setting', 'default_value' )."\n";
echo 'some_other_setting => ' .get_theme_mod( 'some_other_setting', '#000000' )."\n";
echo 'non_existent_setting => '.get_theme_mod( 'non_existent_setting', 'default_value' )."\n";

Ajustements

Vous pouvez également modifier le contrôle:

$wp_customize->add_control( 'themename_color_scheme', array(
    'label'      => __( 'Color Scheme', 'themename' ),
    'section'    => 'themename_color_scheme',
    'settings'   => 'themename_theme_options[color_scheme]',
    'type'       => 'radio',
    'choices'    => array(
        'value1' => 'Choice 1',
        'value2' => 'Choice 2',
        'value3' => 'Choice 3',
        ),
) );

Le type de contrôle par défaut est text. Il crée un contrôle de zone de texte. Un autre type de contrôle est dropdown-pages, qui crée une liste déroulante des pages WordPress.

Mais ce n'est pas tout. Il y en a en fait plusieurs autres, mais parce qu'ils sont si personnalisés, ils sont déclarés différemment.

Celui-ci utilise la POO:

$wp_customize->add_control(
    new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( 'Link Color', 'themename' ),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[link_color]',
    ) )
);

Notes complémentaires:

• WP_Customize_Upload_Control- Cela vous donne une boîte de téléchargement pour les fichiers. Cependant, vous ne l'utiliserez probablement pas directement, vous voudrez l'étendre pour d'autres choses ... comme: WP_Customize_Image_Control- Cela vous donne le sélecteur d'image et la boîte de téléchargement. Il étend le contrôleur de téléchargement. Vous pouvez le voir en action sur la pièce d'arrière-plan personnalisée, où un utilisateur peut télécharger un nouveau fichier pour être l'image d'arrière-plan.
• WP_Customize_Header_Image_Control- En raison de l'action de redimensionnement de la pièce d'en-tête, elle nécessite un peu de manipulation et d'affichage spéciaux, de sorte que WP_Customize_Header_Image_Controlla
• WP_Customize_Image_Controlpour ajouter cette fonctionnalité. Vous pouvez le voir en action sur la pièce d'en-tête personnalisée, où un utilisateur peut télécharger un nouveau fichier pour être l'image d'en-tête.

Vous pouvez en savoir plus sur "Theme Customizer" dans le blog ottos .

Mise à jour 11/06/2012

Exemple en direct pour des possibilités de lecture et d'autres exemples, voir le référentiel ouvert pour la source et le doku.

Mise à jour 15/01/2013

Nous avons créé un dépôt sur github avec une classe personnalisée pour l'utiliser, facile et prêt. Vous ne pouvez peut-être que l'utiliser ou avancer avec vos idées et solutions.

Ok, voici comment procéder. Séparez vos classes de contrôle en un ou plusieurs nouveaux fichiers.

Vous avez une fonction ou une méthode accrochée à custom_register, non? Dans cette fonction ou méthode nécessitent une fois vos nouveaux fichiers juste avant d'ajouter vos contrôles personnalisés. Ensuite, PHP ne se plaindra pas de la redéfinition des classes.

Remarque: Cela ne fonctionnera pas hors de la boîte, mais montre l'astuce.

add_action('customize_register', array('myAddControl', 'customize_register') );

class myAddControl{
public function customize_register()
{
    global $wp_customize;


            //This will do the trick
    require_once(dirname(__FILE__).'/class-gctfw-theme-control.php');


    $wp_customize->add_section( 'gctfw_switch_theme' , array(
        'title'      => 'Switch theme',
        'priority'   => 25,
    ) );

    $wp_customize->add_setting( 'gctfw_select_theme' , array(
        'default'     => $wp_customize->theme()->get('Name'),
        'transport'   => 'refresh',
        'capabilities' => 'manage_options'
    ) );

    $myControl = new gctfw_Theme_Control( $wp_customize, 'gctfw_select_theme', array(
        'label'        => __( 'Select theme', 'mytheme' ),
        'section'    => 'gctfw_switch_theme',
        'settings'   => 'gctfw_select_theme',
    ) ) ;
    $wp_customize->add_control( $myControl );
    }
}//class

Vous n'utilisez jamais votre classe. Essayez de passer une nouvelle instance de votre classe à la méthode add_control:

$control_args = array(
  // your args here
); 

$my_control = new WP_Customize_Palette_Control(
                $wp_customize, 'themename_color_scheme', $control_args);

$wp_customize->add_control($my_control);

De plus, je ne pense pas que WP sache que le nom de l'option pour votre paramètre fait partie d'un tableau. Peut-être vaut-il mieux avoir themename_theme_options_color_schemeau lieu de themename_theme_options[color_scheme].

La classe que vous étendez appartient au contrôle de téléchargement d'image. Si vous créez un sélecteur de couleurs, vous devez probablement étendre la classe WP_Customize_Control .

Juste pour être complet: un exemple sur la façon d'ajouter un champ numérique au personnalisateur de thème.

class Customize_Number_Control extends WP_Customize_Control
{
    public $type = 'number';

    public function render_content()
    {
        ?>
        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <input type="number" size="2" step="1" min="0" value="<?php echo esc_attr(  $this->value() ); ?>" />
        </label>
        <?php
    }
}

Je pense que vous devez ajouter une barre oblique inverse avant WP_Customize. Alors il sera

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, Car la barre oblique inverse supposait que WP_Customize_Image_Control ne provenait pas du même espace de noms

Faites-moi savoir si cela a aidé