Das WordPress JavaScript-Templatesystem

Es gibt diese coole WordPress-Funktion, wenn du mit wiederholenden Inhalten arbeitest: das Templatesystem. Nein, ich spreche nicht von Templates im Sinne von Themes, Blöcken oder ähnliches, sondern von einer JavaScript-Funktion, die viele vielleicht gar nicht kennen (oder vergessen haben). Es lässt dich mit wenig Aufwand ein Template in JavaScript für ein identisches Set an Elementen anzeigen. Wenn du beispielsweise eine Liste an Elementen hast, die du alle gleich anzeigen willst, ist es die ideale Lösung.

Es ist verfügbar als wp.template und neben einer einzelnen Seite innerhalb der JavaScript-Referenz im Codex sieht es nicht so aus, als ob es viel Dokumentation dafür gibt. Lass uns das ändern!

Das Template

Lass uns zuerst das Template selbst erstellen. Es ist HTML innerhalb eines Script-Tags, das eine bestimmte ID und einen bestimmten Typ hat. Damit es als Template funktioniert, sollte das Script-Tag den type="text/html" besitzen und die ID muss mit tmpl- beginnen:

<script type="text/html" id="tmpl-my-item">
	<!-- HTML code -->
</script>Code-Sprache: HTML, XML (xml)

Innerhalb des HTML-Codes kannst du Variablen-Interpolation und Logik verwenden. Das ist etwas, das die Referenz oben klar macht:

Interpolate (nicht maskiert): {{{ }}}
Interpolate (maskiert): {{ }}
Logik: <# #>

Ein Beispiel:

<script type="text/html" id="tmpl-my-item">
	<div>
		<h3>{{ data.title }}</h3>
		
		<code>{{{ data.code }}}</code>
	</div>
</script>Code-Sprache: HTML, XML (xml)

Aber woher kommt data? Um das zu beantworten, lass uns in den JavaScript-Teil schauen.

Das JavaScript

Um das Template im JavaScript zu bekommen, genügen zwei Zeilen Code:

const template = wp.template( 'my-item' );
const html = template();Code-Sprache: JavaScript (javascript)

Zuerst erhältst du das Template als Funktion in der Variable template (wobei my-item der Teil deiner Template-ID nach dem Präfix tmpl- darstellt) und kannst die Funktion dann aufrufen und in html speichern, um den eigentlichen HTML-Code des Templates zu erhalten. Da es designt wurde, um in jQuery zu funktionieren, erhältst du den HTML-Code als Zeichenfolge, sodass du ihn in jQuery via $( element ).html( html ) verwenden kannst. Dabei ist element ein Element auf deiner Seite. Wenn du nicht jQuery verwendest, kannst du auf insertAdjacentHTML zugreifen, um das Template über element.insertAdjacentHTML( 'beforeend', html ) einzufügen.

Parameter

Aber was ist mit dem data-Parameter oben?

Für jedes Element, für das du über das Templatesystem generieren möchtest, kannst du ein Objekt an die template()-Funktion übergeben, das du dort dann als data-Objekt verwenden kannst:

const itemData = {
	code: '<?php \phpinfo();',
	title: 'My title',
};
const template = wp.template( 'my-item' );
const html = template( itemData );Code-Sprache: JavaScript (javascript)

Durch das Übergeben von itemData zur template()-Funktion kannst du alle seine Eigenschaften und Daten innerhalb des Templates verwenden, wie weiter oben zu sehen.

Logik

Wenn du darüber hinaus gewisse Logik in deinem Code benötigst, beispielsweise um Inhalt nur unter bestimmten Voraussetzungen anzuzeigen, kannst du dies auch tun:

<script type="text/html" id="tmpl-my-item">
	<div>
		<h3>{{ data.title }}</h3>
		
		<# if ( data.code ) { #>
			<code>{{{ data.code }}}</code>
		<# } #>
	</div>
</script>Code-Sprache: HTML, XML (xml)

Hier habe ich den <code>-Block mit einer Abfrage umschlossen, sodass er nur angezeigt wird, wenn data.code definiert ist. Ohne sie würde ein leerer <code>-Block angezeigt werden.

Abhängigkeiten

Wie bereits angemerkt, benötigt wp.template jQuery. Selbst ist es Teil von wp-util. Stelle daher sicher, dass du es als Abhängigkeit hinzufügst, wenn du dein Skript hinzufügst. Das kann in deinem PHP-Code etwa so aussehen:

static function my_enqueue_scripts(): void {
	\wp_enqueue_script( 'my-handle', 'my-source.js', [ 'wp-util' ], \filemtime( 'my-source.js' ), [ 'strategy' => 'defer' ] );
}

\add_action( 'admin_enqueue_scripts', 'my_enqueue_scripts' );Code-Sprache: PHP (php)

Fazit

wp.template ist ein praktisches Werkzeug, um ähnlichen Inhalt wiederholt in WordPress anzuziegen. Es wird auch häufig bei Ajax-Anfragen verwendet, wenn du einen bestimmten Teil der Seite als HTML erhalten möchtest. Da es Variablen und sogar Logik unterstützt, ist es sehr flexibel einsetzbar.

Ein negativer Punkt ist sicherlich die Abhängigkeit zu jQuery. Wenn du das nicht magst, kannst du dir den Quellcode ansehen. Es sollte gut möglich sein, es von Abhängigkeiten zu befreien.