Themes

Bludit-Theme fortgeschritten: Templates, Sidebar, Kategorien, Pagination und Gutenberg-CSS

So wird aus dem Minimal-Theme eine wartbare Blogstruktur mit Archivansichten, Sidebar und Gutenberg-Unterstützung.

2 Minuten Lesezeit

Ein einziges index.php reicht für den Einstieg. Für ein wartbares Theme lohnt danach die Aufteilung in Header, Footer, Home, Einzelbeitrag, Sidebar und Hilfsfunktionen. Dieses Tutorial zeigt die Architektur, die auch das mitgelieferte Theme „Bludit Journal“ verwendet.

Empfohlene Struktur

bl-themes/mein-blog/
├── index.php
├── functions.php
├── metadata.json
├── languages/
├── css/style.css
├── js/theme.js
└── php/
    ├── header.php
    ├── home.php
    ├── page.php
    ├── sidebar.php
    └── footer.php

Routing mit $WHERE_AM_I

Bludit setzt $WHERE_AM_I, sodass das Theme unterscheiden kann, ob gerade eine Einzelansicht oder eine Listen-/Archivansicht gerendert wird. Für komplexere Fälle stehen außerdem URL-, Kategorie- und Tag-Objekte zur Verfügung.

<?php
if ($WHERE_AM_I === 'page') {
    include THEME_DIR_PHP.'page.php';
} else {
    include THEME_DIR_PHP.'home.php';
}
?>

Kategorien in der Sidebar

<?php foreach (getCategories() as $category): ?>
  <?php if (count($category->pages()) === 0) continue; ?>
  <a href="<?php echo $category->permalink(); ?>">
    <?php echo $category->name(); ?>
    <span><?php echo count($category->pages()); ?></span>
  </a>
<?php endforeach; ?>

Pagination

Bei längeren Blogs sollte die Startseite nicht alle Beiträge laden. Nutze Bludits Paginator und die konfigurierte Anzahl „Items per page“. Dein Theme braucht Links für vorherige und nächste Seite und sollte den aktuellen Seitenstand ausgeben.

Gutenberg-Inhalte stylen

Gutenberg speichert semantische Blockklassen wie wp-block-image, wp-block-columns, wp-block-button oder Farb-/Typografieklassen. Ein Theme sollte dafür Frontend-CSS besitzen. Verlasse dich nicht nur auf Editor-CSS: der veröffentlichte Inhalt muss unabhängig funktionieren.

Theme-Checkliste vor Veröffentlichung

  • Responsive Navigation
  • Tastatur-Fokus und Skip-Link
  • siteHead, siteBodyBegin, siteBodyEnd
  • pageBegin und pageEnd
  • Startseite mit contentBreak()
  • Einzelbeitrag mit content()
  • Kategorien, Tags, statische Seiten und 404
  • Bilder ohne Layout Shift
  • keine hart codierte Domain, wenn das Theme wiederverwendbar sein soll

Quellen und weiterführende Dokumentation