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

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

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

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

1. تعزيز العلامة التجارية

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

2. تحسين تجربة المستخدم

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

3. زيادة مستوى الأمان

التخصيص لا يقتصر على الشكل فقط، بل يمكن أن يكون وسيلة لتعزيز الأمان. على سبيل المثال، يمكنك تعديل استايل صفحة تسجيل الدخول في ووردبريس ليشمل تغييرات مثل إخفاء شعار ووردبريس الافتراضي، تغيير رابط تسجيل الدخول الافتراضي، أو حتى إضافة طبقات حماية إضافية مثل reCAPTCHA أو المصادقة الثنائية (2FA).

4. التميز عن المواقع الأخرى

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

5. تقليل محاولات الاختراق العشوائية

من خلال تغيير التصميم وإضافة ميزات أمان إضافية، يمكن تقليل فرص تعرض موقعك لمحاولات تسجيل الدخول العشوائية أو هجمات القوة الغاشمة (Brute Force Attacks)، مما يحافظ على أمان الموقع والمستخدمين.

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

اقرأ أيضا/ كيفية انشاء صفحة هبوط على الوردبريس

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

استخدام أكواد CSS مخصصة

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

كيفية إضافة أكواد CSS إلى ووردبريس

لإضافة أكواد CSS مخصصة إلى صفحة تسجيل الدخول في ووردبريس، لديك عدة طرق سهلة، وأبرزها:

أ. استخدام ملف style.css في القالب الفرعي

1. انتقل إلى لوحة تحكم ووردبريس، ثم إلى المظهر > محرر القوالب.
2. ابحث عن ملف style.css وأضف أكواد CSS المخصصة في نهايته.
3. احفظ التغييرات ثم تحقق من تأثيرها على صفحة تسجيل الدخول.

ب. إضافة الأكواد عبر ملف functions.php

يمكنك تحميل ملف CSS مخصص باستخدام ملف functions.php عبر الكود التالي:

function custom_login_style() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_directory_uri() . '/custom-login.css">';
}
add_action('login_head', 'custom_login_style');

بهذه الطريقة، يمكنك إنشاء ملف custom-login.css داخل مجلد القالب وإضافة الأكواد الخاصة بك فيه.

ج. إضافة الأكواد مباشرة عبر لوحة التحكم

1. انتقل إلى ووردبريس > تخصيص.
2. اختر CSS إضافي وأضف أكواد التخصيص مباشرةً.
3. احفظ التغييرات وتحقق من النتيجة.

أمثلة على تخصيص الألوان والخطوط والخلفية

بعد معرفة كيفية إضافة الأكواد، إليك بعض الأمثلة العملية على تخصيص صفحة تسجيل الدخول في ووردبريس:

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

body.login {
    background-color: #f4f4f4; /* تغيير لون الخلفية */
    background-image: url('your-image-url.jpg'); /* إضافة صورة خلفية */
    background-size: cover;
}

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

.login form {
    background: #ffffff; /* تغيير لون خلفية نموذج تسجيل الدخول */
    border-radius: 10px; /* إضافة زوايا مستديرة */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل */
}
.login label {
    color: #333333; /* تغيير لون الخط */
    font-size: 14px;
}

تخصيص زر تسجيل الدخول

.wp-core-ui .button-primary {
    background-color: #0073aa; /* تغيير لون زر تسجيل الدخول */
    border-radius: 5px;
    border: none;
}
.wp-core-ui .button-primary:hover {
    background-color: #005177; /* تغيير اللون عند تمرير الماوس */
}

إضافة شعار مخصص

.login h1 a {
    background-image: url('your-logo-url.png'); /* استبدال شعار ووردبريس بشعارك */
    background-size: contain;
    width: 200px;
    height: 80px;
}

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

اقرأ أيضا: كيفية تسريع موقع ووردبريس: دليل شامل لتحسين الأداء

استخدام إضافات ووردبريس لتعديل التصميم

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

أفضل الإضافات لـ تعديل استايل صفحة تسجيل الدخول في ووردبريس

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

1. LoginPress – Custom Login Page Customizer

• توفر مجموعة واسعة من القوالب الجاهزة لتخصيص صفحة تسجيل الدخول.
• إمكانية تغيير الألوان والخلفية والخطوط بسهولة عبر واجهة مرئية.
• دعم لإضافة Google reCAPTCHA لتعزيز الأمان.

2. Custom Login Page Customizer

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

3. WPForms – Custom Login Form

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

4. White Label Branding for WordPress

• يسمح لك بإزالة شعار ووردبريس وإضافة علامتك التجارية الخاصة.
• تخصيص كامل لصفحة تسجيل الدخول ولوحة التحكم.
• يوفر تحكمًا كاملاً في واجهة ووردبريس الإدارية.

كيفية تثبيت الإضافة وضبط الإعدادات

خطوات تثبيت الإضافة من داخل ووردبريس

1. الدخول إلى لوحة تحكم ووردبريس.
2. الانتقال إلى الإضافات > أضف جديد.
3. في مربع البحث، اكتب اسم الإضافة مثل LoginPress.
4. اضغط على تنصيب الآن ثم تفعيل الإضافة.

