كيف تعدل تصميم صفحة تسجيل الدخول في ووردبريس؟

كيف تعدل تصميم صفحة تسجيل الدخول في ووردبريس؟

سنتحدث فى هذا المقال عن

كيف تعدل تصميم صفحة تسجيل الدخول في ووردبريس؟

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

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

لماذا تحتاج لتخصيص صفحة تسجيل الدخول في ووردبريس؟

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

AD 4nXc b8e Drc7nwdsvYlTgOSluEKXsBnPiIEzte CEQOIuUH9W9qPBhukSYo7r29AWOT8hnsSxSfts
شكل صفحة تسجيل الدخول الافتراضي في ووردبريس

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

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

طريقة تخصيص صفحة تسجيل الدخول باستخدام إضافة LoginPress

سأشرح لكم فيما يلي كيف قمت بتخصيص صفحة تسجيل الدخول لأحد عملائي باستخدام إضافة LoginPress:

الخطوة الأولى: تثبيت إضافة LoginPress على المتجر

أولاً قمت بتثبيت وتفعيل إضافة LoginPress على متجر العميل بالطريقة الاعتيادية، حيث توجهت إلى تبويب (إضافات) ثم (أضف إضافة جديدة) وكتبت اسم الاضافة في مربع البحث وقمت بتثبيتها وتفعيلها على المتجر.

AD 4nXcAZ5tzTn1UgMomOOr ZmxkqA eTsnZpvKLjkAU0G1lYUxX8
تثبيت إضافة LoginPress

الخطوة الثانية: الانتقال إلى صفحة التخصيص

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

AD 4nXc29Z AZwmpZQe4tqlZES2EkE Ni9UEdMEcYpWCJ W3TbGR8aX6nMfiy POzyfvuI81IUaXeCDPSc9o4i1zKyzaogHDaoTuwY6sVjOdtLh4Da4juVSATLBVaGPSeZTRJqLlhnpKSw
الشكل الافتراضي لصفحة الدخول في إضافة LoginPress

ولكن هذه غير كافي إذ أنه لا يعبر عن متجر عميلي، ولهذا قمت بالانتقال إلى صفحة التخصيص في الإضافة، وذلك من خلال التوجه إلى تبويب (LoginPress) ثم (التخصيص).

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

AD 4nXcLNkpeT17iwUDRIriz5SOn8TP 5oSuX03nNZ5ms1GQYk9Qsf33AoVRloGG8AMOKue1y6CU7IEY0tCExiW3YA6toSY4JkhWHlmUTE7EB0GzSKG7 wWtlIRggxJFk 9JHDAjb9N
صفحة التخصيص في إضافة Loginpress

الخطوة الثالثة: تخصيص الشعار في صفحة تسجيل الدخول

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

AD 4nXdTOB0F9LDO5jlzbC4Z9vWJBzmlMVoi4xjf6Taurajh3 5etDSXlQfK5eN6118ASduTvrCtnWBOm0BBwIwl4lMXyCd5FfNjUmOB1LLd0FyRPW9ISbWsHBEoaH10AefLPGz2 IKA
تحديد شعار صفحة تسجيل الدخول

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

AD 4nXfoWn9rtA5wb3e5MyvigXFWZZytqLkeBDyveYY9sCZEhR07oMuilx7B2ANgRc0gpp4S9LqgBqMB3Eo4vPjHQsNEiR70dFNIIpShLWK3bdtXv72ELuCR F3ffeC HE 7Mwnmvubg
تحديد أبعاد الشعار

الخطوة الرابعة: تحديد قالب صفحة تسجيل الدخول

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

AD 4nXdpER0TQQNY5eYtIC8y2On9XjcxlVI2lVbqtFi4W1GBSAFkHaeLRZerPCPNN1tkVfGI7AFxzShxsWUdGdUwN6RAws5Ku
تحديد قالب صفحة تسجيل الدخول

الخطوة الخامسة: تخصيص صورة الخلفية

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

اختيار صورة خلفية صفحة تسجيل الدخول

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

AD 4nXdh5w2myckxiWrjczAE0Y2wKBO6rWKvzRC1 AcBSfsyzdhbSZ98JUNAMj9UR3p56KCiBEdBUzKeB bHCQKiqDGMZJD cqHWFkjqpvBiUo6BZyKGWil7FTweXhMtaX8LcMyI39g9
تحديد صورة خلفية مناسبة

الخطوة السادسة: تخصيص مظهر نموذج تسجيل الدخول

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

AD 4nXdLIQ6 sTwwhgmuZ pZ 0GckZ8r5ldVztcJLN1382gyGMqzOyrz CbT B9 yHCuZq0joxGJzq74LkG7KWbf9cZ86TdBUDH7LYFq
تخصيص مظهر نموذج تسجيل الدخول

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

الخطوة السادسة: تخصيص مظهر زر الدخول

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

AD 4nXda6eHpXxUHXSKq NprQlklCJgCbMk2mbvdvSicxUTH0AoJw1 7m3ktkDXHZdnMBAi39YjAT
تخصيص مظهر زر الدخول

الخطوة السابعة: نشر صفحة تسجيل الدخول للمتجر

أخيرًا بعد أن انتهيت من تخصيص مظهر صفحة تسجيل الدخول لتتناسب أكثر مع متجر الملابس الخاص بعميلي، قمت بنشرها من خلال النقر على زر (نشر) الموجود في أعلى يمين صفحة التخصيص.

AD 4nXdIyx6GDK9KDVukC5ULysztneCP VgFQWrI rcNZrJjFw lpf05ptpYjF EshrTkGd8i7g7UBpUFAzeP
نشر صفحة تسجيل الدخول

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

AD 4nXdP4FkJkNAqgvv4jykS 9lrn2sfyuwPDPgcGJhk8Hy zaRDcBC1bC4kW18glqDTWNWQzbbWkVz3ITi4o tyq V17Ekc2
شكل صفحة تسجيل الدخول النهائي

نصائح لتخصيص شكل صفحة تسجيل الدخول في ووردبريس

فيما يلي سأضع لكم بعض النصائح المهمة التي يمكنكم الاستعانة بها من أجل جعل صفحة تسجيل الدخول في مواقعكم أكثر جاذبية واحترافية:

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

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

انضم إلى قائمتنا البريدية لتبقى على اطلاع دائم بكل جديد.

يرجى إدخال عنوان بريدك الإلكتروني هنا للاشتراك في نشرتنا الإخبارية.

شاركنا رأيك

تفاصيل فائقة الدقة

سنولي أدق التفاصيل اهتمامًا بالغًا عند تصميم موقعك أو متجرك الإلكتروني.

سرعة التنفيذ

نلتزم بسرعة التنفيذ والتسليم في المواعيد المحددة.

أفضل أنظمة الحماية ضد الهجمات

نحن نوفر حماية متقدمة لموقعك وبيانات زوارك لضمان أمانهم وسلامتهم.