WP_Customize_Control का विस्तार कैसे करें


27

मैं अनुकूलित लाइव पूर्वावलोकन पैनल में एक नए प्रकार के नियंत्रण को जोड़ने का एक तरीका ढूंढ रहा हूं । मैंने देखा है कि पैनल का उपयोग करके नए अनुभाग कैसे जोड़े जाएं add_action( 'customize_register'...

मैं जिस नियंत्रण को लागू करना चाहता हूं वह एक अलग प्रकार का रंग पिकर है। में एक पिछले पोस्ट , हम कोर कक्षाएं विस्तार करने के लिए कैसे विजेट जोड़ने के लिए देखते हैं, लेकिन क्या मैं यहाँ की कमी है एक हुक है कि मुझे सक्षम हो जाएगा दायरे में मेरी वस्तु लाने के लिए है - WP_Customize_Palette_Control। पर

आप यहां कोड की शुरुआत देख सकते हैं । यह कोड functions.phpमेरी थीम की फाइल में है।

किसी भी मदद के लिए धन्यवाद। लूटना

बस कोड को अपडेट किया। अब मुझे 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' );

3
मामूली बिंदु, लेकिन जब तक आपका नियंत्रण वर्डप्रेस कोर में नहीं जाता है, तब तक WP_ उपसर्ग का उपयोग न करें। वर्ग नाम के लिए उपसर्ग के रूप में अपने स्वयं के प्लगइन / थीम नाम का उपयोग करें।
ओट्टो

जवाबों:


14

उदाहरण और उपयोग के लिए कक्षा

आप मेरे वर्तमान विषय पर देख सकते हैं कि इसका उपयोग कैसे संभव है। इसके अलावा आप कक्षा का उपयोग कर सकते हैं। Github पर इस वर्ग को देखें functions.phpजिसमें यह शामिल है।

प्रारंभ और 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";

समायोजन

आप नियंत्रण भी बदल सकते हैं:

$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, जो वर्डप्रेस पेज की एक ड्रॉपडाउन सूची बनाता है।

लेकिन वह सब नहीं है। वास्तव में कई और अधिक हैं, लेकिन क्योंकि वे बहुत कस्टम हैं, इसलिए वे अलग तरह से घोषित किए जाते हैं।

यह एक 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

पढ़ी गई संभावनाओं और अधिक उदाहरणों के लिए लाइव उदाहरण, स्रोत और डॉक्यू के लिए खुले रेपो देखें ।

अद्यतन 01/15/2013

हमने इसे आसान और तैयार करने के लिए कस्टम क्लास के साथ जीथूब पर एक रेपो बनाया है । हो सकता है कि आप केवल इसका उपयोग कर सकते हैं या अपने विचारों और समाधानों के साथ आगे बढ़ सकते हैं।


4

ठीक है, यहाँ यह कैसे करना है। एक या अधिक नई फ़ाइलों के लिए अपने नियंत्रण वर्ग (तों) को अलग करें।

आपके पास एक कार्य या विधि है जो अनुकूलित_रजिस्ट्री पर आदी है, है ना? उस फ़ंक्शन या विधि में आपके कस्टम नियंत्रणों को जोड़ने से ठीक पहले एक बार आपकी नई फ़ाइलों की आवश्यकता होती है। तब 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

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 वर्ग का विस्तार करना चाहिए ।



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

मुझे नहीं लगता कि यह आवश्यक है, आप केवल डिफ़ॉल्ट नियंत्रण numberके typeलिए पास कर सकते हैं , और input_attrsपास करने के लिए उपयोग कर सकते हैं step, आदि
इयान डुन

@IanDunn क्या आप अतिरिक्त उत्तर के रूप में एक उदाहरण जोड़ना चाहते हैं? धन्यवाद!
22

0

मुझे लगता है कि आपको WP_Customize से पहले बैकस्लैश जोड़ना होगा। तो यह होगा

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, क्योंकि बैकस्लैश ने माना कि WP_Customize_Image_Control एक ही नामस्थान से नहीं

मुझे पता है अगर यह मदद की

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.