Вставьте модальное окно при первом входе пользователя

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

Пытаюсь создать модальное окно приветствия для пользователей, впервые входящих в мою multisite сеть. Я использую код из этого урока https://wp-mix.com/wordpress-first-user-login/. Я вижу, как мета-данные пользователя обновляются в базе данных, но код модального окна не вставляется, когда он обернут в эту функцию. Код модального окна работает в другом месте.

Подозреваю, что это связано с добавлением функции внутри другой функции или с приоритетом. Но не знаю, с чего начать.

/**
 * Установить мета-данные пользователя.
 */
function fyc_register_add_meta( $user_id ) {
    add_user_meta( $user_id, '_new_user', '1' );
}
add_action( 'user_register', 'fyc_register_add_meta' );

/**
 * Загружает всплывающее окно при первом входе.
 */
function shapeSpace_first_user_login($user_login, $user) {

    $new_user = get_user_meta( $user->ID, '_new_user', true );

        if ( $new_user ) {

        update_user_meta( $user->ID, '_new_user', '0' );

        /**
         * Встраиваем модальное окно в подвал
         */
        function fsc_display_modal_first_login() { ?>

            <div class="welcome-modal">
                <header>
                    <h1>Добро пожаловать!</h1>
                </header>
            </div>

            <?php
        }
        add_action( 'in_admin_footer', 'fsc_display_modal_first_login' );
    }
}
add_action( 'wp_login', 'shapeSpace_first_user_login', 10, 2 );

Проблема в том, что wp_login вызывается в конце функции wp_signon(). Но это еще не конец процесса входа пользователя. После этого происходит перенаправление (чтобы установленный во время входа файл cookie авторизации мог быть прочитан). В результате пользователь оказывается на новой странице, и ваш нижний колонтитул никогда не срабатывает. Так как написано, это никогда не сработает (надеюсь, понятно почему).

Вы можете просто использовать существующую логику с действием in_admin_footer. Ваша логика на самом деле не должна определять, завершает ли пользователь вход или нет, потому что после того, как они впервые входят, мета-данные меняются.

Это должно решить проблему:

/**
 * Установить мета-данные пользователя.
 */
function fyc_register_add_meta( $user_id ) {
    add_user_meta( $user_id, '_new_user', '1' );
}
add_action( 'user_register', 'fyc_register_add_meta' );

/**
 * Загружает всплывающее окно при первом входе.
 */
function shapeSpace_first_user_login($user_login, $user) {

    $new_user = get_user_meta( $user->ID, '_new_user', true );

    if ( $new_user ) {

    update_user_meta( $user->ID, '_new_user', '0' ); ?>

        <div class="welcome-modal">
            <header>
                <h1>Добро пожаловать!</h1>
            </header>
        </div>

    <?php }
}
add_action( 'in_admin_footer', 'fsc_display_modal_first_login' );

Ну, понадобилось немного поэкспериментировать и устранить неполадки, но я это исправил. Вторая функция не приняла переданные аргументы, поэтому я в конечном итоге использовал get_current_user_id() для обновления статуса входа пользователя.

(И решил подключить файл JS для запуска модального окна).

function fsc_new_user( $user_login, $user ) {
    if ( $new_user = get_user_meta( $user->id, '_new_user', true ) ) {
        // Они входили ранее, устанавливаем в 0.
        update_user_meta( $user->id, '_new_user', '0' );
    } else {
        // Первый вход, устанавливаем в 1.
        update_user_meta( $user->id, '_new_user', 1 );
    }
}
add_action( 'wp_login', 'fsc_new_user', 10, 2 );

function fsc_display_modal_first_login() {

    if ( is_user_logged_in() ) {
        // Получаем текущее общее количество входов (должно быть как минимум 1).
        $new_user = get_user_meta( get_current_user_id(), '_new_user', true );
        // Если это 1, значит, это их первый вход, показываем модальное окно.
        if ( '1' === $new_user ) {

            wp_enqueue_script( 'modal', plugin_dir_url( __FILE__ ) . 'js/flaunt-sites-core-welcome-modal.js', array(), 20190419, true );
            update_user_meta( get_current_user_id(), '_new_user', '0' );

        }
    }
}
add_action( 'admin_footer', 'fsc_display_modal_first_login' );

Ответ или решение

Для разработчиков, работающих с сетями Multisite в WordPress, создание приветственного модального окна для новых пользователей при первой авторизации — это распространённая задача. В этом руководстве мы рассмотрим, как корректно внедрить такое модальное окно, опираясь на предоставленный код и устранив возникшие проблемы.

Шаг 1: Установка метаданных пользователя

Первым шагом будет добавление пользовательского метаданных для отслеживания новых пользователей. Ваша функция fyc_register_add_meta регистрирует метаданные при создании нового пользователя:

function fyc_register_add_meta( $user_id ) {
    add_user_meta( $user_id, '_new_user', '1' );
}
add_action( 'user_register', 'fyc_register_add_meta' );

Это код корректен и устанавливает метаданные _new_user в ‘1’ при регистрации пользователя.

Шаг 2: Проверка входа и обновление метаданных

В функции shapeSpace_first_user_login вам необходимо следить за состоянием входа пользователя. Соответствующая функция должна выглядеть следующим образом:

function fsc_new_user( $user_login, $user ) {
    $new_user = get_user_meta( $user->ID, '_new_user', true );
    if ( $new_user ) {
        update_user_meta( $user->ID, '_new_user', '0' ); // Устанавливаем метаданные на '0' при первом входе
    } else {
        update_user_meta( $user->ID, '_new_user', '1'); // В случае, если пользователь уже входил
    }
}
add_action( 'wp_login', 'fsc_new_user', 10, 2 );

Шаг 3: Отображение модального окна

Функция, отвечающая за отображение модального окна, должна быть добавлена в admin_footer, чтобы окно загружалось на панели администратора:

function fsc_display_modal_first_login() {
    if ( is_user_logged_in() ) {
        $new_user = get_user_meta( get_current_user_id(), '_new_user', true );
        // Если это первый вход, отображаем модальное окно
        if ( '1' === $new_user ) {
            echo '
            <div class="welcome-modal">
                <header>
                    <h1>Добро пожаловать!</h1>
                </header>
            </div>';

            // Сначала загружаем необходимые JS файлы
            wp_enqueue_script( 'modal', plugin_dir_url( __FILE__ ) . 'js/flaunt-sites-core-welcome-modal.js', array(), null, true );
            update_user_meta( get_current_user_id(), '_new_user', '0' ); // Обновляем метаданные после показа модального окна
        }
    }
}
add_action( 'admin_footer', 'fsc_display_modal_first_login' );

Важные моменты:

  1. Использование кода в правильных хуках: Используем wp_login и admin_footer, чтобы гарантировать работу как в панели администратора, так и в других частях консоли.
  2. Загрузка скриптов: Правильное подключение JS файлов позволяет управлять поведением модального окна. Убедитесь, что ваш файл JavaScript корректно работает с вашим HTML кодом.
  3. Состояние метаданных: Бенефит от использования метаданных в качестве флага мы видим в механизме управления отображением модального окна.

Такой подход обеспечит корректную работу модального окна и создаст приятный интерфейс для новых пользователей. Убедитесь, что тестируете функцию на различных уровнях пользователей в вашей сети Multisite, чтобы подтвердить её надёжность и корректность работы.

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

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