صفحه ورود به وردپرس رو سفارشی و جذاب کردیم!

سلام به رفقای گل رایا وردپرسی. تو این آموزش کاربردی قراره اینبار بهت یاد بدم چطوری صفحه ورود به وردپرس رو سفارشی و جذابش کنی، اونم بدون اینکه از هیچ افزونه ای استفاده کنی! پس با من تا انتهای این پست همراه باش 🙂

⭐️صفحه پیش فرض ورود به وردپرس

به صورت پیش فرض در هر سایت وردپرسی (در صورتیکه مدیرش صفحه لاگینش رو تغییر آدرس نداده باشه) اگه به انتهای آدرس سایت /login/ یا /admin/ یا wp-login.php رو اضافه کنی میتونی به صفحه ورود به وردپرس دسترسی داشته باشی.

استایل و ظاهر پیش فرض صفحه ورود ورپرس دقیقا مثل تصویر زیره اما من میخام این استایلو به کمک تو تغییرش بدم. تا آخر این پست رو بخون🙂 تا بهت بگم چطوریییی❗️

همانطوری که میبینی، صفحه ورود به وردپرس شامل عناصر زیره:

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

1. پس زمینه پیش فرض
2. لوگوی وردپرس
3. فیلدهای ورودی (نام کاربری و رمز عبور)
4. چک باکس مرا به خاطر بسپار
5. دکمه ارسال
6. لینک رمز عبور خود را گم کرده اید
7. بازگشت به صفحه اصلی

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

سفارشی کردن لوگوی صفحه ورود به وردپرس

برای اینکه لوگوی پیش فرض وردپرس رو در صفحه ورود یا لاگین وردپرس به لوگوی دلخواه خودت تغییر بدی کافیه تکه کد زیر رو در فایل فانکشن (functions.php) (چایلد تم) قالب سایتت قرار بدی:

یه نکته کوچیک: قبل از هر کار و تغییراتی در سایت بهتره یه بکاپ از فایلی که میخای تغییرش بدی بگیری تا اگه مشکلی پیش اومد با بازیابی بکاپ مشکل حل بشه.

برای اینکه لوگوی پیش فرض وردپرس رو در صفحه ورود یا لاگین وردپرس به لوگوی دلخواه خودت تغییر بدی کافیه تکه کد زیر رو در فایل فانکشن (functions.php) (چایلد تم) قالب سایتت قرار بدی:

function RayaWP_login_logo() {
  echo '<style type="text/css">
    .login h1 a, .login div h1 a {
      background-image: url(لینک لوگوی دلخواهت رو اینجا بزارش);  
    }
  </style>';
}
add_action( 'login_enqueue_scripts', 'RayaWP_login_logo' );

