Kau-Boys

Als ich dieses Projekt angefangen habe, war es mein Ziel, das Theme so weit wie möglich nachzubauen und dabei nur den Website-Editor zu verwenden. Mein Endgegner war der Header. Nur mit den Optionen des Website-Editors und der Core-Blöcke war es mir einfach nicht möglich, das generelle Aussehen zu erreichen. Besonders der Suche-Block war einfach zu eingeschränkt in den verfügbaren Optionen.

Hinzufügen einer CSS-Datei

Schon alleine die Hintergrundfarbe (transparent) zu setzen und das Suche-Icon zu gestalten war nicht möglich. Als ich dann noch versucht habe Styles und Effekte für das Suchfeld zu setzen und den Platzhalter-Text zu stylen, kam ich an einem Punkt, an dem es unmöglich wurde, nur die theme.json Datei zu verenden und ich musste mein Ziel aufgeben und nun doch eine CSS-Datei zum Theme hinzufügen.

Ein paar Änderungen später wurde mir dann bewusst, dass ich sehr viele lange und sich wiederholende CSS-Selektoren schreiben musste und habe mich dann dazu entschieden, auch noch SASS zu verwenden.

Nach dieser Niederlage wurde es dann aber sehr viel einfacher. Da ich mich gut damit auskenne CSS zu schreiben, war das Styling des Headers viel einfacher. In den letzten vier Wochen habe ich am Header und dem Rest des Themes gearbeitet und der aktuelle Stand des Themes kommt schon sehr nahe an das originale Theme heran.

Der Header

Wie zuvor erwähnt war der Header der Grund dafür eine CSS-Datei einzufügen. Aber einige Styles waren sogar nur unter Verwendung des Website-Editors möglich. In einem ersten Versuch konnte ich sogar den Home-Link umsetzen, indem ich die "css" Eigenschaft in den "core/home-link" Block-Styles verwendet habe. Um aber alle Styles des originalen Themes nachzubauen, brauchte ich ~100 Zeilen CSS. Aber das Ergebnis sieht sehr gut aus:

Der originale Header

Der neue Header

Könnt ihr die Unterschiede erkennen? Vermutlich würdet ihr ein Tool brauchen, um diese zu visualisieren. Einige Elemente sind um ein paar Pixel verschoben, aber insgesamt sieht es sehr ähnlichen aus. Für das Home-Icon habe ich eine SVG erstellt, bei der die originale (sehr kleine) PNG als Vorlage diente.

Einen Unterschied, den ihr vielleicht entdeckt habt, ist die Verwendung der „nach unten Caret“ nach den Navigationspunkten mit einer Subnavigation. Hierzu gibt es unter „Darstellung > Untermenüs“ im „Navigation“ Block eine Option, um diese zu deaktivieren, aber da ich mein Theme von Anfang an barrierefreier machen möchte, habe ich diese Option aktiviert gelassen.

Erstellung zusätzlicher Templates

Nachdem ich das initiale Design fertig hatte, habe ich mit einigen Templates weitergemacht. Die ersten beiden waren „Einzelne Beiträge“ und „Seiten“.

Das „Einzelne Beiträge“ Template

Ich dachte, dass das schnell gehen sollte. Nur das Datum und die Anzahl der Kommentare (mit einem Anker-Link zum Kommentar-Formular) im „Eintrags-Header“ einfügen, sowie die Kategorien, Schlagwörter und Kommentare zum „Eintrags-Footer“ hinzufügen. Ich lag so falsch. 🙈