ضبط إعدادات الإضافة وتخصيص صفحة تسجيل الدخول

بمجرد تفعيل الإضافة، يمكنك تخصيص التصميم باتباع الخطوات التالية:

أ. تخصيص صفحة تسجيل الدخول باستخدام LoginPress

1. بعد التفعيل، انتقل إلى LoginPress > تخصيص صفحة تسجيل الدخول.
2. استخدم واجهة التخصيص لتغيير الخلفية، الألوان، الخطوط، وأسلوب التصميم.
3. قم بتحميل شعار مخصص بدلاً من شعار ووردبريس.
4. احفظ التغييرات وتحقق من مظهر صفحة تسجيل الدخول.

ب. تخصيص صفحة تسجيل الدخول باستخدام Custom Login Page Customizer

احفظ التعديلات واستعرض التغييرات مباشرة.

انتقل إلى المظهر > تخصيص ثم اختر Custom Login Page.

قم بتعديل التصميم من خلال الخيارات المتاحة، مثل تغيير لون الخلفية وإضافة صورة مخصصة.

اضبط إعدادات زر تسجيل الدخول والخطوط والألوان.

التعديل عبر ملف functions.php

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

كيفية تعديل تصميم صفحة تسجيل الدخول من خلال functions.php

يعد ملف functions.php جزءًا أساسيًا من قالب ووردبريس، ويمكنك استخدامه لتحميل أكواد CSS مخصصة تعمل على تعديل تصميم صفحة تسجيل الدخول. للقيام بذلك، اتبع الخطوات التالية:

1. فتح ملف functions.php

1. من لوحة تحكم ووردبريس، انتقل إلى المظهر > محرر القوالب.
2. ابحث عن ملف functions.php وافتحه للتحرير.

2. إضافة كود لتعديل التصميم

لإضافة أنماط CSS مخصصة إلى صفحة تسجيل الدخول، استخدم الكود التالي داخل ملف functions.php:

function custom_login_styles() {
    echo '<style>
        body.login {
            background-color: #f4f4f4 !important; /* تغيير لون الخلفية */
        }
        .login form {
            background: #ffffff !important; /* تغيير لون صندوق تسجيل الدخول */
            border-radius: 10px !important; /* إضافة زوايا مستديرة */
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important; /* إضافة ظل */
        }
        .wp-core-ui .button-primary {
            background-color: #0073aa !important; /* تغيير لون زر تسجيل الدخول */
            border-radius: 5px !important;
        }
        .wp-core-ui .button-primary:hover {
            background-color: #005177 !important; /* تغيير اللون عند تمرير الماوس */
        }
    </style>';
}
add_action('login_head', 'custom_login_styles');

3. حفظ التعديلات ومعاينة الصفحة

بعد إضافة الكود، احفظ التغييرات ثم انتقل إلى صفحة تسجيل الدخول (عادةً عبر yourwebsite.com/wp-login.php) لمشاهدة التعديلات الجديدة.

إضافة شعار مخصص وتغيير ألوان النموذج

إضافة شعار مخصص لصفحة تسجيل الدخول

لإضافة شعار مخصص بدلاً من شعار ووردبريس الافتراضي، أضف الكود التالي إلى ملف functions.php:

