كيفية إنشاء صفحة تسجيل الدخول في WordPress بدون استخدام البرنامج المساعد

هل تبحث عن أفضل طريقة لإنشاء صفحة تسجيل الدخول في WordPress بدون مكون إضافي وبدون تخصيص صفحة تسجيل الدخول الافتراضية إلى WordPress؟ إذا كنت ترغب في إنشاء صفحة تسجيل الدخول في WordPress دون استخدام المكونات الإضافية الشائعة لتسجيل الدخول إلى WordPress ، فيمكنك القيام بذلك عن طريق إضافة رمز تسجيل الدخول في رمز قصير أو في قالب صفحة مخصص.

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

يجب أن تعمل كل طريقة من هذه الطرق بسلاسة مع أي سمة WordPress أو أي بيئة استضافة WordPress.

قم بإنشاء صفحة تسجيل الدخول في WordPress بدون البرنامج المساعد

الهدف من هذا البرنامج التعليمي هو مساعدتك في إنشاء صفحة تسجيل دخول مثل تسجيل الدخول الافتراضي إلى WordPress الذي يسمح لك بالوصول إلى لوحة معلومات WordPress بعد تسجيل الدخول.

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

1. الرمز المختصر لصفحة تسجيل الدخول
2. تسجيل الدخول إلى قالب الصفحة المخصص

إنشاء رمز قصير لصفحة تسجيل الدخول

الخطوة الأولى عندما نريد إنشاء صفحة تسجيل دخول في أي مكان على WordPress هي استخدام رمز قصير. يمكن إضافة الرمز المختصر إلى أي صفحة أو أي منشور أو حتى عنصر واجهة مستخدم وقالب صفحة مخصص أيضًا.

في هذه الخطوة ، سننشئ رمزًا قصيرًا لنموذج تسجيل الدخول والذي سيتم استخدامه لنشر نموذج تسجيل الدخول على أي صفحة في WordPress أو في منشور. يمنح هذا الأسلوب المستخدم المرونة في إنشاء صفحة تسجيل دخول على أي قسم من أقسام موقعه.

لإنشاء الرمز القصير سوف نستخدم الكود التالي:

 // إنشاء رمز قصير لنموذج تسجيل الدخول

الوظيفة njengah_add_login_shortcode () {

                add_shortcode ('njengah-login-form'، 'njengah_login_form_shortcode') ؛

}

لقد أضفنا الرمز القصير في دالة حتى نتمكن من تهيئته لاحقًا. تقوم وظيفة add_shortcode بإنشاء رمز قصير في WordPress. يكون التعبير العام لوظيفة add_shortcode () كما يلي:

 add_shortcode (سلسلة $ tag ، استدعاء $ قابل للاستدعاء)

كما ترى ، تحتوي هذه الوظيفة على معلمتين على النحو التالي:

 // الخطوة 2: رد الاتصال بالرمز القصير
الوظيفة njengah_login_form_shortcode () {
	
	إذا (is_user_logged_in ())
		
	return '<p> مرحبًا. لقد قمت بتسجيل الدخول! </ p> '؛ ؟> 
		
<div class = "njengah-login-tutorial">  
		
	<؟ php إرجاع wp_login_form ( 
		مجموعة مصفوفة( 
			"صدى" => خطأ ،
			'label_username' => __ ('اسم المستخدم الخاص بك') ،
			'label_password' => __ ('كلمة مرورك') ،
			'label_remember' => __ ('تذكرني')
			        )
	) ؛ ؟> 
		
            </div>
  <؟ php 
   }

إذا قمت بالتحقق من الكود بشدة ، ستلاحظ أننا استخدمنا الوظيفة للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول كما أوضحت في المنشور حول كيفية التحقق مما إذا كان المستخدم قد قام بتسجيل الدخول في WordPress .

إذا لم يتم تسجيل دخول المستخدم ، فإننا نستخدم وظيفة wp_login_form () لعرض نموذج تسجيل الدخول. إذا تم تسجيل دخول المستخدم ، فإننا نعرض رسالة الترحيب على تلك الصفحة بشكل مشروط بدلاً من إظهار نموذج تسجيل الدخول.

وظيفة الفسفور الابيض wp_login_form ()

wp_login_form () هي إحدى وظائف WordPress التي توفر لمطوري القوالب طريقة لإظهار نموذج WordPress في أي مكان. يمكن التعبير عن هذه الوظيفة بشكل عام على النحو التالي:

 wp_login_form (المصفوفة $ args = array ())

يمكن أن تكون $ args مجموعة من الخيارات التي تتحكم في كيفية عرض النموذج.

