In risposta a: barra di amministrazione di WordPress che si sovrappone alla navigazione di bootstrap di Twitter
Chiesto da: @TheWebs
Se stai usando Twitter Bootstrap con WordPress e hai un problema con la barra di amministrazione di WordPress che si sovrappone alla barra di navigazione, probabilmente sei piuttosto frustrato con alcune di queste risposte. Ho cercato soluzioni ovunque prima di decidere infine di passare a una marcia inferiore e trovare una soluzione che fa esattamente ciò di cui ho bisogno.
Quindi, ecco una risposta che non nasconde la barra di amministrazione di WordPress o sposta la barra di amministrazione di WordPress nella parte inferiore delle pagine. Questa risposta manterrà la barra di amministrazione di WordPress proprio dove appartiene ... Nella parte superiore delle tue pagine.
Si prega di notare che questo richiederà alcuni brevi passaggi per il completamento, ma ne vale la pena. Non è davvero un processo complicato o che richiede tempo. Volevo solo assicurarmi che la spiegazione su come farlo fosse chiara e facile da seguire / capire.
Passo 1
I temi hanno un tag modello per il body tag che aiuterà gli autori di temi a modellare in modo più efficace con i CSS. Viene chiamato il tag modello
body_class. Questa funzione offre all'elemento body classi diverse e può essere aggiunta, in genere, nel header.phptag body HTML dell'elemento .
- Apri il tuo tema WordPress attualmente attivo usando la directory Bootstrap di Twitter. Trova
header.phpe aprilo.
- Trova
<body> .
- Sostituirlo con
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
Dopo aver completato i tre passaggi precedenti, ora hai abilitato correttamente il tuo tema WordPress con le classi del corpo di WordPress.
Passaggio 2 (OPZIONALE!)
- Aggiungi classi CSS condizionali personalizzate al
<body>tag.
Per impostazione predefinita, WordPress fornisce già un elenco di classi predefinite al tag HTML, se si utilizzano le funzioni body_class()o get_body_class().
Se visualizzi il codice sorgente di qualsiasi pagina front-end renderizzata sul tuo sito Web WordPress, noterai che due delle classi CSS aggiunte automaticamente al <body>tag HTML sono "login" e "admin-bar".
Noterai anche che i nomi delle classi CSS vengono aggiunti al <body>tag HTML solo se l'utente ha effettuato l'accesso, altrimenti non verranno aggiunti al <body>tag HTML .
Quindi, se non si desidera utilizzare i nomi di classe CSS predefiniti di WordPress, è possibile aggiungere i propri molto facilmente.
- Apri il tuo tema WordPress attualmente attivo usando la directory Bootstrap di Twitter. Trova
functions.phpe aprilo.
- Aggiungi
add_filter('body_class', 'mbe_body_class'); all'inizio del file.
- Aggiungi il seguente codice, nella parte inferiore del file.
Il codice:
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = 'body-logged-in';
} else{
$classes[] = 'body-logged-out';
}
return $classes;
}
Ora, se visualizzi il codice sorgente di qualsiasi pagina front-end renderizzata sul tuo sito Web WordPress, se l'utente ha effettuato l'accesso, vedrai "body-login-in" è stato aggiunto al <body>tag HTML e se l'utente è disconnesso, vedrai "body-log-out" è stato aggiunto al <body>tag HTML .
Passaggio 3
- Aggiungi il codice CSS al tuo tema.
Questa è la sezione di codice che correggerà il tuo tema per visualizzare sia la barra di amministrazione di WordPress, sia la tua navigazione Bootstrap di Twitter, indipendentemente dal fatto che l'utente sia connesso o disconnesso dal tuo sito web.
- Apri il tuo tema WordPress attualmente attivo usando la directory Bootstrap di Twitter. Trova
functions.phpe aprilo.
- Aggiungi
add_action('wp_head', 'mbe_wp_head'); all'inizio del file.
- Aggiungi il seguente codice, nella parte inferiore del file.
Il codice:
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;
}
MODIFICA AL CODICE
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;
}
Questa versione della funzione mbe_wp_head include una query multimediale mobile-first, per garantire che l'intestazione venga spostata verso il basso alla distanza corretta. Per i dispositivi mobili, la barra di amministrazione di WP è alta 48 px. Dopo il breakpoint di 783 px, la barra di amministrazione si riduce a soli 28 px di altezza.
Ecco qui. Se l'utente ha effettuato l'accesso, ora dovresti avere la barra di amministrazione di WordPress nella parte superiore della pagina, immediatamente seguita dalla navigazione Twitter Bootstrapped. Se l'utente è disconnesso dal tuo sito Web WordPress, la navigazione Bootstrap di Twitter dovrebbe comunque essere visualizzata in modo appropriato nella parte superiore del sito Web.