Pasek administracyjny WordPress Pokrywający się Nawigacja Bootstrap na Twitterze [zamknięte]

10

Mam problem z paskiem administracyjnym WordPress nakładającym się na 2.3.0pasek nawigacyjny Twitter Bootstrap ( ). Wypróbowałem tę poprawkę:

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

ale niestety wciąż stanowi problem. Zastanawiam się, jakie poprawki są dostępne?

css html navigation twitter-bootstrap admin-bar TheWebs
źródło

17

Jak zapobiec nakładaniu się paska administracyjnego WordPress z paskiem nawigacyjnym Bootstrap na Twitterze.

W odpowiedzi na: Pasek administratora WordPress nakładający się na nawigację bootstrapową Twittera

Pytanie zadał: @TheWebs

Jeśli używasz Twittera Bootstrap z WordPress i masz problem z paskiem administracyjnym WordPress nakładającym się z paskiem nawigacyjnym, prawdopodobnie jesteś dość sfrustrowany niektórymi z tych odpowiedzi. Wszędzie szukałem rozwiązań, zanim ostatecznie zdecydowałem się na redukcję biegów na niższy bieg i znalazłem rozwiązanie, które robi dokładnie to, czego potrzebuję.

Oto odpowiedź, która nie ukrywa paska administracyjnego WordPress ani nie przesuwa paska administracyjnego WordPress na dół twoich stron. Ta odpowiedź sprawi, że pasek administratora WordPress znajdzie się tam, gdzie powinien ... Na górze stron.

Pamiętaj, że wykonanie tego zajmie kilka krótkich kroków, ale warto. To naprawdę nie jest skomplikowany ani czasochłonny proces. Chciałem tylko upewnić się, że wyjaśnienie, jak to zrobić, jest jasne i łatwe do naśladowania / zrozumienia.

Krok 1

Dodaj get_body_class();do <body>tagu motywu .

Motywy mają znacznik szablonu dla znacznika body, który pomoże autorom motywów w bardziej efektywnym stylowaniu za pomocą CSS. Tag szablonu jest nazywany body_class. Ta funkcja nadaje elementowi body różne klasy i można go zazwyczaj dodawać w header.phpznaczniku body HTML.

Otwórz aktualnie aktywny motyw WordPress za pomocą katalogu Bootstrap na Twitterze. Znajdź header.phpi otwórz.
Znajdź <body> .
Zamienić <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

Po wykonaniu powyższych trzech kroków pomyślnie udało się włączyć motyw WordPress za pomocą klas treści WordPress.

Krok 2 (OPCJONALNIE!)

Dodaj niestandardowe warunkowe klasy CSS do <body>znacznika.

Domyślnie WordPress już udostępnia listę domyślnych klas do znacznika HTML, jeśli używasz funkcji body_class()lub get_body_class().

Jeśli zobaczysz kod źródłowy dowolnej renderowanej strony frontonu w witrynie WordPress, zauważysz, że dwie klasy CSS automatycznie dodane do <body>tagu HTML to „zalogowany” i „pasek administratora”.

Zauważysz również, że nazwy klas CSS są dodawane do <body>znacznika HTML tylko wtedy, gdy użytkownik jest zalogowany, w przeciwnym razie nie zostaną dodane do <body>znacznika HTML .

Więc jeśli nie chcesz używać domyślnych nazw klas WordPress CSS, możesz bardzo łatwo dodać własne.

Otwórz aktualnie aktywny motyw WordPress za pomocą katalogu Bootstrap na Twitterze. Znajdź functions.phpi otwórz.
Dodaj add_filter('body_class', 'mbe_body_class'); na górę pliku.
Dodaj następujący kod na dole pliku.

Kod:

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

Teraz, jeśli zobaczysz kod źródłowy dowolnej renderowanej strony frontonu w witrynie WordPress, jeśli użytkownik jest zalogowany, zobaczysz, że „ <body>tag zalogowany” został dodany do znacznika HTML , a jeśli użytkownik jest wylogowany, zobaczysz „body-wylogowany” został dodany do <body>tagu HTML .

Krok 3

Dodaj kod CSS do motywu.

Jest to sekcja kodu, która poprawi Twój motyw tak, aby wyświetlał zarówno pasek administratora WordPress, jak i nawigację Bootstrap na Twitterze, niezależnie od tego, czy użytkownik jest zalogowany, czy wylogowany z Twojej witryny.

