با سلام خدمت شما همراهان گرامی ،

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

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

صفحه فراموشی رمز در وردپرس صفحه ای ساده و کاربردی است که به طور کلی مراحل زیر را دنبال می کند:

1 – کاربر با وارد کردن نام کاربری و یا ایمیل خود، درخواست تغییر رمز خود را ارسال میکند.

2 – یک کلید موقت (token) برای کاربر تولید و در پایگاه داده ذخیره شده و یک لینک شامل این کلید برای کاربر ایمیل می شود.

3 – کاربر ایمیل را چک کرده و روی لینک موجود در ایمیل کلیک می کند.

4 – در صفحه تغییر رمز عبور ، کلید موقت با داده ذخیره شده در پایگاه داده اعتبار سنجی شده و در صورت یکی بودن به کاربر اجازه تغییر رمز داده می شود.

چرخه تغییر رمز با ورورد کاربری که رمز عبور خود را فراموش کرده به صفحه فراموشی رمز عبور از طریق لینک wp-login.php?action=lostpassword که در صفحه لاگین قرار گرفته شده شروع میشود، در این مرحله لازم است که کاربر به جای صفحه فراموشی رمز با صفحه سفارشی ما روبرو شود.

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

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

طراحی جایگزین صفحه فراموشی رمز وردپرس :

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

<?php
// template name: Lost Password
get_header();?>
<div class="container">
        <div class="box-center-form">
         <h1 class="box-heading">
 
			<?php _e('فراموشی رمز عبور', 'wpschool-login' ); ?>
         </h1>

		<div class="login-form-container">
			<?php if(is_user_logged_in()) {
					echo _e('کاربر گرامی، شما در حال حاضر لاگین شده اید.', 'wpschool-login' );
				} else { ?>
			  <form class="lostpasswordform" action="<?php echo wp_lostpassword_url(); ?>" method="post">
				<div class="">
				  <input type="email" autocomplete="off" name="user_login" id="user_login" placeholder="<?php _e('ایمیل خود را وارد کنید', 'wpschool-login' ); ?>"/>
				</div>
				<input type="submit" name="submit" class="lostpassword-button" value="<?php _e('بازیابی رمز عبور', 'wpschool-login' ); ?>" />
			</form>
			<?php } ?>
		</div>
        </div>
            <?php if (isset( $_REQUEST['errors'] ) && $_REQUEST['errors'] == 'empty_username') : ?>
        		<p class="login-info">
                <?php _e( 'لطفا جهت بازیابی رمز عبور ایمیل خود را وارد کنید.', 'wpschool-login' ); ?>
        		</p>
        	<?php endif; ?>
        
            <?php if (isset( $_REQUEST['errors'] ) && $_REQUEST['errors'] == 'invalid_email') : ?>
        		<p class="login-info">
                <?php _e( 'کاربری با این ایمیل پیدا نشد', 'wpschool-login' ); ?>
        		</p>
        	<?php endif; ?>
</div>

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

کدهای php انتهای صفحه جهت نمایش پیام های خطای مناسب در شرایط مختلف در نظر گرفته شده اند.

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

جهت زیبایی صفحه کدهای 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
}
.lostpassword-button{
margin-top : 12px;
}

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

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

در صفحه افزودن برگه عبارت lost-password را تایپ کرده و سپس از قسمت ویژگی های برگه بخش قالب گزینه Lost Password (همان نامی که در ابتدای فایل custom-lost-password.php وارد کرده بودیم) را انتخاب کرده و گزینه انتشار را کلیک می کنیم.

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

اگر تا اینجای آموزش با ما همراه بوده باشید باید صفحه به شکل زیر برای شما نمایش داده شود:

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

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

 

add_action( 'login_form_lostpassword', 'redirect_to_custom_lostpassword');
 function redirect_to_custom_lostpassword() {
    if ( 'GET' == $_SERVER['REQUEST_METHOD'] ) {
        if ( is_user_logged_in() ) {
            redirect_logged_in_user();
            exit;
        }
        wp_redirect( home_url( 'lost-password' ) );
        exit;
    }
}

با اضافه کردن کد بالا به فایل functions.php وقتی کاربر بخواد وارد صفحه فراموشی رمز پیش فرض وردپرس بشه به صفحه سفارشی ما هدایت میشه!

  • توجه : در کدهای بالا تابع 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 اضافه کنیم.

add_action( 'login_form_lostpassword',  'do_password_lost');
function do_password_lost() {
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
        $errors = retrieve_password();
        if ( is_wp_error( $errors ) ) {
            // Errors found
            $redirect_url = home_url( 'lost-password' );
            $redirect_url = add_query_arg( 'errors', join( ',', $errors->get_error_codes() ), $redirect_url );
        } else {
            // Email sent
            $redirect_url = home_url( 'user-login' );
            $redirect_url = add_query_arg( 'checkemail', 'confirm', $redirect_url );
        }
        wp_redirect( $redirect_url );
        exit;
	}
}

