Скрытие контента в Divi с использованием пользовательских условий

Вопрос или проблема

У меня есть 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');

Объяснение кода

  1. Добавление вкладки: Мы создаем новую вкладку в Divi Builder для пользовательских параметров LMV App. Это позволит управлять настройками видимости контента.

  2. Конфигурация полей: Создаем два переключателя, чтобы управлять видимостью контента для приложений iOS и Android.

  3. Проверка пользовательского агента: Используем strpos для проверки строки пользовательского агента на наличие LMV iOS App или LMV Android App. На основе этого, а также состояния переключателей, контент может быть скрыт.

  4. Универсальный подход: Для модулей, рядов и секций применяем одну и ту же логику, что делает код более оптимизированным.

Заключение

В данном руководстве мы рассмотрели, как с помощью дополнительного кода в Divi скрывать секции, ряды и модули на основе пользовательских условностей. Используя этот подход, вы можете создавать адаптивные интерфейсы для мобильных приложений, тем самым улучшая пользовательский опыт. Настройка будет полезна не только для настройки контента, но и для личного использования и бизнеса.

Оцените материал
Добавить комментарий

Капча загружается...