اضافة اختيار كلمة مرور خاصة أثناء التسجيل

نعرف أن التسجيل في ووردبريس يتم افتراضياً باسم المستخدم والبريد الالكتروني فقط، ويتم ارسال كلمة مرور عشوائية للمستخدم على بريده الالكتروني. في هذه المقالة سنقوم سوياً بعمل إضافة بسيطة سنسميها “Custom Registration Password” تمكن المستخدم من اختيار كلمة المرور الخاصة به أثناء عملية التسجيل. add_password_field_registration_form_001

إنشاء ملف الإضافة

اذهب إلى مجلد “plugins” وأنشيء مجلداً جديداً بداخله باسم “wphawy-CRP” – يمكنك استخدام اي اسم تريده-
add_password_field_registration_form_002

افتح محرر النصوص وليكن NotePad++ وأنشيء ملف جديد باسم “wphawy-crp.php” واحفظه داخل مجلد “wphawy-CRP” الذي انشأته في الخطوة السابقة، هذا سيكون ملف الاضافة الخاصة بنا والذي سنضع به الاكواد التي ستاتي في الخطوات القادمة.

ضع في بداية الملف معلومات الاضافة الخاصة بنا بهذا الشكل -يمكنك تغيير المعلومات كما تحب-:

<?php
/*
Plugin Name: WPHawy Custom Registration Password
Description: Let the user to choose his password in registration form.
Author: Aboelabbas
Author URI: http://www.wphawy.com/
Version: 1.0
*/

الآن يمكنك الذهاب لصفحة الإضافات في لوحة التحكم وتفعيل الإضافة.

الهيكل البرمجي للإضافة

سنستخدم طريقة الـبرمجة الكائنية OOP في عمل الاضافة الخاصة بنا، من أهم فوائدها في ووردبريس خاصة، منع التعارض بين اي اضافة اخرى نتيجة لاستخدام دوال تحمل نفس الاسم.

ضع هذا الكود في ملف الإضافة:

class WPHawy_CRP {

	private static $_instance = null;
	
	/*
	* Dummy Constructor.
	*/
	private function __construct() {}
	
	/*
	* The true Constructor.
	*/
	public static function init() {
	
		if ( null == self::$_instance ) {
		
			self::$_instance = new self;
			
			self::$_instance->hooksInit();
			
		}
		
		return self::$_instance;
	}
	
	/*
	* Initiate needed hooks.
	*/
	private function hooksInit() {
	
	}
}

//Initiate Our plugin
$WPHawy_CRP = WPHawy_CRP::init();

شرح الكود السابق:
– اولا انشانا كلاس باسم “WPHawy_CRP” ويجب ان يكون الاسم فريدا وخاص فقط بالاضافة التي تنشئها.
داخل الكلاس:
– قمنا بتعريف متغير خاص باسم $_instance بقيمة null هذا المتغير سنسند اليه الكائن الخاص بالكلاس بعد ذلك.
– قمنا بتعريف دالة اقلاع او بناء “constructor” الكلاس كدالة خاصة فارغة.
– قمنا بتعريف دالة ثابتة باسم init واستخدمناها بناء الكلاس بدلا من الدالة الافتراضية _construct، الغرض من هذا هو منع بناء الكلاس اكثر من مرة واحدة، داخل هذه الدالة قمنا بعملية بناء الكلاس واسنادها للمتغير $_instance بعد التأكد من انه فارغ وايضا استدعينا دالة hooksInit وهي الدالة الخاصة بتفعيل الـ hooks التي سنستخدمها في الاضافة.
– الدالة hooksInit، سنضع بداخلها الـ hooks التي سنستخدمها بعد ذلك.
– اخيرا قمنا ببدء عمل الكلاس عن طريق استدعاء دالة الانشاء الخاصة بنا init() واسندناها الى المتغير $WPHawy_CRP.

إضافة وسوم الـ HTML لنموذج التسجيل

