04.04.2022 в 01:03 (ред.)

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

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

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

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

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

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

Пример того, как наезжает на шапку админ бар
Примечание. Некоторые темы используют JavaScript для позиционирования закрепленных элементов при прокрутке страницы. Если JavaScript постоянно обновляет встроенное свойство top, метод, описанный ниже, не решит эту проблему.

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, который содержит миксин и несколько примеров того, как он работает.

CSS Wordpress

Подпишитесь на новости

Никакого спама, только новости и полезные материалы