جایگزین صفحه ثبت نام در وردپرس

در مقاله های قبلی نحوه جایگزین کردن صفحات لاگین و فراموشی رمز در وردپرس را شرح دادیم در این مقاله قصد داریم جایگزین صفحه ثبت نام در وردپرس را آموزش دهیم. صفحه پیش فرض وردپرس برای ثبت نام کاربر از طریق آدرس wp-login.php?action=register قابل مشاهده و مشابه عکس زیر می باشد: جایگزین صفحه ثبت نام در وردپرس

فیلم آموزشی جایگزین صفحه ثبت نام در وردپرس

 

جهت مشاهده صفحه ثبت نام ابتدا باید از طریق پیشخوان و منوی تنظیمات ، گزینه عضویت را فعال کرد و ذخیره کنید. جایگزین صفحه ثبت نام در وردپرس از جمله دلایل ساخت جایگزین برای صفحه ثبت نام پیش فرض وردپرس :

  • همخوانی نداشتن صفحه ثبت نام با بقیه صفحات قالب وردپرس مورد استفاده
  • اضافه کردن فیلد های جدید هنگام ثبت نام
  • اضافه کردن روال های اضافی هنگام ثبت نام (مانند اضافه کردن ایمیل کاربر به خبرنامه)

توجه: در این آموزش از قالب twentyseventeen که از قالب های پیش فرض وردپرس می باشد استفاده شده است.

طراحی صفحه جایگزین ثبت نام در وردپرس

در ابتدا به مسیر پوسته رفته و یک فایل  phpبه نام custom-register.php میسازیم و سپس کدهایHtml  زیر را به فایل ساخته شده اضافه کرده و ذخیره میکنیم.

<?php
// template name: Register Page
get_header();?>
<div class="container">
	<div class="box-center-form">
	 <h1 class="box-heading">
	   عضویت
	 </h1>
		<div class="login-form-container">
			<?php if(is_user_logged_in()) {
					echo _e('کاربر گرامی، شما در حال حاضر لاگین شده اید.', 'wpschool-login' );
				  } elseif ( ! get_option( 'users_can_register' ) ) {
						echo _e( 'ثبت نام برای کاربران جدید فعال نمی باشد', 'wpschool-login' );
				  } else { ?>
						<form id="signupform" action="<?php echo wp_registration_url(); ?>" method="post">
							<p class="form-row">
								<label for="email"><?php _e( 'ایمیل', 'wpschool-login' ); ?> <strong>*</strong></label>
								<input type="text" name="email" id="email">
							</p>					 
							<p class="form-row">
								<label for="first_name"><?php _e( 'نام', 'wpschool-login' ); ?></label>
								<input type="text" name="first_name" id="first-name">
							</p>					 
							<p class="form-row">
								<label for="last_name"><?php _e( 'نام خانوادگی', 'wpschool-login' ); ?></label>
								<input type="text" name="last_name" id="last-name">
							</p>
							<p class="form-row">
								<label for="pass1"><?php _e( 'رمزعبور', 'wpschool-login' ); ?></label>
								<input type="password" name="pass1" id="pass1">
							</p>
							<p class="form-row">
								<label for="pass2"><?php _e( 'تکرار رمز عبور', 'wpschool-login' ); ?></label>
								<input type="password" name="pass2" id="pass2">
							</p>					 					 
							<p class="signup-submit">
								<input type="submit" name="submit" class="register-button"
									   value="<?php _e( 'ثبت نام', 'wpschool-login' ); ?>"/>
							</p>
						</form>
			<?php } ?>
		</div>
	</div> 
