مقالات آموزشی

 تغییر پس‌ زمینه صفحه ورود وردپرس

 تغییر پس‌ زمینه صفحه ورود وردپرس

 تغییر پس‌ زمینه صفحه ورود وردپرس

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


روش اول: استفاده از افزونه (ساده‌ترین روش)

اگر به دنبال راهی آسان و سریع هستید، افزونه‌های وردپرس بهترین گزینه هستند.

مراحل:

  1. به پیشخوان وردپرس بروید.
  2. از منوی سمت راست به مسیر افزونه‌ها > افزودن بروید.
  3. در قسمت جستجو، عبارت Custom Login Page Customizer یا LoginPress را جستجو کنید.
  4. افزونه مورد نظر را نصب و فعال کنید.
  5. پس از فعال‌سازی، به مسیر نمایش > Login Customizer بروید.
  6. در این بخش می‌توانید:
    • پس‌زمینه صفحه ورود را تغییر دهید.
    • رنگ‌ها، فونت‌ها و لوگو را شخصی‌سازی کنید.
    • تصویر یا گرادیان دلخواه را به‌عنوان پس‌زمینه تنظیم کنید.
  7. تنظیمات را ذخیره کنید.

مزیت استفاده از افزونه:

  • نیاز به دانش کدنویسی ندارد.
  • قابلیت‌های زیادی مثل تغییر لوگو، دکمه‌ها و رنگ‌ها ارائه می‌دهد.

روش دوم: تغییر پس‌زمینه با کدنویسی (بدون افزونه)

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

مراحل:

  1. به پیشخوان وردپرس بروید و از مسیر نمایش > ویرایشگر قالب فایل functions.php قالب فعال را باز کنید.
  2. کد زیر را به انتهای فایل functions.php اضافه کنید:
php
function custom_login_styles() {
echo '<style>
body.login {
background-image: url("https://your-site.com/path-to-your-image.jpg");
background-size: cover;
background-position: center;
}
</style>'
;
}
add_action('login_enqueue_scripts', 'custom_login_styles');

نکات:

  • به جای "https://your-site.com/path-to-your-image.jpg" لینک تصویر دلخواه خود را وارد کنید.
  • مطمئن شوید تصویر مورد نظر را در هاست سایت آپلود کرده‌اید.

سفارشی‌سازی بیشتر:

  • اگر به جای تصویر، رنگ ساده می‌خواهید:
php
body.login {
background-color: #f0f0f0;
}
  • برای اضافه کردن گرادیان:
php
body.login {
background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

روش سوم: استفاده از فایل CSS سفارشی

اگر قالب شما قابلیت افزودن CSS سفارشی دارد، می‌توانید استایل‌های دلخواه را به این صورت اضافه کنید:

مراحل:

  1. به پیشخوان وردپرس بروید و مسیر نمایش > سفارشی‌سازی را انتخاب کنید.
  2. وارد بخش CSS اضافی شوید.
  3. کد زیر را اضافه کنید:
css
body.login {
background-image: url("https://your-site.com/path-to-your-image.jpg");
background-size: cover;
background-position: center;
}
  1. تغییرات را ذخیره کنید.

نکات مهم:

  1. حفظ فایل‌ها در به‌روزرسانی‌ها:
    • اگر کد را مستقیماً در قالب اصلی قرار دهید، با به‌روزرسانی قالب تغییرات شما از بین می‌رود. برای جلوگیری از این مشکل، از قالب فرزند (Child Theme) استفاده کنید.
  2. اندازه و حجم تصویر:
    • تصویری که به‌عنوان پس‌زمینه استفاده می‌کنید، باید بهینه‌سازی شده و حجم آن کم باشد تا سرعت لود صفحه ورود کاهش پیدا نکند.

  1. سازگاری با موبایل:
    هنگام تغییر پس‌زمینه صفحه ورود، مطمئن شوید که طراحی شما در دستگاه‌های موبایل نیز خوب به نظر می‌رسد. برای این کار می‌توانید از کد زیر در بخش CSS سفارشی استفاده کنید:
css
@media (max-width: 768px) {
body.login {
background-size: contain;
background-position: top;
}
}

این کد باعث می‌شود تصویر پس‌زمینه در صفحه‌نمایش‌های کوچک‌تر به‌درستی تنظیم شود.


  1. امنیت صفحه ورود:
    علاوه بر تغییر ظاهر صفحه ورود، پیشنهاد می‌شود که اقدامات امنیتی زیر را انجام دهید:

    • تغییر آدرس صفحه ورود با افزونه‌هایی مانند WPS Hide Login.
    • استفاده از reCAPTCHA برای جلوگیری از حملات ربات‌ها.
    • محدود کردن تلاش‌های ورود با افزونه‌هایی مانند Login LockDown.

  1. بررسی عملکرد:
    پس از اعمال تغییرات، صفحه ورود را در مرورگرهای مختلف (Chrome، Firefox، Safari و…) بررسی کنید تا مطمئن شوید که طراحی شما به‌درستی در تمامی مرورگرها نمایش داده می‌شود.

  1. حفظ هماهنگی با برند سایت:
    در طراحی پس‌زمینه صفحه ورود، بهتر است از رنگ‌ها، تصاویر یا لوگوهایی استفاده کنید که با هویت بصری برند شما هماهنگ باشد. این کار تجربه کاربری بهتری ایجاد می‌کند و حرفه‌ای‌تر به نظر می‌رسد.

نحوه بازگشت به طراحی پیش‌فرض

اگر در هر مرحله نیاز داشتید تغییرات را به حالت اولیه برگردانید:

  1. اگر از کدنویسی استفاده کرده‌اید، کدهای اضافه شده در فایل functions.php یا بخش CSS سفارشی را حذف کنید.
  2. اگر از افزونه استفاده کرده‌اید، افزونه را غیرفعال یا تنظیمات آن را بازنشانی کنید.
  3. وردپرس به‌طور پیش‌فرض از صفحه ورود ساده استفاده می‌کند، بنابراین با حذف تغییرات، طراحی پیش‌فرض بازمی‌گردد.

سوالات رایج

  1. آیا می‌توانم از ویدیو به‌عنوان پس‌زمینه استفاده کنم؟
    بله، اما توصیه نمی‌شود زیرا ویدیوها حجم بیشتری دارند و ممکن است سرعت بارگذاری صفحه را کاهش دهند. اگر همچنان علاقه دارید، از کد زیر استفاده کنید:

    php
    function custom_login_video() {
    echo '<style>
    body.login {
    background: none;
    }
    .login:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://your-site.com/path-to-video.mp4") no-repeat center center/cover;
    z-index: -1;
    }
    </style>'
    ;
    }
    add_action('login_enqueue_scripts', 'custom_login_video');
  2. چگونه می‌توانم لوگوی وردپرس را تغییر دهم؟
    شما می‌توانید لوگوی وردپرس در صفحه ورود را به لوگوی دلخواه خود تغییر دهید. برای این کار، کد زیر را به فایل functions.php اضافه کنید:

    php
    function custom_login_logo() {
    echo '<style>
    .login h1 a {
    background-image: url("https://your-site.com/path-to-your-logo.png");
    background-size: contain;
    width: 100%;
    height: 80px;
    }
    </style>'
    ;
    }
    add_action('login_enqueue_scripts', 'custom_login_logo');

جمع‌بندی

  • اگر تازه‌کار هستید یا امکانات بیشتری می‌خواهید، از افزونه‌هایی مانند LoginPress یا Custom Login Page Customizer استفاده کنید.
  • اگر دوست دارید کنترل کامل داشته باشید، روش‌های کدنویسی یا CSS سفارشی بهترین گزینه‌ها هستند.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


3 × = بیست یک