تابع بالا چک میکند که کاربری با ایمیل دریافتی وجود دارد یا خیر ، در صورت وجود برای کاربر ایمیلی حاوی لینک تغییر رمز ارسال میکنید و سپس کاربر را به صفحه لاگین (user-login) که در آموزش قبل ساختیم هدایت کرده و پیام مناسبی به کاربر نمایش میدهد و در صورت بروز خطا در صفحه فراموشی رمز (lost-password) آن خطا را نمایش می دهد.

جهت نمایش پیام مناسب در صفحه لاگین باید کدهای زیر را به صفحه لاگین (custom-login.php) اضافه کنیم :

<?php if (isset( $_REQUEST['checkemail'] ) && $_REQUEST['checkemail'] == 'confirm') : ?>
<p class="login-info">
        	<?php _e( 'لطفا جهت بازیابی رمز عبور ایمیل خود را چک کنید.', 'personalize-login' ); ?>
</p>
<?php endif; ?>

برای سفارشی سازی ایمیل ارسالی جهت تغییر رمز عبور کدهای زیر را به فایل functions.php اضافه میکنیم:

add_filter('retrieve_password_message','replace_retrieve_password_message', 10, 4 );   
function replace_retrieve_password_message($message, $key, $user_login, $user_data ) {
    $msg  = __( 'کاربر گرامی سلام ', 'wpschool-login' ) . "\r\n\r\n";
    $msg .= __( 'در خواستی از جانب شما برای تغییر رمز عبور در وب سایت مدرسه وردپرس ثبت شده است', 'wpschool-login' ) . "\r\n\r\n";
    $msg .= __( "اگر استباهی رخ داده و یا شما این درخواست را ثبت نکرده اید این ایمیل را نادیده بگیرید", 'wpschool-login' ) . "\r\n\r\n";
    $msg .= __( 'جهت تغییر رمز عبور روی لینک زیر کلیک کنید', 'wpschool-login' ) . "\r\n\r\n";
    $msg .= site_url( "wp-login.php?action=rp&key=$key&login=" . rawurlencode( $user_login ), 'login' ) . "\r\n\r\n";
    $msg .= __( 'با تشکر از شما', 'wpschool-login' ) . "\r\n";
    return $msg;
}

بعد از اینکه کاربر روی لینک موجود در ایمیل کلیک کرد به صفحه تغییر رمز پیش فرض وردپرس راهنمایی می شود ، باید ابتدا صفحه ای سفارشی برای تغییر رمز ساخته و سپس جایگزین صفحه پیش فرض تغییر رمز وردپرس  کنیم:

طراحی صفحه تغییر رمز:

ابتدا یک فایل php با نام custom-reset-password.php ساخته و کدهای زیر را به این صفحه اضافه میکنیم :

<?php
// template name: Reset Password
get_header();?>
<div class="container">
      <div role="main" class="main">
	<div class="box-center-form">
	  <h1 class="box-heading">		
	    <?php echo _e('تغییر رمز عبور', 'wpschool-login'); ?>
	  </h1>
	  <?php if(is_user_logged_in()) {
		echo _e('کاربر گرامی، شما در حال حاضر لاگین شده اید.', 'wpschool-login' );
	} else {?>
	  <form class="resetpassform" id="resetpassform" action="<?php echo site_url( 'wp-login.php?action=resetpass' ); ?>" method="post" autocomplete="off">
		<input type="hidden" id="user_login" name="rp_login" value="<?php echo esc_attr(  $_REQUEST['login'] ); ?>" autocomplete="off" />
		<input type="hidden" name="rp_key" value="<?php echo esc_attr( $_REQUEST['key'] ); ?>" />  
		<p>
		<input id="pass1" type="password" name="pass1" class="is-error" autocomplete="off" placeholder="<?php echo _e('رمز عبور جدید', 'wpschool-login'); ?>"  required />
		</p>
		<p>
		<input id="pass2" type="password" name="pass2" class="is-error" autocomplete="off" placeholder="<?php echo _e('تکرار رمز عبور جدید', 'wpschool-login'); ?>" required />
		</p>
		<input type="submit" class="login-btn" name="submit" value="<?php echo _e('ذخیره رمز عبور', 'wpschool-login'); ?>" id="login-btn"/>
	</form>
	   <?php } ?>
	</div>
            <?php if (isset( $_REQUEST['error'] ) && $_REQUEST['error'] == 'password_reset_empty') : ?>
        		<p class="resp-box error show">
            <?php _e( 'لطفا رمز عبور جدید خود را  وارد کنید', 'wpschool-login' ); ?>
        		</p>
        	<?php endif; ?>
        	            <?php if (isset( $_REQUEST['error'] ) && $_REQUEST['error'] == 'password_reset_mismatch') : ?>
        		<p class="resp-box error show">
            <?php _e( 'رمزهای وارد شده یکسان نیستند', 'wpschool-login' ); ?>
        		</p>
        	<?php endif; ?>
    </div>
