WordPress: CSS-Klassen im Body-Tag

Heute erneut ein Artikel, der sich mit WordPress beschäftigt. Um genauer zu sein mit der WordPress Funktion body_class(), PHP und auch CSS. Ich bin kein Spezialist für WordPress und vieles, was die Technik des CMS betrifft ist mir unklar. Ich lerne meistens durch das Lösen entstandener Probleme. So auch in diesem Fall.

Aktuelles Problem war warum wird der Inhalt meiner selbst gebastelten Fehlerseite nicht zentriert dargestellt, obwohl ich den Code des entsprechenden Theme Templates kopiert habe. Ich habe lange gebraucht bis ich auf die Funktion body_class() gestoßen bin.

Die Funktion body_class() wird in den Body-Tag eingebaut und sorgt dafür, dass WordPress vollautomatisch eigene Klassen dem Body-Tag hinzufügt. Jede Seite (ob Beitrag, Anhang, Seite oder sonstwas ist irrelevant) erhält eine individuelle Klassen-Sammlung.

Pixelbar

Eigentlich ist es relativ einfach. Das Body-Tag ist in fast allen Themes in der Datei header.php zu finden. Die passende Code-Zeile sieht meistens so aus.

<body <?php body_class(); ?>>

Die WordPress Funktion macht beim Theme „Mercia“ für das zentrierte Seitenlayout folgendes:

<body class="page-template page-template-template-centered page-template-template-centered-php page page-id-312 logged-in author-hidden">

Im Weiteren findet man die CSS-Klasse .page-template-template-centered im Stylesheet des Themes. Sie ist mitverantwortlich für die einspaltige zentrierte Darstellung des Inhalts.

@media only screen and (min-width: 57.5em) {
  /* No Sidebar & Centered Layout Template */
  .no-sidebar .site-content, .page-template-template-centered .site-content {
    display: block;
  }
    
  .no-sidebar .site-content .content-area, .page-template-template-centered .site-content .content-area {
    margin: 0 auto;
    padding: 0;
    max-width: 840px;
    width: 100%;
  }
}

Dumm nur dass die Fehlerseite 404.php über die WordPress-Funktion ganz andere Klassen zugewiesen bekommt. Das kann dann mit der einspaltigen, zentrierten Darstellung der Fehlerseite nicht funktionieren.

Ich weiß nicht, ob es auch einen besseren Weg gibt. Ich habe mit Hilfe einiger Codezeilen die Body-Klasse der Fehlerseite um die passenden Klassen erweitert. Seither ist meine Fehlerseite einspaltig.

weiterführende Links