نريد الآن إضافة وسوم HTML إضافية لنموذج التسجيل في ووردبريس “كلمة المرور – تأكيد كلمة المرور – مؤشر القوة” وسنفعل هذا باستخدام الـ hook المسمى register_form.

ننشيء دالة جديدة داخل الكلاس باسم addHTML ونضعها بعد دالة hooksInit مباشرة:

	/*
	* Add HTML to the register form.
	*/
	public function addHTML() { ?>
		<p>
			<label for="pass1"><?php _e('Password') ?><br />
			<input type="password" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" /></label>
		</p>
		<p>
			<label for="pass2"><?php _e('Confirm new password') ?><br />
			<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" /></label>
		</p>
		<p id="pass-strength-result" style="display: block;" class=""><?php _e('Strength indicator'); ?></p>
		<p class="description indicator-hint"><?php _e('Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like ! " ? $ % ^ & ).'); ?></p>
		<br class="clear" />
	<?php }

بعد ذلك نقوم بتطبيق هذه الدالة في الـ hook المسمى register_form، عن طريق وضع هذا السطر داخل دالة hooksInit :

add_action( 'register_form', array( $this, 'addHTML' ) );

الآن اذا ذهبت الى صفحة التسجيل ستجدها على هذا الشكل:
add_password_field_registration_form_003

اضافة التنسيقات والملفات اللازمة لرأس صفحة التسجيل

في هذه الخطوة سنضع بعض اكواد الـ css لتنسيق نموذج التسجيل بشكل افضل، كما سنقوم باستدعاء ملف الجافاسكربت user-profile.js هذا الملف يحتوي على اكواد الجافاسكربت الخاصة بمؤشر القوة strength indicator ويستدعي معه ملفات الجافاسكربت الاخرى اللازمة لذلك.
سنقوم بانشاء دالة جديدة باسم enqueue ونضعها داخل الكلاس بعد دالة addHTML مباشرة:

	/*
	* Add required scripts and CSS to the login header.
	*/

	public function enqueue() {
		
		wp_enqueue_script( 'user-profile' );
		
		echo '<style>
		#reg_passmail{ display: none; }
		.login #login form #pass-strength-result {
			width: auto;
			display:block;
			float: none;
			clear: both;
		}
		@media screen and (min-width:800px) {
			
			#login {
				width: 600px;
			}
			#login form p {
				float: left;
				margin: 0 0 0 15px;
				width: 261px;
			}
			#login form p.indicator-hint,#login form p.submit,
			.rtl #login form p.indicator-hint,.rtl #login form p.submit {
				float: none;
				clear: both;
				width: auto;
			}
			.rtl #login form p {
				float: right;
				margin: 0 15px 0 0;
			}
			
			#login form .button {
				width: 100%;
			}
		}
		</style>';
	}

نقوم بتطبيق هذه الدالة على الـ hook المسمى login_enqueue_scripts عن طريق وضع هذا السطر داخل دالة hooksInit:

add_action( 'login_enqueue_scripts', array( $this, 'enqueue' ) );

الآن إذا ذهبت الى صفحة التسجيل ستجد ان التنسيق اختلف قليلا بحيث يظهر كل حقلين جانب بعضهم على الشاشات الكبيرة،أيضا قمنا بإخفاء عبارة “كلمة المرور سترسل إليك بالبريد الإلكتروني.” حيث اننا سنقوم بمنع ارسالها، كما ان مؤشر القوة يعمل الآن بشكل جيد.add_password_field_registration_form_001

التحقق من إدخال كلمة المرور وتطابقها

الآن بعدما قمنا باظهار حقلي كلمة المرور وتأكيد كلمة المرور علينا ان نقوم بالتحقق منهم بحيث لا يتم ادخال كلمة مرور فارغة أو ان تكون كلمة المرور غير متطابقة مع حقل التأكيد.