<?php 
	if ( isset( $_REQUEST['register-errors'] ) ) {
		$error_codes = explode( ',', $_REQUEST['register-errors'] );
		$html_out = "<ul class='ul-errors'>";
			foreach ( $error_codes as $code ) {
				switch (trim($code))  {
					case 'closed':
						$html_out=$html_out.'<li>'. __( 'ثبت نام کاربر جدید غیرفعال می باشد', 'wpschoool-login' ).'</li>';
						break;
					case 'email_exists':
						$html_out=$html_out.'<li>'.__( 'کاربری با ایمیل وارد شده موجود می باشد', 'wpschoool-login' ).'</li>';
						break;
					case 'password_mismatch':
						$html_out=$html_out.'<li>'.__("رمزهای عبور وارد شده یکسان نمی باشد",'wpschoool-login').'</li>';	
					break;
					case 'email':
						$html_out=$html_out.'<li>'.__("ایمیل وارد شده نامعتبر می باشد",'wpschoool-login').'</li>';	
					break;
					case 'password_empty':
						$html_out=$html_out.'<li>'.__("رمز عبور را وارد کنید",'wpschoool-login').'</li>';	
					break;
					default:
						$html_out=$html_out.'<li>'.__( 'خطایی رخ داده لطفا مجدد تلاش کنید', 'wpschoool-login' ).'</li>';
				} 
		}
		echo $html_out;
	}		
?>	
</div>

این صفحه از چند ورودی برای دریافت ایمیل ، نام ، نام خانوادگی و رمز عبور از کاربر تشکیل شده که برخی از فیلدها اجباری می باشند، ایمیل کاربر به عنوان نام کاربری در نظر گرفته خواهد شد. در قطعه کد بالا دستور get_option( ‘users_can_register’ ) چک می کند که آیا امکان ثبت نام کاربر از سمت مدیر سیستم فعال شده است ، که در صورت غیر فعال بودن پیام مناسب به کاربر نمایش میدهد. جایگزین صفحه ثبت نام در وردپرس جهت زیبایی صفحه کدهای css زیر را به فایل style.css موجود در قالب اضافه میکنیم (برخی از این کدها را در آموزش جایگزین صفحه لاگین وردپرس و آموزش جایگزین صفحه فراموش رمز استفاده کرده ایم و دوباره  در اینجا ذکر میکنیم )

.container {
    padding-right: 15px;
    padding-left: 15px;
	padding-top: 15px;
    margin-right: auto;
    margin-left: auto;
	width: 100%;
}

.box-center-form {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    float: none;
	background: #f1f0f0;
    padding: 1.5em!important;
    position: relative;
    margin-bottom: 1.5em;
}

.box-heading{
    font-size: 23px;
    line-height: 1.575em;
    font-weight: 400;
    text-align: center;
    margin: 0 0 30px;
    color: #14485f;
}
.login-info {
    background: #00a77a;
    width: 600px;
    margin: 0 auto 10px;
    padding: 9px;
    border-radius: 5px;
    font-weight: 700;
	color: #fff;
    text-align: center
}
.ul-errors{
    background: #d00000;
    width: 600px;
    margin: 0 auto 10px;
    padding: 9px;
    border-radius: 5px;
    font-weight: 700;
    color: #fff;
    text-align: center
}

حالا نیاز هست که یک برگه برای صفحه ثبت نام ایجاد کنیم. برای این کار در پیشخوان مدیریت وردپرس به قسمت برگه ها رفته و با کلیک روی افزودن برگه ، یک برگه جدید ایجاد می کنیم. جایگزین صفحه فراموشی رمز وردپرس در صفحه افزودن برگه عبارت user-register را تایپ کرده و سپس از قسمت ویژگی های برگه بخش قالب گزینه Register Page (همان نامی که در ابتدای فایل custom-register.php وارد کرده بودیم) را انتخاب کرده و گزینه انتشار را کلیک می کنیم. جایگزین صفحه ثبت نام در وردپرس اگر تا اینجای آموزش با ما همراه بوده باشید باید صفحه ای به شکل زیر برای شما نمایش داده شود: جایگزین صفحه ثبت نام در وردپرس

کدهای صفحه جایگزین ثبت نام در وردپرس

حالا بریم به سراغ کدهای مربوط به این صفحه ، اول باید کاری کنیم که صفحه پیش فرض ثبت نام نمایش داده نشه و کاربر به صفحه سفارشی ما هدایت بشه ، برای اینکار کدهای زیر را به انتهای فایل functions.php اضافه میکنیم.

add_action( 'login_form_register', 'redirect_to_custom_register' );
function redirect_to_custom_register() {
    if ( 'GET' == $_SERVER['REQUEST_METHOD'] ) {
        if ( is_user_logged_in() ) {
            redirect_logged_in_user();
        } else {
            wp_redirect( home_url( 'user-register' ) );
        }
        exit;
    }
}

