Als Antwort auf: WordPress-Admin-Leiste überlappende Twitter-Bootstrap-Navigation
Gefragt von: @TheWebs
Wenn Sie Twitter Bootstrap mit WordPress verwenden und ein Problem mit der WordPress-Administrationsleiste haben, die sich mit Ihrer Navigationsleiste überschneidet, sind Sie wahrscheinlich ziemlich frustriert über einige dieser Antworten. Ich habe überall nach Lösungen gesucht, bevor ich mich letztendlich entschied, einfach in einen niedrigeren Gang zu schalten und eine Lösung zu finden, die genau das tut, was ich brauche.
Hier ist eine Antwort, die die WordPress-Admin-Leiste nicht verbirgt oder die WordPress-Admin-Leiste nicht an den unteren Rand Ihrer Seiten verschiebt. Diese Antwort hält die WordPress-Admin-Leiste genau dort, wo sie hingehört ... Oben auf Ihren Seiten.
Bitte beachten Sie, dass dies einige kurze Schritte dauern wird, aber es lohnt sich. Es ist nicht wirklich ein komplizierter oder zeitaufwändiger Prozess. Ich wollte nur sicherstellen, dass die Erklärung dazu klar und leicht zu verstehen ist.
Schritt 1
Themen haben ein Vorlagen-Tag für das Body-Tag, mit dem Autoren von Themen effektiver mit CSS gestalten können. Das Vorlagen-Tag wird aufgerufen
body_class. Diese Funktion gibt dem Body-Element verschiedene Klassen und kann normalerweise im header.phpHTML-Body-Tag des HTML-Tags hinzugefügt werden .
- Öffnen Sie Ihr derzeit aktives WordPress-Theme über das Twitter Bootstrap-Verzeichnis. Finde
header.phpund öffne es.
- Finden
<body> .
- Ersetzen mit
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
Nachdem Sie die drei oben genannten Schritte ausgeführt haben, haben Sie Ihr WordPress-Theme nun erfolgreich mit WordPress-Body-Klassen aktiviert.
Schritt 2 (OPTIONAL!)
- Fügen Sie dem
<body>Tag benutzerdefinierte bedingte CSS-Klassen hinzu .
Standardmäßig stellt WordPress dem HTML-Tag bereits eine Liste der Standardklassen zur Verfügung, wenn Sie die Funktionen body_class()oder get_body_class()verwenden.
Wenn Sie den Quellcode einer gerenderten Front-End-Seite auf Ihrer WordPress-Website anzeigen, werden Sie feststellen, dass zwei der CSS-Klassen, die automatisch zum HTML- <body>Tag hinzugefügt werden, "angemeldet" und "Admin-Leiste" sind.
Sie werden auch feststellen, dass diese CSS-Klassennamen nur dann zum HTML- <body>Tag hinzugefügt werden, wenn der Benutzer angemeldet ist. Andernfalls werden sie nicht zum HTML- <body>Tag hinzugefügt .
Wenn Sie also nicht die Standardnamen der WordPress-CSS-Klasse verwenden möchten, können Sie ganz einfach Ihre eigenen hinzufügen.
- Öffnen Sie Ihr derzeit aktives WordPress-Theme über das Twitter Bootstrap-Verzeichnis. Finde
functions.phpund öffne es.
- In
add_filter('body_class', 'mbe_body_class'); Zum Anfang der Datei.
- Fügen Sie den folgenden Code am Ende der Datei hinzu.
Der Code:
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = 'body-logged-in';
} else{
$classes[] = 'body-logged-out';
}
return $classes;
}
Wenn Sie nun den Quellcode einer gerenderten Front-End-Seite auf Ihrer WordPress-Website anzeigen und der Benutzer angemeldet ist, wird dem HTML- <body>Tag "Körper angemeldet" hinzugefügt , und wenn der Benutzer angemeldet ist Abgemeldet sehen Sie, dass dem HTML- <body>Tag "Körper abgemeldet" hinzugefügt wurde .
Schritt 3
- Fügen Sie den CSS-Code zu Ihrem Thema hinzu.
Dies ist der Codeabschnitt, der Ihr Thema korrigiert, um sowohl die WordPress-Admin-Leiste als auch Ihre Twitter-Bootstrap-Navigation ordnungsgemäß anzuzeigen, unabhängig davon, ob der Benutzer an Ihrer Website angemeldet oder von dieser abgemeldet ist.
- Öffnen Sie Ihr derzeit aktives WordPress-Theme über das Twitter Bootstrap-Verzeichnis. Finde
functions.phpund öffne es.
- In
add_action('wp_head', 'mbe_wp_head'); Zum Anfang der Datei.
- Fügen Sie den folgenden Code am Ende der Datei hinzu.
Der Code:
function mbe_wp_head(){
echo '<style>'.PHP_EOL;
echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
// Using custom CSS class name.
echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
// Using WordPress default CSS class name.
echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
echo '</style>'.PHP_EOL;
}
Zum Code bearbeiten
add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
echo '<style>'
.PHP_EOL
.'body{ padding-top: 70px !important; }'
.PHP_EOL
.'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
.PHP_EOL
.'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
.PHP_EOL
.'@media only screen and (min-width: 783px) {'
.PHP_EOL
.'body{ padding-top: 70px !important; }'
.PHP_EOL
.'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
.PHP_EOL
.'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
.PHP_EOL
.'}</style>'
.PHP_EOL;
}
Diese Version der Funktion mbe_wp_head enthält eine Mobile-First-Media-Abfrage, um sicherzustellen, dass Ihr Header in der richtigen Entfernung nach unten verschoben wird. Für Handys ist die WP-Admin-Leiste 48 Pixel groß. Nach dem Haltepunkt von 783 Pixel wird die Admin-Leiste auf nur 28 Pixel verkürzt.
Hier hast du es. Wenn der Benutzer angemeldet ist, sollte sich jetzt die WordPress-Admin-Leiste ganz oben auf Ihrer Seite befinden, unmittelbar gefolgt von Ihrer Twitter Bootstrapped-Navigation. Wenn der Benutzer von Ihrer WordPress-Website abgemeldet ist, sollte Ihre Twitter-Bootstrap-Navigation weiterhin entsprechend oben auf Ihrer Website angezeigt werden.