نقوم بعمل دالة جديدة في الكلاس باسم validatePass بعد دالة enqueue مباشرة:

	/**
	* Make sure the password field is required and matches the confirmation field.
	*/

	public function  validatePass( $errors, $login, $email ) {

		
		$pass1  = ( isset( $_POST['pass1'] ) ) ? $_POST['pass1'] : null;
		$pass2  = ( isset( $_POST['pass2'] ) ) ? $_POST['pass2'] : null;
		
		if ( ! $pass1 ) {
			
			$errors->add( 'empty_password', __( '<strong>ERROR</strong>: The password field is empty.' ) );
			
		}
		
		if ( $pass1 != $pass2 ) {
		
			$errors->add( 'password_reset_mismatch', __( 'The passwords do not match.' ) );
			
		}
		
		return $errors;

	}

نلاحظ ان الدالة validatePass تأخذ ثلاثة بارمترات حيث اننا سنقوم بتطبيقها على الـ hook المسمى registration_errors، البارمتر الاول $errors هو محور الدالة هنا وهو عبارة عن الكائن WP_Error وقمنا باستخدام دالة add -وهي احد دوال هذا الكائن- لاضافة الاخطاء الجديدة الى قائمة الاخطاء.

الأن نقوم بتطبيق الدالة على فلتر registration_errors بوضع هذا السطر داخل دالة hooksInit :

add_filter( 'registration_errors', array( $this, 'validatePass' ), 10, 3 );

الآن بعد هذه الخطوة جرب التسجيل دون ادخال كلمة المرور او بوضع كلمتي مرور غير متطابقتين، سيظهر لك خطأ ولن يتم التسجيل.

استبدال كلمة المرور العشوائية بالكلمة التي ادخلها المستخدم

حتى الآن اذا قام العضو بالتسجيل سيتم ارسال كلمة مرور عشوائية الى بريده تختلف عن التي ادخلها، لذا سنقوم باستبدال هذه الكلمة بكلمة المرور الجديدة عن طريق الفلتر المسمى random_password.

نقوم بعمل دالة جديدة باسم setRandomPass داخل الكلاس اسفل دالة validatePass:

	/*
	* Return the entered password.
	*/
	public function setRandomPass( $password ) {
		
		return ( isset( $_POST['pass1'] ) ) ? $_POST['pass1'] : null;
		
	}

الآن نقوم بتطبيق الدالة على الفلتر random_password بوضع هذا السطر داخل دالة hooksInit:

add_filter( 'random_password', array( $this, 'setRandomPass' ) );

الآن بتطبيق هذه الخطوة نكون وصلنا للهدف من الاضافة وهو تمكين المستخدم من اختيار كلمة المرور الخاصة به، ولكن تبقى ثلاث خطوات اخرى تكميلية لتكون الامور افضل.

اضافة الاخطاء الجديدة الى قائمة shake_error_codes

نلاحظ عند محاولة التسجيل بوضع بريد الكتروني خاطيء مثلا ان نموذج التسجيل يقوم بالاهتزاز يمينا ويسارا مع ظهور الخطأ كوسيلة تنبيه، لكن هناك بعض الاخطاء عند ظهورها لا تتم هذه الحركة من ضمنها الخطأ الخاص بعدم تطابق كلمتي المرور.

سنستخدم الفلتر المسمى shake_error_codes لاضافة بقية الاخطاء المحتملة الى القائمة.
نقوم بعمل دالة جديدة باسم shakeErrors داخل الكلاس بعد دالة setRandomPass:

		/*
	* Add new errors codes to shake_error_codes array.
	*/
	public function shakeErrors( $shake_error_codes ) {
		
		$shake_error_codes[] = 'password_reset_mismatch';
		$shake_error_codes[] = 'username_exists';
		$shake_error_codes[] = 'email_exists';
		
		return $shake_error_codes;
	}

نقوم بتطبيق الدالة على الفلتر shake_error_codes بوضع هذا السطر داخل دالة hooksInit:

add_filter( 'shake_error_codes', array( $this, 'shakeErrors' ) );

الآن، جرب ادخال قيم صحيحة في النموذج ماعدا ان كلمتي المرور غير متطابقتين واضغط زر تسجيل .. ستجد ان نموذج التسجيل يهتز مع ظهور الخطأ وليس كالسابق.. شيء جميل 😀 .

