Estoy buscando una manera de agregar un nuevo tipo de control al panel de vista previa en vivo personalizado . He visto cómo agregar nuevas secciones al panel usando add_action( 'customize_register'...

El control que quiero implementar es un tipo diferente de selector de color. En una publicación anterior , vemos cómo extender las clases principales para agregar widgets, pero lo que me falta aquí es un gancho que me permitirá llevar mi objeto al alcance: WP_Customize_Palette_Control. A

Puedes ver los comienzos del código aquí . Este código está en el functions.phparchivo de mi tema.

Gracias por cualquier ayuda. Robar

Acabo de actualizar el código. Ahora tengo require_onceque traer las clases. Así que ahora no tengo errores de PHP pero mi nuevo control HTML no aparece.

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

Ejemplo y clase de uso

Puedes ver en mi tema actual, cómo es posible usar esto. También puedes usar la clase. Vea esta clase en Github y verifique functions.phpsi incluye esto.

Inicio e inicio

Puede registrar su configuración personalizada para el personalizador de temas a través del customize_register gancho:

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

}

Uso en el tema:

Úselo, como en el ejemplo a continuación ↓:

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

Ajustes

También puedes cambiar el control:

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

El tipo de control predeterminado es text. Crea un control de cuadro de texto. Otro tipo de control es dropdown-pages, que crea una lista desplegable de las páginas de WordPress.

Pero eso no es todo. En realidad, hay varios más, pero debido a que son tan personalizados, se declaran de manera diferente.

Este hace uso de 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]',
    ) )
);

Notas adicionales:

• WP_Customize_Upload_Control- Esto le da un cuadro de carga para archivos. Sin embargo, probablemente no usará esto directamente, querrá extenderlo para otras cosas ... como: WP_Customize_Image_Control- Esto le brinda el selector de imágenes y el cuadro del cargador. Extiende el controlador de carga. Puede verlo en acción en la pieza de fondo personalizada, donde un usuario puede cargar un nuevo archivo para que sea la imagen de fondo.
• WP_Customize_Header_Image_Control- Debido a la acción de cambio de tamaño de la pieza del encabezado, necesita un poco de manejo y visualización especial, por lo que WP_Customize_Header_Image_Controlextiende el
• WP_Customize_Image_Controlpara agregar esa funcionalidad. Puede verlo en acción en el encabezado personalizado, donde un usuario puede cargar un nuevo archivo para que sea la imagen del encabezado.

Puede encontrar más información sobre "Personalizador de temas" en el blog ottos .

Actualización 11/06/2012

Ejemplo en vivo para posibilidades de lectura y más ejemplos, vea el repositorio abierto para la fuente y el doku.

Actualización 15/01/2013

Hemos creado un repositorio en github con una clase personalizada para usarlo, fácil y listo. Tal vez solo pueda usarlo o avanzar con sus ideas y soluciones.

Ok, aquí está cómo hacer esto. Separe su (s) clase (s) de control en uno o más archivos nuevos.

Tienes una función o método enganchado a personalizar_registro, ¿verdad? En esa función o método, se requieren una vez sus nuevos archivos justo antes de agregar sus controles personalizados. Entonces PHP no se quejará de redefinir clases.

Nota: Esto no funcionará de la caja, pero muestra el truco.

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

Nunca estás usando tu clase. Intente pasar una nueva instancia de su clase al método 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);

Además, no creo que WP sepa que el nombre de la opción para su configuración es parte de una matriz. Tal vez es mejor tener en themename_theme_options_color_schemelugar de themename_theme_options[color_scheme].

La clase que amplía pertenece al control de carga de imágenes. Si está creando un selector de color, probablemente debería extender la clase WP_Customize_Control .

Solo para completar: un ejemplo sobre cómo agregar un campo de número al Personalizador de temas.

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

Creo que debe agregar una barra diagonal inversa antes de WP_Customize. Así será

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, Porque la barra diagonal inversa supone que WP_Customize_Image_Control no proviene del mismo espacio de nombres

Avísame si ayudó