</div>

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

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

در صفحه افزودن برگه عبارت reset-password را تایپ کرده و سپس از قسمت ویژگی های برگه بخش قالب گزینه Reset Password (همان نامی که در ابتدای فایل custom-reset-password.php وارد کرده بودیم) را انتخاب کرده و گزینه انتشار را کلیک می کنیم.

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

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

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

add_action( 'login_form_rp', 'redirect_to_custom_password_reset');
add_action( 'login_form_resetpass','redirect_to_custom_password_reset');
function redirect_to_custom_password_reset() {
    if ( 'GET' == $_SERVER['REQUEST_METHOD'] ) {
        // Verify key / login combo
        $user = check_password_reset_key( $_REQUEST['key'], $_REQUEST['login']);
        if ( ! $user || is_wp_error( $user ) ) {
            if ( $user && $user->get_error_code() === 'expired_key' ) {
                wp_redirect( home_url( 'user-login?login=expiredkey' ));
            } else {
                wp_redirect( home_url( 'user-login?login=invalidkey' ));
            }
            exit;
        }
        $redirect_url = home_url( 'reset-password' );
        $redirect_url = add_query_arg( 'login', esc_attr( $_REQUEST['login'] ), $redirect_url );
        $redirect_url = add_query_arg( 'key', esc_attr( $_REQUEST['key'] ), $redirect_url );
        wp_redirect( $redirect_url );
        exit;
    }
}

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

  • توجه : جهت نمایش پیام مناسب در صفحه لاگین کد زیر را به switch..case  موجود در صفحه لاگین (custom-login.php) اضافه میکنیم :
case 'expiredkey':
case 'invalidkey':
   $html_out= $html_out.'<li>'.__( 'لینک تغییر پسورد معتبر نبوده و یا منقضی شده است', 'wpschool-login' ).'</li>';
   break;

حالا وقت اون رسیده تا کدهای مربوط به تغییر رمز را به ادامه توابع اضافه کنیم :

add_action( 'login_form_rp', 'do_password_reset'  );
add_action( 'login_form_resetpass', 'do_password_reset'  );
function do_password_reset() {
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
        $rp_key = $_REQUEST['rp_key'];
        $rp_login = $_REQUEST['rp_login'];
        $user = check_password_reset_key( $rp_key, $rp_login );
        if ( ! $user || is_wp_error( $user ) ) {
            if ( $user && $user->get_error_code() === 'expired_key' ) {
                wp_redirect( home_url( 'user-login?login=expiredkey' ) );
            } else {
                wp_redirect( home_url( 'user-login?login=invalidkey' ) );
            }
            exit;
        }
        if ( isset( $_POST['pass1'] ) ) {
            if ( $_POST['pass1'] != $_POST['pass2'] ) {
                // Passwords don't match
                $redirect_url = home_url( 'reset-password' );
                $redirect_url = add_query_arg( 'key', $rp_key, $redirect_url );
                $redirect_url = add_query_arg( 'login', $rp_login, $redirect_url );
                $redirect_url = add_query_arg( 'error', 'password_reset_mismatch', $redirect_url );
                wp_redirect( $redirect_url );
                exit;
            }

            if ( empty( $_POST['pass1'] ) ) {
                // Password is empty
                $redirect_url = home_url( 'reset-password' );
                $redirect_url = add_query_arg( 'key', $rp_key, $redirect_url );
                $redirect_url = add_query_arg( 'login', $rp_login, $redirect_url );
                $redirect_url = add_query_arg( 'error', 'password_reset_empty', $redirect_url );
                wp_redirect( $redirect_url );
                exit;
            }
            // Parameter checks OK, reset password
            reset_password($user, $_POST['pass1']);
            wp_redirect( home_url( 'user-login?password=changed' ) );
        } else {
            echo "Invalid request.";
        }
        exit;
    }
}

در اینجا نیز ابتدا معتبر بودن کاربر و کلید موقت تغییر رمز توسط تابع check_password_reset_key بررسی می شود و در صورت تایید اعتبار رمز عبور وارد شده توسط کاربر مورد بررسی قرار میگیرد. در صورت وجود خطا در صفحه reset-password نمایش داده شده و اگر خطایی وجود نداشته باشد رمز عبور کاربر تغییر داده شده و در صفحه user-login به کاربر پیام تغییر رمز نمایش داده میشود.

  • توجه: برای نمایش پیام تغییر رمز در صفحه لاگین باید کد زیر را به فایل صفحه لاگین (custom-login.php) اضافه کنیم :
    <?php if (isset( $_REQUEST['password'] ) && $_REQUEST['password'] == 'changed') : ?>
            		<p class="login-info">
            			<?php _e( 'رمز عبور شما با موفقیت تغییر پیدا کرد.', 'wpschool-login' ); ?> 
            		</p>
    <?php endif; ?>
    

