Разработка личного кабинета WordPress

- Николаенко Максим · Опубликовано 3 марта, 2014 · Обновлено 7 августа, 2018

Сегодня я хочу поговорить о том как все таки решить проблему создания личного кабинета в WordPress. Этот урок не идеальный вариант, но для примера думаю вам будет достаточно, чтобы понять, как делать правильно и что для этого надо.

Первое что нам нужно, это научиться выводить данные, которые хранятся в панели администратора, а сделать это очень просто, как и все что делается в замечательной системе управления сайтом WordPress.

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

<?php
/**
 * Template Name: User Profile
 *
 * Allow users to update their profiles from Frontend.
 *
 */

/* Get user info. */

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

	<table>
		<tr>
			<td class="avatar">
				<?php echo get_avatar( $current_user->ID, 60 ); ?> 
			</td>
			<td class="short_user_info">
				<?php
				echo '<h2>'.$current_user->user_firstname.' '.$current_user->user_lastname."</h2>\n";
				echo '<b>Сайт:</b> <a href="'.$current_user->user_url.'" target="_blank">'.$current_user->user_url."</a><br />\n";

				echo "<br />";
				?>
			</td>
		</tr>
	</table>
	<?php echo "<br /><b>Биография:</b> \n<blockquote>".$current_user->user_description."</blockquote>\n"; ?>

После добавления сохраняем файл. Заходим в Панель администратора -> Создаем новую страницу — > Выбираем шаблон для вывода данных.

После вывода выбора шаблона и публикации страницы нажимаем на кнопку [Просмотреть изменения]. У вас на экране будет картина примерно следующего вида:

Отлично, теперь данные у нас выведены и думаю следует подробнее рассмотреть что конкретно было нами сделано и какие при этом функции использовались.

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

Откуда я брал вот такие стоки и другие подобные:

$current_user->user_firstname
$current_user->user_lastname

Чтобы стало понятно будет достаточно посмотреть на вот такую картинку сделанную мной проинспектировав профиль администратора в панели администратора.

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

function add_social_contactmethod( $contactmethods ) {
    // Add new ones
    $contactmethods['vk'] = 'vk.com';
    $contactmethods['icq'] = 'icq';
    $contactmethods['skype'] = 'skype';
    $contactmethods['twitter'] = 'Twitter';
    $contactmethods['facebook'] = 'Facebook';

    // remove unwanted
  unset($contactmethods['aim']);
  unset($contactmethods['jabber']);
  unset($contactmethods['yim']);
  return $contactmethods;
}
add_filter('user_contactmethods','add_social_contactmethod',10,1);

Отлично на данном этапе мы настроили вывод данных профиля, добавили новые поля и убрали некоторые старые.

Редактируем данные на стороне пользователя

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

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

<?php
/**
 * Template Name: Edit User Profile
 *
 * Allow users to update their profiles from Frontend.
 *
 */

Ниже добавляем код:

/* Get user info. */
global $current_user, $wp_roles;
get_currentuserinfo();

