إنشاء نموذج تسجيل دخول WordPress مخصص بواجهة مستخدم مسطحة

آخر تحديث - 8 يوليو 2021

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

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

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

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

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

ابدأ بإنشاء مجلد يسمى "تسجيل الدخول" في مجلد السمة الخاص بك وأضف ملف .txt باسم custom-login-style.css . من هناك ، يمكنك المتابعة لإجراء بعض التعديلات الأساسية لتخصيص وإضافة التفرد إلى صفحة تسجيل الدخول.

قم بتغيير الخلفية

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

بالإضافة إلى ذلك ، إذا كنت تريد تغيير صورة الخلفية لصفحة تسجيل الدخول الخاصة بك ، فحدد صورة خلفية سطر الكود : url (logo_login.png ') واستبدل logo_login.png ، وهو اسم الملف بعنوان URL لملف الصورة المحدث .

يمكن للشركات التي تريد أن يتذكر عملائها علامتها التجارية تغيير شعار WordPress إلى شعارها المخصص. بعد حفظ ملف صورة الشعار المخصص في مجلد تسجيل الدخول ، استبدل اسم الملف بشعارك المخصص في صورة الخلفية: كود url ('logo_login') .

تخصيص نموذج تسجيل الدخول عن طريق ضبط المساحة المتروكة والهامش

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

تغيير حجم الخط ولونه

يمكنك تغيير حجم خط نص الفقرة أو الروابط أو حقول النموذج باستخدام حجم خط الكود: 15 بكسل عن طريق ضبط الرقم حسب الحجم الذي تريده. يمكن فعل الشيء نفسه بالنسبة للون الخط عن طريق تحديث اللون في لون الكود : # 222222 واستبدال اللون.

تعديل رسالة خطأ تسجيل الدخول

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

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

تسجيل الدخول المخصص البرنامج المساعد

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

مُخصص تسجيل الدخول إلى Colorlib

Colorlib Login Customizer هي أداة مرنة ومرنة تحمل جميع الوظائف الموجودة في مكون إضافي متميز ولكنها توفرها مجانًا. إن مجموعته الواسعة من الميزات الفريدة تجعله الخيار النهائي لمطوري الويب الذين يتطلعون إلى بناء حل مخصص لمستخدميهم. يسمح هذا أيضًا بالتخصيص عبر أداة تخصيص WordPress بحيث يمكنك التنقل بسهولة وإعادة تصميم صفحة تسجيل الدخول الخاصة بك.

في تلخيص

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