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

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

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

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

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

 

قدم اول : طراحی صفحه لاگین

در ابتدا باید یک فایل php در مسیر پوسته وردپرس برای صفحه لاگین بسازیم ، من برای این فایل نام custom-login.php انتخاب کردم و شما هم می تونید به دلخواه هر نامی برای فایلتون بزارید.

بعد از ساخت فایل ، اون رو باز کرده و کدهای زیر رو به فایل اضافه می کنیم.

<?php
// template name: Login Page
get_header();
?>

کد خط دوم برای معرفی این صفحه به عنوان قالب صفحه با نام Login Page به وردپرس استفاده میشه. (حتما باید اولین خط در فایل باشد) برای اطلاعات بیشتر مقاله ساخت قالب برگه ها در وردپرس رو مطالعه کنید.

خط سوم هم محتوای موجود در header قالب رو به صفحه اضافه میکنه.

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

1 – با استفاده از تابع wp_login_form:

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

<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' );
			} else { ?>
		<?php
				wp_login_form(
					array(
						'label_username' => __( 'نام کاربری', 'wpschool-login' ),
						'label_password' => __( 'رمز عبور', 'wpschool -login' ),
						'label_log_in' => __( 'ورود', 'wpschool -login' ),
						'redirect' => $_REQUEST['redirect_to'],
					)
				);
			?>
			<a class="forgot-password" href="<?php echo wp_lostpassword_url(); ?>">
				<?php _e( 'رمز خود را فراموش کرده اید؟', 'wpschoool-login' ); ?>
			</a>
		<?php } ?>
		</div>
        </div>
</div>

2 – طراحی با Html :

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

<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 method="post" action="<?php echo wp_login_url(); ?>">
						<p class="login-username">
							<label for="user_login"><?php _e( 'نام کاربری', 'wpschool-login' ); ?></label>
							<input type="text" name="log" id="user_login">
						</p>
						<p class="login-password">
							<label for="user_pass"><?php _e( 'رمز عبور', 'wpschool-login' ); ?></label>
							<input type="password" name="pwd" id="user_pass">
						</p>																		
						<p class="login-remember">
							<label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> <?php _e( 'مرا به خاطر بسپار', 'wpschool-login' ); ?></label>
						</p>
						<p class="login-submit">
							<input type="submit" value="<?php _e( 'ورود', 'wpschoool-login' ); ?>">
						</p>
					</form>
					<a class="forgot-password" href="<?php echo wp_lostpassword_url(); ?>">
						<?php _e( 'رمز خود را فراموش کرده اید؟', 'wpschoool-login' ); ?>
					</a>
					  <?php } ?>
				</div>
        </div>
</div>

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

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

قدم دوم :  تنظیمات اولیه

قبل از ادامه کار ابتدا باید به قسمت تنظیمات وردپرس رفته و از قسمت پیوندهای یکتا در بخش تنظیمات عمومی گزینه “نام نوشته” را انتخاب کرده و ذخیره کنید.

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

اگر مراحل را در localhost انجام می دهید ممکن است این تغییر باعث مشاهده صفحه 404  در وردپرس شود جهت رفع این مشکل در WAMP روی آیکون برنامه کلیک کرده و از Apache زیر منوی Apache Modules گزینه rewrite_module را فعال می کنیم.

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

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

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

در صفحه افزودن برگه عبارت user-login را تایپ کرده و سپس از قسمت ویژگی های برگه بخش قالب گزینه Login Page (همان نامی که در ابتدای فایل custom-login.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;
}

.ul-errors{
    background: #d00000;
    width: 600px;
    margin: 0 auto 10px;
    padding: 9px;
    border-radius: 5px;
    font-weight: 700;
	color: #fff;
    text-align: center
}

.login-info {
    background: #00a77a;
    width: 600px;
    margin: 0 auto 10px;
    padding: 9px;
    border-radius: 5px;
    font-weight: 700;
	color: #fff;
    text-align: center
}

