Das Template für Seiten mit Sidebar wird mit Spalten aufgebaut!

Das heißt, dass anstelle von Paddings oder Margins fünf Spalten benutzt werden, deren Breite im Template über ganze Zahlen definiert wird. Entsprechend dieser Zahlen wird die gesamte Screen-Breite aufgeteilt.
In diesem Template sind die Spalten wie folgt definiert:

• Spalte 1 – linker Abstand zum Screen-Rand = 10
• Spalte 2 – Seiten-Titel und Inhalt = 60
• Spalte 3 – Abstand zur Sidebar = 5
• Spalte 4 – Sidebar (oder Sidebar WD mit Vorlagen-Block) = 20
• Spalte 5 – rechter Abstand zum Screen-Rand = 10

Im Template-Code werden die Zahlen in Prozente gewandelt. Der geneigte Rechner wird feststellen, dass die Addition der o.g. Werte auf 105% kommt, was physikalisch nicht möglich ist. Man könnte also hier auch Spaltenmaße eintragen wie 30-80-15-45-30 – durch das Flex-Modell werden die Relationen anstatt der tatsächlichen Prozentwerte verwendet.

Tatsache ist, dass durch Verwendung von Spalten kein CSS mehr für die Seitenabstände benötigt wird, der Administrator also die Möglichkeit hat, die Laufbreite dieser Seiten über das Backend zu verändern.

Gruppen und Section-Wrapper

Die Breiten-Varianten bei Section-Wrappern und die Constrained-Einstellung bei Gruppen sind hier unnötig bzw. kontraproduktiv! Entweder haben sie keine Auswirkung (wide und fullwidth) haben, weil die Breite des Main-Containers duch die o.g. Spaltenabmessungen definiert wird. Oder die schmaleren Gruppen oder Wrapper zerstören das Layout, wenn die schmale Breite des Themes kleiner als das Spaltenmaß des Hauptinhalts ist!

Die Breiten-Einstellungen sollten daher auch gar nicht erst verwendet werden!!!

HTML-Struktur

In Folge o.g. Aufbaus ergibt sich für das Grundgerüst ein völlig anderer Aufbau, als dieser bei den Seiten-Templates ohne Sidebar Verwendung findet:

• header
• group .site-content
  • Spalten
    • Spalte 1
    • Spalte 2
      • group <main> (weil Spalten keine HTML-Tags zugewiesen werden können!)
    • Spalte 3
    • Spalte 4 .sidebar
      • wp-block-template-part (keine Möglichkeit, diesen zu vermeiden)
        • group(s) <aside> (alle „Widgets“ bekommen den <aside>-Tag!)
          • h3 als „Widget-Titles“ (Widgets als Elemente oder Klassen gibt es nicht mehr!)
          • „Widget“-Inhalt
    • Spalte 5
• footer