Как создать страницу редактирования профиля для пользователей?

Question

Как создать страницу редактирования профиля для пользователей?

14 февр. 2018 г., 09:01:52

Просмотры: 26.5K

Голосов: 4

Как создать страницу редактирования профиля для пользователей во фронтенде с пользовательскими полями в WordPress?

Примеры полей:

Поле для загрузки изображения

Текстовое поле

И так далее...

И как пользователь может сохранить эти поля?

Вот пример решения:


// Создаем шорткод для формы редактирования профиля
add_shortcode('edit_profile_form', 'custom_edit_profile_form');

function custom_edit_profile_form() {
    if (!is_user_logged_in()) {
        return 'Пожалуйста, войдите в систему для редактирования профиля.';
    }

    $current_user = wp_get_current_user();
    
    // Обработка отправки формы
    if ($_POST['update_profile']) {
        // Обновление текстового поля
        update_user_meta($current_user->ID, 'custom_text_field', sanitize_text_field($_POST['custom_text_field']));
        
        // Обработка загрузки изображения
        if ($_FILES['profile_image']) {
            require_once(ABSPATH . 'wp-admin/includes/image.php');
            require_once(ABSPATH . 'wp-admin/includes/file.php');
            require_once(ABSPATH . 'wp-admin/includes/media.php');
            
            $attachment_id = media_handle_upload('profile_image', 0);
            if (!is_wp_error($attachment_id)) {
                update_user_meta($current_user->ID, 'profile_image', $attachment_id);
            }
        }
    }

    // Получаем текущие значения
    $custom_text = get_user_meta($current_user->ID, 'custom_text_field', true);
    $profile_image_id = get_user_meta($current_user->ID, 'profile_image', true);

    // Форма HTML
    $form = '
    <form method="post" enctype="multipart/form-data">
        <div>
            <label>Текстовое поле:</label>
            <input type="text" name="custom_text_field" value="' . esc_attr($custom_text) . '">
        </div>
        
        <div>
            <label>Изображение профиля:</label>
            <input type="file" name="profile_image">
        </div>';

    if ($profile_image_id) {
        $form .= '<div>Текущее изображение:<br>' . wp_get_attachment_image($profile_image_id, 'thumbnail') . '</div>';
    }

    $form .= '
        <input type="submit" name="update_profile" value="Обновить профиль">
    </form>';

    return $form;
}

Чтобы использовать эту форму, добавьте шорткод [edit_profile_form] на любую страницу или в шаблон.

Этот код:

Создает форму редактирования профиля с текстовым полем и загрузкой изображения
Проверяет авторизацию пользователя
Безопасно обрабатывает и сохраняет данные
Показывает текущее изображение профиля, если оно существует

Для дополнительной безопасности рекомендуется добавить nonce-проверку и дополнительную валидацию полей.

Mostafa Norzade

373

профили

Комментарии

Кроме того, я использую плагин для редактирования профиля на фронтенде для формы редактирования профиля пользователя https://wordpress.org/plugins/frontend-edit-profile/

Adamu Malte

14 февр. 2018 г. 10:39:21

Для тех, кто ищет: этот плагин больше не доступен для скачивания с октября 2019 года. Он был удалён из-за нарушения правил, поэтому разработчик может обновить его в будущем.

jeh

6 авг. 2020 г. 22:53:09

Вы можете использовать плагин Profile Builder для этой цели. Вот шорткод для редактирования профиля на фронтенде: [wppb-edit-profile] https://wordpress.org/plugins/profile-builder/

Ravinder Kumar

14 февр. 2018 г. 09:19:46

Спасибо. Я хочу сделать это без плагина и персонализации

Mostafa Norzade

14 февр. 2018 г. 09:28:14

Хорошо, вы можете почерпнуть идеи отсюда: https://stackoverflow.com/questions/21312839/how-to-create-a-edit-profile-page-for-users-on-frontend-with-custom-fields-on-wo

Ravinder Kumar

14 февр. 2018 г. 09:31:36

Показать остальные 1 комментариев

Все ответы на вопрос

Комментарии

Спасибо. Эти изменения в админ-панели?

Mostafa Norzade

14 февр. 2018 г. 12:52:05

@Interactive - не могли бы вы подробнее объяснить редирект с отображением обновленной информации? У меня все работает, кроме того, что после отправки формы на странице отображаются старые данные в полях формы. Если обновить страницу, то появляется новая информация. Пользователь обновляется, как я проверил в админке. Спасибо!

stackingjasoncooper

15 окт. 2018 г. 20:07:22

Я добавил несколько исправлений безопасности и уточнил, что приведенный код — это ответ с WPSE, а не рекомендация плагина.

Tom J Nowell

28 мар. 2022 г. 18:57:54

Interactive 1.01K · Answer 1 · 2018-02-14T12:41:17Z

Это довольно масштабная задача, но в целом вы делаете следующее:

Добавляете дополнительные поля пользователя с помощью кода из этого ответа: Дополнительные поля пользователя

Изменяете их с помощью пользовательского шаблона:

/* Получаем информацию о пользователе. */
global $current_user, $wp_roles;
get_currentuserinfo();

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

<input name="first_name" type="text" id="first_name" value="<?php the_author_meta( 'first_name', $current_user->ID ); ?>" />

Затем сохраняете данные: сначала проверяете на пустоту, затем перезаписываете данные.

 if ( ! empty( $_POST['first_name'] ) )
    update_user_meta( $current_user->ID, 'first_name', sanitize_text_field( $_POST['first_name'] ) );

Затем перенаправляете пользователя, если данные сохранены:

 /* Перенаправляем, чтобы страница отобразила обновленную информацию. */
if ( count( $error ) == 0 ) {
    //хук для плагинов и сохранения дополнительных полей
    do_action('edit_user_profile_update', $current_user->ID);
    $location = get_user_meta( $current_user->ID, 'user_location', true );
    wp_safe_redirect( get_bloginfo('url') . str_replace( ' ','-', $location ) );
    exit;
}

Это работает именно так. Я сделал точно так же.