WordPress Admin Bar Überlappende Twitter Bootstrap Navigation [geschlossen]

10

Geschlossen. Diese Frage ist nicht zum Thema . Derzeit werden keine Antworten akzeptiert.

Möchten Sie diese Frage verbessern? Aktualisieren Sie die Frage so dass es beim Thema für Wordpress Entwicklung Stapel Börse.

Geschlossen vor 5 Jahren .

Ich habe ein Problem mit der WordPress-Administratorleiste, die die Navigationsleiste von Twitter Bootstrap ( 2.3.0) überlappt . Ich habe dieses Update ausprobiert:

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

aber leider wirft es immer noch ein Problem auf. Ich frage mich, welche Korrekturen verfügbar sind.

css html navigation twitter-bootstrap admin-bar TheWebs
quelle

17

So verhindern Sie, dass sich die WordPress-Administratorleiste mit Ihrer Twitter Bootstrap-Navigationsleiste überschneidet.

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

In get_body_class();zu Ihrem Thema des <body>Tags.

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.

Michael Ecklund
quelle

1

Warum haben Sie das CSS nicht in style.css eingefügt, anstatt es in das HTML einzubetten? Es wäre eine elegantere Lösung. Vielen Dank auch für Ihre Arbeit und die Idee!

Max Ruf

@ MaxRuf Du hast absolut Recht. Eine separate CSS-Datei in der Warteschlange wäre besser. Ich habe nur an die Leute gedacht, die diesen Beitrag gefunden haben, damit sie ihn einfach kopieren / einfügen können. Es ist weniger wahrscheinlich, dass Probleme auftreten.

Michael Ecklund

25

Hat bei mir nicht funktioniert, aber ich habe eine nette Lösung gefunden. Verwenden Sie in Ihrer header.php die WordPress-Funktion, um abzufragen, ob die Symbolleiste angezeigt wird, und erstellen Sie dann ein leeres Div unter dem Navbar-Div:

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">

Filtah
quelle

Großartige Lösung. Ich mag es, dass dies viel einfacher ist als die akzeptierte Antwort und dass es is_admin_bar_showing()nicht nur sucht , wenn der Benutzer angemeldet ist, was gut ist, wenn man bedenkt, dass jemand angemeldet ist, sondern auch die Admin-Leiste deaktiviert. Vielen Dank!

Mark Rummel

3

Ab WordPress 3.8 beträgt die Höhe der Admin-Leiste 32px.

Cowgill

Das ist ein bisschen Hacky, aber ich habe festgestellt, dass dies die beste Lösung ist. Upvoted

plushyObject

Leicht modifizierte Lösung mit ternärer Logik und Inline-Stil:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

1

Dies ist gut, außer auf einem mobilen Gerät beträgt der Offset nicht 32px, sondern 46px. Um dies zu berücksichtigen, habe ich eine CSS-Klasse anstelle eines Stils verwendet. Hier ist die Klasse, die angewendet werden kann:

.fix_wp_overlap {   min-height: 32px; }  @media screen and (max-width: 782px) { .fix_wp_overlap {     top: 46px  !important;   } }

Surfbuds

3

Sie können dies versuchen:

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

Wenn das für Sie funktioniert (was es sollte!), müssen Sie die wp-Admin-Leiste nach unten verschieben, indem Sie den folgenden Code in einen Plugins-Ordner oder in Ihre Datei functions.php stecken:

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

Alternativ können Sie dieses Plugin verwenden

Ich mag es nicht wirklich, Plugins zu verwenden, weil die meisten Themen mein Skript mit falschen Codes laden, die ich nicht brauche ... Lösung 1 und 2 oben funktioniert gut, aber wenn es für Sie nicht funktioniert, können Sie Lösung 3 unten versuchen:

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

Das schien für mich ohne die 28px-Probleme gut zu funktionieren.

Tamara
quelle

2

Es hat bei mir nicht funktioniert, bis ich dies dem Body-Tag hinzugefügt habe:

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

Dann hat es gut funktioniert!

timhc22
quelle

0

Perfekt! Genau das, wonach ich gesucht habe, habe ich in Schritt 3 etwas anderes gemacht. Ich bin mir nicht sicher, ob es wichtig ist, aber mein Code sieht so aus ...

    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;
}
add_action('wp_head', 'mbe_wp_head');

Sie haben das Hinzufügen an verschiedenen Stellen erwähnt, aber ich habe es immer so gemacht und es scheint gut zu funktionieren. Danke für die Fehlerbehebung!

user51355
quelle

1

Und was genau hast du anders gemacht?

Kaiser

0

Fix für Bootstrap 'navbar-fixed-top', um eine Überlappung des Site-Menüs mit dem WordPress-Admin-Menü zu verhindern

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }

user49936
quelle