Obtenir des en-têtes collants et le WP Admin Bar pour se comporter

Résolvez le problème de la tête et de la barre de gestion collantes qui se chevauchent

Dans les thèmes WordPress, la tête collante (ou tête de position fixe) chevauche la barre d'administration. Les deux utilisent position: fixed; top: 0;, entraînant des conflits visuels. Étant donné que la barre d'administration a un indice z de 99999, il couvre généralement la tête collante du sujet (et vice versa). Cet article expliquera comment résoudre ce problème à l'aide de CSS (et SASS).

(Remarque: Certains sujets utilisent JavaScript pour localiser des éléments collants. Si JavaScript continue de mettre à jour les propriétés en ligne top, la méthode suivante est invalide.)

Utilisez CSS pour ajuster la position de la tête

Pour plus de simplicité, nous utilisons la classe .sticky-header pour représenter des éléments épinglés en haut de la page. Vous devriez trouver le bon sélecteur en fonction de votre sujet. Nous supposons que sa valeur de position top est 0. Si la valeur top a été compensée, les mesures suivantes doivent être ajustées.

Lorsque la barre d'administration est visible à l'extrémité avant, WordPress attache la classe .admin-bar à l'élément de la page. (Ceci est généralement géré par la fonction header.php dans body_class();.) Cette classe nous permet d'ajuster la position top de la tête collante.

/* 原有CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* 新增CSS... */
.admin-bar .sticky-header {
  top: 32px;
}

La hauteur de la barre de gestion est de 32px, nous avons juste besoin de déplacer la tête collante vers le bas. Mais le problème est que la hauteur de la barre d'administration n'est pas toujours 32px.

CSS pour les petits écrans

Sur les écrans avec des largeurs inférieurs à 783px, la hauteur de la barre de gestion est de 46px. Nous devons modifier le code pour compenser:

.admin-bar .sticky-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .sticky-header {
    top: 46px;
  }
}

Si vous préférez CSS mobile-premier, utilisez le code suivant:

.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

Créer un mélange réutilisable avec Sass

Si vous construisez un thème avec SASS, nous pouvons le résumer dans un mélange réutilisable:

@mixin admin-sticky-fix( $offset: 0 ) {
  $narrow-offset: 46px;
  $wide-offset: 32px;
  @if $offset != 0 and type-of($offset) == 'number' {
    $narrow-offset: $narrow-offset + $offset;
    $wide-offset: $wide-offset + $offset;
  }
  .admin-bar & {
    top: $narrow-offset;
    @media screen and (min-width: 783px) {
      top: $wide-offset;
    }
  }
}

Ce mélange accepte un paramètre facultatif $offset qui permet la valeur top de l'élément spécifié (non 0). Si aucun décalage n'est spécifié, Mixin supposera être 0. Si vous spécifiez manuellement $offset, la condition @if modifiera la valeur de hauteur de la colonne de gestion par défaut.

comment utiliser:

.sticky-header {
  position: fixed;
  top: 0;
  @include admin-sticky-fix;
}

.sticky-header-offset {
  position: fixed;
  top: 20px;
  @include admin-sticky-fix(20);
}

Conclusion

À travers l'extrait de code ci-dessus, le conflit entre la tête collante et la barre de gestion WordPress peut être facilement résolu. Sass Mixin améliore la réutilisabilité du code.

FAQS (FAQ)

(La partie FAQ est omise ici car l'article est trop long et ne correspond pas à l'objectif pseudo-original. La partie FAQ peut être ajoutée ou modifiée selon les besoins.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!