در کدهای بالا تابع  redirect_logged_in_user در آموزش جایگزین صفحه لاگین وردپرس و جایگزین صفحه فراموشی رمز توضیح داده شد و اگر آموزش های ما رو دنبال کرده باشید باید این تابع رو در حال حاضر در فایل functions.php داشته باشید ، برای اون دوستانی که با این تابع آشنایی ندارن مجدد کدهای مربوطه در زیر قرار میدم:

function redirect_logged_in_user( $redirect_to = null ) {
    $user = wp_get_current_user();
    if ( user_can( $user, 'manage_options' ) ) {
        if ( $redirect_to ) {
            wp_safe_redirect( $redirect_to );
        } else {
            wp_redirect( admin_url() );
        }
    } else {
        wp_redirect( home_url() );
    }
}

حالا باید تابع مربوط به ثبت نام کاربر را به فایل functions.php اضافه کنیم. در این تابع فقط ایمیل به عنوان نام کاربری مورد اعتبار سنجی قرار میگیرد:

function register_user( $email, $first_name, $last_name , $pass1 , $pass2 ) {
    $errors = new WP_Error();
    if ( username_exists( $email ) || email_exists( $email ) ) {
        $errors->add( 'email_exists');
        return $errors;
    }
    
    if ( ! is_email( $email ) ) {
        $errors->add('email');
        return $errors;
    }
    if(empty($pass1)){
	    $errors->add('password_empty');
        return $errors;
	}
	if($pass1 != $pass2){
        $errors->add( 'password_mismatch');
        return $errors;
    }
    $user_data = array(
        'user_login'    => $email,
        'user_email'    => $email,
        'user_pass'     => $pass1,
        'first_name'    => $first_name,
        'last_name'     => $last_name,
        'nickname'      => $first_name,
    );
    $user_id = wp_insert_user( $user_data );
    wp_new_user_notification( $user_id, $pass1 );
    return $user_id;
}

حالا باید با اضافه کردن کد زیر در زمان ارسال  فرم ثبت نام تابع بالا فراخوانی شود:

add_action( 'login_form_register', 'do_register_user' );
function do_register_user() {
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
        $redirect_url = home_url( 'user-register' );
        if ( ! get_option( 'users_can_register' ) ) {
            $redirect_url = add_query_arg( 'register-errors', 'closed', $redirect_url );
        } else {
            $email = $_POST['email'];
            $first_name = sanitize_text_field( $_POST['first_name'] );
            $last_name = sanitize_text_field( $_POST['last_name'] );
	 $pass1 = sanitize_text_field( $_POST['pass1'] );
	 $pass2 = sanitize_text_field( $_POST['pass2'] );
            $result = register_user( $email, $first_name, $last_name, $pass1, $pass2);
 
            if ( is_wp_error( $result ) ) {
                // Parse errors into a string and append as parameter to redirect
                $errors = join( ',', $result->get_error_codes() );
                $redirect_url = add_query_arg( 'register-errors', $errors, $redirect_url );
            } else {
                // Success, redirect to login page.
                $redirect_url = home_url( 'user-login' );
                $redirect_url = add_query_arg( 'registered', $email, $redirect_url );
            }
        }
        wp_redirect( $redirect_url );
        exit;
    }
}

کد بالا اعتبار سنجی های لازم برای ورودی ها را انجام داده و سپس تابع register_user را فراخوانی میکند در صورت بروز خطا آن را در صفحه ثبت نام نمایش میدهد و در صورت موفقیت آمیز بودن ثبت نام به صفحه لاگین ریدایرکت شده و پیام مناسب به کاربر نمایش میدهد. برای نمایش پیام مناسب در هنگام ثبت نام موفقیت آمیز، کدهای زیر را به صفحه لاگین (custom-login.php) اضافه می کنیم:

<?php if (	isset( $_REQUEST['registered']) ): ?>
	<p class="login-info">
	<?php _e( 'ثبت نام شما با موفقیت انجام شد.', 'wpschoool-login' ); ?>
	</p>
<?php endif; ?>