فيما يلي الوسائط التي يمكنك استخدامها في المصفوفة لتغيير طريقة عرض النموذج.

على سبيل المثال ، يمكنك ضبط مصفوفة الوسائط وتمريرها إلى هذه الوظيفة على النحو التالي:

 <؟ php 

wp_login_form ( 

	 مجموعة مصفوفة(
			"صدى" => صحيح ،
			// تعيد قيمة "إعادة التوجيه" الافتراضية المستخدم إلى عنوان URI للطلب.
			'redirect' => (is_ssl ()؟ 'https: //': 'http: //'). _SERVER $ ['HTTP_HOST']. _SERVER $ ['REQUEST_URI'] ،
			"form_id" => "نموذج تسجيل الدخول" ،
			'label_username' => __ ('اسم المستخدم الخاص بك') ،
			'label_password' => __ ('كلمة مرورك') ،
			'label_remember' => __ ('تذكرني') ،
			'label_log_in' => __ ('تسجيل الدخول') ،
			'id_username' => 'user_login' ،
			'id_password' => 'user_pass' ،
			'id_remember' => 'Rememberme' ،
			'id_submit' => 'wp-submit' ،
			'تذكر' => صحيح ،
			"value_username" => "" ،
			// اضبط "value_remember" على "true" على مربع الاختيار "تذكرني" افتراضيًا لتحديده.
			'value_remember' => خطأ ،
		) ؛
		
) ؛ ؟>

سيتم عرض النموذج مع التسميات الجديدة التي أضفتها إلى المصفوفة بدلاً من تسميات نموذج تسجيل الدخول الافتراضية إلى WordPress. في الرمز أعلاه ، قمت بتغيير اسم المستخدم إلى اسم المستخدم وكلمة المرور إلى كلمة المرور الخاصة بك.

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

فيما يلي الكود الذي سيُهيئ الرمز المختصر لنموذج تسجيل الدخول:

 // الخطوة 3: ابدأ وظيفة الرمز القصير

add_action ('init'، 'njengah_add_login_shortcode')؛

مقتطف الكود الكامل لإنشاء رمز قصير لنموذج تسجيل الدخول في WordPress

يمكننا الآن تجميع كل مقتطفات الشفرة هذه في مقتطف رمز واحد وإضافة الكود إلى function.php لموضوع WordPress النشط ثم عرض نموذج تسجيل الدخول إلى WordPress باستخدام الرمز القصير - [njengah-login-form].

فيما يلي مقتطف الشفرة الكامل الذي يجب عليك إضافته إلى ملف function.php لإضافة الرمز المختصر لنموذج تسجيل الدخول إلى WordPress:

 / **
 * إنشاء نموذج تسجيل دخول WordPress مخصص بدون مكون إضافي [رمز قصير لنموذج تسجيل الدخول إلى WordPress] 
 * @ المؤلف Joe Njengah 
 * @ gist - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 * / 


// الخطوة 1: إنشاء رمز قصير
الوظيفة njengah_add_login_shortcode () {
	add_shortcode ('jay-login-form'، 'njengah_login_form_shortcode') ؛
}

// الخطوة 2: رد الاتصال بالرمز القصير
الوظيفة njengah_login_form_shortcode () {
	
	إذا (is_user_logged_in ())
		
		return '<p> مرحبًا. لقد قمت بتسجيل الدخول! </ p> '؛ ؟> 
		
		<div class = "njengah-login-tutorial">  
		
			<؟ php إرجاع wp_login_form ( 
							مجموعة مصفوفة( 
								"صدى" => خطأ ،
								'label_username' => __ ('اسم المستخدم الخاص بك') ،
								'label_password' => __ ('كلمة مرورك') ،
								'label_remember' => __ ('تذكرني')
			              )
			) ؛ ؟> 
		
		</div>
  <؟ php 
   }

// الخطوة 3: ابدأ وظيفة الرمز القصير
add_action ('init'، 'njengah_add_login_shortcode')؛

// الخطوة 4: استخدم الرمز المختصر [njengah-login-form] لتضمين نموذج تسجيل الدخول في صفحة أو منشور 

عند إضافة هذا الرمز إلى function.php ، يجب عليك إنشاء صفحة تسجيل الدخول وإضافة الرمز القصير [njengah-login-form] لنشر نموذج تسجيل الدخول. يجب أن يظهر نموذج تسجيل الدخول كما هو موضح في الصورة أدناه:

WordPress تصميم نموذج تسجيل الدخول

لقد أضفت الأنماط التالية لجعل نموذج تسجيل الدخول جذابًا وأخذ تصميم السمة التي أستخدمها:

 .njengah-login-tutorial {
    الخلفية: # 6379a4 ؛
    الحشو: 20 بكسل ؛
    أقصى عرض: 70٪ ؛
    الهامش: 0 تلقائي ؛
    اللون: #fff ؛
}