Bei der Entwicklung eines Themes verwende ich in der Regel die „Theme Unit Test“ XML-Import-Datei. Diese erstellt viele Inhalte und Menüs, um euer Design zu testen. Um die verschiedenen HTML Tags und deren Styles im neuen Theme zu testen, habe ich den Beitrag „Template: Comments“ verwendet. Das war dann der Punkt, an dem viel CSS im Theme gelandet ist. Elmastudio hat sich sehr viel Mühe gegeben, die verschiedenen Elemente, die man im Inhalt haben kann, schön zu gestalten, wie etwa Listen, Zitate, Tabelle, usw. Und sie haben diese auch (anders) für Kommentare gestaltet, um der geringen verfügbaren Breite im Kommentar-Inhalt Rechnung zu tragen. Da man aber nur recht wenige dieser nativen Elemente in der theme.json Datei gestalten kann, musste ich mehr CSS schreiben. Am Ende sind ~160 Zeilen für diese Elemente im Inhalt und nochmal ~100 Zeilen für Anpassungen im Kommentar-Inhalt zusammengekommen. Ich realisiere jetzt, wie viel Arbeit es macht und viel Gedanken man sich machen muss, um ein Theme mit tollen Styles zu erstellen und ich habe nun noch mehr Respekt davor, was Ellen und Manuel in all ihren Themes gemacht haben.

Einführung einer neuen Template-Vorlage: comments

Da das die Kommentare-Liste und das Kommentare-Formular sowohl in Beiträgen, als auch in Seiten verwendet wird, habe ich daraus eine neue Vorlage gemacht. Dieser „template part“ enthält die Blöcke „Kommentar-Template“, „Seitennummerierung der Kommentare“ und „Formular für Kommentare“.

Für das Kommentare-Formular musste ich nochmal ~75 Zeilen CSS schreiben (selbst mit SASS) und mir wurde einmal mehr bewusst, wie frustrierend es ist, Styles für Formulare zu schreiben:

Aber hey, am Ende waren es dann doch „nur“ ~75 Zeilen und ich konnte dabei auch noch ein wenig CSS Grid üben.

Beitrags-Navigations-Link

Zwei andere Blöcke, bei denen ich mit der aktuellen Implementierung nicht ganz glücklich bin, sind „Vorheriger Beitrag“ und „Nächster Beitrag“. Sie bieten zwar einen Stil-Variante „Pfeil“ an, aber hier werden die Pfeile vor/nach dem Link eingefügt und können nicht angeklickt werden. Da ich aber ein „Button-Design“ haben wollte, musste ich den „Pseudo-Content-Trick“ verwenden, um den klickbaren Bereich auf den gesamten „Button“ zu vergrößern. Auch das Hinzufügen einer Hintergrundfarbe für den Button war nicht so einfach, da das Wrapper DIV auch dann sichtbar war, wenn sich darin kein Link befand. Insgesamt brauchen diese Blöcke also noch ein paar Verbesserungen in zukünftigen Versionen des Block-Editors.

Das „Seiten“ Template

Nachdem ich das Template für Beiträge fertig hatte, war die Erstellung des Templates für Seiten ziemlich einfach. Ich musste lediglich das Datum und den Kommentar-Link aus dem „Eintrag-Header“ entfernen, sowie die Kategorien und Schlagwörter aus dem „Einträge-Footer“. Der Rest des Templates blieb gleich. Und da wir ja ein „comments“ Template-Vorlage erstellt haben, wird dieser Teil auch viel einfacher, wenn wir mal etwas an der Gestaltung dieses Bereichs ändern wollen.

Der Footer

Nach der Fertigstellung des „Eintrag-Inhalts“ für Beiträge und Seiten, habe ich auch Footer fertiggestellt. Da es fast ausschließlich statischer Inhalt ist, war das schnell getan. Nur beim Speichern der Änderungen ins Theme über das Create Block Theme Plugin gab es einige Probleme.

Statischer Text wird in Übersetzungsfunktionen eingebettet, was toll ist! Leider wurden diese Übersetzungen nicht escaped. Und auch die Jahreszahl war dann fest kodiert. Selbst wenn man das manuell ändern, die Übersetzungen escaped, und die Jahreszahl dynamisch macht, wird er bei jeder Änderung am Footer wieder überschrieben.

Dynamischer Footer mit sicherer Ausgabe

Hier ist ein Teil des Footers, wie er in meiner verbesserten und dynamischen Version aussieht:

<p>&copy; <?php echo date( 'Y' ); ?>&nbsp;</p>

<!-- ... -->

