Ich suche nach einer Möglichkeit, dem benutzerdefinierten Live-Vorschaufenster eine neue Art von Steuerelement hinzuzufügen . Ich habe gesehen, wie man dem Panel mit neue Abschnitte hinzufügt add_action( 'customize_register'...

Die Steuerung, die ich implementieren möchte, ist eine andere Art der Farbauswahl. In einem früheren Beitrag haben wir uns überlegt, 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 ist in der functions.phpDatei meines Themas.

Vielen Dank für jede Hilfe. rauben

Habe gerade den Code aktualisiert. Jetzt muss ich require_onceden Unterricht einbringen. Jetzt habe ich 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' );

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. Sehen Sie sich diese Klasse auf Github an und überprüfen Sie, ob sie functions.phpdies enthält.

Start & init

Sie können Ihre benutzerdefinierten Einstellungen für den Theme-Customizer über den customize_register Hook 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 individuell 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. Zum Beispiel: 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 Kopfstücks ist eine besondere Handhabung und Anzeige erforderlich, so dass WP_Customize_Header_Image_Controlsich die Größe des Kopfstücks verlängert
• WP_Customize_Image_Controlum 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 im Ottos-Blog .

Update 11/06/2012

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

Update 15.01.2013

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

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

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_schemestatt zu haben themename_theme_options[color_scheme].

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

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

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

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

Lassen Sie mich wissen, ob es geholfen hat