تسمية .login-password {
    الهامش الأيمن: 120 بكسل ؛
}

.ادخل اسم المستخدم {
    أعلى الحشو: 30 بكسل ؛
}

قم بإنشاء نموذج صفحة مخصصة لنموذج تسجيل الدخول

هناك طريقة بديلة لإنشاء صفحة تسجيل الدخول في WordPress بدون مكون إضافي وهي إنشاء قالب صفحة مخصص واستخدام وظيفة wp_login_form () لنشر نموذج تسجيل الدخول على تلك الصفحة.

فيما يلي رمز إنشاء صفحة تسجيل الدخول المخصصة الموجودة في قالب الصفحة المخصص:

 <؟ php
/ **
 * اسم النموذج: صفحة تسجيل الدخول 
 * /
 
 get_header () ، 
 
 
 إذا (is_user_logged_in ()) {
	 
	     صدى '<p> مرحبًا. لقد قمت بتسجيل الدخول! </ p> '؛ 
		 
 }آخر{ 
	 
	 wp_login_form ( 

		 مجموعة مصفوفة(
				"صدى" => صحيح ،
				// تعيد قيمة "إعادة التوجيه" الافتراضية المستخدم إلى عنوان URI للطلب.
				'redirect' => (is_ssl ()؟ 'https: //': 'http: //'). _SERVER $ ['HTTP_HOST']. _SERVER $ ['REQUEST_URI'] ،
				"form_id" => "نموذج تسجيل الدخول" ،
				'label_username' => __ ('اسم المستخدم الخاص بك') ،
				'label_password' => __ ('كلمة مرورك') ،
				'label_remember' => __ ('تذكرني') ،
				'label_log_in' => __ ('تسجيل الدخول') ،
				'id_username' => 'user_login' ،
				'id_password' => 'user_pass' ،
				'id_remember' => 'Rememberme' ،
				'id_submit' => 'wp-submit' ،
				'تذكر' => صحيح ،
				"value_username" => "" ،
				// اضبط "value_remember" على "true" على مربع الاختيار "تذكرني" افتراضيًا لتحديده.
				'value_remember' => خطأ ،
			)
						
		) ؛
    }			
	
get_footer () ،		
				

احفظ هذا الرمز في ملف وقم بتسميته login-page.php وتأكد من حفظه في المجلد الجذر لموضوع WordPress الخاص بك.

قم بإنشاء صفحة جديدة وسترى قالب تسجيل الدخول متاح الآن في خيار قالب سمات الصفحة كما هو موضح أدناه:

اختر القالب وانشر الصفحة. عند التحقق من الواجهة الأمامية ، يجب أن ترى نموذج تسجيل الدخول معروضًا للمستخدمين الذين لم يقوموا بتسجيل الدخول ويتم عرض رسالة الترحيب للمستخدمين الذين قاموا بتسجيل الدخول.

استنتاج

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

مقالات مماثلة

1. كيفية إنشاء ترقيم صفحات WordPress لأنواع المنشورات المخصصة
2. 30 من أفضل ملحقات أمان WordPress لحماية موقعك
3. كيفية إنشاء صفحة في WordPress برمجيًا
4. كيفية الوصول إلى لوحة تحكم مسؤول WordPress أو تسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك
5. كيفية إنشاء طلب مخصص تم استلام صفحة WooCommerce
6. كيفية توصيل Printful بـ WooCommerce
7. كيفية تحديث ملحقات WooCommerce
8. كيفية إضافة مربع البحث في أعلى الصفحة موضوع واجهة المتجر
9. 40+ من أفضل ملحقات نموذج اتصال WordPress للاتصال السهل
10. كيفية إزالة فئة غير مصنفة في WooCommerce WordPress
11. كيفية إزالة الشريط الجانبي من صفحة WordPress أو إخفاء الشريط الجانبي لـ WordPress
12. كيفية إنشاء ترقيم صفحات استعلام مخصص في WordPress مع مثال
13. WooCommerce vs Magento: ما هي أفضل منصة للتجارة الإلكترونية؟
14. كيفية عمل نسخة احتياطية من قاعدة بيانات WooCommerce
15. أعلى 30+ أفضل ملحقات WordPress Form »أفضل مكون إضافي لنموذج WordPress
16. كيفية إنشاء صفحات تسجيل دخول وتسجيل منفصلة في WooCommerce
17. 35+ أفضل مكون إضافي مجاني WordPress
18. كيفية الهجرة من Shopify إلى WooCommerce