Вопрос или проблема
Я создаю блоковую тему с несколькими глобальными стилевыми шаблонами (несколько файлов theme/styles/styleName.json).
Насколько я могу судить, WordPress, похоже, не внедряет имя выбранного глобального стиля в HTML страницы. Я надеялся найти что-то вроде:
<body class="has-global-style-styleName">
Но, похоже, это не так. Есть ли способ узнать эту информацию? Если нет, существует ли стратегия, которая может помочь собрать эту информацию?
В контексте, причина, по которой мне нужно это знать, заключается в том, что есть пользовательский стиль, использующий изображение границы. Мне нужно использовать разные изображения границы для глобального стиля X и глобального стиля Y.
Ответ или решение
Вопрос о том, как определить, какая глобальная стилизация активна на странице в блоковой теме WordPress, действительно актуален для разработчиков, создающих многофункциональные и настраиваемые темы. Хочу обсудить этот вопрос более подробно.
Изучение вопроса
Согласно вашей информации, в WordPress не существует встроенного механизма, который бы внедрял имя активной глобальной стилизации в HTML-код страницы. Это вызывает трудности, особенно когда вы хотите использовать различные настройки стилей, как, например, для вашего проекта с использованием разных изображений границ в зависимости от выбранной глобальной стилизации.
Возможные решения для определения активной глобальной стилизации
-
Использование функций WordPress:
Хотя в HTML-коде отсутствует явная информация о текущих глобальных стилях, вы можете использовать функции WordPress для получения данных о выбранных стилях. Например, с помощью функцииget_theme_mod()можно получить настройки из пользовательского интерфейса тем, которые сохраняются в базе данных:$active_global_style = get_theme_mod('global_style_setting_name');Разумеется, нужно заменить
'global_style_setting_name'на актуальное имя настройки, соответствующее вашим глобальным стилям. -
JavaScript на стороне клиента:
Если вы не можете получить нужную информацию на серверной стороне, вы можете использовать JavaScript для считывания классов элемента. Например, убедитесь, что вы добавляете необходимые классы к HTML-кодам в зависимости от выбранной стилизации. Следующий код может проанализировать классы тела страницы:const bodyClasses = document.body.classList; if (bodyClasses.contains('is-global-style-x')) { // Применить стиль для глобального стиля X } else if (bodyClasses.contains('is-global-style-y')) { // Применить стиль для глобального стиля Y } -
Кастомизация темы через пользовательские настройки:
Вы также можете создать пользовательские настройки в панели администратора WordPress, позволяющие пользователю выбирать активный стиль. Эти настройки можно использовать для управления стилем страницы.
Стратегия стилизации
Чтобы собрать нужную информацию о глобальных стилях и применить соответствующий стиль к вашему элементу (например, границе), можно использовать комбинацию подходов из вышеописанных.
-
Создайте настраиваемую опцию в вашей теме, которая позволит пользователям выбирать глобальную стилизацию. Например, это можно сделать с помощью
customizer. -
Добавьте необходимые классы к элементам на основе выбора пользователя.
-
Используйте JavaScript или PHP для применения соответствующего класса к телу документа, что поможет вам визуализировать нужный стиль на странице.
Заключение
Ваша задача может быть решена путем использования комбинации методов, включая функции WordPress, JavaScript и пользовательские настройки. Хотя в текущей архитектуре WordPress нет прямого способа узнать активную глобальную стилизацию, вышеизложенные подходы дадут вам возможность эффективно адаптировать стили вашего блока к различным условиям.
Это требование требует некоторого дополнительного усилия, но при правильном подходе оно вполне осуществимо. Надеюсь, данная информация окажется для вас полезной и поможет создать более адаптивную и функциональную тему для вашего проекта.