Genesis Child Theme auf Basis von Tailwind CSS erstellen (Teil 3)

Tailwind CSS arbeitet auf zwei verschiedene Arten. Man kann entweder eine (teilweise sehr lange) Liste an vordefinierten Klassen dem gewünschten Element zuweisen – oder man erstellt, insbesondere in wiederholten Fällen, eigene Komponenten.

Um beispielsweise dem Genesis-Element site-container die Tailwind-Klassen container und mx-auto zuzuweisen, kann man einen speziellen Filter des Genesis-Frameworks nutzen:

add_filter( "genesis_attr_site-container", function ( $attributes ) {
    $attributes['class'] .= ' container mx-auto';

    return $attributes;
} );

Der genesis_attr_-Filter kann für eine sehr lange Liste an Elementen genutzt werden.

Möchte man dem body-Element weitere Klassen zuweisen, dann sollte man statt auf den Filter genesis_attr_body besser auf den WordPress-eigenen Filter body_class zurückgreifen:

add_filter( 'body_class', function ( $classes ) {
    $classes[] = $this->classes;

    return $classes;
} );

Möchte man bei sehr vielen Elementen eigene Klassen zuweisen (was bei der Nutzung von Tailwind CSS häufig der Fall ist), dann erhält man unschönen, langen Code. Diesen Code kann man vereinfachen, indem man sich eine Helper-Klasse baut. Ein Code-Beispiel verdeutlicht dies:

$elements                   = [];
$elements['body']           = 'font-normal font-open-sans leading-normal bg-grey-lightest';
$elements['site-container'] = 'container mx-auto my-8 px-12 shadow-lg rounded mt-4 pb-0 pt-4 bg-white';
$elements['site-header']    = 'py-4 mb-4 border-b-2';
$elements['site-title']     = 'text-4xl';
$elements['site-footer']    = 'py-8 border-t-2 text-center mt-8 text-sm';

function sw_add_classes( $elements ) {
	foreach ( $elements as $element => $class ) {
		new SW_Tailwind_Helper_Class( $element, $class );
	}
}

sw_add_classes( $elements );


class SW_Tailwind_Helper_Class {
	private $element;
	private $classes;

	public function __construct( $element, $classes ) {
		$this->element = $element;
		$this->classes = $classes;

		if ( $element == 'body' ) {
			add_filter( 'body_class', function ( $classes ) {
				$classes[] = $this->classes;

				return $classes;
			} );
		} else {
			add_filter( "genesis_attr_" . $this->element, function ( $attributes ) {
				$attributes['class'] .= ' ' . $this->classes;

				return $attributes;
			} );
		}
	}
}

Mit Hilfe dieser Helper-Klasse kann man das gewünschte Element und die benötigten Klassen einfach einem Array zuweisen – ohne jeweils separat die entsprechende Filter-Funktion schreiben zu müssen.

Das Genesis-Framework bietet zwar eine sehr lange Liste an genesis_attr_-Filter, diese Filter stehen aber leider nicht für jedes Element zur Verfügung. Aus diesem Grund beschäftigt sich der nächste Teil mit eigenen Komponenten.

Weiter mit Teil 4.

Schreibe einen Kommentar