چگونه صفحه ورود به وردپرس را شخصی سازی کنیم؟

ش

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

 

آموزش سفارشی سازی صفحه ورود به وردپرس

وردپرس روش و طریقه‌ی خاصی را برای شخصی سازی صفحه ورود به وردپرس به کاربران ارائه نمی‌دهد به همین دلیل افزونه‌هایی برای شخصی سازی صفحه ورود به وردپرس مانند Login Designer، طراحی شده‌اند. این افزونه بیش از ده هزار نصب فعال داشته است و کاربرانی که این افزونه را نصب و از آن استفاده کرده‌اند از آن راضی بوده‌اند و توانسته امتیاز ۹/۴ را از کاربران دریافت کند. با استفاده از این افزونه می‌توانید استایل و قالب دلخواه را برای صفحه ورود به سایت، صفحات ثبت نام و … طراحی کنید. برای استفاده از این افزونه روی لینک زیر کلیک کنید.

https://wordpress.org/plugins/loginpress/

پس از نصب و فعال سازی افزونه‌ی شخصی سازی صفحه ورود به وردپرس مانند شکل زیر این افزونه با اسم LoginPress در پیشخوان سایت شما نمایش داده خواهد شد. با ورود به منو صفحه‌ی زیر برای شما نمایش داده می‌شود، مبنی بر اینکه آیا تمایل دارید برخی از داده‌هایی که روی این افزونه اعمال می‌کنید برای سازنده‌ی این افزونه ارسال شود یا خیر، در صورتی که تمایل به این کار ندارید گزینه‌ی Skip this step و در صورتی که می‌خواهید این اطلاعات برای سازنده ارسال شود گزینه‌ی Allow And Continue را انتخاب کنید.

صفحه ورود به وردپرس

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

تنظیمات و گزینه ها

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

Custom Password Fields: با فعال کردن این گزینه کاربران می‌توانند هنگان ثبت نام برای خود رمز ورود تعیین کنند.

Login Order: در این فیلد انتخاب می‌کنید که کاربر چگونه وارد سایت شود. گزینه‌ی اول کاربر را ملزم به استفاده از نام کاربری و ایمیل می‌کند. گزینه‌ی دوم تنها استفاده از نام کاربری و گزینه‌ی سوم تنها استفاده از ایمیل را برای ورود به سایت از کاربر خواهد خواست.

Reset Default Settings: با فعال کردن این گزینه تغییرات و تنظیماتی که برای شخصی سازی صفحه‌ی ورد پرس انجام داده‌اید از بین می‌رود و این تنظیمات به حالت پیشفرض سازنده برمی‌گردد.

صفحه ورود به وردپرس

پس از پر کردن فرم تصویر بالا برای شخصی سازی صفحه ورود به وردپرس و استفاده از یک قالب شخصی سازی شده روی منوی LoginPress> Customizer کلیک کنید تا شمابه تصویر زیر یک صفحه‌ی شخصی سازی صفحه ورود به ورد پرس برایی شما باز شود.

صفحه ورود به وردپرس

انتخاب تم برای صفحه ورود به وردپرس

این قابلیت که فقط در نسخه‌ی خریداری شده‌ی Login Designer وجود دارد، برای تغییر تم و قالب صفحه ورود به وردپرس استفاده می‌شود. در این بخش با مراجعه به قسمت Theme می‌توانید تم مورد علاقه‌ی خود را انتخاب کنید.

 

انتخاب لوگوی دلخواه برای صفحه ورود به وردپرس

در قسمت logo می‌توانید لوگو تجاری خودتان را در صفحه‌ی ورودی سایت وردپرسی‌تان قرار دهید. در صورتی که لوگویی نداشته باشید، افزونه از لوگوی پیشفرض استفاده خواهد کرد. پس از انتخاب لوگو می‌توانید از قسمت‌های logo width و logo height ابعاد طول و عرض لوگو را برای نمایش تعیین کنید. در قسمت padding می‌توانید مشخص کنید که فاصله‌ی لوگو از پایین صفحه چقدر باشد. یک امکان دیگر در این بخش اضافه کرردن لینک دلخواه به لوگو هست.

به این صوررت که در صورتی که کاربر روی لوگو کلیک کند به لیک مورد نظر هدایت می‌شود. برای اضافه کردن لینک به لوگو از فیلد logo URL استفاده کنید. در فیلدLogo hover title  می‌توانید یک عنوان دلخواه انتخاب کنید تا هنگامی که نشانگر موس روی لوگو قرار رگفت، آن عنوان برای کاربر نمایش داده شود.

صفحه ورود به وردپرس

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

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

پس زمینه‌ی صفحه‌ی ورود به وردپرس شما ساده باشد، می‌توانید گزینه‌ی Display Background Image را غیر فعال کنید و یک رنگ دلخواه ساده را برای پس زمینه انتخاب کنید. گزینه‌های Background Repeat و Select Position و Background Image Size به ترتیب برای تکرار تصویر پس زمینه، محل نمایش تصویر پس زمینه و در نهایت اندازه‌ی تصویر زمینه هستند.

صفحه ورود به وردپرس

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

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

Form Width: تعیین کردن اندازه‌ی پهنای فرم

Form Minimum Height: تعیین کردن حداقل ارتفاع فرم

Input Text Field Width: تعیین کردن اندازه‌ی فیلدهای ورود اطلاعات در فرم

Form Padding: فاصله‌ی فیلدهای اطلاعات فرم از یکدیگر

Border (Example: 2px dotted black): تعیین کردن حاشیه‌ی دلخواه برای فرم

Input Text Field Margin: تعیین فاصله‌ی متن‌هایی در فیلدها وارد می‌شود.

