WordPress ist ein Content-Management-System (CMS), das für fast alle Einsatzzwecke gut geeignet ist, um Homepages rasch und unkompliziert zu erstellen. Auch diese Seite ist damit gestaltet worden. Nahezu jede Homepage-Gestaltung in WordPress beginnt mit der Frage: „Welches Theme sollen wir benutzen?“

Diese Frage ist alles andere als trivial, werden doch unzählige Themes feilgeboten und sind über das WordPress-Backend leicht zu installieren. Wer dies bereits ausprobiert hat, kennt das folgende Erlebnis: Das Theme wurde aktiviert, dann ging es daran, es individuell anzupassen. Sehr schnell war dann der Punkt erreicht, dass eine gewünschte Funktion nicht realisierbar war – bzw. erst dann hätte umgesetzt werden können, wenn die kostenpflichtige Premiumversion des Themes erworben wurde.

Kauf-Themes sind meistens nicht nötig

Ich bin davon überzeugt, dass kaum jemand ein kostenpflichtiges WordPress-Theme benötigt. Das System liefert nämlich kostenfreie Grund-Themes mit, die die wichtigsten Inhaltselemente gleich mitliefern und die sich recht flexibel anpassen lassen. Die Namen dieser Layout-Muster beginnen jeweils mit „Twentytwenty“. Gerade ist „Twentytwentyfive“ aktuell. Warum so viele WordPress-Nutzerinnen und -Nutzer viel Zeit darauf verwenden, andere Themes zu nutzen, mag daran liegen, dass eine beliebige Seite eher karg und „frugal“ aussieht, sobald für sie eines der „Twentytwenty“-Themes aktiviert worden ist.

Was viele anfangs übersehen mögen, ist die Vielfalt von vorformatierten Inhaltselementen, die beispielsweise Twentytwentyfive bereitstellt. Auch dass eine Seite in den Seiteneinstellungen ganz einfach von einem Template auf ein anderes umgestellt werden kann, springt nicht sofort ins Auge. Wer dann noch erkennt, dass sich recht leicht eigene Seitentemplates und Inhaltsblockvorlagen anfertigen lassen, verliert schnell die Scheu vor dem Einsatz von Twentytwentyfive.

Es gibt viele Tutorials, um Twentytwentyfive anzupassen

Tutorials, wie die genannten Blockelemente und Seitentemplates erzeugt werden können, finden sich mit einer einfachen Google-Suche schnell.

• Bevor Ihr mit Umgestaltungen der vorhandenen Themes anfangt, solltet Ihr ein sogenanntes „Child-Theme“ erstellen. Wie das geht, erklärt unter anderem Tobias Steinmann in diesem Text.
• Ursula Baliko zeigt Dir, wie man einen Header-Block samt Navigation erstellt. Eingängig ist der Text – weder visuell noch textlich – nicht, dranbleiben lohnt sich aber, es steht nämlich alles Wichtige drin.
• Dieselbe Autorin erklärt in einem anderen Beitrag, die Geheimnisse hinter Block-Vorlagen und Pattern. Das ist sehr nützlich, damit kann man sich nämlich ein kleines Arsenal an immer wieder benötigten Inhaltselementen anlegen.
• Einen Blick wert ist auch dieser Artikel von Christina Widner zu nützlichen Patterns in WordPress, also den eben bereits genannten, vorgefertigten Inhaltselementen, die einfach eingefügt und gegebenenfalls angepasst werden können.

Ganz schön knifflig: der Sticky-Header

Hier ist nicht der Platz für eine vollständige Link-Liste mit Tutorials zu WordPress-Templates und -Vorlagen. Auf einen Aspekt möchte ich nun aber noch etwas genauer eingehen. Ich hatte mir in den Kopf gesetzt, einen Header-Bereich samt Navigation zu erzeugen, der immer oben auf der Seite präsent bleibt, auch wenn weiter nach unten gescrollt wird. Ich wollte also genau so etwas haben, wie Ihr es mittlerweile auf dieser Seite seht.

