تغییر فرم ورود وردپرس با Login Page Customizer

اگه ظاهر صفحه ورود وردپرس با سایتتون جور درنمیاد، لازم نیست برای تغییرش سراغ کدنویسی برید. با افزونه رایگان Login Page Customizer می‌تونید لوگو، پس‌زمینه، فرم، فیلدها و دکمه ورود رو به سلیقه خودتون طراحی کنید. توی این آموزش، از نصب افزونه شروع می‌کنیم و در آخر نتیجه رو روی موبایل و دسکتاپ می‌سنجیم.

در کنارش سراغ دردسرهای رایجی مثل نمایش‌ندادن تغییرات، بازنشدن تصاویر و تداخل کش هم می‌ریم. در پایان هم چند نکته ساده رو می‌بینید که کمک می‌کنن صفحه ورودتون سریع، خوانا و امن‌تر بمونه.

قبل از تغییر فرم ورود وردپرس چه چیزهایی رو آماده کنیم؟

قبل از اینکه دست‌به‌کار بشید، این چند مورد رو آماده کنید. این‌طوری اگه نتیجه باب میلتون نبود، راحت‌تر می‌تونید همه‌چیز رو به حالت قبل برگردونید.

• از سایت نسخه پشتیبان بگیرید: یک نسخه از فایل‌ها و پایگاه داده سایتتون ذخیره کنید. پایگاه داده همون جاییه که نوشته‌ها، کاربران و بیشتر تنظیمات وردپرس توی اون نگه‌داری می‌شن.
• افزونه‌های قبلی طراحی صفحه ورود رو بررسی کنید: اگه Easy Login Styler یا افزونه مشابهی روی سایتتون نصبه، اول تنظیماتی رو که لازم دارید یادداشت کنید. بعد افزونه قبلی رو غیرفعال و حذف کنید؛ چون فعال‌بودن دو افزونه با کار مشابه ممکنه ظاهر صفحه رو به‌هم بریزه.
• لوگو و پس‌زمینه رو آماده کنید: فایل‌هایی رو انتخاب کنید که هم واضح باشن و هم حجم زیادی نداشته باشن. بهتره لوگو پس‌زمینه شفاف داشته باشه و تصویر پس‌زمینه هم اون‌قدر شلوغ نباشه که فرم ورود توی اون گم بشه.

نصب افزونه رایگان Login Page Customizer

پیداکردن افزونه در مخزن وردپرس

برای تغییر فرم ورود وردپرس سراغ افزونه رایگان Login Page Customizer می‌ریم. این افزونه توی مخزن رسمی وردپرس منتشر شده و نسخه رایگانش رو می‌تونید از خود پیشخوان نصب کنید.

وارد پیشخوان وردپرس بشید، از منوی «افزونه‌ها» روی «افزودن افزونه تازه» بزنید و عبارت Login Page Customizer رو توی کادر جست‌وجو بنویسید. قبل از نصب، اسم افزونه و صفحه رسمی اون رو با لینک بالا مقایسه کنید تا اشتباهی افزونه دیگه‌ای رو نصب نکنید.

نصب و فعال‌کردن افزونه

کنار افزونه روی دکمه «هم‌اکنون نصب نمایید» بزنید. بعد از تموم‌شدن نصب، دکمه «فعال نمایید» رو انتخاب کنید. بد نیست قبل از نصب هر افزونه، تاریخ آخرین به‌روزرسانی، سازگاری اعلام‌شده و نظرهای تازه کاربران رو هم توی صفحه مخزن ببینید؛ چون این اطلاعات ممکنه به‌مرور تغییر کنن.

رفتن به بخش شخصی‌سازی صفحه ورود

بعد از فعال‌سازی، گزینه شخصی‌سازی صفحه ورود رو توی منوی «نمایش» یا صفحه تنظیمات خود افزونه پیدا کنید. اسم دقیق این گزینه ممکنه با توجه به نسخه افزونه و ترجمه پیشخوان کمی فرق داشته باشه. صفحه‌ای که باز می‌شه معمولاً تنظیمات طراحی و پیش‌نمایش فرم ورود رو کنار هم نشون می‌ده.

تغییر فرم ورود وردپرس با Login Page Customizer

قرار نیست همه بخش‌ها رو با هم عوض کنید. از لوگو شروع کنید و بعد به‌ترتیب سراغ پس‌زمینه، کادر فرم، فیلدها و دکمه ورود برید. بعد از هر تغییر هم نگاهی به پیش‌نمایش بندازید تا دقیقاً ببینید چه چیزی عوض شده.

تغییر لوگوی صفحه ورود

بخش لوگو رو باز کنید و تصویر لوگوی سایتتون رو از کتابخانه رسانه بردارید. کتابخانه رسانه همون قسمتیه که تصاویر آپلودشده سایت رو توی اون می‌بینید. اگه هنوز لوگو رو داخل سایت نذاشتید، می‌تونید همون‌جا فایلش رو بارگذاری کنید.

