Como estender WP_Customize_Control

26

Estou procurando uma maneira de adicionar um novo tipo de controle ao painel visualização ao vivo da personalização. Eu vi como adicionar novas seções ao painel usando add_action( 'customize_register'...

O controle que quero implementar é um tipo diferente de selecionador de cores. Em um post anterior , vemos como estender as classes principais para adicionar widgets, mas o que falta aqui é um gancho que me permitirá trazer meu objeto para o escopo - WP_Customize_Palette_Control. Em

Você pode ver os começos do código aqui . Este código está no arquivo functions.php do meu tema.

Obrigado por qualquer ajuda. Rob

Atualizei o código. Agora eu tenho require_once para trazer as classes. Então agora eu não tenho erros de PHP, mas o meu novo HTML de controle não 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' );
    
por Rob 16.07.2012 / 06:51
fonte

4 respostas

14

Exemplo e classe para uso

Você pode ver no meu tema atual como é possível usar isso. Além disso, você pode usar a classe. Veja esta classe no Github e marque a functions.php para incluir isso.

Iniciar & init

Você pode registrar suas configurações personalizadas para o personalizador de temas por meio do 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 no tema:

Use, como no exemplo abaixo ↓:

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

Você também pode alterar o controle:

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

O tipo de controle padrão é text . Cria um controle de caixa de texto. Outro tipo de controle é dropdown-pages , que cria uma lista suspensa das páginas do WordPress.

Mas isso não é tudo. Na verdade, existem vários outros, mas porque eles são tão personalizados, eles são declarados de forma diferente.

Este faz 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 adicionais:

  • WP_Customize_Upload_Control - Isso fornece uma caixa de upload para arquivos. No entanto, você provavelmente não usará isso diretamente você vai querer estendê-lo para outras coisas ... como: WP_Customize_Image_Control - Isso fornece o seletor de imagens e a caixa de upload. Estende o controlador de upload. Você pode vê-lo em ação no plano de fundo personalizado peça, onde um usuário pode fazer upload de um novo arquivo para ser a imagem de fundo.
  • WP_Customize_Header_Image_Control - Por causa da ação de redimensionamento de a peça de cabeçalho, ele precisa de um pouco de manuseio e exibição especiais, o WP_Customize_Header_Image_Control estende o
  • WP_Customize_Image_Control para adicionar essa funcionalidade. Você pode ver isso em ação na peça de cabeçalho personalizada, onde um usuário pode fazer upload de um novo arquivo para ser a imagem do cabeçalho.

Você pode encontrar mais informações sobre o "Personalizador de temas" no blog do ottos .

Atualização 11/06/2012

Exemplo ao vivo para as possibilidades de leitura e mais exemplos, consulte o repo aberto para a fonte e o doku.

Atualização de 15/01/2013

Criamos um repo no github com classe personalizada para usá-lo, fácil e pronto . Talvez você possa usá-lo ou avançar com suas ideias e soluções.

    
por bueltge 03.08.2012 / 10:25
fonte
4

Ok, aqui está como fazer isso. Separe sua (s) classe (s) de controle para um ou mais arquivos novos.

Você tem uma função ou método enganchado em customize_register, certo? Nessa função ou método, exija seus novos arquivos antes de adicionar seus controles personalizados. Então o PHP não vai reclamar sobre a redefinição de classes.

Observação: isso não funcionará imediatamente, mas mostra o truque.

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
    
por Géza Mikló 24.01.2013 / 19:38
fonte
3

Você nunca está usando sua turma. Tente passar uma nova instância de sua classe para o 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);

Além disso, não acho que o WP saiba que o nome da opção para sua configuração é parte de uma matriz. Talvez seja melhor ter themename_theme_options_color_scheme em vez de themename_theme_options[color_scheme] .

A classe sua extensão pertence ao controle de upload de imagens. Se você estiver criando um seletor de cores, provavelmente deverá estender o WP_Customize_Control classe.

    
por onetrickpony 02.08.2012 / 00:43
fonte
1

Apenas para completar: um exemplo de como adicionar um campo numérico ao Customizador 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
    }
}
    
por kaiser 18.09.2012 / 18:09
fonte