توجه: وقتی کد بالا رو داخل فایل فانکشن قرار بدی لوگوی پیش فرض وردپرس به تصویر یا لوگوی دلخواه ات تغییر میکنه اما وقتی روی لوگوی کلیک می کنی، همچنان به آدرس سایت وردپرس (https://wordpress.org) ارجاع داده میشی. خب میپرسی چیکار کنم اینطوری نشه و سایت خودم جایگزینش بشه پایین ترو بخون تا بت بگم 🙂

تغییر لینک لوگوی صفحه ورود به وردپرس

برای تغییر آدرس لوگوی صفحه ورود به وردپرس کافیه قطعه کد زیر رو درون فایل فانکشن قالب خودت قرار بدی:

function custom_loginlogo_url($url) {
    return 'https://RayaWp.ir';
}

در کد بالا به جای https://RayaWp.ir، آدرس سایت خودت رو قرار بده.

غیرفعال کردن تغییر زبان صفحه ورود به وردپرس

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

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

اما شاید برات سوال باشه چطوری؟

به سادگی قطعه کد زیر رو به فایل functions.php تم (فرزند) یا افزونه Code Snippets اضافه کن.

add_filter('login_display_language_dropdown', '__return_false' );

خب خب با انجام کارای بالا ما تونستیم 1- لوگوی صفحه ورود وردپرس رو به لوگوی دلخواهمون تغییر بدیم. 2- لینک لوگو رو به آدرس سایت خودمون تغییر بدیم. 3- قابلیت تغییز زبان رو از صفحه ورود وردپرس حذفش کنیم.

اما هنوز کارمون تموم نشده حالا میخایم یکم رنگ و لعاب بدیم به صفحه ورود برای اینکار میتونیم از CSS کمک بگیریم و رنگ بکگراند (پس زمینه) صفحه لاگین رو عوض کنیم و به باکس فیلدهای نام کاربری و ایمیل سایه (Shadow) بدیم.

تغییر بکگراند صفحه ورود به وردپرس

برای اینکه رنگ بکگراند صفحه ورود به وردپرس (لاگین) رو تغییر بدی از کد CSS زیر میتونی استفاده کنی:

body.login {
    background-color: #f0f0f0; /* رنگ مورد نظر خود را اینجا قرار دهید */
}

یا اگه بخای یه عکس دلخواه رو بکگراند صفحه لاگین بزاری باید کد CSS زیر رو به کار ببری:

body.login {
    background-image: url('آدرس عکس بکگراندت رو اینجا بزار');
    background-size: cover;
    background-position: center center;
}

ما بالا بوسیله کد php که در فایل فانکشن گذاشتیم لوگوی پیش فرض وردپرس رو با لوگوی دلخواهمون جایگزین کردیم اینبار با کد css اینکارو انجام میدیم.

.login h1 a {
    background-image: url('https://www.rayawp.ir/wp-content/uploads/2024/08/cropped-Untitled-123647547547.png'); /* آدرس لوگوی جدید شما */
}

توجه! خب شاید واست سوال باشه این کدها رو کجا بزارمش. نگران نباش بهت میگم داخل ترجیحا پوشه (چایلد تم) قالب سایتت یک فایل با پسوند CSS مثل custom-login.css ایجاد کن و کدهای بالا رو داخلش بزار.

اما هنوز کار تموم نشده برای اینکه کدهای CSS ای که اضافشون کردی در صفحه لاگین اعمال بشه باید کدها رو enqueue کنی یا به اصطلاح به اون بشناسونی. که برای اینکار کد زیر رو به فایل functions.php اضافه کن.

function RayaWP_custom_login_css() {
    wp_enqueue_style( 'my-login-css', get_stylesheet_directory_uri() . '/custom-login.css' );
}
add_action('login_enqueue_scripts', 'RayaWP_custom_login_css');

خب با Css و کمی خلاقیت میتونی خیلی کارای بیشتری هم انجام بدی اگه خواسته باشی رنگ دکمه ورود به پیشخوان رو هم تغییر بدی کد css زیر رو در فایلی که در بالاتر گفتم (custom-login.css) و ساختی بزار:

#wp-submit {
    background-color: #f8ae03; /* رنگ بکگراند دکمه */
    color: rgb(0, 0, 0);/* رنگ متن دکمه */
}

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

.login form .input {
    background-color: #f8ae03; /* رنگ بکگراند دکمه */
 }

برای اینکه به فرم ورود وردپرس سایه بدی و کمی جذابترش کنی کد css زیرو اضافه کن:

 .login form {
    background-color: #f8af0339; /* رنگ بکگراند فرم*/
	border-radius: 12px; /* نرم کردن حاشیه ها*/
	box-shadow: 10px 10px 5px rgba(255, 166, 0, 0.518); /*سایه دادن به باکس فرم*/
 }

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

رسیدیم به انتهای آموزش امیدوارم این آموزش برات مفید باشه سوال یا نکته ای بود قسمت دیدگاه ها منتظرت هستم فعلن تا بعد ❤️🥺