تغيير رسالة نجاح عملية التسجيل

عند نجاح عملية التسجيل تظهر رسالة نصها “تمّ التسجيل بنجاح. يرجى مراجعة بريدك الإلكتروني.” سنقوم بتغييرها بما اننا سنعطل ارسال كلمة المرور في الخطوة القادمة.

نقوم بعمل دالة جديدة بداخل الكلاس باسم successMsg بعد دالة shakeErrors :

	/*
	* change success message.
	*/
	
	public function successMsg( $str ) {
		
		$str = str_replace( array( 'Registration complete. Please check your e-mail.', 'تمّ التسجيل بنجاح. يرجى مراجعة بريدك الإلكتروني.' ),
		array( 'Registration complete. You can login by username and password.', 'تم التسجيل بنجاح يمكنك الدخول باسم المستخدم وكلمة المرور.' ), 
		
		$str );
		
		return $str;
	}

}

نقوم بتطبيق الدالة على الفلتر المسمى gettext بوضع هذا السطر داخل دالة hooksInit:

add_filter( 'gettext', array( $this, 'successMsg' ) );

تعطيل ارسال كلمة المرور الى البريد

بما ان المستخدم اختار كلمة المرور بنفسه فلا داع لارسالها له عبر البريد الالكتروني، لتنفيذ ذلك سنقوم بوضع هذه الدالة في نهاية ملف الاضافة “اي خارج الكلاس”:

if ( ! function_exists( 'wp_new_user_notification' ) ) :
/*
* Unplug the default wp_new_user_notification() to prevent registration password email from being sent.
*/
function wp_new_user_notification( $user_id, $plaintext_pass = '' ) {
	$user = get_userdata( $user_id );

	// The blogname option is escaped with esc_html on the way into the database in sanitize_option
	// we want to reverse this for the plain text arena of emails.
	$blogname = wp_specialchars_decode( get_option( 'blogname' ), ENT_QUOTES );

	$message  = sprintf( __( 'New user registration on your site %s:' ), $blogname ) . "\r\n\r\n";
	$message .= sprintf( __('Username: %s' ), $user->user_login) . "\r\n\r\n";
	$message .= sprintf( __('E-mail: %s' ), $user->user_email) . "\r\n";

	@wp_mail( get_option( 'admin_email' ), sprintf( __('[%s] New User Registration'), $blogname ), $message );

}

endif;

الدالة wp_new_user_notification من الدوال الافتراضية الموجودة في ووردبريس تقوم بارسال كلمة المرور الى العضو عند تسجيله وكذلك ارسال تنبيه لمدير الموقع بتسجيل عضو جديد.
ما قمنا به هنا هو اعادة تعريف هذه الدالة مع حذف الجزء الخاص بارسال كلمة المرور بالتالي سيقوم ووردبريس باستخدام هذه الدالة بدلا من الافتراضية.

ملف العمل

بهذا نكون انتهينا من عمل اضافتنا ويمكننا استخدامها دون مشاكل مع الشعور بالانجاز 😀 ،
اضغط هنا لتحميل الإضافة.

10 تعليق

  1. السلام عليكم ورحمة الله وبركاته

    تم تفعيل الإضافة بنجاح، بارك الله فيك أخي الكريم على الشرح الرائع والوافي
    جعله الله في ميزان حسناتك

  2. اخي مشكور ع المجود الرائع و لكن طلبي مختلف هل تستطيع عمل نموذج html كما في هذه المواقع ؟
    vip4qahr.weebly.com
    qahr91gifts.yolasite.com
    و تصل البيانات لبريدي
    aqoo9997@gmail.com
    و يكون مكان البسورد نقط مش حروف
    اذا كنت تستطيع او اي احد بستطيع المساعدة الرجاء يراسلني ع الجيميل و راح اكافئه بأذن الله
    اخوكم عبدالرحمن

  3. طيب ممكن شرح كيفية عمل زرار التسجيل والروابط تختفي وتظهر عند التجسيل في ورد بريس

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *