Bara de administrare WordPress se suprapune cu navigarea Twitter Bootstrap

Question

Bara de administrare WordPress se suprapune cu navigarea Twitter Bootstrap

21 feb. 2013, 01:32:48

Vizualizări: 33.7K

Voturi: 11

Am o problemă cu bara de administrare WordPress care se suprapune peste bara de navigare Twitter Bootstrap (2.3.0). Am încercat această soluție:

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;
}

dar din păcate încă persistă problema. Mă întreb ce alte soluții sunt disponibile?

TheWebs

1.1K

css html navigare twitter bootstrap admin bar

Toate răspunsurile la întrebare

Nu a funcționat pentru mine, dar am găsit o soluție bună. În fișierul tău header.php folosește funcția WordPress pentru a verifica dacă bara de instrumente este afișată, apoi creează un div gol sub div-ul navbar:

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

Filtah

261

6 mar. 2013 17:30:52

Comentarii

Soluție excelentă. Îmi place că este mult mai simplă decât răspunsul acceptat și că verifică is_admin_bar_showing(), nu doar dacă utilizatorul este autentificat, ceea ce este bine având în vedere că cineva poate fi autentificat, dar a dezactivat bara de administrare. Mulțumesc!

Mark Rummel

15 mai 2014 21:49:51

Începând cu WordPress 3.8, înălțimea barei de administrare este de 32px.

cowgill

31 oct. 2014 11:41:47

Aceasta este o soluție puțin cam "hacky", dar am constatat că este cea mai bună variantă. Am dat vot pozitiv.

plushyObject

17 nov. 2015 22:12:34

Soluție ușor modificată folosind logică ternară și un stil inline: <nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

28 iul. 2016 03:28:03

Am preferat această soluție în comparație cu răspunsul acceptat. Am implementat o logică similară care suportă înălțimea pe dispozitive mobile folosind media query: http://pastebin.com/dWxm00Hu stilul este într-un tag inline, dar poți muta acest cod în fișierul style.css al temei tale.

GabLeRoux

29 dec. 2016 21:10:31

Arată celelalte 2 comentarii

Comentarii

De ce nu ai pus CSS-ul în style.css, de exemplu, în loc să-l incluzi în HTML? Ar fi fost o soluție mai elegantă. Și mulțumesc pentru munca ta și pentru idee!

therufa

14 ian. 2016 16:19:29

@MaxRuf Ai perfectă dreptate. Un fișier CSS separat încărcat prin enqueue ar fi mai bun. M-am gândit doar la oamenii care găsesc acest post, astfel încât să poată copia/ lipi cu ușurință. Sunt mai puține șanse să întâmpine probleme.

Michael Ecklund

23 feb. 2016 18:22:09

poți încerca asta:

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

dacă funcționează (și ar trebui să funcționeze!), atunci va trebui să muți bara de administrare WordPress în partea de jos, inserând codul de mai jos în folderul de plugin-uri sau în fișierul functions.php:

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>';
}
// pe zona de administrare
add_action( 'admin_head', 'fb_move_admin_bar' );
// pe partea publică
add_action( 'wp_head', 'fb_move_admin_bar' );

ca alternativă poți folosi acest plugin

personal nu îmi place să folosesc plugin-uri pentru că majoritatea încarcă scripturi cu cod inutil... soluțiile 1 și 2 de mai sus funcționează bine, dar dacă nu funcționează pentru tine, poți încerca soluția 3 de mai jos:

function stick_admin_bar_to_bottom_css() {
echo "<style>
html {
padding-bottom: 28px !important;
}

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

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

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}
</style>";
}

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

Asta a funcționat pentru mine fără problemele cu 28px..

Tamara

302

3 mar. 2013 17:51:38

Nu a funcționat pentru mine până când nu am adăugat acest cod în tag-ul body:

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

Abia atunci a funcționat corect!

timhc22

139

21 mar. 2013 12:05:48

Remediu pentru Bootstrap 2 & 3 navbar-fixed-top pentru a preveni suprapunerea meniului site-ului cu meniul de administrare WordPress

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

Remediu pentru Bootstrap 4 fixed-top pentru a preveni suprapunerea meniului site-ului cu meniul de administrare WordPress

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

user49936

21

4 apr. 2014 22:59:52

Perfect! Exact ceea ce căutam, totuși, am făcut ceva puțin diferit la pasul 3. Nu sunt sigur că contează, dar codul meu arată astfel...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Folosind nume personalizat de clasă CSS.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Folosind numele implicit de clasă CSS din WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

Ați menționat adăugarea în diferite locuri, dar eu întotdeauna am făcut-o așa și pare să funcționeze bine. Mulțumesc pentru soluție!

Brandon Morgan

1

7 mai 2014 19:46:21

Comentarii

Și ce anume ai făcut diferit?

kaiser