حالا روی آدرس موجود در جلوی عبارت پیوند یکتا کلیک میکنیم تا صفحه لاگینی که طراحی کردیم رو ببینیم. (آدرس صفحه در این مثال:  http://localhost/test/user-login) باید با صفحه ای مشابه تصویر پایین روبرو بشید  البته با فونت متفاوت :

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

قدم سوم: کد نویسی

تا اینجای کار ما فقط ظاهر صفحه رو طراحی کردیم و حالا باید توابع لازم رو هم به کدهامون اضافه کنیم.

برای اینکار کدهایی که در ادامه گفته میشه رو به فایل functions.php اضافه میکنیم.

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

add_action( 'login_form_login', 'redirect_to_custom_login');
function redirect_to_custom_login() {
    if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
        $redirect_to = isset( $_REQUEST['redirect_to'] ) ? $_REQUEST['redirect_to'] : null;
     
        if ( is_user_logged_in() ) {
            redirect_logged_in_user( $redirect_to );
            exit;
        }
 
        // The rest are redirected to the login page
        $login_url = home_url( 'user-login' );
        if ( ! empty( $redirect_to ) ) {
            $login_url = add_query_arg( 'redirect_to', $redirect_to, $login_url );
        }
 
        wp_redirect( $login_url );
        exit;
    }
}

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

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

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

حالا لازمه که بعد از لاگین شدن کاربر اون رو به صفحه ای که مناسب هستش انتقال بدیم:

add_filter( 'login_redirect', 'redirect_after_login' , 10, 3 );
function redirect_after_login( $redirect_to, $requested_redirect_to, $user ) {
    $redirect_url = home_url();
 
    if ( ! isset( $user->ID ) ) {
        return $redirect_url;
    }
 
    if ( user_can( $user, 'manage_options' ) ) {
        // Use the redirect_to parameter if one is set, otherwise redirect to admin dashboard.
        if ( $requested_redirect_to == '' ) {
            $redirect_url = admin_url();
        } else {
            $redirect_url = $requested_redirect_to;
        }
    } else {
        // Non-admin users always go to their account page after login
        $redirect_url = home_url();
    }
 
    return wp_validate_redirect( $redirect_url, home_url() );
}

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

در صورتی که در هنگام لاگین خطایی رخ بده کاربر باید در صفحه لاگین باقی بمونه و خطاهای موجود برای کاربر نمایش داده بشه:

add_filter( 'authenticate', 'maybe_redirect_at_authenticate' , 101, 3 );
function maybe_redirect_at_authenticate( $user, $username, $password ) {
    if ( $_SERVER['REQUEST_METHOD'] === 'POST' ) {
        if ( is_wp_error( $user ) ) {
            $error_codes = join( ',', $user->get_error_codes() );
            $login_url = home_url( 'user-login' );
            $login_url = add_query_arg( 'login', $error_codes, $login_url );
 
            wp_redirect( $login_url );
            exit;
        }
    }
    return $user;
}

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

 add_action( 'wp_logout', 'redirect_after_logout' );
 function redirect_after_logout() {
    $redirect_url = home_url( 'user-login?logged_out=true' );
    wp_safe_redirect( $redirect_url );
    exit;
 }

مرحله آخر نمایش خطاهای ارسالی به کاربر هنگام لاگین و زمان خروج از سایت  در صفحه custom-login.php هستش برای این کار کدهای زیر رو در صفحه custom-login هر جایی که تمایل داریم خطاها نمایش داده بشه اضافه می کنیم (در این مثال قبل از آخرین </div> قرار داده شده است)

