Verschieben der Sidebar in ein Theme Template

Eigentlich wollte ich, wie im letzten Beitrag erwähnt, mit dem Header weitermachen. Darin hatten wir mit dem Website-Editor eine Sidebar mit einer „synchronisierte Vorlage“ erstellt. Die Umsetzung hatte aber einige Probleme, ich ich erst einmal angehen wollte, bevor ich weitere Vorlagen erstelle. Daher werden wir die erste aktuelle Version erst ainmal verbessern.

Die Sidebar als synchronisierte Vorlage

Für das „Index“ Template hatten wir ein zweispaltiges Layout erstellt und die Sidebar in der rechten Spalte platziert. Wenn wir und den Quellcode der Startseite ansehen, dann erhalten wir das folgende:

<!-- wp:column {"width":"300px","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:300px">
<!-- wp:block {"ref":1842} /-->
</div>
<!-- /wp:column --></div>

Die Sidebar ist hier mit einer ID referenziert. Diese Beitrags-ID gehört zur synchronisierten Vorlage und hat als post_type den Wert wp_block. Der post_content des Blocks entspricht den Blöcken, die wir zur Sidebar hinzugeführt hatten:

<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"20px","right":"20px"}}},"backgroundColor":"background-secondary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background-secondary-background-color has-background" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Recent Posts</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Recent Comments</h3>
<!-- /wp:heading -->

<!-- wp:latest-comments {"displayAvatar":false,"displayDate":false,"displayExcerpt":false} /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Categories</h3>
<!-- /wp:heading -->

<!-- wp:categories /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Archives</h3>
<!-- /wp:heading -->

<!-- wp:archives /--></div>
<!-- /wp:group -->

Hier sehen wir auch noch ein anderes Problem an der aktuellen Lösung: alle Headings (Überschriften) sind statisch in die Sidebar geschrieben. Das mag für eine Einzelseite in Ordnung sein, aber da ich einen mehrsprachigen Blog habe und das Theme auch für andere in allen Sprachen nutzbar machen möchte, müssten diese Strings übersetzbar sein. Wie erreichen wir das?

Umwandeln der synchronisierten Vorlage in ein Template bzw. eine Vorlage

Im ersten Schritt nehmen wir den letzten Codeschnipsel und speichern ihn in eine Datei. Wir könnten hierzu eine HTML-Datei verwenden, aber da wir den Inhalt übersetzen möchten, verwenden wir stattdessen eine PHP-Datei. Da die Sidebar nur ein Teil eines Templates, wie etwa dem „Index“ Templates ist, verwenden wir einen anderen Ordner. Am besten eignet sich hierfür das patterns Verzeichnis, was ja auch naheliegend ist, da es sich ja auch schon zuvor um eine Vorlage (Pattern) handelte.

Erstellen der Vorlage

Erstellen wir also zuerst eine Datei mit dem Namen patterns/sidebar.php und kopieren den Quellcode der synchronisierten Vorlage aus dem Website-Editor (gespeichert in der Datenbank) in diese Datei:

<?php
/**
 * Title: Sidebar
 * Slug: kauri/sidebar
 * Inserter: no
 */
?>
<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"20px","right":"20px"}}},"backgroundColor":"background-secondary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background-secondary-background-color has-background" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Recent Posts', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:latest-posts /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Recent Comments', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:latest-comments {"displayAvatar":false,"displayDate":false,"displayExcerpt":false} /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Categories', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:categories /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Archives', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:archives /--></div>
<!-- /wp:group -->

Jede Vorlage bekommt einen Header-Kommentar mit Eigenschaften wie Title, Slug und ähnliches. Da wir diese Vorlage nicht in der Auswahlliste der Vorlagen im Website-Editor benötigen, können wir Inserter: no im Header-Kommentar setzen.

Ihr könnt auch erkenne, dass nun alle Headings in Übersetzungsfunktionen stehen. Nun können wir die neue Vorlage in einem Template verwenden.

Die Vorlage verwenden

Da wir das „Create Block Theme“ verwendet haben, wurde die templates/index.html Datei bereits zuvor überschrieben, als wir alle Änderungen aus dem Website-Editor in die Theme-Dateien gespeichert hatten. Wie im ersten Codeschnipsel gezeigt, sollte dies die folgende Zeile enthalten:

<!-- wp:block {"ref":1842} /-->

Um nun die Vorlage zu verwenden, müssen wir dies mit einer Zeile wie der folgenden ersetzen:

<!-- wp:pattern {"slug":"kauri/sidebar"} /-->

Wir könnten das nun einfach direkt in der templates/index.html Datei tun, aber wir fügen noch einen weiteren Schritt dazwischen ein. Stattdessen erstellen wir zuerst eine Datei mit dem Namen parts/sidebar.html und fügen dort diese einzelne Zeile ein.

Aber wieso machten wir das? Neben Vorlagen gibt es noch eine zweite Art von „wiederverwendbaren Templates“. Diese andere Art sind „Template-Teile“, die als „Bereiche“ in eurem Theme betrachtet werden. Zwei davon haben wir bereits, nämlich „Header“ und „Footer“. Unsere „Sidebar“ ist im Grunde nichts anderes und daher macht es Sinn, diese auch als Template-Teil anzusehen. Daher sollten wir diese auch in der theme.json im Abschnitt templateParty hinzufügen:

{
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "uncategorized",
			"name": "sidebar",
			"title": "Sidebar"
		}
	]
}

Wenn wir jetzt diesen Template-Teil in das index.htm Template einzufügen, seht ihr noch einen weiteren Vorteil. So setzen wir es um:

<!-- wp:template-part {"slug":"sidebar","tagName":"aside"} /-->

Mit dem tagName Attribut, welches nicht für den wp:pattern Block verfügbar ist, können wir die Sidebar mit einem <aside> Tag umschließen, für eine bessere Barrierefreiheit.

Aufräumen

Nachdem wir die Sidebar in eine Vorlage im Theme verschoben haben, können wir nun gefahrlos zu „Design > Website-Editor > Vorlagen“ navigieren und dort die synchronisierte Vorlage (gespeichert in der Datenbank) löschen.

Fazit

Während man eine Theme/Layout baut, kann man das sehr gut und schnell im Website-Editor machen. Sobald man aber fertig ist, sollte man alle Änderungen in den Theme-Dateien speichern. Während dabei die meisten Änderungen durch das „Create Block Theme“ Plugin automatisch gespeichert werden, muss man manche Dinge noch manuell erledigen.

Ihr könnt alle Änderungen im aktuellen Commit des Git-Repositories zu diesem Theme finden. Ich bin positiv optimistisch, dass wir uns nun daran setzen können, am Header des Themes zu arbeiten.

Kau-Boys

Webentwicklung und mehr