Как настроить страницы входа и регистрации в WordPress?

28 янв. 2011 г., 04:09:40
Просмотры: 15.5K
Голосов: 3

Мой вопрос заключается в том, как настроить стандартные страницы входа и регистрации WordPress без изменения файлов ядра WP. Я рассматриваю вариант с использованием кода в functions.php.

Может ли кто-нибудь помочь мне, найдя руководство или что-то подобное? Помните, я не хочу редактировать файлы ядра WP. Спасибо!

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

Вот мой файл functions.php, из которого вы можете скопировать функции. Мой CSS, признаюсь, был написан быстро и мог бы быть аккуратнее. Сейчас я нахожусь в фазе срочного запуска. Но вы можете использовать функции. Первая добавляет CSS в head страницы входа, чтобы переопределить стили. Следующие две функции изменяют URL и атрибут title ссылки логотипа.

// ВХОД - пользовательские стили  
function my_login_style() {  
    echo '  
    #login {  
        background:none;  
        border:0;  
        box-shadow:0;  
        -moz-box-shadow: none; /* Firefox */  
        -webkit-box-shadow: none; /* Safari, Chrome */  
        box-shadow: none; /* CSS3 */  
        }  
    #nav {  
        background:none;  
        }  
    form {  
        -moz-box-shadow: 0 4px 18px #0b0b0b;  
        -webkit-box-shadow: 0 4px 18px #0b0b0b;
        box-shadow: 0 4px 18px #0b0b0b;
        }

    #login form#loginform, #login form#registerform, #login form#lostpasswordform {
        border: 1px solid #fff;
        }

    #login h1 {
        margin-bottom: 10px;
        }

    #login h1 a {
        width:300px;
        height:85px;
        margin: 0 auto 31px;
        }

    #login form#loginform #user_login, #login form#loginform #user_email, #login form#registerform #user_login, #login form#registerform #user_email, #login form#lostpasswordform #user_login, #login form#loginform #user_pass, #login form#loginform #openid_identifier   
        {  
        border: 1px solid #aaa;  
        }  

    #login form .submit input {  
        background: #2bab44 url("http://www.domain.com/site/themes/mytheme/img/login-button-gradient8.png") left top repeat-x !important;   
        border: 1px solid #008717 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        padding: 5px 20px;  
        }  

    #login form .submit input:hover {   
        background: url("http://www.my.com/site/themes/my/img/login-button-gradient7.png") left -24px repeat-x !important;   
        border: 1px solid #2b8c35 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        }  

    #login form .submit input:active {
        padding: 5px 20px; /* требуется здесь по какой-то причине */
        }

    body.login p#nav a {
        color: #888 !important;
        text-shadow:none;
        font-weight:normal;
        letter-spacing:0;
        }
    body.login p#nav a:hover {
        color: #88eb86 !important;
        text-decoration: underline;
        }   

    .login #backtoblog a {
        display:none;
        }

    #login #login_error {
        font-size: 13px;
        font-weight: normal;
        text-shadow: none;
        margin: -11px auto 0;
        padding: 12px;
        width: 275px;
        background: #ffb5b4;
        border: 1px solid #db5858;
        -moz-border-radius: 10px !important;
        border-radius: 5px;
        }   

    #login .message {
        font-weight: normal;
        color: #bbb;
        text-shadow: none;
        }
    #user_pass, #user_login, #user_email {
        background: #fff;   
        }   
    ';
    }
    add_action('login_head', 'my_login_style');

//// ВХОД - функция для изменения ссылки логотипа на странице входа  
function my_login_custom_site_url($url) {  
    return get_bloginfo('siteurl'); // возвращает текущий URL блога WordPress  
    }  
    add_filter("login_headerurl","my_login_custom_site_url");  

//// ВХОД - функция для изменения заголовка ссылки логотипа на странице входа (удаляет слоган WordPress)  
function my_login_header_title($message) {  
    return False; /* возвращает описание текущего блога */  
    }  
    add_filter("login_headertitle","my_login_header_title");  
28 янв. 2011 г. 06:40:17
0

Вы можете использовать функцию add_action, чтобы расширить функционал входа без необходимости редактировать ядро WordPress.

Вот руководство, которое покажет вам, как создать свой собственный вход в WordPress: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/

Также существуют плагины, которые могут создавать кастомные страницы входа, но я считаю, что они не достигают такого же уровня кастомизации, как этот метод.

28 янв. 2011 г. 06:19:06
0
28 янв. 2011 г. 06:19:03
0

Я думаю, этот код лучше:

function login() {

    if( is_user_logged_in() ) {

        echo 'Вы уже авторизованы! Возможно, вы хотите <a href="' . wp_logout_url( home_url() ) . '">выйти</a>?';

    } else { ?>

        <div id="login">

            <form method="post" action="<?php echo wp_login_url(); ?>" id="loginform" name="loginform">
                <p>
                    <label>Имя пользователя<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                </p>
                <p>
                    <label>Пароль<br>
                    <input type="password" tabindex="20" size="20" value="" class="input" id="user_pass" name="pwd"></label>
                </p>
                <p class="forgetmenot"><label><input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme"> Запомнить меня</label></p>
                <p class="submit">
                    <input type="submit" tabindex="100" value="Войти" class="button-primary" id="wp-submit" name="wp-submit">
                    <input type="hidden" value="<?php bloginfo( 'url' )?>" name="redirect_to">
                    <input type="hidden" value="1" name="testcookie">
                </p>
            </form>

            <p id="nav"><?php wp_register( '', '' ); ?> | <a title="Создать новый пароль" href="<?php echo wp_lostpassword_url() ?>">Забыли пароль?</a></p>

        </div>

    <?php }

}

Теперь добавьте этот код в header.php вашего шаблона:

if( $_GET['msv'] == 'login' ){

    login();
    get_sidebar();
    get_footer();

} else {

    // добавить что-то еще или отобразить главную страницу

}

И тогда вы увидите улучшенный экран входа.

6 мар. 2011 г. 12:11:40
1

Вот подробный учебник, недавно опубликованный опытными разработчиками WordPress: http://digwp.com/2010/12/login-register-password-code/

Демо: http://digwp.com/custom-login-demo/


Обновление

Один из основных разработчиков WordPress только что опубликовал этот учебник по настройке логотипа на экране входа:

http://markjaquith.wordpress.com/2011/02/01/customized-wordpress-login-screen/

28 янв. 2011 г. 08:38:45
Комментарии

Хотя, возможно, стоит отметить проблемы с XSS, поднятые одним из пользователей, который прокомментировал эту статью (и которые еще не были решены).

t31os t31os
28 янв. 2011 г. 12:50:26