<p><?php echo wp_kses_post( __( 'Proudly powered by <a href="https://wordpress.org/">WordPress</a>', 'kauri' ) ); ?></p>

<!-- ... -->

<p class="has-text-align-center">
	<?php echo wp_kses_post( __( 'Theme: Kauri by <a href="https://kau-boys.com">Bernhard Kau</a>, based on Waipoua by <a href="https://www.elmastudio.de/en/">Elmastudio</a>', 'kauri' ) ); ?>
</p>

<!-- ... -->

<p class="has-grey-color has-text-color has-link-color">
	<a href="#top"><?php echo esc_html__( 'Top', 'kauri' ); ?> ↑</a>
</p>

Das ist der Code, den das Create Block Theme Plugin erstellt bzw. bei Änderungen überschreibt.

<p><?php echo __('© 2024&nbsp;', 'kauri');?></p>

<!-- ... -->

<p><?php echo __('Proudly powered by <a href="https://wordpress.org/">WordPress</a>', 'kauri');?></p>

<!-- ... -->

<p class="has-text-align-center">
			Theme: Kauri by <a href="https://kau-boys.com">Bernhard Kau</a>, based on Waipoua by <a href="https://www.elmastudio.de/en/">Elmastudio</a>		</p>

<!-- ... -->

<p class="has-grey-color has-text-color has-link-color">
	<a href="#top">Top ↑</a>
</p>

Wie ihr sehen könnt, fehlt das Escaping komplett. Weiterhin sind die letzten beiden Absätze nicht mehr übersetzbar. Ich hatte leider nicht die Zeit, mir mal den Code genauer anzusehen, der diese Zeilen erzeugt und zu prüfen, ob es dafür eine Lösung gibt. In der Zwischenzeit muss ich also jedes Mal diese Änderungen rückgängig machen, wenn ich etwas am Footer-Template anpasse.

Fazit

Ein Theme zu erstellen ist verdammt viel Arbeit! Auch wenn man „nur“ ein klassisches Theme als Block-Theme nachprogrammiert, braucht das sehr viel Zeit, denn man muss auf so viele Dinge achten. Und ich habe das Theme noch nicht einmal ausgiebig mobil getestet – der erste Eindruck ist aber gut.

Es gibt noch immer viel zu tun, aber ich hoffe, dass ich den Wechsel in zwei Wochen einhalten kann. Selbst wenn das Theme dann noch nicht perfekt ist.

Falls ihr die anderen Änderungen sehen wollt, auf die ich in diesem Update nicht eingehen konnte, oder wenn ihr weiterhin die Implementierung nachverfolgen wollt, dann seht euch einfach die Commits im GitHub-Repository an. Ich bin sehr zufrieden mit dem aktuellen Stand der Implementierung und kann es nicht erwarten, das Theme endlich fertigzustellen. 🙌

Der Header war immer der Teil des Themes, bei dem ich mir nicht sicher war, ob ich ihn genau so nachbauen könnte. Aber mit jeder neuen Core- oder Gutenberg-Version kamen mehr Optionen hinzu, um das gewünschte Layout umzusetzen. I denke zwar, dass ich noch etwas CSS dazu schreiben muss, um einige Dinge anzupassen, aber schauen wir uns mal an, wie weit ich schon gekommen bin.

Der Original-Header

Bevor ich euch mein erstes Ergebnis zeige, dass ich nur mit dem Website-Editor und den darin vorhanden Einstellungen erreichen konnte, schauen wir uns erst noch einmal den Original-Header an:

Der eigentliche „Header“ im Waipoua Theme ist nur die Zeile mit dem roten Hintergrund. Website-Titel, Website-Untertitel und die „Header Widget Area“ befinden sich im „Wrapper“ für den Inhalt. Ich habe aber für das neue Theme entschieden, den gesamten hier gezeigten Bereich als Header festzulegen.

Der neue Header

Schauen wir uns ohne weiter Umschweife also nun an, wie weit ich gekommen bin, den Header nur mit dem Website-Editor nachzubauen. Da ist das erste Ergebnis:

