WordPress Toolbar und vollflächiger Hintergrund

Die WordPress Toolbar ist Segen und Fluch zugleich. Einerseits stellt sie wichtige Funktionen im Frontend zur Verfügung, andererseits bringt sie einigen Ballast mit sich. Zu eben erwähntem Ballast zähle ich die Inline-Styles über die sie sich ihren Raum auf der Seite freihält. Dieser Raum wird über einen margin-top freigehalten, der mir jedoch dann in die Quere kommt, wenn ich einen vollflächigen Hintergrund einsetzen möchte.

Um sowohl die WordPress Toolbar nutzen zu können und mein Layout konsistent zu halten, gehe ich folgendermaßen vor:

Zunächst füge ich in der header.php meines Themes eine ifelse-Kontrollstruktur hinzu. Dafür setze ich zuerst eine Variable mit der ich später dem html-Element eine entsprechende Klasse zuweise. Daraufhin kontrolliere ich ob die WordPress Toolbar angezeigt wird, und weise der Variable einen entsprechenden Wert zu.

<?php
  $wpadminbarClass = '';

  if ( is_admin_bar_showing() ) {
    $wpadminbarClass .= 'wpadminbar';
  } else {
    $wpadminbarClass .= '';
  }
?>

<html dir="ltr" <?php language_attributes(); ?> class="no-js <?php echo $wpadminbarClass; ?>">

Mit dieser Klasse am html-Element habe ich ein Hilfsmittel zur Hand, um die Inline-Styles zu überschreiben. Dazu füge ich dem Stylesheet meines Themes die entsprechenden Zeilen der Inline-Styles hinzu und ersetze die vorgesehenen margin-top durch padding-top.

html.wpadminbar {
  margin-top: 0 !important;
  padding-top: 32px !important;
}

* html.wpadminbar body {
  margin-top: 32px !important;
  padding-top: 0 !important;
}

@media screen and ( max-width: 782px ) {
	html.wpadminbar {
    margin-top: 0 !important;
    padding-top: 46px !important;
  }

	* html.wpadminbar body {
    margin-top: 0 !important;
    padding-top: 46px !important;
  }
}

Welche Möglichkeiten nutzt ihr um sowohl die WordPress Toolbar zu nutzen und Eure Layouts konsistent zu halten?

Spricht Eurer Meinung nach etwas dagegen in den Inline-Styles direkt padding-top statt margin-top zu verwenden?

Veröffentlicht am 10.01.2018 von Daniel in Netzgestaltung, WordPress.

3 Reaktionen

  1. Dem Body Tag wird doch automatisch die Class Admin-bar hinzugefügt? Oder? Kann’s du das nicht nutzen, muss es im html Tag sein?

    antworten

    • Danke für den Hinweis Felix. Ich hatte body_class(); nicht verwendet, und daher die Klasse nicht gesehen. Ich habe eben Deinen Vorschlag getestet, da ich aber zusätzlich den Footer bei wenig Inhalt mit Flexbox an den unteren Rand des Browsers binden möchte, benötige ich auch auf dem html-Element eine Klasse.

      antworten

Reagiere darauf

*