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

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

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

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

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

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

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

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

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

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

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

 

شرح الكود السابق :
اولا ننشئ كلاس باسم “WPHawy_CRP”ويجب ان يكون الاسم فريدا وخاص فقط بالاضافة التي تنشئها.

داخل الكلاس :

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

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

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

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

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

 

نقوم بتطبيق هذه الدالة على الـ hook المسمى login_enqueue_scripts عن طريق وضع هذا السطر داخل دالة hooksInit .
add_action( ‘login_enqueue_scripts’, array( $this, ‘enqueue’ ) );
الان سنذهبت الى صفحة التسجيل ستجد ان التنسيق اختلف قليلا بحيث يظهر كل حقلين جانب بعضهم على الشاشات الكبيرة أيضا قمنا بإخفاء عبارة كلمة المرور سترسل إليك بالبريد الإلكتروني حيث اننا سنقوم بمنع ارسالها كما ان مؤشر القوة يعمل الآن بشكل جيد .
التحقق من إدخال كلمة المرور وتطابقها :
الآن بعدما قمنا باظهار حقلي كلمة المرور وتأكيد كلمة المرور علينا ان نقوم بالتحقق منهم بحيث لا يتم ادخال كلمة مرور فارغة أو ان تكون كلمة المرور غير متطابقة مع حقل التأكيد نقوم بعمل دالة جديدة في الكلاس باسم validatePass بعد دالة enqueue مباشرة .

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

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

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

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

 

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

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

 

نقوم بتطبيق الدالة على الفلتر shake_error_codes بوضع هذا السطر داخل دالة hooksInit .
add_filter( ‘shake_error_codes’, array( $this, ‘shakeErrors’ ) );
الآن جرب ادخال قيم صحيحة في النموذج ماعدا ان كلمتي المرور غير متطابقتين واضغط زر تسجيل ستجد ان نموذج التسجيل يهتز مع ظهور الخطأ وليس كالسابق .
تغيير رسالة نجاح عملية التسجيل :
عند نجاح عملية التسجيل تظهر رسالة نصها تم التسجيل بنجاح يرجى مراجعة بريدك الإلكتروني. سنقوم بتغييرها بما اننا سنعطل ارسال كلمة المرور في الخطوة القادمةنقوم بعمل دالة جديدة بداخل الكلاس باسم successMsg بعد دالة shakeErrors .

 

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

 

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

 

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

واخيرا لتحميل الاضافه اضغط هنا .

 

508 كل المشاهدات 1 مشاهدة اليوم

مواضيع مشابهة قد تعجبك :

اترك تعليقاً

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