<?php 
	if ( isset( $_REQUEST['login'] ) ) {
		$error_codes = explode( ',', $_REQUEST['login'] );
		$html_out = "<ul class='ul-errors'>";
			foreach ( $error_codes as $code ) {
				switch (trim($code))  {
					case 'empty_username':
						$html_out=$html_out.'<li>'. __( 'لطفا نام کاربری خود را وارد کنید', 'wpschoool-login' ).'</li>';
						break;
					case 'empty_password':
						$html_out=$html_out.'<li>'.__( 'لطفا رمز عبور خود را وارد کنید', 'wpschoool-login' ).'</li>';
						break;
					case 'invalid_username':
						$html_out=$html_out.'<li>'.__("نام کاربری وارد شده معتبر نمی باشد",'wpschoool-login').'</li>';	
						break;		
					case 'incorrect_password':
						 $html_out=$html_out.'<li>'.__("رمز عبور وارد شده معتبر نمی باشد",'wpschoool-login').'</li>';
						break;
					default:
						$html_out=$html_out.'<li>'.__( 'خطایی رخ داده لطفا مجدد تلاش کنید', 'wpschoool-login' ).'</li>';
				} 
		}
		echo $html_out;
	}		
?>	
<?php if (isset( $_REQUEST['logged_out'] ) && $_REQUEST['logged_out'] == true) : ?>
		<p class="login-info">
			<?php _e( 'هم اکنون از سایت خارج شده اید ، در صورت تمایل دوباره وارد شوید.', 'wpschoool-login' ); ?>
		</p>
<?php endif; ?>	

با انجام مراحل بالا وقتی کاربر میخواهد وارد صفحه لاگین بشه (wp-login.php) به صفحه سفارشی که براش طراحی کردیم هدایت شده و از طریق اون صفحه در سایت لاگین میکنه و اگر خطایی رخ بده در همون صفحه به کاربر نمایش داده میشه و در صورت Log out کردن از سایت به همین صفحه منتقل شده و پیام مناسب به کاربر نمایش داده میشه.

توی مقاله های قبلی به لاگین ajax در وردپرس اشاره کردیم و اگر دوست داشته باشید می تونید این مقاله رو هم مطالعه کنید.

امیدوارم که این مقاله به شما کمک کنه تا بتونید صفحه لاگین مورد نظرتونو طراحی کنید.

موفق باشید.

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

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

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

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

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

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

      سلام دوست عزیز
      آموزش جایگزین صفحه فراموشی رمز در وردپرس رو می تونید از طریق لینک زیر مشاهده کنید:
      https://goo.gl/59rs3n
      با تشکر

  • sepidar
    - ۲۹ فروردین , ۱۳۹۷

    سلام از این روش میشه مثلا برای چندتا سایت وردپرسی که داریم صفحات اختصاصی ورود- خروج و فراموش کردن رمز ایجاد کنیم و مهم این که در صورت آپدیت هسته وردپرس این قسمت ها به هم میخوره یا حفظ میشه . ممنون از آموزش خوبتون

    • سیروس
      - ۳۰ فروردین , ۱۳۹۷

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

  • sepidar
    - ۳۰ فروردین , ۱۳۹۷

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

    • الناز
      - ۳۱ فروردین , ۱۳۹۷

      با سلام و خسته نباشید
      شما باید این کد رو تغییر بدید تو کدهای بالا:

      $redirect_url = home_url( ‘user-login?logged_out=true’ );

      و تبدیلش کنید به این:

      if (is_admin){
      $redirect_url = home_url(‘/’);
      } else {
      $redirect_url = home_url(‘user-login?logged_out=true’);
      }

  • حمید درگاهی
    - ۲۷ تیر , ۱۳۹۷

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

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

      سلام و خسته ناشید.
      ممنون که از آموزش های وب سایت مدرسه وردپرس استفاده می کنید.
      همونطور که تو آموزش های ویدئویی مشاهده کردید کدها مشکلی نداره و به درستی کار میکنه!
      توصیه میکنم که لاگ وردپرس رو فعال کنید و ببنید که به ارور بر میخورید یا خیر.
      واینکه بعد از ثبت نام ابتدا ببینید با لاگین پیش فرض وردپرس لاگین میشه یا خیر!
      و در انتها اگر سوالی بود از طریق تگلرام مدرسه وردپرس مس تونیم بیشتر راهنماییتون کنیم :
      https://t.me/wpschool_support

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

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

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

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

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