جایگزین صفحه ثبت نام در وردپرس دوستان عزیز ، مقاله جایگزین صفحه ثبت نام در وردرپرس هم به پایان رسید اگر اشکالی در مقاله و یا سوالی بود در کامنت ها مطرح کنید. موفق باشید.

21 دیدگاه برای “جایگزین صفحه ثبت نام در وردپرس + فیلم آموزشی

  • حامد
    - ۲۴ دی , ۱۳۹۷

    سلام. ممنون از سایت فوق العادتون. سوالی که برای من پیش اومده اینه که تمام قسمت ها درست کار میکنن بجز switch case که برای ارور ها در نظر گرفتید . یعنی برای من اینجوریه.
    شما توی هر کیس wpschoool-login رو هم ارسال میکنید. این عبارت کار خاصی انجام میده ؟

    • سیروس
      - ۲۵ دی , ۱۳۹۷

      سلام دوست عزیز ، کدها چک شده و تو فیلم آموزشی هم می تونید ببینید که به درستی کار میکنه، باید چک کنید که کدوم قسمت رو اشتباه کردید و مجدد کارها رو انجام بدید ،
      وقتی دکمه ثبت نام رو کلیک می کنید چک کنید در url کدهای خطا موجود است یا نه! اگه نبود کدهای سمت سرور درست کار نیم کنند و اگر موجود بود کدهایجاوا اسکریپت سمت کاربر درست کار نمی کنن.
      در مورد wpschoool-login باید بگم که صرفا جهت ترجمه هستش و با استفاده از اون می تونید ترجمه های مختلفی از یک پیام تو کدتون داشته باشید و جایگزین کنید.

  • mehdi
    - ۱ فروردین , ۱۳۹۸

    با سلام و تشکر به خاطر مطالب مفیدی که در اختیار دیگران میذارید.
    من کد بالا رو استفاده کردم. زمانی که برای ثبت نام همه بخشهارو به صورت صحیح وارد میکنم، کد کار میکنه و ثبت نام انجام میشه.
    اما اگر یکی از بخشهارو باری تست اشتباهات، غلط وارد میکنم پیغام زیر داده میشه و اشتباهات اجرا نمیشه:
    Fatal error: Uncaught ArgumentCountError: Too few arguments to function WP_Error::add(), 1 passed in D:\xampp\htdocs\slidePowerpoint\wp-content\themes\slidepowerpoint\functions.php on line 297 and at least 2 expected in D:\xampp\htdocs\slidePowerpoint\wp-includes\class-wp-error.php:163 Stack trace: #0 D:\xampp\htdocs\slidePowerpoint\wp-content\themes\slidepowerpoint\functions.php(297): WP_Error->add(‘password_mismat…’) #1 D:\xampp\htdocs\slidePowerpoint\wp-content\themes\slidepowerpoint\functions.php(325): register_user(‘milad@yahoo.com’, ‘milad’, ‘miki’, ‘852’, ‘456’) #2 D:\xampp\htdocs\slidePowerpoint\wp-includes\class-wp-hook.php(286): do_register_user(”) #3 D:\xampp\htdocs\slidePowerpoint\wp-includes\class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #4 D:\xampp\htdocs\slidePowerpoint\wp-includes\plugin.php(453): WP_Hook->do_action(Array) #5 D:\xampp\htdocs\slidePowerpoint\wp-login.php(456): do_action(‘login_form_regi…’) #6 {main} thrown in D:\xampp\htdocs\slidePowerpoint\wp-includes\class-wp-error.php on line 163

    لطفا کمک کنید و بگید مشکل از کجاست.
    در ضمن من از هیچ افزونه ای هم استفاده نمی کنم که بگم تداخل با بقیه افزونه ها داره.
    بازم به خاطر سایت خوب و مفیدتون ممنونم.

  • سجاد
    - ۱۱ اردیبهشت , ۱۳۹۸

    سلام. میخوام صفحه ورود و ثبت نام و فراموشی رمز عبور همه برگرده به صفحه ورود و عضویت ووکامرس. چطور میتونم ریدایرکتشون کنم؟

  • مسعود
    - ۹ خرداد , ۱۳۹۸

    سلام
    من در مورد نمایش خطا این مشکل رو داشتم:
    Fatal error: Uncaught ArgumentCountError: Too few arguments to function WP_Error::add(), 1 passed in C:\wamp64\www\wp-content\themes\tarahidoust-1\functions.php on line 22 and at least 2 expected in C:\wamp64\www\wp-includes\class-wp-error.php:187 Stack trace: #0 C:\wamp64\www\wp-content\themes\tarahidoust-1\functions.php(22): WP_Error->add(’email’) #1 C:\wamp64\www\wp-content\themes\tarahidoust-1\functions.php(57): register_user(”, ”, ”, ‘1370’, ”) #2 C:\wamp64\www\wp-includes\class-wp-hook.php(286): do_register_user(”) #3 C:\wamp64\www\wp-includes\class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #4 C:\wamp64\www\wp-includes\plugin.php(465): WP_Hook->do_action(Array) #5 C:\wamp64\www\wp-login.php(489): do_action(‘login_form_regi…’) #6 {main} thrown in C:\wamp64\www\wp-includes\class-wp-error.php on line 187

    لطفا بفرمائید مشکل چیه؟

  • دارین
    - ۳ تیر , ۱۳۹۸

    با سلام
    ممنون از آموزش های مفیدتون
    یک سوال: الان با این آموزش، ظاهر لاگین پیش فرض وردپرس را تغییر دادید یا کلا مسیر wp-login.php را به یک مسیر دیگر تغییر دادید که اختصاصی هستش؟

    • سیروس
      - ۳ تیر , ۱۳۹۸

      با سلام
      یک صفحه جدید برای لاگین ساختیم و مسیر رو تغییر دادیم که اختصاصی بشه.

  • دارین
    - ۳ تیر , ۱۳۹۸

    یک سوال دیگر:
    ووکامرس خودش لاگین وثبت نام دارد؟
    اگر دارد میشو از لاگین ووکامرس استفاده کرد بجای لاگین خود وردپرس؟ میشود صفحه لاگین وثبت نام ووکامرس را کاستوم کرد؟

    • سیروس
      - ۳ تیر , ۱۳۹۸

      بله ووکامرس خودش داره.
      بله میشه استفاده کرد. کاستوم هم میشه کرد باید جستجو کنید برای پیدا کردن نحوه شخصی سازی.

  • دارین
    - ۶ تیر , ۱۳۹۸

    بزرگوار نحوه تغییر مسر را rewrite میگویند؟ درسته؟
    یعنی این مسیر ها در وردپرس تعریف شده هست و ما این مسیر ها رو تغییر میدهیم و یا مسیری اضافه میکنیم.
    نحوه تغییر مسیر اصلی به این مسیر جدید چگونست؟

    • سیروس
      - ۶ تیر , ۱۳۹۸

      تغییر مسیر رو redirect میگن ، توی کد بالا با ستفاده از خط زیر این کارو انجام دادیم :

      wp_redirect( home_url( ‘user-register’ ) );

  • دارین
    - ۷ تیر , ۱۳۹۸

    ممنون

  • دارین
    - ۱۸ تیر , ۱۳۹۸

    اگر بخواهیم ثبت نام و لاگین رو مثل وب سایت خوتون بصورت مودال طراحی کنیم، آیا باز نیاز به ساختن یک فایل جدید داریم (پیج تمپلیت) ؟ اگر فایل جدید نسازیم و بصورت مودال لاگین و ثبت نام رو طراحی کنیم چگونه صفحه wp-login.php و wp-admin را ببندیم و هنگامی که کاربران مراجعه کردند به این صفحات ارور ۴۰۴ بدهد؟

    • سیروس
      - ۱۹ تیر , ۱۳۹۸

      سلام ،
      در صورت استفاده از مودال نیاز به ساخت صفحه جدید نیست!
      wp_redirect( home_url( ‘۴۰۴’ ) );
      بجای ۴۰۴ اسم صفحه ای که میخواید نشون بدید رو بزارید.

  • دارین
    - ۱۹ تیر , ۱۳۹۸

    سلام
    عالی
    دست گلت درد نکنه

  • ali
    - ۱۹ مرداد , ۱۳۹۸

    با سلام
    من ازافزونه برای لاگین و ثبت نام کاربران استفاده کردم ولی وقتی مثلا برای ثبت دیدگاه به کاربر گفته میشه که شما باید وارد شید میره به صفحه لاگین ورد پرس برای تغییر این هم باید کارای بالا رو انجام بدم؟

    • سیروس
      - ۲۰ مرداد , ۱۳۹۸

      خیر کدهای بالا برای ساخت صفحه و جایگزینی هستش

  • علیرضا
    - ۳۱ اردیبهشت , ۱۳۹۹

    برای من این ارور میاد :

    Fatal error: Uncaught ArgumentCountError: Too few arguments to function WP_Error::add(), 1 passed in D:\xampp\htdocs\test\wp-content\themes\digimag\functions.php on line 434 and at least 2 expected in D:\xampp\htdocs\test\wp-includes\class-wp-error.php:187 Stack trace: #0 D:\xampp\htdocs\test\wp-content\themes\digimag\functions.php(434): WP_Error->add(‘password_empty’) #1 D:\xampp\htdocs\test\wp-content\themes\digimag\functions.php(466): register_user(‘sdsdse34dfs@yah…’, ‘rfrf’, ‘rgrgrg’, ”, ”) #2 D:\xampp\htdocs\test\wp-includes\class-wp-hook.php(288): do_register_user(”) #3 D:\xampp\htdocs\test\wp-includes\class-wp-hook.php(312): WP_Hook->apply_filters(NULL, Array) #4 D:\xampp\htdocs\test\wp-includes\plugin.php(478): WP_Hook->do_action(Array) #5 D:\xampp\htdocs\test\wp-login.php(534): do_action(‘login_form_regi…’) #6 {main} thrown in D:\xampp\htdocs\test\wp-includes\class-wp-error.php on line 187

  • علیرضا
    - ۱ خرداد , ۱۳۹۹

    من جواب ارروی که دوستان بهش برخوردن رو پیدا کردم توی نسخه جدید وردپرس تابع WP_Error 2 تا پارامتر میگیره بنابراین این کد باید جایگزین کدهای تشخیص ارورو ها بشه :

    function register_user( $email, $first_name, $last_name , $pass1 , $pass2 ) {
    $errors = new WP_Error();
    if ( username_exists( $email ) || email_exists( $email ) ) {
    $errors->add( ’email_exists’,’email_exists’);
    return $errors;
    }

    if ( ! is_email( $email ) ) {
    $errors->add(’email’,’email’);
    return $errors;
    }
    if(empty($pass1)){
    $errors->add(‘password_empty’,’password_empty’);
    return $errors;
    }
    if($pass1 != $pass2){
    $errors->add( ‘password_mismatch’,’password_mismatch’);
    return $errors;
    }
    $user_data = array(
    ‘user_login’ => $email,
    ‘user_email’ => $email,
    ‘user_pass’ => $pass1,
    ‘first_name’ => $first_name,
    ‘last_name’ => $last_name,
    ‘nickname’ => $first_name,
    );
    $user_id = wp_insert_user( $user_data );
    wp_new_user_notification( $user_id, $pass1 );
    return $user_id;
    }

  • احمدرضا
    - ۱ شهریور , ۱۳۹۹

    سلام. وقت بخیر. خسته نباشید.
    سوالی دارم از شما. ایا امکانش هست یه گزینه به عنوان کپچا اضافه کنید تا از ثبت نام ربات ها جلوگیری کنه.
    مثلا یه گزینه بنویسید : پایتخت ایران کجاست؟ لطفا به فارسی پاسخ دهید.
    * اگر کاربر در کادر ورودی کلمه “تهران” رو وارد کرد ثبت نام کامل بشه در غیر این صورت از هیچ عملیاتی انجام نشه.

    ممنون خواهم بود پاسخ دهید. با تشکر

  • سعید
    - ۳ بهمن , ۱۳۹۹

    سلام وقت بخیر
    من از این کدها استفاده کردم
    برای ثبت نام اگه کاربر اطلاعاتشو صحیح وارد کنه مشکلی پیش نمیاد و ثبت نام انجام میشه
    اما اگه جایی رو درست وارد نکنه
    خطا بهش اعلام نمیشه و صفحه اشکال زدایی وردپرس میاد
    امکانش هست راهنمایی بفرمایید؟

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --