Розробка особистого кабінету WordPress

за Ніколаєнко Максим · Опубліковано Березень 3, 2014 · Оновлено Серпень 7, 2018

Сьогодні я хочу поговорити про те, як все-таки вирішити проблему створення особистого кабінету в WordPress. Цей урок не ідеальний варіант, але для прикладу думаю вам буде достатньо, щоб зрозуміти, як робити правильно і що для цього треба.

Перше, що нам потрібно, це навчитися виводити дані, які зберігаються в панелі адміністратора, а зробити це дуже просто, як і все, що робиться в чудовій системі управління сайтом WordPress.

Для початку необхідно в папці теми /wp-content/themes/{папка теми}/ створити файл шаблону, назвемо її так page-user-profile.php. Для того, щоб шаблон почав працювати, необхідно правильно створити базову структуру. Я пропоную створити наступну структуру в самому верху створеного файлу:

<?php
/**
 * Ім'я шаблону: User Profile
 *
 * Allow users to update their profiles from Frontend.
 *
 */

/* Get user info. */

Нижче коментаря /* Get user info. */ додаємо код виведення даних:

	<стіл>
		<тр>
			<клас td="avatar">
				<?php echo get_avatar( $current_user->ID, 60 ); ?> 
			</тд>
			<клас td="short_user_info">
				<?php
				echo '<h2>'.$current_user->user_firstname.' '.$current_user->user_lastname."</h2>\п";
				луна '<b>Сайт:</b> <a href="'.$current_user->user_url"." ціль="_Порожній">'.$current_user->user_url."</a><Бр />\п";

				луна "<Бр />";
				?>
			</тд>
		</тр>
	</стіл>
	<?php echo "<Бр /><b>Биография:</b> \п<blockquote>".$current_user->user_description."</blockquote>\п"; ?>

Після додавання зберігаємо файл. Заходимо в Панель Адміністратора -> Створюємо нову сторінку – > Вибираємо шаблон для виведення даних.

Після виведення вибору шаблону та публікації сторінки натискаємо на кнопку [Переглянути зміни]. У вас на екрані буде картина приблизно такого вигляду:

Відмінно, тепер дані у нас виведені і думаю слід детальніше розглянути, що конкретно було нами зроблено і які при цьому функції використовувалися..

get_avatar( $current_user->ID, 60 ) – Виводить аватар поточного користувача у розмірі 60 на 60 пікселів. Якщо у вас як і у мене аватар просто сплющило, то це можна легко виправити простим перекриттям стилів для даного зображення наступного виду в стилях теми просто додаємо .avatar img{ width: auto !important; }.

Звідки я брав ось такі стоки та інші подібні:

$current_user->user_firstname
$current_user->user_lastname

Щоб стало зрозуміло буде достатньо подивитися на таку картинку зроблену мною проінспектувавши профіль адміністратора в панелі адміністратора.

Так само можна вивести будь-яке поле на сторінці профілю. Найчастіше виникає ще ситуація, коли необхідно додати поля для профілю. І цей момент вирішується дуже просто, звичайним додаванням коду до файлу functions.php, який знаходиться в папці теми.

функція add_social_contactmethod( $Контактні методи ) {
    // Add new ones
    $contactmethods['ВК'] = 'vk.com';
    $Контактні методи['ICQ'] = 'icq';
    $Контактні методи['скайп'] = 'skype';
    $Контактні методи["Твіттер"] = 'Твіттер';
    $Контактні методи["Фейсбук"] = "Фейсбук";

    // remove unwanted
  unset($Контактні методи['Мета']);
  unset($Контактні методи['Джаббер']);
  unset($Контактні методи['yim']);
  повернення $contactmethods;
}
add_filter('user_contactmethods','add_social_contactmethod',10,1);

Відмінно на цьому етапі ми налаштували виведення даних профілю, додали нові поля та прибрали деякі старі.

Редагуємо дані на стороні користувача

Небагато пошукавши в інтернеті, я знайшов цікаву структуру коду, за допомогою якої можна редагувати дані поточного користувача з фронтенду. Створимо новий файл для майбутнього шаблону та назвати його page-edit-user-profile.php.

