Veröffentlicht am 4 Kommentare

Modus des zusätzlichen CSS im Customizer ändern

Für ein Projekt sollten innerhalb des Customizer-CSS Variablen verwendet werden können, die dann am Ende als die ebenfalls im Customizer eingestellten Farbwerte ausgegeben werden. Da die Variablen fest vordefiniert sind, stellt sich das bei der Ausgabe nicht als Problem dar. Allerdings findet der Editor im Customizer Variablen nicht so toll, weil er sie nicht kennt und selbige auch kein CSS sind. Dadurch zeigt er unter Umständen Fehlermeldungen an.

Damit das nicht passiert, lässt sich das CSS-Feld im Customizer mit einem anderen Modus neu initialisieren, bei dem Variablen erlaubt sind. Ich habe mich für den SCSS-Modus entschieden. Es gibt allerdings noch viele weitere.

Da man den Modus nicht ohne Weiteres ändern kann, zumindest gibt es keinen Filter dafür, muss man das CSS-Feld praktisch komplett entfernen und dann neu hinzufügen.

/**
 * Customizer settings.
 * 
 * @param	WP_Customize_Manager	$wp_customize Theme Customizer object
 */
function my_customizer_register( $wp_customize ) {
	$wp_customize->remove_control( 'custom_css' );
	$wp_customize->remove_setting( 'custom_css' );
	
	$custom_css_setting = new WP_Customize_Custom_CSS_Setting(
		$wp_customize,
		sprintf( 'custom_css[%s]', get_stylesheet() ),
		[
			'capability' => 'edit_css',
			'default' => '',
		]
	);
	
	$wp_customize->add_setting( $custom_css_setting );
	
	$wp_customize->add_control(
		new WP_Customize_Code_Editor_Control(
			$wp_customize,
			'custom_css',
			[
				'label' => __( 'CSS code' ),
				'section' => 'custom_css',
				'settings' => [ 'default' => $custom_css_setting->id ],
				'code_type' => 'text/x-scss',
				'input_attrs' => [
					'aria-describedby' => 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4',
				],
			]
		)
	);
}

add_action( 'customize_register', 'my_customizer_register' );

Um hier noch weiterzugehen, kann ich mir vorstellen, das Abspeichern des Codes am Ende durch einen SCSS-Compiler zu jagen, um wirklich alle Vorzüge von SCSS verwenden zu können. Das habe ich für meinen Anwendungsfall allerdings nicht gebraucht.

4 Gedanken zu „Modus des zusätzlichen CSS im Customizer ändern

  1. Das ist ja wirklich spannend, dass man hier auch SCSS schreiben kann. Aber wie genau funktioniert es denn dann in deinem Projekt? Der Browser versteht ja kein SCSS.

    1. Da ich nur Variablen brauchte, ging das am Ende mit einem str_replace() vor der Ausgabe ganz simpel.

      Ansonsten gäbe es für richtiges SCSS aber natürlich auch einen entsprechenden PHP-Compiler.

    2. Eigentlich fehlt nicht mehr viel um SCSS direkt im Browser editieren zu können : Mittels https://github.com/medialize/sass.js könnte die SCSS Quelle direkt im Browser (vor dem Speichern) in echtes CSS umgewandelt werden. Danach müssten dann sowohl die SCSS Quelle (=> damit Sie wiederholt editiert werden kann) als auch das erzeugte CSS (=> zur Verwendung in der WordPress Seite) gespeichert werden.
      Diese Vorhensweise hätte auch den Vorteil, dass man eventuelle Fehler im SCSS Quelltext direkt im Browser (und noch vor dem Speichern) sehen und ggf korrigieren könnte.

      1. Ich wäre vermutlich eher mit scssphp gegangen, weil man sich sonst noch manuell darum kümmern muss, dass das kompilierte SCSS vom Browser auf dem Server gespeichert wird. Und dort müsste man dann noch zusätzliche Prüfungen einbauen, damit wirklich nur SCSS an den Server übergeben wird. Das halte ich für unnötig, weil es auch serverseitig ginge. 🙂

        Ebenso sehe ich kein Problem, die per PHP-Compiler ausgegebenen Fehler im Customizer anzuzeigen. Der kann das bei CSS auch bereits.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.