عرض و ارتفاع لوگو رو جوری تنظیم کنید که تصویر کشیده یا فشرده نشه. یک لوگوی ساده با پس‌زمینه شفاف معمولاً روی صفحه‌های کوچک هم ظاهر بهتری داره.

انتخاب رنگ یا تصویر پس‌زمینه

توی بخش پس‌زمینه می‌تونید یک رنگ ساده یا تصویر دلخواهتون رو بذارید. رنگ ساده زودتر بارگذاری می‌شه و معمولاً فرم رو خواناتر نگه می‌داره. اگه از تصویر استفاده می‌کنید، محل قرارگرفتن و اندازه نمایش اون رو هم توی پیش‌نمایش ببینید.

تصویرهای خیلی روشن یا شلوغ ممکنه نوشته‌ها و کادرهای فرم رو محو کنن. اگه با این مشکل روبه‌رو شدید، تصویر ساده‌تری بردارید یا برای خود فرم یک رنگ زمینه مشخص بذارید.

شخصی‌سازی کادر فرم ورود

حالا تنظیمات کادر فرم رو باز کنید. رنگ زمینه، عرض کادر، فاصله داخلی، حاشیه و گردی گوشه‌ها رو با ظاهر سایتتون هماهنگ کنید. فاصله داخلی یعنی فضایی که بین لبه کادر و چیزهای داخل اون قرار می‌گیره.

اگه کادر خیلی باریک باشه، کار با اون روی موبایل سخت می‌شه. کادر بیش‌ازحد عریض هم ظاهر صفحه رو نامرتب می‌کنه. پس اندازه‌ای رو بردارید که فیلدها و دکمه ورود توی اون فضای کافی داشته باشن.

تغییر ظاهر فیلدهای نام کاربری و رمز عبور

توی تنظیمات فیلدها می‌تونید رنگ زمینه، رنگ نوشته، حاشیه و فاصله داخلی کادرهای نام کاربری و رمز عبور رو عوض کنید. فقط حواستون باشه محل واردکردن اطلاعات کاملاً مشخص بمونه.

رنگ نوشته و زمینه فیلدها نباید زیادی شبیه هم باشن. مثلاً نوشته خاکستری خیلی روشن روی زمینه سفید به‌سختی خونده می‌شه.

تغییر رنگ و ظاهر دکمه ورود

رنگ زمینه و نوشته دکمه ورود رو انتخاب کنید. اگه افزونه این امکان رو داره، رنگ دکمه موقع قرارگرفتن نشانگر روی اون رو هم تنظیم کنید. بهتره دکمه از کادر فرم متمایز باشه تا کاربر سریع پیداش کنه.

کنتراست یعنی اختلاف روشنایی نوشته و پس‌زمینه. برای مثال، نوشته سفید روی دکمه سرمه‌ای معمولاً خیلی راحت‌تر از نوشته خاکستری روی دکمه طوسی خونده می‌شه.

تنظیم لینک‌ها و نوشته‌های صفحه ورود

توی صفحه ورود معمولاً لینک‌هایی مثل بازیابی رمز عبور و برگشت به سایت دیده می‌شن. اگه افزونه اجازه می‌ده رنگ یا ظاهر این لینک‌ها رو عوض کنید، اون‌ها رو جوری تنظیم کنید که روی پس‌زمینه به‌وضوح دیده بشن.

بهتره لینک بازیابی رمز عبور رو مخفی نکنید. کسی که رمز خودش رو یادش رفته، برای برگشتن به حسابش به همین لینک احتیاج داره.

بررسی پیش‌نمایش و ذخیره تغییرات

هر بار چیزی رو عوض می‌کنید، نتیجه رو توی پیش‌نمایش ببینید. وقتی از ظاهر صفحه راضی بودید، روی دکمه «انتشار» یا «ذخیره» بزنید. تا وقتی تنظیمات رو ذخیره نکنید، طراحی تازه توی صفحه ورود اصلی سایتتون دیده نمی‌شه.

بررسی صفحه ورود در موبایل و دسکتاپ

بازکردن صفحه ورود در پنجره ناشناس

صفحه ورود سایتتون رو توی یک پنجره ناشناس مرورگر باز کنید. پنجره ناشناس صفحه رو بدون حسابی که الان با اون وارد شدید و بدون بیشتر اطلاعات ذخیره‌شده مرورگر نشون می‌ده. توی نصب معمولی وردپرس، می‌تونید /wp-login.php رو به انتهای نشانی سایت اضافه کنید تا صفحه ورود باز بشه.

آزمایش ورود با یک حساب کاربری

با یک حساب کاربری آزمایشی وارد سایت بشید. نام کاربری و رمز عبور رو بنویسید، گزینه‌های فرم رو امتحان کنید و ببینید دکمه ورود درست کار می‌کنه یا نه. برای این آزمایش، رمز حساب مدیر اصلی رو به فرد دیگه‌ای ندید.

بررسی خوانایی، اندازه‌ها و نمایش در موبایل

