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
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
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.