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

آه ، نعم ، صفحة تسجيل الدخول إلى WordPress - واحدة من أكثر الصفحات التي يمكن التعرف عليها في WordPress - أليس كذلك؟

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

لماذا ا؟ - أنت تسأل.

ها هي الإجابة:

لماذا تحتاج إلى صفحة تسجيل دخول WordPress مخصصة؟

القضية ثلاثة أضعاف:

1. حركة المرور . كلما زاد عدد الزيارات التي تحصل عليها ، زادت حركة المرور "السيئة" كنتيجة مباشرة. أعني بحركة المرور السيئة البرامج النصية وبرامج الروبوت الضارة ومرسلي البريد العشوائي وجميع أنواع المستخدمين الذين يأتون إلى موقعك بنوايا سيئة. يمكن أن يؤدي تخصيص صفحة تسجيل الدخول إلى WordPress إلى جعل موقعك أكثر أمانًا.
2. موقع متعدد المستخدمين . إذا كان موقعك يديره عدة أشخاص - سواء كانوا مسؤولين أو مؤلفين / مدونين - فسيتم تسجيل الدخول عدة مرات. إن تقديم نموذج تسجيل دخول مخصص سيجعل العملية أكثر متعة بشكل عام.
3. العلامة التجارية . صفحة تسجيل الدخول الافتراضية جيدة تمامًا ، ولكن يوجد شعار WordPress الكبير في المنتصف مباشرةً. يمكن أن يكون تبديل هذا وجعل صفحة تسجيل الدخول تبدو أشبه بصفحتك الخاصة بمثابة لمسة رائعة للعلامة التجارية. هذا صالح بشكل خاص إذا كنت تقوم بإنشاء موقع ويب لعميل. إن تزويد عميلك بتجربة متسقة هو بالتأكيد شيء سيقدره.

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

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

هناك طريقتان رئيسيتان يمكنك اتباعهما لتحقيق ذلك:

• الطريقة اليدوية ،
• طريقة البرنامج المساعد .

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

دعونا نغطي كليهما.

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

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

تبدأ المتعة بإنشاء نسخة من ملف page.php وملف content-page.php .

أعد تسمية هذه النسخ الجديدة إلى page-login.php و content-login.php على التوالي.

افتح page-login.php وقم بتغيير سطر واحد فقط. من هذا:

 get_template_part( 'content', 'page' );

الى هذا:

 get_template_part( 'content', 'login' );

الآن ، لنعدّل content-login.php ونضيف سطرًا واحدًا أسفل <?php the_content(); ?> <?php the_content(); ?> . مثل ذلك:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

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

الآن ، دعنا ننشئ صفحة جديدة في wp-admin ونسميها ببساطة "تسجيل الدخول". تأكد من أن الرابط الثابت هو "تسجيل الدخول" أيضًا:

سيضمن القيام بذلك أن WordPress يستخدم ملف قالب page-login.php الخاص بك تلقائيًا.

إذا قمت بزيارة صفحتك الجديدة الآن ، فمن المفترض أن تبدو مثل هذا قليلاً:

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

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(تم إنشاء مقتطفات التعليمات البرمجية بناءً على: [1] [2].)

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

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

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

أولاً ، المكون الإضافي الذي سنستخدمه هو: Custom Login Page Customizer.

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

خيارات هذا البرنامج المساعد لطيفة للغاية ، وهي تسمح لك بتعديل أشياء مثل:

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

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

خيار البرنامج المساعد آخر

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

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

تحقق من هذا الفيديو للحصول على نظرة عامة حول كيفية عمل البرنامج المساعد.

يدوي أو عن طريق البرنامج المساعد ؟

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