Form Background Color: تعیین رنگ پس زمینه‌ی فرم

Input Field Background Color: تعیین رنگ پس زمینه‌ی فیلدها در فرم

Input Field Text Color: تعیین رنگ دلخواه برای متن ورودی فیلد

Label Color: تعیین رنگ عنوان فیلد

صفحه ورود به وردپرس

فرم فراموشی رمز در وردپرس

در قسمت Customize Forget Form می‌توانید فرم فراموشی رمز را برای کاربر طراحی و شخصی سازی کنید.

در حال حاضر فقط رنگ پس زمینه‌ای این فرم قابل تغییر است.

 

تغییر رنگ دکمه ورود در وردپرس

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

صفحه ورود به وردپرس

Button Color: با استفاده از این گزینه رنگ دکمه‌ی ورود در وردپرس را می‌توانید انتخاب کنید.

Button Border Color: با استفاده از این گزینه رنگ بوردر دکمه ورود در وردپرس را می‌توانید انتخاب کنید.

Button Color (Hover): با استفاده از این گزینه رنگ هاور برای دکمه ورود به وردپرس را می‌توانید انتخاب کنید.

Button Border (Hover): با استفاده از این گزینه رنگ حاشیه در حالت هاور برای دکمه ورود در وردپرس را می‌توانید انتخاب کنید.

Button Box Shadow: با استفاده از این گزینه رنگ سایه دکمه ورود وردپرس را انتخاب کنید.

Button Text Color: با استفاده از این گزینه رنگ متن دکمه ورود در وردپرس را می‌توانید انتخاب کنید.

 

سفارشی سازی پیغام خطای صفحه ورود وردپرس

پیغام خطا و یا Error Messages پیغامی است که در صورت بروز مشکل در صفحه ورود وردپرس نمایش داده می‌شود. در صورتی که قصد شخصی سازی و طراحی این پیغام را دارید به قسمت Error Messages مراجعه کنید. با مراجعه به این قسمت منویی مانند تصویر زیر برای شا نمایش داده خواهد شد. در ادامه گزینه‌ها و فیلدهای این منو را تشریح می‌کنیم.

صفحه ورود به وردپرس

خطاها

Incorrect Username Message: در این فیلد پیغام خطا در هنگام ورود نام کاربری را وارد کنید.

Incorrect Password Message: در این فیلد پیغام خطا درهنگان ورود رمز ورود به وردپرس را وارد کنید.

Empty Username Message: در این فیلد پیغام خطا خالی بودن فیلد نام کاربری در وردپرس را وارد کنید.

Empty Password Message: در این فیلد پیغام خطا برای خالی بودن فیلد رمز در وردپرس را وارد کنید.

Invalid Email Message: در این فیلد پیغام خطا برای وارد کردن ایمیل نادرست در وردپرس را وارد کنید.

Empty Email Message: در این فیلد پیغام خطا برای خالی بودن فیلد ایمیل در وردپرس را وارد کنید.

Username Already Exist Message: در این فیلد پیغام خطا برای استفاده از نام کاربری تکراری که قبلا در سایت ثبت نام کرده است، را وارد کنید.

Email Already Exist Message: این فیلد هم مشابه فیلد قبل است، با این تفاوت که کاربر از ایمیل تکراری که قبلا در سایت ثبت نام کرده است، استفاده می‌کند.

Forget Password Message: در این فیلد پیغامی که می‌خواهید برای کاربر زمانی که رمز عبور و یا نام کاربری‌اش را فراموش کرده است، نمایش داده شود را وارد کنید.

Login with Email Message: در این فیلد پیغام خطا برای ورود با ایمیل در وردپرس را وارد کنید.

قرار دادن یک پیغام ورود و یا خوش آمدگویی در وردپرس

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

صفحه ورود به وردپرس

سفارشی سازی فرم فوتر در صفحه ورود وردپرس

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

صفحه ورود به وردپرس

Footer Text Display: این دکمه برای فعال سازی پانوشت فرم ورد به فرد پرس است.

Lost Password Text: در این فیلد عنوان دلخواه خودتون را برای دکمه فراموشی رمز در وردپرس وارد کنید.

Select Text Decoration: با استفاده از این گزینه هم می‌تاونید تزیین مورد نظرتان برای دکمه‌ی نام نویسی و فراموشی رمز در وردپرس را انتخاب کنید.

Footer Text Color: با استفاده از این گزینه رنگ دلخواه برای متن پانوشت وردپرس را انتخاب می‌کنید. Footer Background Color: این قسمت برای تعیین رنگ پس زمینه‌ی متن پانوشت است.

Footer Text Hover Color: در این قسمت رنگ متن در حالت پانوشت را انتخاب می‌کنید.

Text Font Size: در این قسمت اندازه دلخواه برای متن پانوشت را انتخاب کنید.

 

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

در فیلدهای Custom CSS/JS می‌توان استایل و چینش دلخواه برای فرم صفحه ورود به وردپرس را انتخاب کرد. با استفاده فیلد Customize JS  می‌توان از جاوا اسکریپت برای سفارشی کردن فرم ورود استفاده کرد. در صورتی که بخواهید خودتان این فرم را طراحی کنید از فیلد Customize CSS باید استفاده کنید. پس از وارد کردن تمامی تنظیمات مورد نظر برای شخصی سازی فرم ورود به وردپرس روی دکمه‌ی انتشار کلید کنید تا مشابه تصویر زیر تنظیمات وارد شده، اعمال شوند. در صورتی که روی این دکمه کلیک نکنید تنظیمات وار شده هیچ کدام اعمال نمی‌شوند.

صفحه ورود به وردپرس

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)