Seitenleiste im Theme “Twenty Twenty-Two” erstellen

Beitrag für die Erstellung einer Seitenleiste mit WordPress Twenty Twenty-Two

Eine Seitenleiste ist im Theme Twenty Twenty-Two im Standard nicht vorgesehen. Hier erfährst du, wie du eine Seitenvorlage (Template) mit Sidebar ohne weitere Plugins, ohne zusätzliches CSS, PHP und ohne Programmier-Kenntnisse erstellen kannst.

Wenn du neugierig bist, findest du das Ergebnis hier

Header Bild von twintig tweeuntwintig
Hier findest du ein Beispiel für eine Seitenvorlage mit Seitenleiste für das Theme TT2

Vorbemerkungen / Voraussetzungen:

  1. Voraussetzungen ist mindestens die WordPress Version 5.9, die am 25. Januar 2022 das gemeinsam mit dem Theme Twenty Twenty-Two veröffentlicht wird.
  2. Ich zeige hier den Prozess am Standard-Theme des Jahres 2022, diese Beschreibung kannst du für alle Block-Themes übertragen. Denn es ist Bestandteil der Full-Site-Editing Funktionalitäten.
  3. Es gibt unterschiedliche Wege, die zum selben Ziel führen. Eine andere Beschreibung muss daher nicht besser oder schlechter sein, sondern sie ist wohl nur anders. Wenn du ein wenig mit den Full-Site-Editing Funktionalitäten geübt hast, findest du deinen Weg.
  4. Wenn du im Internet nach weiteren Informationen, Tipps und Tricks recherchiert, sind eventuell die englischsprachigen Bergriffe  als Suchworte hilfreich.
    Seitenvorlage = Template
    Seitenleiste = Sidebar
    Logo = Sitelogo
    Beitragsbild = Featured Image
    twintig tweeuntwintig = twenty twenty-two = TT2
    MMXXII = zweitausendundzweiundzwanzig

Aufbau der Seite festlegen

Im ersten Schritt solltest du dir über den gewünschten Aufbau der Seite Klarheit verschaffen. Welche Inhalte sollen jedes Mal erscheinen, ohne, dass du sie neu erstellen musst.

Neben dem Header, dem Footer und dem Seitentitel ist ein typischer Bestandteil eine Seitenleiste

Aber auch 

  • Beitragsbild, 
  • Datum der Veröffentlichung eines Beitrages, 
  • Name des Autors eines Beitrages,
  • Kategorie des Beitrages

könnten zu den Dingen gehören, die du standardmäßig anzeigen willst.

In dieser kleinen Anleitung lernst du, wie du eine Seitenvorlage mit einer Seitenleiste auf der rechten Seite, Header, Body, Seitentitel, Beitragsbild und dem Veröffentlichungsdatum erstellst. Anschließend wirst du in der Lage sein, auch andere Template-Vorlagen zu erstellen. Dieses Designs können sowohl für statische Seiten (Home, Impressum etc.) als auch für Blogartikel genutzt werden.

Es wird kein Plugin verwendet. Du benötigst kein Child-Theme. Außerdem sind keine Kenntnisse in CSS, PHP oder JSON erforderlich.  

Im Vorwege legen wir ein paar Parameter zum Design sowie den Inhalt der Seitenleiste fest.

Das gewählte Grunddesign

Header mit Logo, Titel der Website und Menü/Navigation

Beitragsbild und Beitragstitel: oberhalb der Seitenleiste und des Inhaltes, Hintergrundfarbe: weiß

Beitragsinhalt: Hintergrundfarbe: weiß

Seitenleiste: Hintergrundfarbe hellgrau

Inhalt der Seitenleiste

  • Bild, Text, Überschriften, etc.
  • [/] Shortcodes
  • Eventuell Widgets

Footer: Logo, Titel der Website, Menü zu Datenschutzerklärung und Impressum

Gewählter Aubau der Webseite mit 1000 Pixel Breite

Gewählte Abmessungen

Header und Footer: breite total: 1000 px (Standard-Einstellung im Theme Twenty Twenty-Two)

Seitentitel und Beitragsbild: breite: 1000px

Gruppe, die die Spalten für Inhalt und Seitenleiste beinhaltet: Breite 1000 px


Beitragsinhalt 
Breite: 700 px minus 10 px Padding rechts
Spalteninhalt:
Breite: 276 px minus 10 px Padding links
um den Abstand zwischen Inhalt und Seitenleiste etwas über den Standard-Abstand zu vergrößern.

