web-dev-qa-db-fra.com

Wordpress Admin Bar a poussé Sticky Footer au bas de la page

J'ai implémenté le pied collant oh-so-common de Ryan Fait dans un thème Wordpress personnalisé. Je remarque maintenant que si j'implémente la barre d'administration Wordpress dans mes pages, qui fait 28 pixels de haut (au moins dans la version actuelle de Wordpress ...), le pied de page collant est également abaissé de 28 pixels.

Voici la barre d'administration:

enter image description here

Quoi qu'il en soit, le fonctionnement de Wordpress est que la barre d’administrateur apparaît ou non en haut des pages, en fonction de la manière dont les utilisateurs de l’administrateur définissent leurs préférences. Donc, je ne veux pas simplement le supprimer du thème.

Je pourrais évidemment utiliser jQuery après le lancement de l'événement ready pour voir si la barre d'administration est là ou non et modifier le pied de page en conséquence, mais je préférerais plutôt éviter cela si possible et laisser la page générer correctement pour commencer ... Des idées?

De plus, je souhaite que le thème fonctionne avec les versions à venir de Wordpress. Donc, si dans une version ultérieure, ils décident de changer la barre d’administration en un format autre que 28px, je ne souhaite pas que mon code soit ajusté pour compenser le changement.

phpcssjavascript
7
Jake Wilson

Le pied de page est déplacé car WP ajoutera des marges à votre page chaque fois que la barre d'administration est configurée pour afficher. La fonction responsable s'appelle _admin_bar_bump_cb() et se trouve à l'adresse wp-includes/admin-bar.php. La mauvaise nouvelle est qu’il utilise un paramètre codé en 28px (ce qui signifie que vous ne pourrez pas le récupérer et l’utiliser dans vos fonctions), ainsi qu’une déclaration "! Important" que vous ne pourrez pas systématiquement remplacer par-dessus. afin d'éviter des changements de hauteur à l'avenir.

Je pense que votre meilleur pari serait de vérifier si la barre d'administration est affichée et d'ajuster le pied de page en conséquence. Cela devrait être aussi simple que de l'ajouter à votre functions.php:

add_action('wp_head', 'adjust_sticky_footer');
function adjust_sticky_footer() {
    if(is_admin_bar_showing()) { ?>
        <style type="text/css">
            .footer { /* Adjust selector according to your theme */
                bottom: 28px;
            }
        </style>
    <?php
    }
}

Je suppose que position: relative est déjà attribué à votre pied de page, comme indiqué dans l'exemple du lien que vous avez fourni.

5
Tomas Buteler