web-dev-qa-db-fra.com

Comment étendre WP_Customize_Control

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 type différent de sélecteur de couleur. Dans un article précédent , nous voyons comment étendre les classes principales pour ajouter des widgets, mais ce qui me manque ici, c'est un crochet qui me permettra de placer mon objet dans le champ d'application - WP_Customize_Palette_Control. À

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

Merci pour toute aide. Rob

Je viens de mettre à jour le code. Maintenant, j'ai require_once pour apporter les classes. 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' );
theme-developmenttheme-customizer
27
Rob

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 vérifier le functions.php pour inclure ceci.

Démarrer & init

Vous pouvez enregistrer vos paramètres personnalisés pour le personnalisateur de thème via le hook 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 complémentaires:

  • WP_Customize_Upload_Control - Cela vous donne une boîte de téléchargement pour les fichiers. Cependant, vous n’utiliserez probablement pas cela directement, vous voudrez l’étendre à d’autres choses… comme: WP_Customize_Image_Control - Cela vous donne le sélecteur d’image et le boîtier 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 qui sera l'image d'arrière-plan.
  • WP_Customize_Header_Image_Control - En raison de l’action de redimensionnement de l’en-tête, un traitement et un affichage spéciaux sont nécessaires, de sorte que WP_Customize_Header_Image_Control étend la
  • WP_Customize_Image_Control pour ajouter cette fonctionnalité. Vous pouvez le voir en action sur l'en-tête personnalisé, où un utilisateur peut télécharger un nouveau fichier qui sera l'image d'en-tête.

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

Mise à jour du 11/06/2012

Exemple en direct pour les possibilités de lecture et d’autres exemples, voir le répertoire open repo 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. Peut-être pouvez-vous seulement l'utiliser ou avancer avec vos idées et solutions.

14
bueltge

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 dans 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
4
Géza Mikló

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 la classe WP_Customize_Control .

3
onetrickpony

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

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
    }
}
1
kaiser

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

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, Parce que backslash suppose que WP_Customize_Image_Control ne provient pas de same Namespace

Faites-moi savoir si cela a aidé

0
ipp