صفحه ورود رو هم روی دسکتاپ و هم روی گوشی باز کنید. لوگو نباید کشیده بشه، کادر فرم نباید از صفحه بیرون بزنه و نوشته دکمه‌ها هم باید راحت خونده بشه. اگه الان گوشی در دسترستون نیست، ابزار نمایش موبایل مرورگر برای بررسی اولیه به کارتون میاد؛ ولی بهتره نتیجه نهایی رو حتماً روی یک گوشی واقعی هم ببینید.

حل مشکلات رایج تغییر فرم ورود وردپرس

چرا تغییرات صفحه ورود نمایش داده نمی‌شن؟

اول ببینید دکمه انتشار یا ذخیره رو زده‌اید یا نه. بعد صفحه ورود رو توی یک پنجره ناشناس باز کنید. اگه هنوز ظاهر قبلی رو می‌بینید، کش مرورگر و افزونه کش سایت رو پاک کنید. کش همون نسخه موقتی صفحه‌ست که نگه‌داری می‌شه تا دفعه بعد سریع‌تر باز بشه.

چرا لوگو یا تصویر پس‌زمینه بارگذاری نمی‌شه؟

اول ببینید خود فایل توی کتابخانه رسانه باز می‌شه یا نه. بعد یک تصویر کم‌حجم با فرمت رایجی مثل JPG یا PNG رو امتحان کنید. اگه فایل تازه هم نمایش داده نشد، باید دسترسی فایل‌های رسانه، کش سایت و خطاهای مرورگر رو بررسی کنید.

چطور تداخل افزونه‌های کش رو بررسی کنیم؟

کش افزونه، مرورگر و سرویس CDN رو پاک کنید. CDN سرویسیه که فایل‌های سایت رو از سرورهای نزدیک‌تر به کاربر می‌فرسته. اگه مشکل حل نشد، می‌تونید افزونه کش رو برای مدت کوتاهی غیرفعال کنید و دوباره صفحه ورود رو ببینید. بهتره این آزمایش رو بعد از گرفتن نسخه پشتیبان و توی ساعتی انجام بدید که سایت بازدید کمتری داره.

اگه ظاهر صفحه ورود به‌هم ریخت، چطور به حالت قبل برگردیم؟

اول تغییرات آخرتون رو به مقدار قبلی برگردونید. اگه مشکل برطرف نشد، افزونه Login Page Customizer رو غیرفعال کنید تا بفهمید به‌هم‌ریختگی به همین افزونه مربوطه یا نه. اگه به پیشخوان دسترسی ندارید، از پشتیبان هاست بخواید افزونه رو موقتاً غیرفعال کنه. آخرین راه هم برگردوندن نسخه پشتیبان سالمه.

نکات مهم برای طراحی بهتر و امن‌تر صفحه ورود

• از تصویر کم‌حجم استفاده کنید: تصویر سنگین ممکنه صفحه ورود رو کند کنه؛ به‌خصوص برای کسی که اینترنت ضعیفی داره.
• رنگ‌های خوانا انتخاب کنید: نوشته‌ها، فیلدها و دکمه ورود باید به‌راحتی از پس‌زمینه تشخیص داده بشن.
• وردپرس و افزونه‌ها رو به‌روز نگه دارید: به‌روزرسانی‌ها معمولاً اصلاحات امنیتی و رفع خطاها رو هم با خودشون میارن.
• یک لایه امنیتی جدا داشته باشید: تغییر ظاهر صفحه ورود به‌تنهایی امنیت سایت رو بیشتر نمی‌کنه. ورود دومرحله‌ای موقع ورود یک کد یا تأیید اضافه از شما می‌خواد. Passkey هم روشی برای ورود با قفل صفحه دستگاه، اثر انگشت یا راه‌های شبیه به این‌هاست. برای آشنایی بیشتر با این روش، آموزش ورود بدون رمز به وردپرس با Passkey رو ببینید.
• اطلاعات حساس منتشر نکنید: نام کاربری مدیر، ایمیل خصوصی، شماره تماس شخصی یا جزئیات مربوط به ساختار امنیتی سایت رو توی صفحه ورود ننویسید.

اگه دوست دارید گزینه‌های بیشتری رو با هم مقایسه کنید، راهنمای افزونه‌های تغییر صفحه ورود وردپرس و آموزش تغییر ظاهر صفحه ورود وردپرس هم کمک می‌کنن روش مناسب سایتتون رو راحت‌تر پیدا کنید.

سؤالات متداول درباره تغییر فرم ورود وردپرس

جمع‌بندی

با افزونه رایگان Login Page Customizer می‌تونید تغییر فرم ورود وردپرس رو بدون کدنویسی انجام بدید. لوگو، پس‌زمینه، کادر فرم، فیلدها و دکمه ورود رو یکی‌یکی تنظیم کنید و قبل از اینکه کار رو تموم‌شده بدونید، نتیجه رو روی موبایل و دسکتاپ ببینید.

فقط یادتون نره که ظاهر حرفه‌ای جای کارهای امنیتی رو نمی‌گیره. همیشه نسخه پشتیبان داشته باشید، افزونه‌ها رو به‌روز نگه دارید و برای محافظت بیشتر از حساب‌های کاربری، ورود دومرحله‌ای یا Passkey رو هم فعال کنید.

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.