/* Load the registration file. */
require_once( ABSPATH . WPINC . '/registration.php' );
$error = array();    
/* If profile was saved, update profile. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {

    /* Update user password. */
    if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) {
        if ( $_POST['pass1'] == $_POST['pass2'] )
            wp_update_user( array( 'ID' => $current_user->ID, 'user_pass' => esc_attr( $_POST['pass1'] ) ) );
        else
            $error[] = __('The passwords you entered do not match.  Your password was not updated.', 'profile');
    }

    /* Update user information. */
    if ( !empty( $_POST['url'] ) )
        update_user_meta( $current_user->ID, 'user_url', esc_url( $_POST['url'] ) );
    if ( !empty( $_POST['email'] ) ){
        if (!is_email(esc_attr( $_POST['email'] )))
            $error[] = __('The Email you entered is not valid.  please try again.', 'profile');
        elseif(email_exists(esc_attr( $_POST['email'] )) != $current_user->id )
            $error[] = __('This email is already used by another user.  try a different one.', 'profile');
        else{
            wp_update_user( array ('ID' => $current_user->ID, 'user_email' => esc_attr( $_POST['email'] )));
        }
    }

    if ( !empty( $_POST['first-name'] ) )
        update_user_meta( $current_user->ID, 'first_name', esc_attr( $_POST['first-name'] ) );
    if ( !empty( $_POST['last-name'] ) )
        update_user_meta($current_user->ID, 'last_name', esc_attr( $_POST['last-name'] ) );
    if ( !empty( $_POST['description'] ) )
        update_user_meta( $current_user->ID, 'description', esc_attr( $_POST['description'] ) );

    /* Redirect so the page will show updated info.*/
  /*I am not Author of this Code- i dont know why but it worked for me after changing below line to if ( count($error) == 0 ){ */
    if ( count($error) == 0 ) {
        //action hook for plugins and extra fields saving
        do_action('edit_user_profile_update', $current_user->ID);
        wp_redirect( get_permalink() );
        exit;
    }
}
?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>">
        <div class="entry-content entry">
            <?php the_content(); ?>
            <?php if ( !is_user_logged_in() ) : ?>
                    <p class="warning">
                        <?php _e('You must be logged in to edit your profile.', 'profile'); ?>
                    </p><!-- .warning -->
            <?php else : ?>
                <?php if ( count($error) > 0 ) echo '<p class="error">' . implode("<br />", $error) . '</p>'; ?>
                <form method="post" id="adduser" action="<?php the_permalink(); ?>">
                    <p class="form-username">
                        <label for="first-name"><?php _e('First Name', 'profile'); ?></label>
                        <input class="text-input" name="first-name" type="text" id="first-name" value="<?php the_author_meta( 'first_name', $current_user->ID ); ?>" />
                    </p><!-- .form-username -->
                    <p class="form-username">
                        <label for="last-name"><?php _e('Last Name', 'profile'); ?></label>
                        <input class="text-input" name="last-name" type="text" id="last-name" value="<?php the_author_meta( 'last_name', $current_user->ID ); ?>" />
                    </p><!-- .form-username -->
                    <p class="form-email">
                        <label for="email"><?php _e('E-mail *', 'profile'); ?></label>
                        <input class="text-input" name="email" type="text" id="email" value="<?php the_author_meta( 'user_email', $current_user->ID ); ?>" />
                    </p><!-- .form-email -->
                    <p class="form-url">
                        <label for="url"><?php _e('Website', 'profile'); ?></label>
                        <input class="text-input" name="url" type="text" id="url" value="<?php the_author_meta( 'user_url', $current_user->ID ); ?>" />
                    </p><!-- .form-url -->
                    <p class="form-password">
                        <label for="pass1"><?php _e('Password *', 'profile'); ?> </label>
                        <input class="text-input" name="pass1" type="password" id="pass1" />
                    </p><!-- .form-password -->
                    <p class="form-password">
                        <label for="pass2"><?php _e('Repeat Password *', 'profile'); ?></label>
                        <input class="text-input" name="pass2" type="password" id="pass2" />
                    </p><!-- .form-password -->
                    <p class="form-textarea">
                        <label for="description"><?php _e('Biographical Information', 'profile') ?></label>
                        <textarea name="description" id="description" rows="3" cols="50"><?php the_author_meta( 'description', $current_user->ID ); ?></textarea>
                    </p><!-- .form-textarea -->

                    <?php 
                        //action hook for plugin and extra fields
                        do_action('edit_user_profile',$current_user); 
                    ?>
                    <p class="form-submit">
                        <?php echo $referer; ?>
                        <input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'profile'); ?>" />
                        <?php wp_nonce_field( 'update-user' ) ?>
                        <input name="action" type="hidden" id="action" value="update-user" />
                    </p><!-- .form-submit -->
                </form><!-- #adduser -->
            <?php endif; ?>
        </div><!-- .entry-content -->
    </div><!-- .hentry .post -->
    <?php endwhile; ?>
<?php else: ?>
    <p class="no-data">
        <?php _e('Sorry, no page matched your criteria.', 'profile'); ?>
    </p><!-- .no-data -->
<?php endif; ?>

После вставки кода необходимо, как и раньше, создать новую страницу и присвоить ей шаблон Edit User Profile. Сохраняем созданную страницу и нажимаем кнопку [Просмотреть изменения]:

Если все сделано правильно вы увидите вот такую форму редактирования, она должна работать. Вывод других полей из панели администратора реализуется похожим способом. Заходим в панель и берем имя поля, которое необходимо вывести.

Берем имя поля для редактирования WordPress

По аналогии с представленным кодом выводим метаданные автора:
<?php the_author_meta( ‘first_name’, $current_user->ID ); ?>

Осталась одна задача, это возможность редактировать аватар для автора, но к сожалению WordPress блокирует попытки редактирования аватара с пользовательской части с радостью прослушаю ваши предложения и идеи по работе с аватаром, хотелось бы при всем при этом делать все правильно и работать именно с API WordPress.

Продолжение доработок статьи ждите, возможно даже напишу плагин на тему чтобы было легче работать в новых проектах.