Розробка особистого кабінету WordPress
Сьогодні я хочу поговорити про те, як все-таки вирішити проблему створення особистого кабінету в WordPress. Цей урок не ідеальний варіант, але для прикладу думаю вам буде достатньо, щоб зрозуміти, як робити правильно і що для цього треба.
Перше, що нам потрібно, це навчитися виводити дані, які зберігаються в панелі адміністратора, а зробити це дуже просто, як і все, що робиться в чудовій системі управління сайтом WordPress.
Для початку необхідно в папці теми /wp-content/themes/{папка теми}/ створити файл шаблону, назвемо її так page-user-profile.php. Для того, щоб шаблон почав працювати, необхідно правильно створити базову структуру. Я пропоную створити наступну структуру в самому верху створеного файлу:
|
1 2 3 4 5 6 7 8 9 |
<?php /** * Template Name: User Profile * * Allow users to update their profiles from Frontend. * */ /* Get user info. */ |
Нижче коментаря /* Get user info. */ додаємо код виведення даних:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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, який знаходиться в папці теми.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 побачити наш шаблон:
|
1 2 3 4 5 6 7 |
<?php /** * Template Name: Edit User Profile * * Allow users to update their profiles from Frontend. * */ |
Нижче додаємо код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
/* 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; ?> |
Після вставки коду необхідно, як і раніше, створити нову сторінку та привласнити їй шаблон Редагувати профіль користувача. Зберігаємо створену сторінку та натискаємо кнопку [Переглянути зміни]:
Якщо все зроблено правильно ви побачите таку форму редагування, вона має працювати. Виведення інших полів з панелі адміністратора реалізується схожим способом. Заходимо в панель та беремо ім'я поля, яке необхідно вивести.
За аналогією з поданим кодом виводимо метадані автора:
<?php the_author_meta( ‘first_name’, $current_user->ID ); ?>
Залишилося одне завдання, це можливість редагувати аватар для автора, але на жаль WordPress блокує спроби редагування аватара з частини користувача з радістю прослухаю ваші пропозиції та ідеї по роботі з аватаром, хотілося б при цьому робити все правильно і працювати саме з API WordPress.
Продовження доопрацювань статті чекайте, можливо навіть напишу плагін на тему, щоб було легше працювати в нових проектах.
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
