WordPress Theme Customizer Custom Controls

Puh, schwerer Titel - aber er trifft es und es ist schwer die Möglichkeit in deutscher Sprache zu nennen ohne die gleiche Unsicherheit zu erzeugen. Der englische Begriff ist wenigstens auf die Begriffe von WordrPress zurück zu führen. Zum Verständnis daher einige Worte, die erklären, was ich sagen will und worum es geht.

Der Customizer ist eine recht junge Möglichkeit von WordPress um Themes mit Optionen zu versorgen. Dabei ist das Visuelle besonders im Vordergrund, man gestaltet die Optionen direkt im Frontend am Theme, spielt und speichert die Einstellungen. Einige Zeilen dazu habe ich in einem älteren Artikel hinterlegt und ebenso die Slides zum Thema hinterlegt.

Nun soll es in diesem Beitrag gehen, wie man eigene Klassen erstellt, die die Controls erweitern, da nicht alle Felder und Wünsche im Core hinterlegt sind. Dabei kann man auf bestehende Lösungen der Community zugreifen oder eigenen Klassen erstellen. Im ersten Schritt daher einen kurze Einführung für neue Klassen und im Anschluss der Hinweis zu mir bekannten Klassen. Bitte erweitert in dem ihr mir über die Kommentarfunktion Links nennt.

Grundstruktur der Klasse


if ( class_exists( 'WP_Customize_Control' ) ) {
     class Documentation_Customize_Textarea_Control extends WP_Customize_Control {
          // todo
     }
}

Methoden der Klasse

Eine ganze Reihe von Methoden stehen bereit nd können überschrieben werden.

  • enqueue() - Scripte und Stylesheets zur Klasse hinzufügen
  • value() - Holen von Einstellungen
  • to_json() - Übergib die Daten an ein JS; via JSON
  • check_capabilities() - Prüfe das Rechteobjekt um die Control zu nutzen
  • maybe_render() - Prüfung über das Rechteobjekt, ob das Rendern erfolgen soll
  • render() - Ausgabe des Inhalt durch Aufruf von render_content().
  • render_content() - Ausgabe der Controler

Beispiel Erweiterung

Als kleines Beispiel soll eine Klasse entstehen, die das Verwenden von textarea-Elementen im Customizer ermöglicht. Die wichtigste Methode dafür ist render() und darin muss das Markup und alle Ausgabe-Objekte erscheinen. Konstruktor und deklarierte Variablen sind nicht zwingend.


<?php
/**
 * Customize for textarea, extend the WP customizer
 *
 * @package    WordPress
 * @subpackage Documentation
 * @since      10/16/2012
 */

if ( ! class_exists( 'WP_Customize_Control' ) )
	return NULL;

class Documentation_Customize_Textarea_Control extends WP_Customize_Control {

	/**
	 * @access public
	 * @var    string
	 */
	public $type = 'textarea';

	/**
	 * @access public
	 * @var    array
	 */
	public $statuses;

	/**
	 * Constructor.
	 *
	 * If $args['settings'] is not defined, use the $id as the setting ID.
	 *
	 * @since   10/16/2012
	 * @uses    WP_Customize_Control::__construct()
	 * @param   WP_Customize_Manager $manager
	 * @param   string $id
	 * @param   array $args
	 * @return  void
	 */
	public function __construct( $manager, $id, $args = array() ) {

		$this->statuses = array( '' => __( 'Default' ) );
		parent::__construct( $manager, $id, $args );
	}

	/**
	 * Render the control's content.
	 * 
	 * Allows the content to be overriden without having to rewrite the wrapper.
	 * 
	 * @since   10/16/2012
	 * @return  void
	 */
	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
	}

}

Die entstandenen Klasse verwende ich beispielsweise im Theme Documentation, Download und Pflegestatus auf Github. Alternativ könnt ihr die Klasse aus dem Projekt WordPress-Theme-Customizer-Custom-Controls auf Github holen, erweitern, verbessern; wo es weitere Klassen gibt.

Kollektion von Klassen, die die Controls des Customizer erweitern:

Kommentare sind geschlossen.