function custom_login_logo() {
    echo '<style>
        .login h1 a {
            background-image: url("your-logo-url.png") !important; /* رابط صورة الشعار */
            background-size: contain !important;
            width: 200px !important;
            height: 80px !important;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');

✳ استبدل your-logo-url.png برابط صورة الشعار الذي تريد استخدامه.

تغيير ألوان النموذج والأزرار

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

function custom_login_colors() {
    echo '<style>
        .login form {
            background: #fff !important;
            border: 1px solid #ddd !important;
        }
        .login label {
            color: #333 !important;
            font-size: 14px !important;
        }
        .wp-core-ui .button-primary {
            background-color: #28a745 !important; /* تغيير لون الزر */
            border: none !important;
        }
        .wp-core-ui .button-primary:hover {
            background-color: #218838 !important; /* تغيير اللون عند التمرير */
        }
    </style>';
}
add_action('login_head', 'custom_login_colors');

اقرأ أيضا: طريقة إضافة تسجيل الدخول بواسطة موقع التواصل الاجتماعي على الووردبرس

3. تحسين أمان صفحة تسجيل الدخول في ووردبريس

بعد تعديل استايل صفحة تسجيل الدخول في ووردبريس وتحسين مظهرها، من الضروري تأمينها لحماية موقعك من الاختراقات ومحاولات تسجيل الدخول غير المصرح بها. يمكن تعزيز الأمان عبر عدة إجراءات، مثل تغيير رابط صفحة تسجيل الدخول، إضافة reCAPTCHA، وتفعيل المصادقة الثنائية (2FA).

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

يستخدم ووردبريس بشكل افتراضي رابط تسجيل الدخول yourwebsite.com/wp-login.php أو yourwebsite.com/wp-admin، مما يجعله عرضة للهجمات العشوائية. لتأمين الصفحة، يمكنك تغيير هذا الرابط إلى عنوان مخصص يصعب تخمينه.

كيفية تغيير رابط صفحة تسجيل الدخول

يمكنك استخدام إحدى الإضافات التالية لتغيير الرابط بسهولة:

✅ WPS Hide Login – إضافة خفيفة الوزن تسمح لك بتغيير رابط تسجيل الدخول دون تعديل ملفات النظام.
✅ iThemes Security – توفر خيارات متقدمة للأمان، بما في ذلك تغيير رابط تسجيل الدخول.

خطوات تغيير الرابط باستخدام WPS Hide Login

1. انتقل إلى الإضافات > أضف جديد وابحث عن WPS Hide Login.
2. قم بتثبيت وتفعيل الإضافة.
3. بعد التفعيل، انتقل إلى الإعدادات > عام، وستجد خيار WPS Hide Login في الأسفل.
4. أدخل رابطًا مخصصًا لصفحة تسجيل الدخول مثل yourwebsite.com/my-login ثم احفظ التغييرات.
5. تأكد من حفظ الرابط الجديد لأنه سيكون الطريقة الوحيدة للوصول إلى لوحة التحكم.

إضافة reCAPTCHA لحماية الموقع

يعد reCAPTCHA من أفضل الطرق لمنع محاولات تسجيل الدخول العشوائية (Brute Force Attacks) وحماية موقعك من الروبوتات. عند تفعيله، يتعين على المستخدمين التحقق من أنهم بشر قبل تسجيل الدخول.

كيفية إضافة reCAPTCHA إلى صفحة تسجيل الدخول في ووردبريس

لإضافة reCAPTCHA، يمكنك استخدام إضافة مثل Google Captcha (reCAPTCHA) by BestWebSoft أو Login No Captcha reCAPTCHA.

خطوات تفعيل reCAPTCHA

1. انتقل إلى موقع Google reCAPTCHA وقم بتسجيل موقعك للحصول على مفتاح API.
2. قم بتثبيت وتفعيل إضافة Google Captcha (reCAPTCHA) من ووردبريس.
3. انتقل إلى الإعدادات > Google Captcha وأدخل مفاتيح API التي حصلت عليها من Google.
4. حدد خيار تفعيل reCAPTCHA في صفحة تسجيل الدخول ثم احفظ التغييرات.
5. اختبر تسجيل الدخول للتأكد من عمل reCAPTCHA بشكل صحيح.

تفعيل المصادقة الثنائية (2FA)

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

كيفية تفعيل المصادقة الثنائية (2FA) في ووردبريس

يمكنك استخدام إضافات مثل:
✅ Google Authenticator – Two Factor Authentication
✅ WP 2FA – Two-factor authentication for WordPress

خطوات تفعيل 2FA باستخدام Google Authenticator

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

انتقل إلى الإضافات > أضف جديد وابحث عن Google Authenticator.

قم بتثبيت وتفعيل الإضافة.

انتقل إلى الإعدادات > Two Factor Authentication.

اختر طريقة التحقق المناسبة، مثل Google Authenticator أو رسالة SMS.

قم بمسح رمز QR باستخدام تطبيق Google Authenticator على هاتفك.

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

خاتمة:

يُعد تعديل استايل صفحة تسجيل الدخول في ووردبريس خطوة مهمة ليس فقط لتحسين المظهر العام لموقعك، ولكن أيضًا لتعزيز تجربة المستخدم وجعل العلامة التجارية أكثر تميزًا. من خلال استخدام أكواد CSS مخصصة، أو الاستفادة من إضافات ووردبريس، أو التعديل عبر ملف functions.php، يمكنك تخصيص الصفحة بما يتناسب مع هوية موقعك.

إلى جانب تحسين التصميم، من الضروري تعزيز أمان صفحة تسجيل الدخول عبر تغيير الرابط الافتراضي، إضافة reCAPTCHA، وتفعيل المصادقة الثنائية (2FA) لحماية موقعك من التهديدات الإلكترونية.

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

الأكواد المذكورة فى شرح الفيديو:

1- قم بإضافة هذه الأكواد إلى ملف Functions.php داخل ملفات القالب الخاص بك

function custom_login_style() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_directory_uri() . '/custom-login.css">';
}
add_action('login_head', 'custom_login_style');

// Change the logo URL
function custom_login_logo_url() {
    return 'https://your-web.com'; // Replace with your desired URL
}
add_filter('login_headerurl', 'custom_login_logo_url');

// Change the logo title
function custom_login_logo_title() {
    return 'your web name'; // Replace with your desired title
}
add_filter('login_headertext', 'custom_login_logo_title');

لا تنسي تعديل رابط موقعك فى السطر “https://your-web.com” وأيضا اسم الموقع بدلا من Your Web Name

2- تحميل ملف اكواد ال css:

3- اخفاء محول اللغات (اختياري):

أضف الكود التالي فى نهاية ملف custom-login.css:

.language-switcher{
display:none;
}