web-dev-qa-db-ja.com

カスタムログインフォーム

私はWordPressが初めてです。私は私のウェブサイトのヘッダーセクションにログインフォームを表示しようとしています。しかし、自分のディレクトリ内のすべてのファイルを見ると、非常に圧倒的であり、何かに触れるのは怖いです。

誰かがそのトピックに関する優れたチュートリアルを知っていますか、あるいはこの問題に何らかの光を当てたのでしょうか。

5
Javacadabra

ログインフォームは、ユーザー名とパスワードをwp-login.phpに送信する単純なHTMLフォームです。これがカスタムログインフォームを作成する最も簡単な方法です。

<?php
$redirect_to = '';
?>
<form name="loginform" id="loginform" action="<?php echo site_url( '/wp-login.php' ); ?>" method="post">
<p>Username: <input id="user_login" type="text" size="20" value="" name="log"></p>
<p>Password: <input id="user_pass" type="password" size="20" value="" name="pwd"></p>
<p><input id="rememberme" type="checkbox" value="forever" name="rememberme"></p>

<p><input id="wp-submit" type="submit" value="Login" name="wp-submit"></p>

<input type="hidden" value="<?php echo esc_attr( $redirect_to ); ?>" name="redirect_to">
<input type="hidden" value="1" name="testcookie">
</form>

1行ずつ:

  • $redirect_to:ユーザーが特別なページにリダイレクトするようにしたい場合は、ここにURLを挿入してください。 URLは、式の最後の隠しフィールドに挿入されます。
  • <form ... action="...">:データはwp-login.phpに送信されなければなりません。このファイルはあなたのWordPressインストールのルートにあります。 site_url()で正しいURLを作成してください(site_url()の詳細についてはコーデックスを参照してください)。メソッドはpostに設定する必要があります
  • Idがuser_loginのユーザー名の入力フィールド
  • IDがuser_passのパスワードの入力フィールド
  • [RememberMe]チェックボックスの入力フィールド(オプション)
  • 送信ボタン
  • ログイン後にユーザーをリダイレクトする必要がある場合は隠しフィールド(オプション)
  • テストクーキーの隠しフィールド(オプション、ただし便利です)

式を作成し、それをcssでスタイルします。それで全部です。

9
Ralf912
  1. あなたの子テーマディレクトリ内にテンプレートファイルを作成しましょう。login.phpとしましょう。このファイル内にログインフォームを置きます。

    <form action="" method="post">
      <div>
        User name: <input name="log" type="text" />
      </div>
      <div>
        Password: <input name="pwd" type="password" />
      </div>
      <div>
        <input type="submit" value="Login" />
        <input type="hidden" name="action" value="my_login_action" />
      </div>
    </form>
    

    あなたが望むものは何でも変更してください、しかしあなたは名前属性をそのままにしておくべきです

  2. あなたの子テーマディレクトリ内にfunctions.phpファイルを作成するか、もしあればそれを編集してください。あなたはその中のログイン要求を満たすでしょう:

    add_action('init', function(){
    
      // not the login request?
      if(!isset($_POST['action']) || $_POST['action'] !== 'my_login_action')
        return;
    
      // see the codex for wp_signon()
      $result = wp_signon();
    
      if(is_wp_error($result))
        wp_die('Login failed. Wrong password or user name?');
    
      // redirect back to the requested page if login was successful    
      header('Location: ' . $_SERVER['REQUEST_URI']);
      exit;
    });
    
  3. header.phpテンプレートのコピーを作成し、それをあなたの子テーマフォルダに入れて編集します。ログインフォームを表示する場所にこのコードを追加します。

    <?php
    
     if(!is_user_logged_in()){
       get_template_part('login');
     }
    
    ?>
    
7
onetrickpony

また、WPテーマで元のログインフォームをカスタマイズすることもできます。

できることがいくつかあります。 1)あなたはWpのロゴを変更することができます:

<?php
//Custom logo
function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_url').'/images/logo.png) !important; }
    </style>';
}

add_action('login_head', 'my_custom_login_logo');

// Custom login

function my_login_logo_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
    return '[url]';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

?>

2)WP loginの揺れを取り除くことができます。

<?php

function my_login_head() {
    remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

?>

3)ログインエラーを取り除きます。

<?php

add_filter('login_errors',create_function('$a', "return null;"));

?>

重要:これらのコードの一部をfunctions.phpに使用しないでください。最初に (例my_custom_login_logo.phpmy_login_head.phpおよびremove_login_errors.phpのようにfunctionを記述する名前を付けてそれらのうちの3つを作成してからfunctions.php e.xに3つの関数を呼び出します。 require_once('includes/secure/my_custom_login_logo.php');require_once('includes/secure/my_login_head.php');require_once('includes/secure/remove_login_errors.php');

含まれていて安全で、フォルダです。私はあなたを助けたいと思っています。ようこそ。

2
user24259

wp-login.phpにコードを追加する。下記のフォームコード。

    <form id="loginform" action="<?php echo site_url( '/wp-login.php' ); ?>" method="POST">

                            <h5><strong>ÜYE GİRİŞİ</strong>  <a href="uyeol.html"><i class="fa fa-gear"></i> ÜYELİK OLUŞTUR.</a></h5>
                            <div class="newsletter-form">

                                <div class="newsletter-email">
                                    <input id="user_login" type="text" name="grs_tcno" value="" placeholder="Kullanıcı">
                                </div>

                                <div class="newsletter-Zip">
                                    <input id="user_pass" type="password" name="grs_sifre" value="" placeholder="Parola">
                                </div>

                                <div class="newsletter-submit">
                                    <input id="wp-submit" type="submit" name="girisyap" value="login">
                                    <input type="hidden" value="<?php echo esc_attr( $redirect_to ); ?>" name="redirect_to">
                                      <input type="hidden" value="1" name="testcookie">
                                    <i class="icons icon-right-thin"></i>
                                </div>

                            </div>
0
Mehmet Şar