У файлі створюємо вже знайому нам структуру, яка допоможе CMS побачити наш шаблон:

<?php
/**
 * Ім'я шаблону: Редагувати профіль користувача
 *
 * Allow users to update their profiles from Frontend.
 *
 */

Нижче додаємо код:

/* Get user info. */
глобальний $current_користувач, $wp_roles;
get_currentuserinfo();

/* Завантажте реєстраційний файл. */
require_once( ABSPATH . WPINC . '/реєстрація.php' );
$помилка = масив();    
/* Якщо профіль було збережено, оновити профіль. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_ПОСТ['Дія'] ) && $_ПОСТ['Дія'] == "користувач-оновлення" ) {

    /* Оновлення пароля користувача. */
    if ( !empty($_ПОСТ['pass1'] ) && !empty( $_ПОСТ['pass2'] ) ) {
        if ( $_ПОСТ['pass1'] == $_POST['pass2'] )
            wp_update_user( array( 'ID' => $current_user->ID, 'user_pass' => esc_attr( $_ПОСТ['pass1'] ) ) );
        else
            $error[] = __("Введені паролі не збігаються.  Ваш пароль не оновлено"., 'Профіль');
    }

    /* Оновлення інформації про користувача. */
    if ( !empty( $_ПОСТ['url'] ) )
        update_user_meta( $current_user->ID, 'user_url', esc_url( $_ПОСТ['url'] ) );
    if ( !empty( $_ПОСТ["електронна пошта"] ) ){
        if (!is_email(esc_attr( $_ПОСТ["електронна пошта"] )))
            $помилка[] = __("Електронна пошта, яку ви ввели, недійсна.  будь ласка, спробуйте ще раз"., 'Профіль');
        інакшеякщо(email_exists(esc_attr( $_ПОСТ["електронна пошта"] )) != $current_користувач->id )
            $помилка[] = __("Цей електронний лист вже використовується іншим користувачем.  спробуйте інший"., 'Профіль');
        ще{
            wp_update_user( array ('ID' => $current_user->ID, 'user_email' => esc_attr( $_ПОСТ["електронна пошта"] )));
        }
    }

    if ( !empty( $_ПОСТ['ім'я'] ) )
        update_user_meta( $current_user->ID, 'first_name', esc_attr( $_ПОСТ['ім'я'] ) );
    if ( !empty( $_ПОСТ['Прізвище'] ) )
        update_user_meta($current_user->ID, 'last_name', esc_attr( $_ПОСТ['Прізвище'] ) );
    if ( !empty( $_ПОСТ['опис'] ) )
        update_user_meta( $current_user->ID, 'опис', esc_attr( $_ПОСТ['опис'] ) );

    /* Redirect so the page will show updated info.*/
  /*I am not Author of this Code- Я не знаю чому, але це спрацювало для мене після зміни нижче лінії на if ( рахувати($помилка) == 0 ){ */
    if ( рахувати($помилка) == 0 ) {
        //action hook for plugins and extra fields saving
        do_action('edit_user_profile_update', $current_user->ID);
        wp_redirect( get_permalink() );
        вийти;
    }
}
?>

<?php if ( have_posts() ) : Хоча ( have_posts() ) : the_post(); ?>
    <ділення id="пост-<?php the_ID(); ?>">
        <клас div="запис вмісту">
            <?php the_content(); ?>
            <?php if ( !is_user_logged_in() ) : ?>
                    <клас р="Попередження">
                        <?php _e("Ви повинні увійти, щоб відредагувати свій профіль"., 'Профіль'); ?>
                    </стор><!-- .Попередження-->
            <?php інше : ?>
                <?php if ( рахувати($помилка) > 0 ) луна '<клас р="помилка">' . імплоду("<Бр />", $помилка) . '</стор>'; ?>
                <метод форми="пост" id="Додавач" дія="<?php the_permalink(); ?>">
                    <клас р="форма-ім'я користувача">
                        <мітка для="Ім'я"><?php _e('Ім'я', 'Профіль'); ?></label>
                        <вхідний клас="введення тексту" ім'я="Ім'я" type="text" id="Ім'я" value="<?php the_author_meta( 'first_name', $current_user->ID ); ?>" />
                    </стор><!-- .форма-ім'я користувача -->
                    <клас р="форма-ім'я користувача">
                        <мітка для="Прізвище"><?php _e('Прізвище', 'Профіль'); ?></label>
                        <вхідний клас="введення тексту" ім'я="Прізвище" type="text" id="Прізвище" value="<?php the_author_meta( 'last_name', $current_user->ID ); ?>" />
                    </стор><!-- .форма-ім'я користувача -->
                    <клас р="форма-електронна пошта">
                        <мітка для="електронною поштою"><?php _e("Електронна пошта *", 'Профіль'); ?></label>
                        <вхідний клас="введення тексту" ім'я="електронною поштою" type="text" id="електронною поштою" value="<?php the_author_meta( 'user_email', $current_user->ID ); ?>" />
                    </стор><!-- .форма-електронна пошта -->
                    <клас р="форма-url">
                        <мітка для="url"><?php _e('Веб-сайт', 'Профіль'); ?></label>
                        <вхідний клас="введення тексту" ім'я="url" type="text" id="url" value="<?php the_author_meta( 'user_url', $current_user->ID ); ?>" />
                    </стор><!-- .форма-url -->
                    <клас р="форма-пароль">
                        <мітка для="прохідний1"><?php _e('Пароль *', 'Профіль'); ?> </label>
                        <вхідний клас="введення тексту" ім'я="прохідний1" type="пароль" id="прохідний1" />
                    </стор><!-- .форма-пароль -->
                    <клас р="форма-пароль">
                        <мітка для="прохідний2"><?php _e('Повторити пароль *', 'Профіль'); ?></label>
                        <вхідний клас="введення тексту" ім'я="прохідний2" type="пароль" id="прохідний2" />
                    </стор><!-- .форма-пароль -->
                    <клас р="form-textarea">
                        <мітка для="опис"><?php _e('Біографічні відомості', 'Профіль') ?></label>
                        <ім'я текстової області="опис" id="опис" рядки="3" cols="50"><?php the_author_meta( 'опис', $current_user->ID ); ?></textarea>
                    </стор><!-- .форма-текстарея -->

                    <?php 
                        //action hook for plugin and extra fields
                        do_action('edit_user_profile',$current_user); 
                    ?>
                    <клас р="Форма-Надіслати">
                        <?php echo $referer; ?>
                        <ім'я введення="updateuser" type="submit" id="updateuser" клас="Кнопка "Надіслати" value="<?php _e('Оновлення', 'Профіль'); ?>" />
                        <?php wp_nonce_field( 'update-user' ) ?>
                        <ім'я введення="дія" type="hidden" id="дія" value="оновлення-користувача" />
                    </стор><!-- .форма-подача -->
                </форма><!-- #Аддузер -->
            <?php endif; ?>
        </див.><!-- .вступ-зміст -->
    </див.><!-- .hentry .post -->
    <?php endwhile; ?>
<?php інше: ?>
    <клас р="без даних">
        <?php _e("Вибачте, жодна сторінка не відповідала вашим критеріям"., 'Профіль'); ?>
    </стор><!-- .без даних -->
<?php endif; ?>

Після вставки коду необхідно, як і раніше, створити нову сторінку та привласнити їй шаблон Редагувати профіль користувача. Зберігаємо створену сторінку та натискаємо кнопку [Переглянути зміни]:

Якщо все зроблено правильно ви побачите таку форму редагування, вона має працювати. Виведення інших полів з панелі адміністратора реалізується схожим способом. Заходимо в панель та беремо ім'я поля, яке необхідно вивести.

Беремо ім'я поля для редагування WordPress

За аналогією з поданим кодом виводимо метадані автора:
<?php the_author_meta( ‘first_name’, $current_user->ID ); ?>

Залишилося одне завдання, це можливість редагувати аватар для автора, але на жаль WordPress блокує спроби редагування аватара з частини користувача з радістю прослухаю ваші пропозиції та ідеї по роботі з аватаром, хотілося б при цьому робити все правильно і працювати саме з API WordPress.

Продовження доопрацювань статті чекайте, можливо навіть напишу плагін на тему, щоб було легше працювати в нових проектах.