Cách mở rộng WP_Customize_Control


27

Tôi đang tìm cách để thêm một loại điều khiển mới vào bảng xem trước trực tiếp tùy chỉnh . Tôi đã thấy cách thêm phần mới vào bảng điều khiển bằng cách sử dụng add_action( 'customize_register'...

Kiểm soát tôi muốn thực hiện là một loại công cụ chọn màu khác nhau. Trong một bài viết trước , chúng ta thấy cách mở rộng các lớp lõi để thêm các widget, nhưng cái tôi thiếu ở đây là một cái móc sẽ cho phép tôi đưa đối tượng của mình vào phạm vi - WP_Customize_Palette_Control. Tại

Bạn có thể thấy sự khởi đầu của mã ở đây . Mã này nằm trong functions.phptập tin của chủ đề của tôi.

Cảm ơn vì bất kì sự giúp đỡ. Cướp

Chỉ cần cập nhật mã. Bây giờ tôi phải require_oncemang vào các lớp học. Vì vậy, bây giờ tôi không có lỗi PHP nhưng HTML điều khiển mới của tôi không xuất hiện.

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

3
Điểm nhỏ, nhưng trừ khi quyền kiểm soát của bạn đi vào lõi WordPress, không sử dụng tiền tố WP_. Sử dụng tên plugin / chủ đề của riêng bạn làm tiền tố cho tên lớp.
Otto

Câu trả lời:


14

Ví dụ và lớp để sử dụng

Bạn có thể thấy chủ đề hiện tại của tôi, làm thế nào có thể sử dụng cái này. Ngoài ra, bạn có thể sử dụng các lớp học. Xem lớp này trên Github một kiểm tra functions.phpđể bao gồm này.

Bắt đầu và khởi tạo

Bạn có thể đăng ký cài đặt tùy chỉnh của mình cho tùy biến chủ đề thông qua 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',
    ) ) );

}

Sử dụng trong chủ đề:

Sử dụng nó, như trong ví dụ dưới đây:

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

Điều chỉnh

Bạn cũng có thể thay đổi điều khiển:

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

Loại điều khiển mặc định là text. Nó tạo ra một điều khiển hộp văn bản. Một loại điều khiển khác là dropdown-pages, nó tạo ra một danh sách thả xuống của các trang WordPress.

Nhưng đó không phải là tất cả. Thực tế có nhiều thứ nữa, nhưng vì chúng quá tùy biến nên chúng được khai báo khác nhau.

Cái này sử dụng 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]',
    ) )
);

Ghi chú bổ sung:

  • WP_Customize_Upload_Control- Điều này cung cấp cho bạn một hộp tải lên cho các tập tin. Tuy nhiên, bạn có thể sẽ không sử dụng trực tiếp điều này, bạn sẽ muốn mở rộng nó cho những thứ khác như: WP_Customize_Image_Control- Điều này cung cấp cho bạn trình chọn hình ảnh và hộp tải lên. Nó mở rộng bộ điều khiển tải lên. Bạn có thể thấy nó hoạt động trên mảnh nền tùy chỉnh, nơi người dùng có thể tải lên một tệp mới để làm hình nền.
  • WP_Customize_Header_Image_Control- Do hành động thay đổi kích thước của phần tiêu đề, nó cần một chút xử lý và hiển thị đặc biệt, do đó, phần WP_Customize_Header_Image_Controlmở rộng
  • WP_Customize_Image_Controlđể thêm chức năng đó. Bạn có thể thấy nó hoạt động trên phần tiêu đề tùy chỉnh, nơi người dùng có thể tải lên một tệp mới để làm hình ảnh tiêu đề.

Bạn có thể tìm hiểu thêm về "Theme Customizer" trong blog ottos .

Cập nhật 11/06/2012

Ví dụ trực tiếp để đọc các khả năng và nhiều ví dụ khác, xem repo mở cho nguồn và doku.

Cập nhật ngày 15/1/2013

Chúng tôi đã tạo một repo trên github với lớp tùy chỉnh để sử dụng nó, dễ dàng và sẵn sàng. Có lẽ bạn chỉ có thể sử dụng nó hoặc tiến lên với ý tưởng và giải pháp của bạn.


4

Ok, đây là cách để làm điều này. Phân chia (các) lớp điều khiển của bạn thành một hoặc nhiều tệp mới.

Bạn có một chức năng hoặc phương thức được nối trên custom_register, phải không? Trong chức năng hoặc phương thức đó yêu cầu một lần các tệp mới của bạn ngay trước khi thêm các điều khiển tùy chỉnh của bạn. Sau đó, PHP sẽ không phàn nàn về việc xác định lại các lớp.

Lưu ý: Điều này sẽ không hoạt động ngoài hộp, nhưng hiển thị các mẹo.

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

3

Bạn không bao giờ sử dụng lớp học của bạn. Hãy thử chuyển một thể hiện mới của lớp của bạn sang phương thức 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);

Ngoài ra, tôi không nghĩ WP biết rằng tên tùy chọn cho cài đặt của bạn là một phần của một mảng. Có lẽ tốt hơn là có themename_theme_options_color_schemethay vì themename_theme_options[color_scheme].

Lớp mở rộng của bạn thuộc về kiểm soát tải lên hình ảnh. Nếu bạn đang tạo một công cụ chọn màu, có lẽ bạn nên mở rộng lớp WP_Customize_Control .



1

Chỉ để hoàn thiện: Một ví dụ về cách thêm trường số vào Trình tùy chỉnh chủ đề.

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

Tôi không nghĩ điều đó là cần thiết, bạn chỉ có thể vượt qua numberlàm typeĐiều khiển mặc định và sử dụng input_attrsđể vượt qua step, v.v.
Ian Dunn

@IanDunn Bạn có muốn thêm một ví dụ như câu trả lời bổ sung không? Cảm ơn!
kaiser

0

Tôi nghĩ bạn phải thêm dấu gạch chéo ngược trước WP_Customize. Vì vậy nó sẽ được

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, Bởi vì dấu gạch chéo ngược giả định rằng WP_Customize_Image_Control không xuất phát từ cùng một Không gian tên

Hãy cho tôi biết nếu nó giúp

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.