web-dev-qa-db-ja.com

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

ブログのフロントエンドにWordPressユーザー登録フォーム（ "www.mywebsite.com/wp-register.php"ページに表示されるフォーム）を表示する方法

登録フォームをカスタマイズしました。しかし、フロントエンドページでそのフォームを呼び出す方法がわからない。どんな支援も本当に大きな助けになるでしょう。

前もって感謝します。 :)

registrationforms
31
user3476

TLDR。次のフォームをテーマに入れてください。nameおよびid属性は重要です。 

<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
    <input type="text" name="user_login" value="Username" id="user_login" class="input" />
    <input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
    <?php do_action('register_form'); ?>
    <input type="submit" value="Register" id="register" />
</form>

上にTutsplusの素晴らしい記事「/ - Wordpressの登録フォームを一から作成する 」を見つけました。これはフォームのスタイルを整えるのにかなりの時間を費やしますが、必要なワードプレスコードに関する以下のかなり単純なセクションがあります。

ステップ4. WordPress

ここに空想は何もありません。 wp-login.phpファイル内に隠された2つのWordPressスニペットのみが必要です。

最初のスニペット：

<?php echo site_url('wp-login.php?action=register', 'login_post') ?>

そして：

<?php do_action('register_form'); ?>

編集： 上記のコードスニペットをどこに置くかを説明するために、この記事の最後の部分を追加しました。 。重要なセクションは、上記のスニペットと重要な必須フィールドを含むformです。

最終的なコードは次のようになります。

<div style="display:none"> <!-- Registration -->
        <div id="register-form">
        <div class="title">
            <h1>Register your Account</h1>
            <span>Sign Up with us and Enjoy!</span>
        </div>
            <form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
            <input type="text" name="user_login" value="Username" id="user_login" class="input" />
            <input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
                <?php do_action('register_form'); ?>
                <input type="submit" value="Register" id="register" />
            <hr />
            <p class="statement">A password will be e-mailed to you.</p>


            </form>
        </div>
</div><!-- /Registration -->

user_loginをnameおよびid属性としてテキスト入力に含めることが 本当に重要な であり、必要であることに注意してください。 Eメールの入力についても同じことが言えます。さもなければ、それは働かないでしょう。

そして、これで完了です。

12
icc97

この 記事 はあなた自身のフロントエンド登録/ログイン/パスワードフォームの復元を作成する方法についてのすばらしいチュートリアルを提供します。

またはあなたがプラグインを探しているなら、私は以前にこれらを使用したことがあり、それらを推奨することができます。

6
Bainternet

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

私が従った手順は次のとおりです。

1） [設定]> [一般]> [メンバーシップ]オプションで、すべての訪問者が新しいアカウントをリクエストする可能性を有効にします。登録ページがURL /wp-login.php?action=registerに表示されます。

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

これは、13の例です。

// 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();
}

ステップはたくさんありますが、結果はここにあります。

4
Fabien Quatravaux

もっと簡単な方法：wp_login_form()（ Codex page here ）という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>';

}

あなたがしなければならないのは、フロントエンドであなたのフォームをスタイルすることだけです。

0
Flow