webentwicklung-frage-antwort-db.com.de

So erweitern Sie WP_Customize_Control

Ich suche nach einer Möglichkeit, eine neue Art von Steuerelement zum benutzerdefinierten Live-Vorschau -Panel hinzuzufügen. Ich habe gesehen, wie ich mit add_action( 'customize_register'... neue Abschnitte zum Panel hinzufüge

Die Steuerung, die ich implementieren möchte, ist eine andere Art der Farbauswahl. In einem vorherigen Beitrag sehen wir, wie man Core-Klassen erweitert, um Widgets hinzuzufügen. Was mir hier jedoch fehlt, ist ein Hook, mit dem ich mein Objekt in den Geltungsbereich bringen kann - WP_Customize_Palette_Control. Beim

Sie können die Anfänge des Codes hier sehen . Dieser Code befindet sich in der functions.php-Datei meines Themas.

Danke für jede Hilfe. rauben

Habe gerade den Code aktualisiert. Jetzt muss ich require_once in die Klassen bringen. Jetzt habe ich also keine PHP Fehler, aber mein neues Steuerelement-HTML wird nicht angezeigt.

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

Beispiel und Klasse für die Verwendung

Sie können auf meinem aktuellen Thema sehen, wie es möglich ist, dies zu verwenden. Sie können auch die Klasse verwenden. Siehe hierzu class auf Github und überprüfe den functions.php , um dies einzuschließen.

Start & init

Sie können Ihre benutzerdefinierten Einstellungen für den Theme-Customizer über den Hook customize_register registrieren:

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

}

In-Theme-Nutzung:

Verwenden Sie es wie im folgenden Beispiel ↓:

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

Anpassungen

Sie können auch die Steuerung ändern:

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

Der Standardsteuertyp ist text. Es wird ein Textfeld-Steuerelement erstellt. Ein anderer Steuerungstyp ist dropdown-pages, der eine Dropdown-Liste der WordPress-Seiten erstellt.

Aber das ist nicht alles. Es gibt tatsächlich mehrere mehr, aber weil sie so gewöhnlich sind, werden sie anders deklariert.

Dieser nutzt 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]',
    ) )
);

Zusätzliche Bemerkungen:

  • WP_Customize_Upload_Control - Dies gibt Ihnen eine Upload-Box für Dateien. Sie werden dies jedoch wahrscheinlich nicht direkt verwenden. Sie möchten es für andere Dinge erweitern, z. B .: WP_Customize_Image_Control - Dies gibt Ihnen die Bildauswahl und die Uploader-Box. Es erweitert den Upload-Controller. Sie können es in Aktion auf dem benutzerdefinierten Hintergrundstück sehen, auf dem ein Benutzer eine neue Datei als Hintergrundbild hochladen kann.
  • WP_Customize_Header_Image_Control - Aufgrund der Größenänderung des Header-Elements ist eine spezielle Handhabung und Anzeige erforderlich, sodass der WP_Customize_Header_Image_Control die Größe des Headers erweitert
  • WP_Customize_Image_Control, um diese Funktionalität hinzuzufügen. Sie können es in Aktion auf der benutzerdefinierten Kopfzeile sehen, wo ein Benutzer eine neue Datei als Kopfzeilenbild hochladen kann.

Weitere Informationen zu "Theme Customizer" finden Sie in ottos blog .

Update 11/06/2012

Live-Beispiel für Lesemöglichkeiten und weitere Beispiele finden Sie im open repo für die Quelle und das Doku.

Update 15.01.2013

Wir haben ein Repo auf Github mit benutzerdefinierten Klasse erstellt, um es zu verwenden, einfach und bereit. Vielleicht können Sie es nur nutzen oder mit Ihren Ideen und Lösungen vorankommen.

14
bueltge

Ok, hier ist, wie das geht. Teilen Sie Ihre Kontrollklasse (n) in eine oder mehrere neue Dateien auf.

Sie haben eine Funktion oder Methode, die sich auf customize_register einstellt, richtig? In dieser Funktion oder Methode benötigen Sie einmalig Ihre neuen Dateien, bevor Sie Ihre benutzerdefinierten Steuerelemente hinzufügen. Dann beschwert sich PHP nicht über die Neudefinition von Klassen.

Hinweis: Dies funktioniert nicht sofort, zeigt aber den Trick.

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
4
Géza Mikló

Du benutzt deine Klasse nie. Versuchen Sie, eine neue Instanz Ihrer Klasse an die Methode add_control zu übergeben:

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

Ich glaube auch nicht, dass WP weiß, dass der Optionsname für Ihre Einstellung Teil eines Arrays ist. Vielleicht ist es besser, themename_theme_options_color_scheme anstelle von themename_theme_options[color_scheme] zu haben.

Die Klasse, die Sie erweitern, gehört zum Steuerelement zum Hochladen von Bildern. Wenn Sie einen Farbwähler erstellen, sollten Sie wahrscheinlich die Klasse WP_Customize_Control erweitern.

3
onetrickpony

Der Vollständigkeit halber: Ein Beispiel zum Hinzufügen eines Zahlenfelds zum Theme Customizer.

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

Ich denke, Sie müssen Backslash vor dem WP_Customize hinzufügen. So wird es sein

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, Weil Backslash davon ausgegangen ist, dass das WP_Customize_Image_Control nicht aus demselben Namespace stammt

Lassen Sie mich wissen, ob es geholfen hat

0
ipp