Sto cercando un modo per aggiungere un nuovo tipo di controllo al pannello di anteprima dal vivo personalizzato . Ho visto come aggiungere nuove sezioni al pannello usando add_action( 'customize_register'...

Il controllo che voglio implementare è un diverso tipo di selettore di colori. In un post precedente , vediamo come estendere le classi principali per aggiungere widget, ma quello che mi manca qui è un hook che mi permetterà di portare il mio oggetto nell'ambito - WP_Customize_Palette_Control. A

Puoi vedere gli inizi del codice qui . Questo codice è nel functions.phpfile del mio tema.

Grazie per qualsiasi aiuto. rapinare

Ho appena aggiornato il codice. Ora devo require_onceportare le lezioni. Quindi ora non ho errori PHP ma il mio nuovo controllo HTML non viene visualizzato.

<?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' );

Esempio e classe per l'uso

Puoi vedere sul mio tema attuale, come è possibile utilizzarlo. Inoltre puoi usare la classe. Vedi questa classe su Github e verifica functions.phpche includa questo.

Avvia e inizia

È possibile registrare le impostazioni personalizzate per il personalizzatore del tema tramite l' customize_register hook:

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',
    ) ) );

}

Utilizzo tematico:

Usalo, come nell'esempio seguente ↓:

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";

regolazioni

È inoltre possibile modificare il controllo:

$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',
        ),
) );

Il tipo di controllo predefinito è text. Crea un controllo casella di testo. Un altro tipo di controllo è dropdown-pages, che crea un elenco a discesa delle pagine di WordPress.

Ma non è tutto. Ce ne sono molti altri, ma poiché sono così personalizzati, vengono dichiarati diversamente.

Questo utilizza OOP:

$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]',
    ) )
);

Note aggiuntive:

• WP_Customize_Upload_Control- Questo ti dà una casella di caricamento per i file. Tuttavia, probabilmente non lo userai direttamente, ti consigliamo di estenderlo per altre cose ... come: WP_Customize_Image_Control- Questo ti dà il selettore di immagini e la casella di upload. Estende il controller di upload. Puoi vederlo in azione sul pezzo di sfondo personalizzato, in cui un utente può caricare un nuovo file come immagine di sfondo.
• WP_Customize_Header_Image_Control- A causa dell'azione di ridimensionamento del pezzo di testata, ha bisogno di un po 'di maneggevolezza e di visualizzazione speciali, quindi l' WP_Customize_Header_Image_Controlestensione
• WP_Customize_Image_Controlper aggiungere quella funzionalità. Puoi vederlo in azione sul pezzo di intestazione personalizzato, in cui un utente può caricare un nuovo file come immagine di intestazione.

Puoi trovare ulteriori informazioni su "Personalizzazione temi" nel blog di ottos .

Aggiornamento 11/06/2012

Esempio live per le possibilità di lettura e altri esempi, vedere il repository aperto per la sorgente e il doku.

Aggiornamento 15/01/2013

Abbiamo creato un repository su github con classe personalizzata per usarlo, facile e pronto. Forse puoi solo usarlo o avanzare con le tue idee e soluzioni.

Ok, ecco come fare. Separare le classi di controllo in uno o più nuovi file.

Hai una funzione o un metodo collegato su personalizza_register, giusto? In quella funzione o metodo richiedono una volta che i nuovi file appena prima di aggiungere i controlli personalizzati. Quindi PHP non si lamenterà della ridefinizione delle classi.

Nota: questo non funzionerà immediatamente, ma mostra il trucco.

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

Non stai mai usando la tua classe. Prova a passare una nuova istanza della tua classe al metodo 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);

Inoltre, non penso che WP sappia che il nome dell'opzione per l'impostazione è parte di un array. Forse è meglio avere themename_theme_options_color_schemeinvece di themename_theme_options[color_scheme].

La classe che estendi appartiene al controllo di caricamento dell'immagine. Se stai creando un selettore di colori, probabilmente dovresti estendere la classe WP_Customize_Control .

Solo per completezza: un esempio su come aggiungere un campo numerico al Personalizzatore temi.

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

Penso che devi aggiungere la barra rovesciata prima di WP_Customize. Così sarà

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, Perché la barra rovesciata presupponeva che WP_Customize_Image_Control non provenisse dallo stesso spazio dei nomi

Fammi sapere se mi ha aiutato