7 mai 2014 20:21:22

Michael Ecklund 6.8K · Accepted Answer · 2013-10-06T20:22:36Z

Cum să previi suprapunerea bării de administrare WordPress cu bara de navigare Twitter Bootstrap.

Ca răspuns la: Bara de administrare WordPress se suprapune peste bara de navigare Twitter Bootstrap

Întrebat de: @TheWebs

Dacă folosești Twitter Bootstrap cu WordPress și ai o problemă cu bara de administrare WordPress care se suprapune peste bara ta de navigare, probabil că ești destul de frustrat de unele dintre aceste răspunsuri. Am căutat soluții peste tot înainte de a decide în final să trec la o treaptă inferioară și să găsesc o soluție care face exact ceea ce am nevoie.

Deci, iată un răspuns care nu ascunde bara de administrare WordPress și nici nu o mută în partea de jos a paginilor tale. Acest răspuns va păstra bara de administrare WordPress chiar acolo unde îi este locul... În partea de sus a paginilor tale.

Te rog să notezi că acest lucru va necesita câțiva pași scurți pentru a fi finalizat, dar merită. Nu este un proces complicat sau care să necesite mult timp. Am vrut doar să mă asigur că explicația despre cum să faci acest lucru este clară și ușor de urmărit/înțeles.

Pasul 1

Adaugă get_body_class(); la tag-ul <body> al temei tale.

Temele au un tag template pentru tag-ul body care va ajuta autorii de teme să stilizeze mai eficient cu CSS. Tag-ul Template se numește body_class. Această funcție oferă elementului body clase diferite și poate fi adăugată, de obicei, în tag-ul HTML body al header.php.

Deschide tema ta WordPress activă care folosește Twitter Bootstrap directorul. Găsește header.php și deschide-l.
Găsește <body>.
Înlocuiește cu <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

După ce ai finalizat cei trei pași de mai sus, ai activat cu succes clasele WordPress body în tema ta WordPress.

Pasul 2 (OPȚIONAL!)

Adaugă clase CSS condiționale personalizate la tag-ul <body>.

În mod implicit, WordPress oferă deja o listă de clase implicite tag-ului HTML, dacă folosești funcțiile body_class() sau get_body_class().

Dacă vezi codul sursă al oricărei pagini randate în front-end pe site-ul tău WordPress, vei observa că două dintre clasele CSS adăugate automat la tag-ul HTML <body> sunt "logged-in" și "admin-bar".

De asemenea, vei observa că aceste nume de clase CSS sunt adăugate doar dacă utilizatorul este autentificat, altfel nu vor fi adăugate la tag-ul HTML <body>.

Deci, dacă nu vrei să folosești numele implicite de clase CSS din WordPress, poți adăuga propriile tale foarte ușor.

Deschide tema ta WordPress activă care folosește Twitter Bootstrap directorul. Găsește functions.php și deschide-l.
Adaugă add_filter('body_class', 'mbe_body_class'); la începutul fișierului.
Adaugă următorul cod, la sfârșitul fișierului.

Codul:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

Acum, dacă vezi codul sursă al oricărei pagini randate în front-end pe site-ul tău WordPress, dacă utilizatorul este autentificat, vei vedea că "body-logged-in" a fost adăugat la tag-ul HTML <body>, iar dacă utilizatorul nu este autentificat, vei vedea că "body-logged-out" a fost adăugat la tag-ul HTML <body>.

Pasul 3

Adaugă codul CSS la tema ta.

Aceasta este secțiunea de cod care va corecta tema ta pentru a afișa atât bara de administrare WordPress, cât și bara ta de navigare Twitter Bootstrap corect, indiferent dacă utilizatorul este autentificat sau nu pe site-ul tău.

Deschide tema ta WordPress activă care folosește Twitter Bootstrap directorul. Găsește functions.php și deschide-l.
Adaugă add_action('wp_head', 'mbe_wp_head'); la începutul fișierului.
Adaugă următorul cod, la sfârșitul fișierului.

Codul:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Folosind numele personalizat al clasei CSS.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Folosind numele implicit al clasei CSS din WordPress.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

EDITARE LA COD

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;
}

Această versiune a funcției mbe_wp_head include o interogare media mobile-first, pentru a te asigura că antetul tău este împins în jos la distanța corectă. Pentru mobile, bara de administrare WP are 48px înălțime. După pragul de 783px, bara de administrare se scurtează la doar 28px înălțime.

Și gata. Dacă utilizatorul este autentificat, ar trebui să ai acum bara de administrare WordPress chiar în partea de sus a paginii tale, urmată imediat de bara ta de navigare Twitter Bootstrap. Dacă utilizatorul nu este autentificat pe site-ul tău WordPress, bara ta de navigare Twitter Bootstrap ar trebui să se afișeze în continuare corespunzător în partea de sus a site-ului tău.