Man kann schon auf Anhieb einige klare Unterschiede erkennen. Es beginnt schon mit dem „Home-Link“ Block als erstem Element der Navigation. Hier gibt es keine Option, ein Icon anzuzeigen. Ich werde das vermutlich mit etwas CSS lösen, indem ich ein Hintergrundbild verwenden und den „Home“ Text „visuell verstecke“.

Der andere klare Unterschied ist das Suchfeld. Im Waipoua Theme Header hat es einen transparenten Hintergrund. Das Icon ist nur ein Hintergrundbild, die Suche hat also keinen „Button“. Wenn das Feld fokussiert wird, dann wird es ein wenig breiter, der Hintergrund wird weiß und Icon und Platzhaltertext grau. Das ist ein netter Effekt und der „Suche“ Block hat sogar eine ähnliche Option, aber da er rechts ausgerichtet ist, hatte es den Effekt, dass das Feld „nach links springt und sich dann nach rechts vergrößert“. Das was nicht wirklich schön und auch nicht barrierefrei. Daher habe ich mich dagegen entschieden. Ich werde aber dennoch wie zuvor beschrieben die Hintergrundfarbe ändern, nur leider gibt es dafür keine Einstellungen. Lediglich die Hintergrund- und Icon-Farbe für den Button kann man einstellen. Es war mir auch nicht möglich, die Höhe des Suchfeldes zu ändern.

Wenn wir uns die „zweite Header-Zeile“ ansehen, dann sehen wir einen Unterschied im Website-Titel, der unterstrichen und kleiner ist. Das ist auch etwas, das ich im Website-Editor nicht einstellen konnte, da alle Einstellungen wohl über Core-Styles überschrieben wurden, da diese spezifischer waren.

Die Icons hingegen sehen fast gleich aus. Sie sind 1px kleiner (die „normale“ Größe im Core ist etwas kleiner), aber dafür sind die Icons besser zentriert als im Original-Theme und es werden auch die aktuellen Icons verwendet (z.B. bei YouTube oder Instagram). Leider gibt es aber kein „Kommentare RSS“ Icon. Ich muss mal schauen, wie ich das dann in meinem Blog löse. Aber verwendet überhaupt noch jemand diesen RSS-Feed? 🤔

Die Struktur des Headers

Nachdem wir nun das Ergebnis im Frontend gesehen habe, können wir uns mal ansehen, wie die Struktur im Website-Editor aussieht und welche Blöcke ich verwendet habe:

Die meisten Dinge sind keine Überraschung. Aber einige Details sind vielleicht neu für euch. Wusstest ihr zum Beispiel, dass ihr im Navigation Block nicht nur Links, sondern auch Blocke wie „Home-Links“, „Suche“ oder viele andere Blöcke verwenden könnt? Das ist wirklich toll und hat den Vorteil, dass diese Blöcke dann auf kleineren Bildschirmen ebenfalls im „Hamburg-Menü“ verschwinden.

Die zweite „Header-Zeile“ ist größtenteils relative einfach gestaltet. Um Website-Titel und Website-Untertitel unten auszurichten – etwas, zu dem ich zuvor keine einfache Lösung finden konnte – habe ich einfach die Option „Vertikale Ausrichtung ändern“ im Spalten-Block verwenden können.

Der interessantere Teil ist aber vermutliche die Zeile mit den Social-Media-Links. Wie zuvor erwähnt gibt es hierzu in Waipoua die „Header Widget Area“, die ich dann zu einem weiteren Template gemacht habe, wie wir es schon für die Sidebar getan haben.

Fazit: eine Menge an Einstellungen

Es ist schwer, jeden einzelnen Schritt bei der Umsetzung des Headers zu beschreiben. Es waren einfach zu viele Einstellungen notwendig, um zu diesem Ergebnis zu kommen. Ihr könnt alle Änderungen im aktuellen Commit des Git-Repositories zu diesem Theme finden. Ich war sehr überrascht, dass alle Einstellungen nur in den Templates gespeichert wurden. Ich habe lediglich noch einen neuen templateParts Eintrag in der theme.json angelegt, damit man „Header Widget Area“ in der „Listenansicht“ lesen kann und nicht den Slug, wie im Screenshot zu sehen.

