web-dev-qa-db-ja.com

Wordpressのログイン/登録ページをカスタマイズするにはどうすればいいですか？

私の質問は、WPのコアファイルを編集せずに、デフォルトのWordPressログインおよび登録ページをどのようにカスタマイズするかです。私はfunctions.phpコードのラインに沿ってもっと考えています。

誰かがチュートリアルか何かを見つけることによって私を助けてもらえますか？覚えておいて、私はWPコアファイルを編集したくない。ありがとうございます。

theme-developmentadminlogin
3
Jared

これはあなたが関数をコピーできるという私のfunctions.phpです。私のCSSは、明らかに早くまとめられていて、もっといいものになるかもしれません。私は今急いで打ち上げの段階にあります。しかし、あなたは関数を使うことができます。最初のものはスタイルを上書きするためにログインページのあなたの頭にcssを追加します。後の2つの関数はロゴリンクのurlとtitle属性を変更します。

 // LOGIN  - カスタムスタイル
関数my_login_style（）{
 echo '
 #login {
 background：なし。 
ボーダー：0。 
 box-shadow：0; 
 -moz-box-shadow：なし。/* Firefox */
 -webkit-box-shadow：なし。/* Safari、Chrome */
 box-shadow：なし。/* CSS3 */
} 
＃nav {
背景：なし。 
} 
フォーム{
  -  moz-box-shadow：0 4px 18px＃0b0b0b; 
 -webkit-box-shadow：0 4px 18px＃0b0b0b; 
 box-shadow：0 4px 18px＃0b0b0b; 
} 
 
＃ログインフォーム＃ログインフォーム、＃ログインフォーム＃登録フォーム、＃ログインフォーム＃lostpasswordform {
ボーダー：1px solid #fff; 
} 
＃.login h1 {[ [/]マージンボトム：10ピクセル; [。]] [。] [＃]＃ログインh1 a [：]幅：300ピクセル; 
高さ：85ピクセル; 
マージン：0 auto 31px; 
} 
 
＃ログインフォーム＃ログインフォーム＃ユーザーログイン、＃ログインフォーム＃ログインフォーム＃ユーザーフォーム、＃ログインフォーム＃登録フォーム＃ユーザーログイン、 ＃ログインフォーム＃登録フォーム#user_email、＃ログインフォーム＃lostpasswordform＃ユーザーログイン、＃ログインフォーム＃ログインフォーム＃ユーザーパス、＃ログインフォーム＃ログインフォーム#openid_identifier 
 {
 border：1px solid #aaa; 
] 
 
＃ログインフォーム。サブミット入力{
背景：＃2bab44 url​​（ "zhttp：//www.domain.com/site/themes/mytheme /img/login-button-gradient8.png "）left-top repeat-x！重要; 
 border：1px solid＃008717！重要です。 
 text-shadow：-1px -1px 0 rgba（0、0、0、0.3）; 
パディング：5px 20px。 
] 
 
 #login form。submit入力：hover {
背景：url（ "http://www.my.com/site/themes/my /img/login-button-gradient7.png "）left -24px繰り返し-x！重要; 
 border：1px solid＃2b8c35！重要です。 
 text-shadow：-1px -1px 0 rgba（0、0、0、0.3）; 
} 
 
 #login form。サブミット入力：アクティブ{
パディング：5px 20px;/*何らかの理由でここに必須*/
} 
 
 body.login p＃nav a {
色：＃888！重要; 
 text-shadow：なし; 
フォントの太さ：normal; 
文字の間隔：0; 
} 
 body.login p＃nav a：hover {[色：＃88eb86！重要; 
テキスト装飾：下線; 
} 
 
 .login #backtoblog a {
表示：なし; 
] 
 
 #login #login_error {
フォントサイズ：13px; 
フォントの太さ：標準; 
 ] text-shadow：なし; 
余白：-11px auto 0; 
パディング：12px; 
幅：275px; 
背景：＃ffb5b4; 
 ]：border：1px solid＃db5858; 
 -moz-border-radius：10px！重要な; 
 border-radius：5px; 
} 
 #login .message {
フォントの太さ：普通; 
色：#bbb; 
 text-shadow：なし; 
} 
 #user_pass、#user_login、#user_email {
 background：#fff; 
} 
 '; 
} 
 add_action（' login_head '、' my_login_style '）; 
 
 //// LOGIN - ログインページのロゴのリンクを変更するための関数
関数my_login_custom_site_url（$ url）{
 return get_bloginfo（ 'siteurl'）; //現在のブログのURLを返すurl 
} 
 add_filter（ "login_headerurl"、 "my_login_custom_site_url"）; 
 
 //// LOGIN  - ログインページのロゴのリンクタイトルを変更する機能（WordPressのスローガンを削除）
 function my_login_header_title（$ message）{
 return偽/ *現在のブログの説明を返す*/
} 
 add_filter（ "login_headertitle"、 "my_login_header_title"）;
5
Thompson

WP Coreを編集しなくても、add_action関数を使用してログイン関数に追加できます。

これはあなたのカスタムワードプレスログインを作成する方法を紹介するチュートリアルです： http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/

カスタムのワードプレスログインを作成できるプラグインもありますが、これと同じレベルのカスタマイズはできないと思います。

3
Evan Yeung

ここに良い答え： ログインページのロゴを変更するにはどうすればよいですか。

2
markratledge

私はこのコードが優れていると思います：

function login() {

    if( is_user_logged_in() ) {

        echo 'Bạn đã đăng nhập rồi ! có thể bạn muốn <a href="' . wp_logout_url( home_url() ) . '">đăng xuất</a> ?';

    } else { ?>

        <div id="login">

            <form method="post" action="<?php echo wp_login_url(); ?>" id="loginform" name="loginform">
                <p>
                    <label>Tên đăng nhập<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                </p>
                <p>
                    <label>Mật khẩu<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"> Tự động đăng nhập lần sau</label></p>
                <p class="submit">
                    <input type="submit" tabindex="100" value="Đăng nhập" 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="Tạo mật khẩu mới" href="<?php echo wp_lostpassword_url() ?>">Bạn quên mật khẩu?</a></p>

        </div>

    <?php }

}

そして今、あなたのテンプレートのheader.phpにこのコードを追加してください：

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

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

} else {

    // add more or display home page 

}

それからあなたはよりよいログイン画面を見るでしょう。

2
user3750

これは、非常に知識豊富なWP開発者によって最近公開された徹底的なチュートリアルです： http://digwp.com/2010/12/login-register-password-code/

デモ： http://digwp.com/custom-login-demo/ /

更新

中核となるWP開発者の1人が、ログイン画面のロゴのカスタマイズに関するこのチュートリアルを公開しました。

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

1
joelhaus