Cómo extender WP_Customize_Control

26

Estoy buscando una manera de agregar un nuevo tipo de control al panel personalizado vista previa en vivo . 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. En

Puede ver los principios del código aquí . Este código se encuentra en el archivo functions.php de mi tema.

Gracias por cualquier ayuda. Rob

Acabo de actualizar el código. Ahora tengo require_once para 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' );
    
pregunta Rob 16.07.2012 - 06:51

4 respuestas

14

Ejemplo y clase de uso

Puedes ver en mi tema actual, cómo es posible usar esto. También puedes usar la clase. Consulte esta class en Github y verifique que functions.php para incluir esto.

Iniciar & init

Puede registrar sus configuraciones personalizadas para el personalizador del tema a través de 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',
    ) ) );

}

Uso dentro del tema:

Úsalo, como en el siguiente ejemplo ↓:

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 como son tan personalizados, se declaran de manera diferente.

Éste 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, es probable que no uses esto directamente, querrás extenderlo para otras cosas ... como: WP_Customize_Image_Control - Esto le da el selector de imagen y el cuadro de carga. Se extiende el controlador de carga Puedes verlo en acción en el fondo personalizado. pieza, 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 redimensionamiento de la pieza de cabecera, necesita un poco de manejo especial y pantalla, por lo que el WP_Customize_Header_Image_Control extiende el
  • WP_Customize_Image_Control para agregar esa funcionalidad. Puedes verlo en acción en el encabezado personalizado, donde un usuario puede cargar un nuevo archivo para ser la imagen del encabezado.

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

Actualización 11/06/2012

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

Actualización 15/01/2013

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

    
respondido por el bueltge 03.08.2012 - 10:25
4

Ok, aquí está cómo hacer esto. Separe sus clases de control en uno o más archivos nuevos.

Usted tiene una función o método enganchado en custom_register, ¿verdad? En esa función o método, solicite una vez sus nuevos archivos justo antes de agregar sus controles personalizados. Entonces PHP no se quejará de la redefinición de clases.

Nota: Esto no funcionará de manera inmediata, 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
    
respondido por el Géza Mikló 24.01.2013 - 19:38
3

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 themename_theme_options_color_scheme en lugar de themename_theme_options[color_scheme] .

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

    
respondido por el onetrickpony 02.08.2012 - 00:43
1

Solo para completar: un ejemplo sobre cómo agregar un campo numérico 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
    }
}
    
respondido por el kaiser 18.09.2012 - 18:09

Lea otras preguntas en las etiquetas