Mein nächster Schritt wird die Behebung der vielen kleinen Unterschiede im Header sein, die ich nicht mit dem Website-Editor alleine umsetzen konnte. Mal sehen, wie weit ich komme und wie gut es mir gelingt, das im nächsten Blogbeitrag zu erklären. Da ich gerade meine Reise zum WCEU gestartet habe und noch einige Zugfahrten vor mir haben, gibt es den nächsten Beitrag vielleicht schon nächste Woche.

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.

Nachdem wir nun Schriftarten und Farben haben können wir damit anfangen ein wenig Struktur in das Theme zu bringen. Einer Seite eine klare Struktur zu geben ist wichtig, um sie später responsive zu bekommen.

Waipoua Strukture

Das Waipou Theme hat in etwa die folgende Struktur:

• Header (roter Hintergrund)
  • Home Icon
  • Navigation
  • Suche
• Wrapper
  • Zweiter Header
    • Website-Titel
    • Website-Untertitel
    • Alternative: Website-Icon, hinzugefügt durch die Theme-Optionen
    • Social-Media-Icons
  • Inhalt
  • Sidebar (hellgrauer Hintergrund)
  • Footer

Die Hauptidee des „Wrapper“ ist es, etwas Padding links und rechts zu bekommen, wenn das Display kleiner wird. Der rote Header wird aber einem bestimmten Breakpoint zu einem einzelnen Hamburg-Menu-Icon, das vertikal nach unter öffnet und die Navigation sowie die Suche enthält (das Home-Icon fehlt in diesem Menü).

Leeres Theme Strukture

Schauen wir uns im Vergleich die Struktur des „leeren Themes“ an. Das erhaltet ihr bei der Verwendung der „Leeres Theme“ Vorlage aus dem (vereinfacht):

• Header
  • Website-Icon
  • Website-Titel
  • Website-Untertitel
  • Navigation
• Inhalt
• Footer

Wenn wir das mit dem Waipoua Theme vergleichen, sieht das schon sehr viel einfacher aus. Aber etwas Wichtiges fehlt: die Sidebar.

Eine Sidebar hinzufügen

Sidebars findet man heutzutage nicht mehr so häufig auf Websites. Aber bei einem Blog-Theme machen sie meiner Meinung nach noch immer Sinn. Und da ich ja ein Theme nachbauen möchte, das eine Sidebar hat, füge ich auch eine hinzu. Nun, das Theme hat sogar eine Theme-Option für eine zweite Sidebar. In der zweiten, die zwischen Inhalt und Sidebar sitzen, können Sticky Posts angezeigt werden:

Ich konnte aber keine Möglichkeit finden, eine Auswahl anzubieten, mit der man dies für alle Seiten auswählen könnte. Daher habe ich mich entschieden, erst einmal nur mit einer einzelnen Sidebar für die erste Version des Themes zu verwenden.

Aber wie bekommen wir überhaupt eine Sidebar? Wir brauchen ein Element, das wir in mehreren Templates verwenden können und das immer den gleichen Inhalt hat. Die Antwort ist also: eine „synchronisierte Vorlage“. Die könnt ihr erstellen unter „Design > Website-Editor > Vorlagen“. Dort klickt ihr dann auf das Plus-Icon neben „Vorlagen“ und wählt „Vorlage erstellen“. Im Fenster wählt ihr dann als Name etwas wie „Sidebar“ und stellt sicher, dass die „Synchronisiert“ Einstellung aktiv ist. Nach einem Klick auf „Erstellen“ könnt ihr die Sidebar mit Inhalten befüllen. Im folgenden Beispiel habe ich die „Widgets“ aus dem klassischen Theme verwendet:

Für die Widget-Titel habe ich Überschriften-Blöcke verwendet. In manchen Blöcken müssen ein paar Einstellungen verändert werden. Im Suchen-Block habe ich den Button in das Feld verschoben und das Lupen-Icon eingestellt. Im Block für die letzten Kommentare habe ich alle Einstellungen deaktiviert, damit nur Name und Beitragstitel zu sehen sind.

