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

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

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

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

افزونه سفارشی سازی صفحه ورود به وردپرس که قصد معرفی اونو دارم با نام LoginPress در مخزن وردپرس به ثبت رسیده و تاکنون موفق شده بیش از 10.000 نصب فعال و کسب امتیاز 4.9 را ازآن خودش بکنه که با استفاده از این افزونه قادر به سفارشی سازی و تغیر قالب صفحه ورود وردپرس خواهید بود. برای استفاده از این افزونه روی دکمه زیر کلیک کنید تا به صفحه افزونه در مخزن وردپرس هدایت شده و سپس با استفاده از آموزش نحوه نصب و کار کردن با افزونه ها در وردپرس اقدام به نصب و فعال سازی افزونه در سایت وردپرس خودتون بکنید.

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

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

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

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

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

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

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

تغییر قالب صفحه ورود وردپرس

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

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

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

مشابه تصویر ابتدا لوگو خودتون را انتخاب کنید و سپس از بخش logo width و logo height به ترتیب اندازه لوگو برای پهنا و ارتفاع را تعیین کرده و از بخش padding هم فاصله لوگو از پایین را تعیین کنید تا به دلخواه خودتون لوگو از پایین فرم فاصله داشته باشد. سپس با استفاده از فیلدهای logo URL و Logo hover title  هم به ترتیب میتونید آدرس دلخواه هنگام کلیک روی لوگو که کاربر به اون هدایت بشه و عنوان دلخواه هنگام رفتن نشانگر ماوس روی لوگو صفحه ورود وردپرس را تعیین کنید.

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

با مراجعه به بخش Background میتونید پس زمینه فرم ورود وردپرس را شخصی سازی کنید. اگر تمایل دارید تا از رنگ برای پس زمینه استفاده کنید تیک گزینه Display Background Image را غیرفعال کنید و سپس رنگ دلخواه خودتونو از Background Color انتخاب کنید.

اما در صورت استفاده از تصویر کافیه تیک گزینه را فعال و سپس تصویر دلخواه خود را آپلود کرده یا یکی از تصاویر موجود در افزونه را برای پس زمینه وردپرس انتخاب کنید و ویژگی‌های تصویر پس زمینه همچون 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 هم میتونید پیغام‌های خطا در هنگام ورود به وردپرس را شخصی سازی کرده و از متن دلخواه خودتون برای پیغام خطا صفحه ورود وردپرس استفاده کنید.

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: با استفاده از این گزینه هم میتونید Decoration دلخواه برای دکمه نام نویسی و فراموشی رمز در وردپرس را انتخاب کنید.

Footer Text Color: با استفاده از این گزینه رنگ دلخواه برای متن نام نویسی و فراموشی رمز در وردپرس را انتخاب کرده و سپس از بخش Footer Background Color رنگ دلخواه برای پس زمینه اونو انتخاب کنید. با استفاده از Footer Text Hover Color هم میتونید رنگ متن در حالت فوتر و با استفاده از Text Font Size اندازه دلخواه برای متن را انتخاب کنید.

“Back to” Text Display: با استفاده از این گزینه هم میتونید نمایش دکمه بازگشت به سایت را فعال و یا غیرفعال کنید و در صورت فعال بودن هم میتونید درست مشابه اتفاقی که برای دکمه‌های نام نویسی و فراموشی رمز رخ داد رنگ متن، اندازه سایز متن، رنگ پس زمینه و … را برای این گزینه هم انتخاب کنید.

Copyright Note: با استفاده از این فیلد هم میتونید متن دلخواه خودتون را برای کپی رایت وارد کنید.

Show some Love. Please help: با غیرفعال کردن این گزینه هم میتونید متن کپی رایت سازنده افزونه را که در حالت پیشفرض در صفحه ورود وردپرس نمایش داده میشه را غیرفعال کنید.

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

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

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