Как расширить WP_Customize_Control

Я ищу способ добавить новый вид элемента управления для настройки панели live preview . Я видел, как добавлять новые разделы в панель, используя add_action( 'customize_register'...

Элемент управления, который я хочу реализовать, - это другой тип выбора цвета. В предыдущем сообщении мы видим, как расширить основные классы для добавления виджетов, но то, чего мне не хватает, это крючок, который позволит мне перенести мой объект в область видимости - WP_Customize_Palette_Control. В

Вы можете увидеть начало кода здесь . Этот код находится в файле functions.php моей темы.

Спасибо за любую помощь. Rob

Просто обновил код. Теперь у меня есть require_once для ввода классов. Итак, теперь у меня нет ошибок PHP, но мой новый HTML-код управления не появляется.

<?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' );
26 голосов | спросил Rob 16 J000000Monday12 2012, 08:51:38

4 ответа


14

Пример и класс для использования

Вы можете увидеть мою текущую тему, как это можно использовать. Также вы можете использовать класс. См. Этот класс в Github, чтобы проверить functions.php для включения этого.

Start & INIT

Вы можете зарегистрировать свои пользовательские настройки для настраивателя темы с помощью 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',
    ) ) );

}

Использование темы:

Используйте его, как в примере ниже â † ":

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

Adjustments

Вы также можете изменить элемент управления:

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

Тип управления по умолчанию - text. Он создает элемент управления текстовым полем. Другой тип управления - это dropdown-pages, который создает раскрывающийся список страниц WordPress.

Но это не все. Там на самом деле еще несколько, но потому, что они так привыкли, они объявлены по-разному.

В этом используется 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]',
    ) )
);

Дополнительные примечания:

  • WP_Customize_Upload_Control - Это дает вам поле для загрузки файлов. Однако вы, вероятно, не будете использовать это напрямую, вы хотите расширить его для других вещей: например: WP_Customize_Image_Control â € " Это дает вам выборщик изображений и поле загрузчика. Он расширяет загрузить контроллер. Вы можете увидеть его в действии на пользовательском фоне когда пользователь может загрузить новый файл в качестве фонового изображения.
  • WP_Customize_Header_Image_Control - Из-за действия изменения размера кусок заголовка, ему требуется немного специальной обработки и отображения, поэтому WP_Customize_Header_Image_Control расширяет
  • WP_Customize_Image_Control, чтобы добавить эту функциональность. Вы можете это увидеть в действии на пользовательскую часть заголовка, где пользователь может загрузить новую файл - это заголовок.

Вы можетеподробнее об «Настройке темы» в блоге ottos .

Обновление 11/06/2012

Live Пример возможностей чтения и других примеров см. в открытии репо . для источника и документа.

Обновление 01/15/2013

Мы создали репо на github с пользовательским классом , чтобы использовать его, легко и быстро , Возможно, вы можете использовать его или продвигаться с идеями и решениями.

ответил bueltge 3 PM000000120000003831 2012, 12:25:38
4

Хорошо, вот как это сделать. Отделите свой класс управления (ы) к одному или нескольким новым файлам.

У вас есть функция или метод, подключенные к customize_register, правильно? В этой функции или методе требуется как только ваши новые файлы перед добавлением пользовательских элементов управления. Тогда PHP не будет жаловаться на переопределение классов.

Примечание. Это не будет работать из коробки, но показывает трюк.

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
ответил Géza Mikló 24 Jpm1000000pmThu, 24 Jan 2013 22:38:05 +040013 2013, 22:38:05
3

Вы никогда не используете свой класс. Попробуйте передать новый экземпляр вашего класса методу 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);

Кроме того, я не думаю, что WP знает, что имя параметра для вашего параметра является частью массива. Может быть, лучше themename_theme_options_color_scheme вместо themename_theme_options[color_scheme].

Класс вашего расширения относится к элементу управления загрузкой изображения. Если вы создаете подборщик цветов, вы должны, вероятно, расширить WP_Customize_Control .

ответил onetrickpony 2 AM00000020000001031 2012, 02:43:10
1

Только для полноты: пример того, как добавить поле номера в пользовательский режим темы.

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
    }
}
ответил kaiser 18 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 18 Sep 2012 20:09:09 +0400 2012, 20:09:09

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132