Otwórz aktualnie aktywny motyw WordPress za pomocą katalogu Bootstrap na Twitterze. Znajdź functions.phpi otwórz.
Dodaj add_action('wp_head', 'mbe_wp_head'); na górę pliku.
Dodaj następujący kod na dole pliku.

Kod:

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

EDYCJA DO KODU

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

Ta wersja funkcji mbe_wp_head zawiera zapytanie o media dla urządzeń mobilnych, aby upewnić się, że nagłówek zostanie przesunięty na odpowiednią odległość. W przypadku urządzeń mobilnych pasek administratora WP ma wysokość 48 pikseli. Po punkcie przerwania 783px pasek administratora skraca się do wysokości tylko 28px.

Masz to. Jeśli użytkownik jest zalogowany, powinieneś teraz mieć pasek administratora WordPress u góry strony, a zaraz po nim nawigację Twitter Bootstrapped. Jeśli użytkownik zostanie wylogowany z witryny WordPress, nawigacja Bootstrap na Twitterze powinna nadal być odpowiednio wyświetlana u góry witryny.

Michael Ecklund
źródło

1

Dlaczego nie umieściłeś css na przykład w style.css, zamiast osadzić go w html? Byłoby to bardziej eleganckie rozwiązanie. Dziękuję również za twoją pracę i pomysł!

Max Ruf

@MaxRuf Masz absolutną rację. Osobny kolejkowany plik CSS byłby lepszy. Właśnie myślałem o ludziach, którzy znaleźli ten post, aby mogli go łatwo skopiować / wkleić. Mniej prawdopodobne problemy.

Michael Ecklund

25

Nie działało dla mnie, ale znalazłem fajną poprawkę. W pliku header.php użyj funkcji wordpress, aby zapytać, czy pasek narzędzi jest wyświetlany, a następnie utwórz pusty div poniżej div paska nawigacyjnego:

<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
źródło

Świetna poprawka. Podoba mi się, że jest to o wiele prostsze niż zaakceptowana odpowiedź i szuka is_admin_bar_showing(), nie tylko jeśli użytkownik jest zalogowany, co jest dobre, biorąc pod uwagę, że ktoś może się zalogować, ale wyłączył pasek administratora. Dzięki!

Mark Rummel

3

Od wersji WordPress 3.8 wysokość paska administracyjnego wynosi 32 piksele.

cowgill

To trochę Hacky, ale uważam, że jest to najlepsze rozwiązanie. Upvoted

plushyObject

Nieznacznie zmodyfikowane rozwiązanie z wykorzystaniem trójskładnikowej logiki i wbudowanego stylu:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

Mark Rummel

1

Jest to dobre, z wyjątkiem urządzeń mobilnych, których przesunięcie nie wynosi 32 pikseli, ale 46 pikseli. Aby to wyjaśnić, użyłem klasy CSS zamiast stylu. Oto klasa, którą można zastosować:

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

surfbuds

3

możesz spróbować:

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

jeśli to Ci odpowiada (co powinno!), musisz przenieść pasek administratora wp na dół, umieszczając poniższy kod w folderze wtyczek lub w pliku 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>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

alternatywnie możesz użyć tej wtyczki

Naprawdę nie lubię używać wtyczek, ponieważ większość motywów ładuje mój skrypt fałszywymi kodami Nie potrzebuję ... powyższe rozwiązanie 1 i 2 działa dobrze, ale jeśli nie działa, możesz wypróbować rozwiązanie 3 poniżej:

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');

Wydawało mi się, że działa dobrze bez problemów z 28px.

Tamara
źródło

2

Nie działało to dla mnie, dopóki nie dodałem tego do tagu body:

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

Potem działało dobrze!

timhc22
źródło

0

Doskonały! Jednak tego, czego szukałem, zrobiłem coś nieco inaczej w kroku 3. Nie jestem pewien, czy to ma znaczenie, ale mój kod wygląda tak ...

    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');

Wspomniałeś o dodawaniu w różnych miejscach, ale zawsze tak robiłem i wydaje się, że działa dobrze. Dzięki za poprawkę!

użytkownik51355
źródło

1

A co dokładnie robiłeś inaczej?

kaiser

0

Naprawiono bootstrap „navbar-fixed-top”, aby zapobiec nakładaniu się menu strony z menu administracyjnym WordPress

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

użytkownik49936
źródło