Mit diesen Einstellungen hast du gleichzeitig kleine Seiten-Ränder zum Display-Rand in der Mobilen Ansicht.

Vom blanken Template zur fertigen Seitenvorlage

Zunächst benötigen wir eine “blanke” Vorlage. In dieses Template werden wir die verschiedenen Teile “einsetzen”.

Das sind die drei Template-Teile 

  • Footer,
  • Header,
  • Seitenleiste.

Und auch die (Gutenberg-) Blöcke für die Darstellung von:

  • Seiteninhalt bzw. Beitragsinhalt
  • Beitragsbild,
  • Seitentitel
  • Autor und Datum der Veröffentlichung,

werden eingefügt.

How To:

Zunächst erstellst oder änderst du einen beliebigen Beitrag.

In der rechten Spalte findest du eine Möglichkeit ein neues Template anzulegen

Im Auswahlmenue des Template "Neu" wählen.

Es öffnet sich ein neues Fenster.

Ein individuelles Template erstellen und den Namen dafür vergeben
Ein individuelles Template erstellen

Bitte einen sprechenden Namen vergeben (z.B. “Custom Template”).

Nach dem Sichern wechselst du automatisch in den Template-Editor.

Auf "Zurück" klicken um in den Template-Editor zu gelangen
Der Template Editor

Über die Zurück-Taste erscheint das Auswahl-Menü des Template-Editors. Hier erscheint unter dem Punkt “Templates” deine neue Vorlage.

Im Template-Editor das erstellte Template auswählen.
Im Template-Editor das neu erstellte Template zum Bearbeiten auswählen

Von jetzt an arbeitest du mit Blöcken. Über die Listenansicht kannst du die Struktur gut sehen.
Ich wähle folgende Struktur für die Seitenvorlage mit Seitenleiste im Theme Twenty Twenty-Two:

Das Bild zeigt die Listenansicht des neuen Templates in Kurzform
Die Gruppe entspricht dem Body einer Website.

In den Gruppen-Block fügst du jetzt die im folgenden Bild dargestellten Blöcke ein.

Der Block “Custom-Seitenleiste” ist zunächst ein Gruppen-Block!

Das Bild zeigt die Listenansicht des neuen Templates ausgeklappt. Du erkennst die Spalten und das neue Template-Seitenteil
Die fertige Template Listenansicht mit dem Template-Teil “Custom Seitenleiste” in der zweiten Spalte.

Die vielen “Gruppen-Blöcke” vor den eigentlichen Teilen (Beitragsbild, Seiteninhalt etc.) sind zum Steuern der Breiten und Rand-Abstände (insbesondere in der mobilen Ansicht) hilfreich. Für das grundsätzliche Prinzip aber nicht erforderlich.

Die Seitenleiste erzeugen

Aus dem Gruppen-Block der zweiten Spalte erstellst du einen Template-Teil.

Umwandlung von einer Block-Gruppe in einen Template Teil
Durch Umwandlung der Gruppe in einen Template-Teil erzeugt man die “Custom Seitenleiste”

Diesen neuen Template-Teil kannst du dann im Site-Editor weiter bearbeiten und auch bei anderen Templates einsetzen.

Mit einem Plugin die Vorlagen ex- und importieren

Mithilfe des Plugin “FSE Design Import/Export für Templates. Template-Teile und Globale Stile” kannst du deine eigenen Entwicklungen aus einer Staging-Seite importieren und in deine Live-Seite exportieren.

Produktbild des Plugin FES Design Import/Export

Das Plugin erklärt sich von selbst.

blank
Import einer Design-Vorlage

Lust auf mehr Neuigkeien zum Theme Twenty Twenty-Two? Hier findest du einen Artikel zu Erstellung eines Child Themes.

Wie kann ich Dir helfen?

blauer anker Individuelle Schulung

Du möchtest eine individuelle, auf deinen Bedarf abgestimmte Online-Schulung? Für dich und dein Team oder als Einzel-Schulung? Wir besprechen den Inhalt, den Zeitpunkt und die Dauer.

blauer anker Projekt Set-Up

Welches Design wünschst du dir? Woher kommt das Logo? Bei der Auswahl der Domain, Auswahl des Hosters, Auswahl des Themes und der richtigen Plugins berate ich dich gerne.

blauer anker SEO für Anfänger:innen

Damit deine Website im Netz gefunden wird, gibt es Tipps und Tricks, um bei Google oben zu ranken. Die ersten Schritte zur Keyword-Findung, Einstellung von ALT-Texten, SEO-Title und Site-Description.

blank
Veröffentlicht am
Kategorisiert in Themes

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.