Панель админа WordPress и фиксированное меню

Сергей Ермилов

Попробуем разобраться как сделать так, чтобы Sticky Headers и бар админ панели вели себя корректно.

Фиксированный Header

Sticky Header — это фиксированный элемент на странице и в большинстве случаев — это «липкое» меню, которое находится в верхней части страницы и всегда видимо.

Размещение логотипа сайта и основной навигации в липком заголовке (или в заголовке с фиксированным положением — Sticky Header) — это определенный тренд сегодняшнего дня. Это стало популярным и для тем WordPress. Например, на этом сайте меню фиксировано и его всегда видно сверху страницы

Однако на сайте WordPress фиксированное меню сталкиваются с проблемой, когда видна панель администратора. И панель администратора, и большинство меню имеют position: fixed; top: 0;, и позиционируются в соответствии с областью просмотра. В итоге они накладываются друг на друга. Поскольку панель администратора имеет z-index 99999, она обычно перекрывает большую часть прилипающего заголовка темы (или если заголовок выигрывает в войне z-индексов, то он перекрывает панель администратора). Давайте посмотрим, как можно использовать CSS (и Sass) для решения этой проблемы.

CSS для перемещения Header

Для простоты мы будем использовать класс .sticky-header для обозначения элемента, закрепленного в верхней части страницы. Вы должны найти правильный селектор для вашей темы и использовать его. Мы также будем считать, что его верхняя позиция top равна 0. Если верхняя позиция top смещена относительно чего-либо другого, вам придется посчитать и подкорректировать приведенные ниже измерения.

Когда панель администратора видна во внешнем интерфейсе, WordPress прикрепляет класс .admin-bar к страницы. В большинстве случаев это делается с помощью функции body_class(); в header.php. Этот класс позволит нам настроить верхнее положение нашего фиксированного элемента.

/* This is the existing CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* Here's the new CSS to add... */
.admin-bar .sticky-header {
  top: 32px;
}

Это вполне работает, верно? Высота панели администратора составляет 32px, поэтому мы просто перемещаем липкий элемент вниз, и панель и меню становятся видимыми. Проблема в том, что не всегда все так просто: панель администратора не всегда имеет высоту 32px. В этом случае нам придется использовать CSS.

CSS для маленьких экранов

На экранах меньше 783px панель администратора имеет высоту 46px. Нам нужно будет изменить наш код, чтобы компенсировать это:

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

Если вы предпочитаете CSS, ориентированный на мобильные устройства (как я), используйте этот код:

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

Теперь липкий заголовок будет расположен правильно, независимо от ширины экрана! Но мы еще не закончили. Если вы используете Sass для создания своей темы, мы можем превратить это в многоразовый миксин.

Если вы являетесь разработчиком темы или создаете дочернюю тему, вы уже знаете, куда поместить этот CSS в существующих таблицах стилей. С другой стороны, если вы работаете с существующей темой, которая не очень хорошо справляется с липким заголовком, и вам просто нужно вставить этот код, вы можете использовать плагин, позволяющий вставить CSS, например, WP Add Custom CSS или Simple Custom CSS.

Sass для переноса заголовка

Я назову этот миксин admin-sticky-fix(). Мы рассмотрим весь блок кода, а затем посмотрим, как работает каждая часть.

@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;
    }
  }
}

Миксин принимает необязательный параметр: $offset. Это позволяет указать, что элемент имеет значение top, отличное от 0. Если вы не укажете никакого смещения, миксин примет значение 0 и будет работать с ним. Если вы вручную укажете $offset, условие @if изменит значения высоты админбара по умолчанию, чтобы они соответствовали. Примечание: Просто используйте целое число: единица измерения px не нужна, но она не нарушит работу, если вы ее включите.

Наш миксин использует вложенность Sass для упрощения работы: символ & представляет селектор, внутри которого вызывается этот миксин. Так, если вы включите @include его в .sticky-header, вы получите на выходе селектор .admin-bar .sticky-header. Вы заметите, что медиазапрос также вложен в селектор. Sass автоматически перемещает @media [etc] обратно в корень и копирует в него текущий селектор. Этот трюк с вложением просто позволяет нам написать более короткий миксин.

Давайте посмотрим, как этот миксин работает сейчас:

/* Sass we write */
.sticky-header {
  position: fixed;
  top: 0;
  
  @include admin-sticky-fix;
}

/* CSS Output */
.sticky-header {
  position: fixed;
  top: 0;
}
.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

Если вам нужно сопоставить значение смещения, используйте миксин следующим образом:

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

/* CSS Output */
.sticky-header-offset {
  position: fixed;
  top: 20px;
}
.admin-bar .sticky-header-offset {
  top: 66px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header-offset {
    top: 52px;
  }
}

Наличие многоразового миксина позволяет нам быстро настроить любой элемент с фиксированным положением, чтобы компенсировать положение панели администратора WordPress. Мои мобильные меню часто имеют фиксированное положение, и это позволяет мне легко настроить их верхнее значение.

Заключение

По умолчанию «липкие» элементы будут конфликтовать с панелью администратора WordPress, но с помощью этих фрагментов кода всё вполне можно исправить. По ссылке вы найдете Sassmeister gist, который содержит миксин и несколько примеров того, как он работает.

Опубликовано 24 февраля 2022 в 22:58 (обновлено 17 января 2023 в 03:21)