Делаем штатными средствами wordpress закрытый раздел сайта.
Проверка авторизации
Делаем проверку авторизован ли посетитель
<?php if (is_user_logged_in()) : ?> выводим закрытый раздел <?php else: // если посетитель не авторизован ?> выводим предупреждение <?php get_template_part( 'logout-section' ); ?> <?php endif; ?>
Форма авторизации
<form name="loginform" id="loginform" action="<?php echo esc_url( home_url( '/' ) ); ?>/wp-login.php" method="post"> <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" placeholder="Логин" /> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" placeholder="Пароль" /> <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Запомнить меня</label></p> <button type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Войти"><i class="fa fa-sign-in" aria-hidden="true"></i> Войти</button> <input type="hidden" name="redirect_to" value="<?php echo esc_url( get_permalink() ); ?>" /> </form>
CSS стили формы авторизации
#loginform { background-color: whitesmoke; padding: 35px; box-shadow: 0px 0px 4px #000; border-radius: 4px; } #loginform #user_login, #loginform #user_pass { width: 100%; margin: 5px 0; padding: 10px; box-sizing: border-box; } .login-remember { line-height: 12px; margin: 10px; } #rememberme { float: left; margin-right: 5px; margin-left: 35px; } #loginform #wp-submit { width: 100%; margin: 10px 0; padding: 10px; box-sizing: border-box; background-color: #FFEB3B; cursor: pointer; } #post-content #loginform { background: none; width: 40%; margin: 0 auto; box-shadow: none; }
Ссылка на страницу автора
Сделаем (в шапке) блок для авторизации или для захода в личный кабинет для авторизованных пользователей
<div id="login-area"> <?php if ( is_user_logged_in() ) { ?> <?php global $current_user; get_currentuserinfo(); ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>"><p><i class="fa fa-sign-out" aria-hidden="true"></i> Выйти</p></a> <a href="<?php echo get_option('siteurl'); ?>/author/<?php echo $current_user->user_login; ?>" title="Личный кабинет"> <p><strong><?php echo $current_user->user_login; ?></strong> (<?php echo count_user_posts( $current_user->ID ); ?>)</p> <?php echo get_avatar($current_user->ID, 50); ?> </a> <?php } else {?> <a id="login-form-btn"><p><i class="fa fa-sign-in" aria-hidden="true"></i> Войти</p></a> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=register"><p><i class="fa fa-check-square-o" aria-hidden="true"></i> Авторизация</p></a> <?php }?> </div>
При нажатии на пункт Аторизация (если посетитель не авторизован) появляется всплывающее окно с формой авторизации:
<div class="popup login-form"> <p class="popup-title">Авторизация</p> <form name="loginform" id="loginform" action="<?php echo esc_url( home_url( '/' ) ); ?>/wp-login.php" method="post"> <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" placeholder="Логин" /> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" placeholder="Пароль" /> <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Запомнить меня</label></p> <button type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Войти"><i class="fa fa-sign-in" aria-hidden="true"></i> Войти</button> <input type="hidden" name="redirect_to" value="<?php echo esc_url( get_permalink() ); ?>" /> </form> </div>
CSS для данного всплывающего окна
.login-form { width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; }
Скрипт всплывающего окна с формой авторизации
//Всплывающая форма авторизации $('#login-form-btn').click(function() { $('.login-form').show(); $('.popup').removeClass('animated fadeOutDown'); $('.popup').addClass('animated fadeInDown'); $('#backfon').show(); $('#backfon').removeClass('fadeOut'); $('#backfon').addClass('animated fadeIn'); });