حالا کاربر می تواند با مراجعه به صفحه فراموشی رمز اقدام به تغییر رمز خود نموده با دریافت ایمیل و کلیک روی لینک موجود در ایمیل، رمز عبور خود را تغییر دهد.

اگر سوال و یا مشکلی در آموزش وجود داشت در کامنت ها پاسخگوی شما هستم ، موفق باشید.

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

  • محمد مقدم
    - ۲۲ آبان , ۱۳۹۶

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

    http://s8.picofile.com/file/8311612968/05.jpg

    فک کنم با تسلطی که شما دارین تو یه ویدیو ۱۰ دقیقه ای َرندَش کنید و به ما یادش بدید منتظریم مرسی.

    • الناز
      - ۲۲ آبان , ۱۳۹۶

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

  • محمد مقدم
    - ۳۰ آبان , ۱۳۹۶

    سلام الناز خانوم یه درخواست یه آموزش دیگه رو هم دارم.
    چطوری کاری کنیم که عکس بعض از پست هامون که ویدیو یا موزیک یا مقاله یا… هستن ایکن پلیر یا موزیک یا مقاله و… رو داشته باشن؟ منظورم بدون نیاز به طراحی عکس با ایکن هست ینی عکس پیشفرض باشه وقتی قرارش دادیم ایکن بیاد روش
    منظورم اینطوریه؟

    http://s8.picofile.com/file/8312329550/1.png

    http://s9.picofile.com/file/8312330218/Untitled.png

    • سیروس اسدی
      - ۳ آذر , ۱۳۹۶

      سلام دوست عزیز. حتما مقاله درخواستیتون رو آماده و منتشر میکنیم.

  • محمد
    - ۲۲ خرداد , ۱۳۹۷

    سلام دوست عزیزم
    اگه ممکنه برای ووکامرس هم قرار بدید سپاس‌گزارم.

  • محمد
    - ۵ تیر , ۱۳۹۸

    با سلام من این کد رو پیاده سازی کردم ولی اولا header سایت من رو کامل نمیده نمیدونم مشکل از کجاست. دوما که بعد از وارد کردن ایمیل و دکمه تغییر رمز رو میزنم ارور ۴۰۴ میاد و میگه که صفحه مورد نظر یافت نشد ایمیل تغییر رمز هم برام میاد ولی باز روی لینک میزنم ارور ۴۰۴ میده. سوال بعدی این که توی کد ها من باید بجای wpschool-login چیز دیگه ای بزارم ؟؟ شاید مشکل از همینجاس

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

      در مورد wpschool-login باید بگم که صرفا برای ترجمه به زبان های دیگه استفاده میشه و می تونید جایگزینش کنید با هر اسم دیگه ای.
      در مورد خطای دریافتی باید دیباگ انجام بدید ببینید چه خطایی میده ولی ۴۰۴ یعنی صفحه که بهش میخواید برید موجود نیست ، حالا یا صفحه رو نساختید یا درست آدرس دهی نکردید.
      لطفا فیلم آموزشی رو به دقت نگاه کنید و مراحل رو مجدد به ترتیب انجام بدید.
      موفق باشید

  • علی رصایی
    - ۲۰ اسفند , ۱۳۹۸

    سلام من فقط میخام پیغام بالای فرم فراموشی رمز عبور رو اصلاح کنم
    تابع مربوط هم میدونم چیه فقط بلد نیستم اصلاح کنم

  • علیرضا انصاری
    - ۸ آذر , ۱۳۹۹

    سلام ببخشید اگر بخواهیم نام ایمیلی که برای کاربر ارسال میشه، نام وب سایتمون باشه و wordpress نباشه چیکار باید بکینم؟

    ممنون از آموزش های خوبتون

  • مسلم دهقان
    - ۳۰ مهر , ۱۴۰۰

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

  • مسلم دهقان
    - ۳۰ مهر , ۱۴۰۰

    سلام. پیغام قبلی رو که پاسخ ندادید. امیدوارم این پیغام رو پاسخ بدید
    زمانی که ایمیل به هر دلیل ارسال نمی شه و پیغام خطای زیر فراخوانی می شه.
    errors=retrieve_password_email_failure
    چطور باید پیغام رو در زیر فراموشی رمز عبور یا مکان دلخواه نمایش دهیم.

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

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

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