ウェブサイトのフロントエンドにWordPressユーザー登録フォームを表示するにはどうすればよいですか？

この記事は、独自のフロントエンドレジスタ/ログインを作成する方法に関する優れたチュートリアルを提供します./パスワードフォームを復元します.

またはプラグインをお探しの場合は、以前にこれらを使用したことがあるので、お勧めします:

• Ajaxログイン/登録
• Ajaxでログイン

this Article provides a greate tutorial on how to create you own frontend register/login/restore password forms.

or if you are looking for a plugin then i've used these before and can recomend them:

• Ajax Login/Register
• Login With Ajax

少し前に、フロントエンド側にカスタマイズされた登録フォームを表示するWebサイトを作成しました.このウェブサイトはもう公開されていませんが、ここにいくつかのスクリーンショットがあります.

これが私が従ったステップです:

1)すべての訪問者が[設定]> [一般]> [メンバーシップ]オプションを使用して新しいアカウントをリクエストできるようにします.登録ページがURL/wp-login.php?action=register

2)サイトのフロントエンドのように見えるように登録フォームをカスタマイズします.これはもっとトリッキーで、使用しているテーマによって異なります.

これが21の例です:

 // include theme scripts and styles on the login/registration page
add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles');

// remove admin style on the login/registration page
add_filter( 'style_loader_tag', 'user16975_remove_admin_css', 10, 2);
function user16975_remove_admin_css($tag, $handle){
    if ( did_action('login_init')
    && ($handle == 'wp-admin' || $handle == 'buttons' || $handle == 'colors-fresh'))
        return "";

    else return $tag;
}

// display front-end header and footer on the login/registration page
add_action('login_footer', 'user16975_integrate_login');
function user16975_integrate_login(){
    ?><div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>

            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                    <?php get_search_form(); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
        </header><!-- #masthead -->

        <div id="main" class="site-main">
    <?php get_footer(); ?>
    <script>
        // move the login form into the page main content area
        jQuery('#main').append(jQuery('#login'));
    </script>
    <?php
}
 

次に、テーマのスタイルシートを変更して、フォームが希望どおりに表示されるようにします.

3)表示されるメッセージを微調整することで、フォームをさらに変更できます:

 add_filter('login_message', 'user16975_login_message');
function user16975_login_message($message){
    if(strpos($message, 'register') !== false){
        $message = 'custom register message';
    } else {
        $message = 'custom login message';
    }
    return $message;
}

add_action('login_form', 'user16975_login_message2');
function user16975_login_message2(){
    echo 'another custom login message';
}

add_action('register_form', 'user16975_tweak_form');
function user16975_tweak_form(){
    echo 'another custom register message';
}
 

4)フロントエンド登録フォームが必要な場合は、登録ユーザーがログインしたときにバックエンドが表示されないようにする必要があります.

 add_filter('user_has_cap', 'user16975_refine_role', 10, 3);
function user16975_refine_role($allcaps, $cap, $args){
    global $pagenow;

    $user = wp_get_current_user();
    if($user->ID != 0 && $user->roles[0] == 'subscriber' && is_admin()){
        // deny access to WP backend
        $allcaps['read'] = false;
    }

    return $allcaps;
}

add_action('admin_page_access_denied', 'user16975_redirect_dashbord');
function user16975_redirect_dashbord(){
    wp_redirect(home_url());
    die();
}
 

多くのステップがありますが、結果はここにあります！

I made a website some time ago that was displaying a customized registration form on the front end side. This website is not live anymore but here are some screenshots.

Here are the steps I have followed:

1) Activate the possibility for all visitors to request a new account via Settings > General > Membership option. The registration page now appears at the URL /wp-login.php?action=register

2) Customize the registration form so that it looks like your site front-end. This is more tricky and depends on the theme you are using.

Here is an example with twentythirteen :

// include theme scripts and styles on the login/registration page
add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles');

// remove admin style on the login/registration page
add_filter( 'style_loader_tag', 'user16975_remove_admin_css', 10, 2);
function user16975_remove_admin_css($tag, $handle){
    if ( did_action('login_init')
    && ($handle == 'wp-admin' || $handle == 'buttons' || $handle == 'colors-fresh'))
        return "";

    else return $tag;
}

// display front-end header and footer on the login/registration page
add_action('login_footer', 'user16975_integrate_login');
function user16975_integrate_login(){
    ?><div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>

            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                    <?php get_search_form(); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
        </header><!-- #masthead -->

        <div id="main" class="site-main">
    <?php get_footer(); ?>
    <script>
        // move the login form into the page main content area
        jQuery('#main').append(jQuery('#login'));
    </script>
    <?php
}

Then modify the theme stylesheet to make the form appear as you want.

3) You can further modify the form by tweaking the displayed messages :

add_filter('login_message', 'user16975_login_message');
function user16975_login_message($message){
    if(strpos($message, 'register') !== false){
        $message = 'custom register message';
    } else {
        $message = 'custom login message';
    }
    return $message;
}

add_action('login_form', 'user16975_login_message2');
function user16975_login_message2(){
    echo 'another custom login message';
}

add_action('register_form', 'user16975_tweak_form');
function user16975_tweak_form(){
    echo 'another custom register message';
}

4) If you need a front-end registration form, you will probably don't want that registered users see the backend when they log-in.

