The Customizer

Frank Bültge · Inpsyde GmbH

Usage

The
Customizer

Einführung

  • Im Core seit WordPress 3.4
  • Handwerkszeug für Options in Themes
  • Handling im Frontend, live

Dokumentation im Codex

Vorteile

  • WordPress Standard, ggf. in verschiedenen Themes nutzbar
  • Vernünftige Basis
  • Kontinuierliche Wartung, Weiterentwicklung
  • Child Theme Support
  • User Interface und -Experience von WordPress
  • Objektorientierte Programmierung, Nutzung von Methoden, Objekten, Erweiterbar

Nachteile

  • Junge Lösung
  • Dokumentation, Beispiele rar
  • Abbildung aller Möglichkeiten aktuell nicht gesichert
  • Unterstützung Caching
  • Backend-Unterstützung fehlt; nur Frontend Nutzung
  • Bestehende Lösungen sehr umfassend und verbreitet

Bestehende Optionen

  1. Theme mod Unterstützung von set_theme_mod, get_theme_mod
    Erstellen und Modifizieren von Theme Optionen
  2. Eigenen Optionen Ablage in der Options-Tabelle
    Bevorzugte Ablage als einzelne Zeile pro Einstellung
  3. Serialisierte Daten Unterstützung der Settings API
    Ablage in einem Array und Nutzung via set_option bzw. get_option

Einbinden

  • Geduld! Im Setup des Themes, Hook: after_setup_theme

add_action( 'after_setup_theme', 'documentation_setup' );
function documentation_setup() {
    
    add_theme_support( 'documentation_customizer', array( 'all' ) );
    require_if_theme_supports(
        'documentation_customizer',
        get_template_directory() . '/inc/theme-customize.php'
    );
}
			

Registrieren


add_action( 'customize_register', array( $this, 'customize_register' ) );
public function customize_register( $wp_customize ) {
	
	// get options, default options
	$defaults = $this->get_default_theme_options();
	
	// do it
}	
			
  • $wp_customize Zugriff auf alle Methoden

Bereiche definieren


$wp_customize->add_section( $this->option_key . '_layout', array(
	'title'       => __( 'Layout', 'documentation' ),
	'description' => __( 'Define main Layout', 'documentation' ),
	'priority'    => 30
) );
			
  • Eindeutige ID
  • Array mit Optionen (Titel, Beschreibung, Berechtigung, Priorität)

Einstellungen definieren


$wp_customize->add_setting( $this->option_key . '[layout]', array(
	'default'    => $defaults[ 'layout' ],
	'type'       => 'option',
	'capability' => 'edit_theme_options',
) );
			
  • Name in der Datenbank, [] - serialisiert, Array-Schlüssel
  • Array mit Optionen (Wert, Typ, Berechtigung)

Bereich kontrollieren


$wp_customize->add_control( $this->option_key . '_layout', array(
	'label'      => __( 'Color Scheme', 'documentation' ),
	'section'    => $this->option_key . '_layout',
	'settings'   => $this->option_key . '[layout]',
	'type'       => 'radio',
	'choices'    => array(
		'sidebar-left'  => __( 'Sidebar on left', 'documentation' ),
		'sidebar-right' => __( 'Sidebar on right', 'documentation' )
	),
) );
			
  • ID, Referenz auf den Bereich
  • Array mit Parametern (Label, Bereich, Einstellungen, Tüp)

Farb-Bereiche


$wp_customize->add_control(
	new WP_Customize_Color_Control(
		$wp_customize,
		$this->option_key . '_text_color', array(
			'label'      => __( 'Text Color', 'documentation' ),
			'section'    => 'colors',
			'settings'   => $this->option_key . '[text_color]',
		) 
	)
);
			
  • Diese Klasse erweitert den Customizer
  • Einbindung aller Scripte und Styles

Weitere Controller-Klassen

  1. WP_Customize_Color_Control Farb-Bereiche inkl. Color Picker
  2. WP_Customize_Upload_Control Upload Bereich und Methoden
  3. WP_Customize_Image_Control Image Picker, Upload Bereich, Controller
  4. WP_Customize_Header_Image_Control Erweitert Image Control speziell für Header

Eigene Controller


class Documentation_Customize_Textarea_Control extends WP_Customize_Control {
	
	public $type = 'textarea';
	
	public function render_content() {
		?>
		<label>
			<span class="customize-control-title">
				<?php echo esc_html( $this->label ); ?>
			</span>
			<textarea class="large-text" cols="20" rows="5" <?php $this->link(); ?>>
				<?php echo esc_textarea( $this->value() ); ?>
			</textarea>
		</label>
		<?php 
	}
}
			

Eigene Controller nutzen


$wp_customize->add_control(
	new Documentation_Customize_Textarea_Control(
		$wp_customize, $this->option_key . '_rewrite_url', array(
			'label'      => __( 'Rewrite URL', 'documentation' ),
			'section'    => $this->option_key . '_rewrite_url',
			'settings'   => $this->option_key . '[rewrite_url]',
		)
	)
);
			

Eigene Controller Werte


echo get_theme_mod( 'textarea_setting', 'default_value' );
			
  • Zugriff via Theme Mod
  • Alternative: get_option
  • Eigene Methoden im Gesamtprojekt via get_option

Hinweise

  • Hooks - customize_*
  • Dateien
    • wp-admin/customize.php
    • wp-includes/class-wp-customize-control.php
    • wp-includes/class-wp-customize-manager.php
    • wp-includes/class-wp-customize-section.php
    • wp-includes/class-wp-customize-setting.php
  • Klasse WP_Customize_Control

Demo ?

Githup Repo des Beispiel-Themes

Vielen Dank!

Für Menschen
Seien Sie begeistert und Sie werden begeistern.

Kontakt

Frank Bültge · Inpsyde GmbH

Illustrationen: Thies Schwarz Illustration