En réponse à: barre d'administration WordPress chevauchant la navigation bootstrap twitter
Demandé par: @TheWebs
Si vous utilisez Twitter Bootstrap avec WordPress et que vous avez un problème avec la barre d'administration WordPress qui chevauche votre barre de navigation, vous êtes probablement assez frustré par certaines de ces réponses. J'ai cherché des solutions partout avant de finalement décider de passer à la vitesse inférieure et de trouver une solution qui fait exactement ce dont j'ai besoin.
Voici donc une réponse qui ne cache pas la barre d'administration WordPress, ni ne déplace la barre d'administration WordPress au bas de vos pages. Cette réponse gardera la barre d'administration WordPress là où elle appartient ... En haut de vos pages.
Veuillez noter que cela prendra quelques courtes étapes, mais cela en vaut la peine. Ce n'est pas vraiment un processus compliqué ou long. Je voulais juste m'assurer que l'explication sur la façon de le faire était claire et facile à suivre / comprendre.
Étape 1
Les thèmes ont une balise de modèle pour la balise body qui aidera les auteurs de thèmes à styliser plus efficacement avec CSS. La balise de modèle est appelée
body_class. Cette fonction donne à l'élément body différentes classes et peut être ajoutée, généralement, dans la header.phpbalise HTML du corps.
- Ouvrez votre thème WordPress actuellement actif à l'aide du répertoire Twitter Bootstrap. Trouvez-le
header.phpet ouvrez-le.
- Trouvez
<body> .
- Remplacer par
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
Après avoir effectué les trois étapes ci-dessus, vous avez maintenant activé avec succès votre thème WordPress avec les classes de corps WordPress.
Étape 2 (FACULTATIF!)
- Ajoutez des classes CSS conditionnelles personnalisées à la
<body>balise.
Par défaut, WordPress fournit déjà une liste de classes par défaut à la balise HTML, si vous utilisez les fonctions body_class()ou get_body_class().
Si vous affichez le code source de n'importe quelle page front-end rendue sur votre site Web WordPress, vous remarquerez que deux des classes CSS ajoutées automatiquement à la <body>balise HTML sont «connectées» et «barre d'administration».
Vous remarquerez également que ces noms de classe CSS ne sont ajoutés à la <body>balise HTML que si l'utilisateur est connecté, sinon ils ne seront pas ajoutés à la <body>balise HTML .
Donc, si vous ne souhaitez pas utiliser les noms de classe CSS WordPress par défaut, vous pouvez ajouter les vôtres très facilement.
- Ouvrez votre thème WordPress actuellement actif à l'aide du répertoire Twitter Bootstrap. Trouvez-le
functions.phpet ouvrez-le.
- Ajoutez
add_filter('body_class', 'mbe_body_class'); en haut du fichier.
- Ajoutez le code suivant au bas du fichier.
Le code:
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = 'body-logged-in';
} else{
$classes[] = 'body-logged-out';
}
return $classes;
}
Maintenant, si vous affichez le code source de n'importe quelle page front-end rendue sur votre site Web WordPress, si l'utilisateur est connecté, vous verrez que "body-log-in" a été ajouté à la <body>balise HTML , et si l'utilisateur est déconnecté, vous verrez "corps déconnecté" a été ajouté à la <body>balise HTML .
Étape 3
- Ajoutez le code CSS à votre thème.
C'est la section de code qui corrigera votre thème pour afficher à la fois la barre d'administration WordPress et votre navigation Twitter Bootstrap, que l'utilisateur soit connecté ou déconnecté de votre site Web.
- Ouvrez votre thème WordPress actuellement actif à l'aide du répertoire Twitter Bootstrap. Trouvez-le
functions.phpet ouvrez-le.
- Ajoutez
add_action('wp_head', 'mbe_wp_head'); en haut du fichier.
- Ajoutez le code suivant au bas du fichier.
Le 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;
}
MODIFIER AU CODE
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;
}
Cette version de la fonction mbe_wp_head comprend une requête multimédia mobile-first, pour garantir que votre en-tête est poussé sur la bonne distance. Pour les mobiles, la barre d'administration WP mesure 48 pixels. Après le point d'arrêt 783px, la barre d'administration se réduit à seulement 28px de hauteur.
Voilà. Si l'utilisateur est connecté, vous devriez maintenant avoir la barre d'administration WordPress tout en haut de votre page, immédiatement suivie de votre navigation Twitter Bootstrapped. Si l'utilisateur est déconnecté de votre site Web WordPress, votre navigation Twitter Bootstrap devrait toujours s'afficher correctement en haut de votre site Web.