add_filter('user_has_cap', 'user16975_refine_role', 10, 3);
function user16975_refine_role($allcaps, $cap, $args){
    global $pagenow;

    $user = wp_get_current_user();
    if($user->ID != 0 && $user->roles[0] == 'subscriber' && is_admin()){
        // deny access to WP backend
        $allcaps['read'] = false;
    }

    return $allcaps;
}

add_action('admin_page_access_denied', 'user16975_redirect_dashbord');
function user16975_redirect_dashbord(){
    wp_redirect(home_url());
    die();
}

There are lots of steps, but the result is here !

もっと簡単:wp_login_form()(コーデックスページはこちら)というWordPress関数を使用してください).

独自のプラグインを作成して、ページでショートコードを使用できるようにすることができます:

 <?php
/*
Plugin Name: WP Login Form Shortcode
Description: Use <code>[wp_login_form]</code> to show WordPress' login form.
Version: 1.0
Author: WP-Buddy
Author URI: http://wp-buddy.com
License: GPLv2 or later
*/

add_action( 'init', 'wplfsc_add_shortcodes' );

function wplfsc_add_shortcodes() {
    add_shortcode( 'wp_login_form', 'wplfsc_shortcode' );
}

function wplfsc_shortcode( $atts, $content, $name ) {

$atts = shortcode_atts( array(
        'redirect'       => site_url( $_SERVER['REQUEST_URI'] ),
        'form_id'        => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in'   => __( 'Log In' ),
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_remember'    => 'rememberme',
        'id_submit'      => 'wp-submit',
        'remember'       => false,
        'value_username' => NULL,
        'value_remember' => false
), $atts, $name );

// echo is always false
$atts['echo'] = false;

// make real boolean values
$atts['remember']       = filter_var( $atts['remember'], FILTER_VALIDATE_BOOLEAN );
$atts['value_remember'] = filter_var( $atts['value_remember'], FILTER_VALIDATE_BOOLEAN );

return '<div class="cct-login-form">' . wp_login_form( $atts ) . '</div>';

}
 

必要なのは、フロントエンドでフォームのスタイルを設定することだけです.

Way easier: use a WordPress function called wp_login_form() (Codex page here).

You can make your own plugin so that you can use a shortcode in on of your pages:

<?php
/*
Plugin Name: WP Login Form Shortcode
Description: Use <code>[wp_login_form]</code> to show WordPress' login form.
Version: 1.0
Author: WP-Buddy
Author URI: http://wp-buddy.com
License: GPLv2 or later
*/

add_action( 'init', 'wplfsc_add_shortcodes' );

function wplfsc_add_shortcodes() {
    add_shortcode( 'wp_login_form', 'wplfsc_shortcode' );
}

function wplfsc_shortcode( $atts, $content, $name ) {

$atts = shortcode_atts( array(
        'redirect'       => site_url( $_SERVER['REQUEST_URI'] ),
        'form_id'        => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in'   => __( 'Log In' ),
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_remember'    => 'rememberme',
        'id_submit'      => 'wp-submit',
        'remember'       => false,
        'value_username' => NULL,
        'value_remember' => false
), $atts, $name );

// echo is always false
$atts['echo'] = false;

// make real boolean values
$atts['remember']       = filter_var( $atts['remember'], FILTER_VALIDATE_BOOLEAN );
$atts['value_remember'] = filter_var( $atts['value_remember'], FILTER_VALIDATE_BOOLEAN );

return '<div class="cct-login-form">' . wp_login_form( $atts ) . '</div>';

}

All you have to do is to style your form on the frontend.

プラグインを使用することに慣れている場合は、以前にGravity Formsのユーザー登録アドオンを使用しましたが、非常にうまく機能しました:

http://www.gravityforms.com/add-ons/user-registration/

編集:これはあまり詳細な解決策ではないことはわかっていますが、必要なことを正確に実行し、優れた解決策です.

編集:私の答えをさらに拡張するために、重力フォームのユーザー登録アドオンを使用すると、重力フォームを使用して作成されたフォームの任意のフィールドをユーザー固有のフィールドにマップできます.たとえば、名、姓、電子メール、Webサイト、パスワードを使用してフォームを作成できます.送信すると、アドオンはそれらの入力を関連するユーザーフィールドにマッピングします.

もう1つの優れた点は、登録済みのユーザーを承認キューに追加できることです.ユーザーアカウントは、管理者によってバックエンドで承認された場合にのみ作成されます.

上記のリンクが壊れた場合は、Googleの「GravityFormsのユーザー登録アドオン」

If you're open to the use of plugins, I've used the User Registration add-on for Gravity Forms before, it worked very well:

http://www.gravityforms.com/add-ons/user-registration/

Edit: I realise this isn't a very detailed solution, but it does exactly what you need and is a good solution.

Edit: To expand on my answer further, the User Registration add-on for gravity forms allows you to map any fields in a form created using Gravity Forms, to user-specific fields. For example, you can create a form with First Name, Last Name, Email, Website, Password. Upon submission, the add-on will map those inputs to the relevant user fields.

Another great thing about it, is you can add any registered users into an approval queue. Their user accounts would only be created once approved in the backend by an admin.

If the above link breaks, just Google "User Registration add on for Gravity Forms"