Eine Sache, die ich beim ersten Versuch vergessen hatte: das Setzen einer Hintergrundfarbe und Paddings. Wir gruppieren also alle Blöcke in der Sidebar, setzen die Hintergrundfarbe auf „Background Secondary“ und unter „Größe > Innenabstand“ jeweils „20px“ vertikal und horizontal.

Platzieren der Sidebar auf der Seite

Nachdem wir nun die Sidebar haben, müssen wir sie noch in jedem Template einfügen. Fangen wir mit der Startseite an. Wir navigieren zu „Design > Website-Editor > Templates“ und wählen dort „Index“ aus, das einzige Template, das wir aktuell haben. Wie schon zuvor erwähnt, ist das Template eher simpel. Es verwendet lediglich einen „Abfrage-Loop“ Block im Inhalt. Das wird unsere „linke Spalte“. Richtig, wir verwenden einen Spalten-Block, um unser „Inhalt | Sidebar“ Layout zu bekommen. Die linke Spalte enthält dabei den Abfrage-Loop und die recht die Sidebar-Vorlage. So sieht das Egebnis aus:

Ich versuche mal zu erklären, was ich hier gemacht habe. Zuerst einmal habe ich den „Abfrage-Loop“ in die linke Spalte gepackt und die „Sidebar“ in die rechte. Der „Spalten“ Block hat in der „Größe > Innenabstand“ Einstellung einen horizontalen Abstand von „50px“. Die rechte Spalte hat unter „Einstellungen > Breite“ eine Breite von „300px“ eingestellt, da sie Sidebar eine feste Breite hat. Die linke Spalte hat in diesem Feld einen leeren Wert. Das erlaubt ihr, die restliche Breite einzunehmen. Somit erhalten wir also eine responsive linke Spalte und eine rechte mit einer festen Breite.

Die Gruppe um die Spalten ist notwendig, um eine Breite für den gesamten Inhalt zu setzen. Diese Breite setzen wir aber nicht in diesem Gruppen-Block im „Index“ Template, sondern wir stellen es unter „Stile > Layout > Größe“ (das schwarz/weiße Icon oben rechts) ein. Hier setzen wir „Inhalt“ fest auf „1100px“.

Das Ergebnis

OK, nachdem wir all diese Schritte abgeschlossen haben, erhalten wir das folgende Ergebnis, wenn wir die Startseite unseres neuen Themes besuchen:

Schön! Nicht wahr? OK, das Ergebnis sieht noch nicht nach dem aus, was wir am Ende haben wollen. Die Blöcke in der Sidebar sehen noch nicht wirklich gut aus. Aber für heute können wir zufrieden damit sein, dass wir es geschafft haben, ein Layout mit dem Inhalt und der Sidebar nebeneinander zu bekommen.

Fazit

Als ich zum ersten Mal versucht habe dieses Layout umzusetzen, habe ich mich damit recht schwergetan. Ich konnte keinen Weg finden, die „50px“ zwischen die beiden Spalten zu bekommen. Ich hatte zuerst noch eine mittlere Spalte mit „2px“ Breite, die sich dann zusammen mit dem Standardabstand von „24x“ zu „50px“ aufaddierten. Mit der neuen Version von WordPress können wir aber direkt einen Abstand von „50px“ einstellen. Das Twenty Twenty-Four Theme verwendet noch immer eine solche Spalte. Es hat sogar noch Spalten links und rechts, für etwas Padding. Zum Glück müssen wir das nicht mehr machen.

In der nächsten Woche werde ich wohl mit dem Styling des Headers weiter machen. Auch hier werden wir einen „Widget-Bereich“ brauchen, in dem die Social-Media-Icons platziert werden. Wir werden auch versuchen, die Elements auszurichten. Da könnte aber schwierig werden, denn bisher habe ich es noch nicht geschafft herauszufinden, wie ich Elemente unten ausrichten kann.