Comment étendre WP_Customize_Control

26

Je cherche un moyen d'ajouter un nouveau type de contrôle au panneau de personnalisation aperçu en direct . 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 couleur. Dans une publication précédente , nous voyons comment étendre les classes de base pour ajouter des widgets, mais ce qui me manque ici, c'est un crochet qui me permettra de mettre mon objet dans le champ d'application - WP_Customize_Palette_Control. À

Vous pouvez voir le début du code ici . Ce code est dans le fichier functions.php de mon thème.

Merci pour toute aide. Rob

Vient de mettre à jour le code. Maintenant, j'ai require_once à apporter aux cours. Alors maintenant, je n'ai pas d'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' );
    
posée Rob 16.07.2012 - 06:51
la source

4 réponses

14

Exemple et classe d'utilisation

Vous pouvez voir sur mon thème actuel comment il est possible de l'utiliser. Aussi, vous pouvez utiliser la classe. Voir cette classe sur Github et cochez la case functions.php pour inclure ceci.

Démarrer & init

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

.
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 plusieurs autres, mais parce qu’ils sont tellement 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 supplémentaires:

  • WP_Customize_Upload_Control - Ceci vous donne une boite de téléchargement pour les fichiers. Cependant, vous ne l'utiliserez probablement pas directement, vous voudrez l’étendre à d’autres choses… comme: WP_Customize_Image_Control - Cela vous donne le sélecteur d'images et la boîte de téléchargement. Il prolonge le contrôleur de téléchargement. Vous pouvez le voir en action sur l'arrière-plan personnalisé pièce, où un utilisateur peut télécharger un nouveau fichier qui sera 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, il faut un peu de manipulation spéciale et d'affichage, donc le WP_Customize_Header_Image_Control étend le
  • WP_Customize_Image_Control pour ajouter cette fonctionnalité. Tu peux le voir en action sur l’en-tête personnalisé, où un utilisateur peut télécharger un nouveau le fichier doit être l'image d'en-tête.

Pour plus d'informations sur le thème "Personnalisation du thème", consultez le blog ottos .

Mise à jour du 11/06/2012

Exemple en direct pour les possibilités de lecture et d'autres exemples, voir le open repo . pour la source et le doku.

Mise à jour 15/01/2013

Nous avons créé un référentiel sur le github avec la classe personnalisée pour l'utiliser, facilement et immédiatement. . Peut-être pouvez-vous seulement l'utiliser ou avancer avec vos idées et solutions.

    
réponse donnée bueltge 03.08.2012 - 10:25
la source
4

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

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

Remarque: cela ne fonctionnera pas immédiatement, 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
    
réponse donnée Géza Mikló 24.01.2013 - 19:38
la source
3

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 qu'il vaut mieux avoir themename_theme_options_color_scheme au 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 couleur, vous devriez probablement étendre le WP_Customize_Control classe.

    
réponse donnée onetrickpony 02.08.2012 - 00:43
la source
1

Juste pour être complet: exemple d’ajout d’un champ numérique au thème du 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
    }
}
    
réponse donnée kaiser 18.09.2012 - 18:09
la source

Lire d'autres questions sur les étiquettes