Auch dazu findet Ihr mit einer Google-Suche reichlich Hinweise. Viele Tipps gehen den Weg, über „Custom CSS“, das jedem Template hinzugefügt werden kann, dem jeweils passenden Header-Element die CSS-Anweisung „position:sticky“ mitzugeben. Genau dies funktionierte bei mir aber nicht. Mir gelang es nicht, die passenden Inhaltselemente dafür zu identifizieren.

Twentytwentyfive bietet Lösung aus Boardmitteln

Bald wurde mir klar, dass der Weg zur Lösung viel einfacher ist. Denn Twentytwentyfive ist ein sogenanntes blockbasiertes Template. Damit bietet es die Möglichkeit, über die Layoutoptionen der jeweiligen Blöcke festzulegen, dass ein Header-Bereich auf der Seite immer oben gehalten werden muss. Sehr nützlich dafür ist es, die Dokumentenübersicht einzublenden, die Ihr in der Bearbeitungsansicht von Seiten oder Blogbeiträgen, aber auch von Templates und Blöcken im linken oberen Bereich des Bildschirms entdeckt.

Denn dort könnt Ihr, ganz grob gesagt, den Header als „sticky“ markieren. Achtet beim hier eingeblendeten Bild mal auf das Heftzwecken-Symbol. Dieses zeigt an, dass das entsprechende Blockelement immer oben gehalten wird.

Geleitet hat mich beim Erstellen dieses „Sticky Headers“ diese Anleitung von Bernd Schmitt. Sie ist vollständig und korrekt – und hat trotzdem zunächst nicht funktioniert! Eine Kleinigkeit hatte ich nämlich übersehen. Zunächst erläutert der Autor die CSS-Option. Dass ich damit nicht klarkam, wusste ich bereits. Dann handelt er aber kurz und knapp den hier bereits skizzierten Lösungsweg für Block-Themes ab.

Und diese Variante geht so: Die anzuheftenden Elemente werden in der Dokumentenübersicht gruppiert, woraufhin in den Konfigurationsoptionen in der rechten Seitenleiste bei „Position“ die Option „oben gehalten“ ausgewählt wird. Das ist schon alles. In der Tat!

Nur dass dies bei mir nicht alles war! Ich habe dies, wie ich dachte, folgerichtig im von mir zuvor entsprechend der oben verlinkten Tipps in der Blockvorlage für meinen Seiten-Navigationsheader erledigt. Dort konnte ich wunderbar die entsprechenden Gruppen im Header mit „oben gehalten“ markieren. Allerdings blieb der erwünschte Effekt aus.

Blockvorlagen und Templates sind nicht dasselbe – ehrlich!

Es dauerte eine ganze Weile, bis ich meinen wesentlichen Irrtum bemerkte. Es gibt einen Unterschied, ob man derartige Einstellungen in der Blockvorlage vornimmt oder im Seitentemplate. Zwar habe ich dort einst exakt diese Blockvorlage eingefügt, trotzdem besteht ab diesem Moment keine Verbindung mehr zwischen beiden. Denn ein Blick in das Seitentemplate zeigte mir, dass dort die Sticky-Markierungen nicht vorhanden waren.

Daraufhin nahm ich mir den Header-Bereich im Seitentemplate vor, umgab den Header mit einer umfassenden Gruppe und stellte für diese die Option „oben gehalten“ ein. Außerdem wies ich noch eine Hintergrundfarbe zu, damit der Sticky-Header den darunter gescrollten Inhalt verdeckt. Schon funktionierte alles wie gewünscht.

Wenn Ihr bis hierher gekommen seid und Euch nun fragt, wovon ich rede –, dann schaut mal im WordPress-Backend unter „Design – Theme – Customizer“ nach. Dort findet Ihr die Bereiche Vorlage und Templates. Vorlagen sind einzelne Inhaltsblöcke, die einzeln in Seiten oder Beiträge eingesetzt werden können. Sie erscheinen beim Anlegen eines neuen Blocks zur Auswahl, also dort, wo Ihr auch ein Absatz- oder Listenelement auswählen könnt. Templates wiederum sind komplette Seitenvorlagen, in die verschiedene Blockvorlagen eingefügt worden sind. Sie weisen üblicherweise auch Header- und Footer-Elemente auf. Letztgenannte bleiben immer gleich, wenn Ihr eine neue Seite anlegt.