WordPress Customizing
Standards nutzen am Beispiel des Customizers

Frank Bültge · Inpsyde GmbH, Juni 2015

Usage

WordPress
Customizing

Juni 2015

Einführung

  • Entwicklunsgzyklen werden kürzer
  • Änderungsgeschwindigkeit steigt
  • Wartung ist Aufwand
  • Vielzahl von Technologien, Abhängigkeiten
  • Standardisierung schaffen → WordPress
  • Standards nutzen → Entwickler
  • Stabile Kommunikation der Komponenten → stabile Entwicklung

Der Customizer

  • Seit Version 3.4 im Core
  • Handwerkszeug für Options in Themes
  • Handling im Frontend, live
  • Kontinuierliche Wartung, Weiterentwicklung
  • Child Theme Support
  • User Interface und -Experience von WordPress
  • Erweiterbar
  • Pflicht für Themes auf wordpress.org
  • Dokumentation des Customizer im Codex
  • Customizer Slides/Starter

„richtig?“

Abhängig von … aber einfach, schnell, bekannt.

  • Core → Wartung, Entwicklung
  • Feedback → Nutzer sehen, nicht verstehen
  • Bekanntheit → Themes, Tutorials, Core

Gute Gründe für den „richtigen“ Weg.

Nur Themes?

Der Customizer ist nur für Themes?

  • Erweiterbar
  • Frontend UI/UX

Gute Gründe für die Nutzung in Plugins.

Plugin Beispiel

WordPress Login

  • Backend vs. Frontend
  • Plugin vs. Theme

Customizing mit Hilfe des Customizer.

Set custom url


$login_url = wp_login_url();
$url       = add_query_arg(
	array(
		// Load specific url
		'url'    => urlencode( $login_url ),
		// Add a return url
		'return' => admin_url( 'themes.php' ),
	),
	admin_url( 'customize.php' )
);

Remove Sections

Via Customizer Methode


$wp_customize->remove_section( 'colors' );

Via Filter


add_filter( 'customize_control_active', '...', 10, 2 )

Add Panel


$capability = 'edit_theme_options';

$wp_customize->add_panel(
	$panel,
	array(
		'title'       => esc_attr__( 'Login Customizer', 'customize-login' ),
		'description' => esc_attr__( 'Switch to this panel to customize the login screen', 'customize-login' ),
		'priority'    => 999,
		'capability'  => $capability,
	)
);

Add Control


$wp_customize->add_control(
	new WP_Customize_Color_Control(
		$wp_customize, $settings . '_background_color',
		array(
			'label'           => esc_attr__( 'Background', 'login-customizer' ),
			'section'         => $section . '_login',
			'settings'        => $settings . '_background_color',
			'active_callback' => 'my_background_color_callback',
		)
	)
);

Autofocus Section


$url       = add_query_arg(
	array(
		// Pass to frontend the Customizer construct being deeplinked
		'autofocus[section]' => 'static_front_page',
	),
	admin_url( 'customize.php' )
);

Source ?

Beispiel auf GitHub.com

Vielen Dank!

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

Kontakt

Frank Bültge · Inpsyde GmbH

Illustrationen: Thies Schwarz Illustration