WP247 Body Classes

Добавьте уникальные классы к тегу body для упрощения стилизации на основе атрибутов сообщения (тип сообщения, название и идентификатор) и различных «is» функций WordPress: wp_is_mobile () is_home () is_front_page () is_blog () is_admin () is_admin_bar_showing () is_404 () is_super_admin () is_user_logged_in () is_search () is_archive () is_author () is_category () is_tag () is_tax () is_date () is_year () is_month () is_day () is_time () is_single () is_stick > post_type $ post-> name $ post-> ID wp_get_post_categories () (Категории страниц / сообщений) wp_get_post_tags () (Теги страницы / сообщения) $ user-> nicename $ user-> id $ archive-> slug (например, ярлык категории, Слаг тегов и т. Д.) $ Archive-> id (например, ID категории, ID тега и т. Д.). Добавляйте классы на основе прокрутки страницы пользователем. Вы можете проверить такие вещи, как: is-scroll-top (вверху страницы - синоним is-not-scroll) is-not-scroll-top (не вверху страницы - синоним is-scroll) is -scroll (не вверху страницы - синоним is-not-scroll-top) is-not-scroll (вверху страницы - синоним is-scroll-top) is-scroll-top-px ( не достигло начального значения прокрутки для измерения прокрутки в пикселях) is-scroll-top-vh (не достигло начального значения прокрутки для измерения прокрутки по высоте области просмотра) is-scroll-top-dh (не достигло начального значения прокрутки для измерения прокрутки по высоте документа) is-scroll-10-px (прокручивается вниз на 10 пикселей) is-scroll-8-vh (прокручивается вниз на 8% высоты области просмотра) is-scroll-5-dh (прокручивается вниз на 5% от высота документа) is-scroll-mid-px (достигнуто начальное значение прокрутки, но не предел прокрутки для измерения прокрутки в пикселях) is-scroll-mid-vh (достигнуто начальное значение прокрутки, но не предел прокрутки для прокрутки измерение по высоте области просмотра) is-scroll-mid-vh (достигнуто начальное значение прокрутки, но не предел прокрутки для измерения прокрутки по высоте документа) is-scroll-max-px (достиг предела прокрутки для измерения прокрутки в пикселях) is-scroll-max-vh (достиг прокрутки предел для измерения прокрутки в процентах от высоты области просмотра) is-scroll-max-dh (достигнут предел прокрутки для измерения прокрутки в процентах от высоты документа) Добавьте классы на основе результатов скрипта Mobile_Detect от mobiledetect.net. Этот сценарий анализирует значение, переданное браузером в строке HTTP_USER_AGENT. Следовательно, мобильное обнаружение - это больше искусство, чем наука, и, к сожалению, не идеально. Вы можете проверить такие вещи, как: is-mobile is-tablet is-phone Мобильная операционная система Мобильный браузер Тип планшета Тип телефона Этот плагин добавляет классы в тег тела html, указывающие, является ли запрашивающее устройство мобильным устройством (.is -mobile или .is-not-mobile) тип просматриваемого сообщения (.is-? где? - это тип сообщения (страница, сообщение, независимо от того, определены ли специальные типы сообщений)). Например .is-page или .is-post ярлык просматриваемого сообщения (.is -? -! Где? - это тип сообщения, а! - ярлык сообщения). Например, сообщение с ярлыком «hello-world» будет иметь класс .is-post-hello-world - идентификатор просматриваемого сообщения (.is -? - # где? - тип сообщения, а # - идентификатор сообщения). Например, сообщение с идентификатором «1» будет иметь класс .is-page-1 независимо от того, показывает ли запрашиваемая страница заархивированные результаты (.is-archive или .is-not-archive). Если отображаемая страница является архивом, тип просматриваемый архив (.is-? где? представляет тип архива (автор, категория, дата, тег)) Например .is-author - ярлык просматриваемого архива (.is -? -! где? - тип архива и! - это ярлык архива) Например, категория с ярлыком «без категории» будет иметь class .is-category-uncategorized идентификатор просматриваемого архива (.is -? - # где? - тип архива, а # - идентификатор архива. ) Например, категория с идентификатором «1» будет иметь класс .is-category-1. Как далеко вниз по странице просмотрщик прокрутил страницу в пикселях, или в процентах от высоты окна просмотра, или в процентах от высоты документа. Используйте эти классы в своем стиле, чтобы обеспечить лучший просмотр для ваших зрителей. Настраиваемые классы тела Создайте свои собственные классы тела, добавив свой PHP-код в раздел «Настраиваемые классы тела». Вот пример. Не уверен, зачем нам это нужно, но предположим, что мы хотим сделать какой-то собственный стиль, когда страница отображается для кого-то, кто может управлять параметрами WordPress. Мы можем ввести что-то вроде: if (current_user_can ('manage_options')) $ classes [] = 'user-can-manage-options'; Затем мы можем использовать квалификатор body.user-can-manage-options в нашем стиле CSS. Пример Предположим, у вас есть большое верхнее поле h1, которое вы хотите удалить на мобильных устройствах, чтобы избежать большого количества белого пространства. После активации плагина wp247-body-classes и указания, что желателен класс .is-mobile, все, что вам нужно сделать, это добавить эту строку в свой CSS: body.is-mobile h1 {margin-top: 0; } Предположим, у вас есть липкий заголовок, но вы хотите уменьшить его, динамически уменьшая верхнее и нижнее отступы с 25 пикселей до 5 пикселей по мере того, как средство просмотра прокручивает страницу вниз на основе 20-пиксельного приращения прокрутки до 80 пикселей прокрутки: Установите параметр прокрутки классов тела WP247 на «Прокрутку по пикселям» с шагом 10 пикселей и ограничением 80 пикселей, а затем добавьте в свой CSS следующий текст: body.is-scroll-20-px header {padding-top: 20px; padding-bottom: 20 пикселей; } body.is-scroll-40-px header {padding-top: 15px; padding-bottom: 15 пикселей; } body.is-scroll-60-px header {padding-top: 10px; padding-bottom: 10 пикселей; } body.is-scroll-max-px header {padding-top: 5px; padding-bottom: 5 пикселей; }

Автор: wp247

Версия: 2.0.1