Вопрос или проблема
У меня есть Divi на моем сайте WordPress, и мой сайт отображается в Webview в приложениях для iOS и Android, которые используют пользовательские агенты ‘LMV iOS App’ и ‘LMV Android App’. Я написал немного кода, чтобы на строках и колонках (не могу заставить работать модули) была вкладка в Divi Builder под названием LMV App с 2 переключателями: один для Скрыть в iOS App и один для Скрыть в Android App. Я хочу сделать так, чтобы, если эти условия включены, содержимое в этой строке/секции/модуле было скрыто для этого конкретного пользовательского агента.
Надеюсь, это имеет смысл
Я размещу свой код ниже, если кто-то может помочь мне с этим, пожалуйста!
/**
* Расширяет визуальный редактор Divi, чтобы добавить пользовательские настройки LMV App.
*/
function lmv_custom_divi_editor() {
if (!is_user_logged_in()) {
return;
}
add_action('et_builder_framework_loaded', function() {
// Добавить основную вкладку
add_filter('et_builder_main_tabs', 'add_lmv_app_tab', 1);
// Добавить поля конфигурации для секции, строки и модуля
add_filter('et_pb_all_fields_unprocessed_et_pb_section', 'add_lmv_app_config');
add_filter('et_pb_all_fields_unprocessed_et_pb_row', 'add_lmv_app_config');
add_filter('et_pb_all_fields_unprocessed_et_pb_module', 'add_lmv_app_config');
// Фильтр, чтобы изменить вывод на основе пользовательского агента
add_filter('et_pb_module_output', 'conditionally_hide_module', 99, 3);
add_filter('et_pb_row_output', 'conditionally_hide_row', 99, 3);
add_filter('et_pb_section_output', 'conditionally_hide_section', 99, 3);
});
}
// Добавить вкладку LMV App
function add_lmv_app_tab($tabs) {
$tabs['lmv_app_tab'] = esc_html__('LMV App', 'lmv-rental');
return $tabs;
}
// Добавить поля конфигурации для секции, строки и модуля
function add_lmv_app_config($fields_unprocessed) {
// Проверить, является ли текущая вкладка вкладкой LMV App
if (isset($fields_unprocessed['lmv_app_settings'])) {
return $fields_unprocessed; // Вернуться, если поля уже установлены
}
$fields = [];
// Добавить переключатель для настроек iOS
$fields['lmv_ios_settings_label'] = [
'label' => esc_html__('Скрыть в iOS App', 'lmv-rental'),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => [
'off' => esc_html__('Нет', 'lmv-rental'),
'on' => esc_html__('Да', 'lmv-rental'),
],
'default' => 'off',
'description' => esc_html__('Скрыть это в iOS App.', 'lmv-rental'),
'tab_slug' => 'lmv_app_tab',
];
// Добавить переключатель для настроек Android
$fields['lmv_android_settings_label'] = [
'label' => esc_html__('Скрыть в Android App', 'lmv-rental'),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => [
'off' => esc_html__('Нет', 'lmv-rental'),
'on' => esc_html__('Да', 'lmv-rental'),
],
'default' => 'off',
'description' => esc_html__('Скрыть это в Android App.', 'lmv-rental'),
'tab_slug' => 'lmv_app_tab',
];
// Объединить новые поля с существующими полями
$fields_unprocessed = array_merge($fields_unprocessed, $fields);
return $fields_unprocessed;
}
// Условно скрыть содержимое модуля
function conditionally_hide_module($output, $props, $render_slug) {
if (strpos($_SERVER['HTTP_USER_AGENT'], 'LMV iOS App') !== false && !empty($props['lmv_ios_settings_label']) && $props['lmv_ios_settings_label'] === 'on') {
return ''; // Скрыть содержимое
}
return $output;
}
// Условно скрыть содержимое строки
function conditionally_hide_row($output, $props, $render_slug) {
if (strpos($_SERVER['HTTP_USER_AGENT'], 'LMV iOS App') !== false && !empty($props['lmv_ios_settings_label']) && $props['lmv_ios_settings_label'] === 'on') {
return ''; // Скрыть содержимое
}
return $output;
}
// Условно скрыть содержимое секции
function conditionally_hide_section($output, $props, $render_slug) {
if (strpos($_SERVER['HTTP_USER_AGENT'], 'LMV iOS App') !== false && !empty($props['lmv_ios_settings_label']) && $props['lmv_ios_settings_label'] === 'on') {
return ''; // Скрыть содержимое
}
return $output;
}
add_action('plugins_loaded', 'lmv_custom_divi_editor');
Я пробовал так много вариантов кода и не могу это понять
Ответ или решение
Применение пользовательских условий для скрытия контента в Divi
Введение
Веб-разработка в рамках платформы WordPress, особенно с использованием плагинов, таких как Divi, предоставляет разработчикам мощные инструменты для настройки пользовательского интерфейса и функциональности. В данной статье мы рассмотрим, как можно скрыть контент на сайте Divi в зависимости от специфических пользовательских агентов для мобильных приложений iOS и Android.
Задача
Существует необходимость создать настраиваемые условия для скрытия контента секций, рядов и модулей в Divi в зависимости от пользовательских агентов мобильных приложений. С помощью добавления пользовательского таба в Visual Builder Divi, вы сможете скрывать контент на основе активированных переключателей ("Hide in iOS App" и "Hide in Android App").
Решение
Для этого нам нужно модифицировать существующий код, добавив условия, которые проверят активированные переключатели и соответствующий пользовательский агент. Ваша задача также включает создание пользовательского интерфейса в настройки Divi, где вы сможете управлять этими параметрами.
Код
/**
* Расширяет возможности Visual Builder Divi, добавляя настраиваемые параметры LMV App.
*/
function lmv_custom_divi_editor() {
if (!is_user_logged_in()) {
return;
}
add_action('et_builder_framework_loaded', function() {
add_filter('et_builder_main_tabs', 'add_lmv_app_tab', 1);
add_filter('et_pb_all_fields_unprocessed_et_pb_section', 'add_lmv_app_config');
add_filter('et_pb_all_fields_unprocessed_et_pb_row', 'add_lmv_app_config');
add_filter('et_pb_all_fields_unprocessed_et_pb_module', 'add_lmv_app_config');
add_filter('et_pb_module_output', 'conditionally_hide_module', 99, 3);
add_filter('et_pb_row_output', 'conditionally_hide_row', 99, 3);
add_filter('et_pb_section_output', 'conditionally_hide_section', 99, 3);
});
}
// Добавление вкладки LMV App
function add_lmv_app_tab($tabs) {
$tabs['lmv_app_tab'] = esc_html__('LMV App', 'lmv-rental');
return $tabs;
}
// Добавление конфигурационных полей
function add_lmv_app_config($fields_unprocessed) {
if (isset($fields_unprocessed['lmv_app_settings'])) {
return $fields_unprocessed; // Если поля уже установлены, можно выходить
}
$fields = [];
// Переключатель для iOS
$fields['lmv_ios_settings_label'] = [
'label' => esc_html__('Скрыть в iOS App', 'lmv-rental'),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => [
'off' => esc_html__('Нет', 'lmv-rental'),
'on' => esc_html__('Да', 'lmv-rental'),
],
'default' => 'off',
'description' => esc_html__('Скрыть это в iOS App.', 'lmv-rental'),
'tab_slug' => 'lmv_app_tab',
];
// Переключатель для Android
$fields['lmv_android_settings_label'] = [
'label' => esc_html__('Скрыть в Android App', 'lmv-rental'),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => [
'off' => esc_html__('Нет', 'lmv-rental'),
'on' => esc_html__('Да', 'lmv-rental'),
],
'default' => 'off',
'description' => esc_html__('Скрыть это в Android App.', 'lmv-rental'),
'tab_slug' => 'lmv_app_tab',
];
return array_merge($fields_unprocessed, $fields);
}
// Условия для скрытия модуля
function conditionally_hide_module($output, $props, $render_slug) {
if (strpos($_SERVER['HTTP_USER_AGENT'], 'LMV iOS App') !== false && !empty($props['lmv_ios_settings_label']) && $props['lmv_ios_settings_label'] === 'on') {
return ''; // Скрыть контент
}
if (strpos($_SERVER['HTTP_USER_AGENT'], 'LMV Android App') !== false && !empty($props['lmv_android_settings_label']) && $props['lmv_android_settings_label'] === 'on') {
return ''; // Скрыть контент
}
return $output;
}
// Условия для скрытия строки
function conditionally_hide_row($output, $props, $render_slug) {
return conditionally_hide_module($output, $props, $render_slug); // Повторное использование логики
}
// Условия для скрытия секции
function conditionally_hide_section($output, $props, $render_slug) {
return conditionally_hide_module($output, $props, $render_slug); // Повторное использование логики
}
add_action('plugins_loaded', 'lmv_custom_divi_editor');
Объяснение кода
-
Добавление вкладки: Мы создаем новую вкладку в Divi Builder для пользовательских параметров LMV App. Это позволит управлять настройками видимости контента.
-
Конфигурация полей: Создаем два переключателя, чтобы управлять видимостью контента для приложений iOS и Android.
-
Проверка пользовательского агента: Используем
strpos
для проверки строки пользовательского агента на наличиеLMV iOS App
илиLMV Android App
. На основе этого, а также состояния переключателей, контент может быть скрыт. -
Универсальный подход: Для модулей, рядов и секций применяем одну и ту же логику, что делает код более оптимизированным.
Заключение
В данном руководстве мы рассмотрели, как с помощью дополнительного кода в Divi скрывать секции, ряды и модули на основе пользовательских условностей. Используя этот подход, вы можете создавать адаптивные интерфейсы для мобильных приложений, тем самым улучшая пользовательский опыт. Настройка будет полезна не только для настройки контента, но и для личного использования и бизнеса.