صفحه ورود به سیستم وردپرس ، ما روش های مختلف و سفارشی را به شما نشان خواهیم داد. همچنین می توانید از این آموزش برای ایجاد یک صفحه ورود WooCommerce سفارشی نیز استفاده کنید.
اگر یک سایت عضویت در وردپرس یا یک فروشگاه آنلاین دارید ، بسیاری از کاربران شما اغلب صفحه ورود را می بینند. سفارشی کردن صفحه ورود پیش فرض وردپرس به شما امکان می دهد تجربه کاربری بهتری را ارائه دهید.
چرا باید یک صفحه ورود سفارشی وردپرس ایجاد کنید؟
وردپرس با یک سیستم قدرتمند مدیریت کاربر همراه است . با این کار کاربران می توانند در فروشگاه های تجارت الکترونیک ، وب سایت های عضویت یا وبلاگ حساب ایجاد کنند . به طور پیش فرض ، صفحه ورود به سیستم مارک و نشان وردپرس را نشان می دهد. اگر وبلاگ کوچکی را اداره می کنید یا تنها شخصی هستید که به مدیر دسترسی دارید این خوب است.
با این حال ، اگر وب سایت شما به کاربران اجازه ثبت نام و ورود به سیستم را می دهد ، در این صورت یک صفحه ورود سفارشی تجربه کاربری بهتری را ارائه می دهد.
استفاده از آرم و طراحی خود باعث می شود که کاربران احساس راحتی کنند. در حالی که هدایت مجدد آنها به صفحه پیش فرض ورود به وردپرس که به نظر هیچ چیزی شبیه وب سایت شما نیست ، ممکن است از نظر کاربران مشکوک باشد.
در آخر ، صفحه ورود به سیستم پیش فرض حاوی چیزی غیر از فرم ورود نیست. با ایجاد یک صفحه ورود سفارشی می توانید از آن برای تبلیغ صفحات دیگر یا تبلیغات ویژه استفاده کنید.
همانطور که گفته شد ، بیایید نگاهی به چند نمونه از طراحی صفحه ورود به سیستم وردپرس اختصاصی بیندازیم.
ایجاد صفحه ورود به وردپرس با استفاده از Theme My Login
اولین کاری که باید انجام دهید نصب و فعال سازی افزونه Theme My Login است. برای اطلاعات بیشتر ، به راهنمای گام به گام نحوه نصب افزونه وردپرس مراجعه کنید . پس از فعال شدن ، Theme My Login به طور خودکار URL هایی برای ورود ، ورود به سیستم ، ثبت نام ، رمز ورود فراموش شده و تنظیم مجدد رمز ورود شما ایجاد می کند. با مراجعه به صفحه عمومی ، ورود به سیستم ، می توانید این URL های ورود به وردپرس را سفارشی کنید . به قسمت "Slugs" بروید و این URL های مورد استفاده توسط افزونه را برای اقدامات ورود تغییر دهید.
Theme My Login همچنین به شما امکان می دهد از کد کوتاه برای ایجاد صفحات ورود به سیستم و ثبت سفارشی استفاده کنید. می توانید برای هر اقدام به سادگی یک صفحه ایجاد کرده و سپس صفحه صفحه را اضافه کنید تا افزونه بتواند کاربران را به درستی پیدا کند و هدایت کند.
بیایید با صفحه ورود شروع کنیم.
برای ایجاد صفحه جدید وردپرس به صفحه بروید »افزودن موارد جدید . شما باید به صفحه خود یک عنوان اختصاص دهید و سپس کد کوتاه "[theme-my-login]" را در داخل محتوا وارد کنید.
اکنون می توانید صفحه خود را منتشر کرده و پیش نمایش آن را مشاهده کنید تا صفحه ورود سفارشی خود را در عمل مشاهده کنید.
برای ایجاد صفحات دیگر با استفاده از کد کوتاه زیر این فرایند را تکرار کنید.
[action-my-login action = "ثبت نام"] برای فرم ثبت نام.
[action-my-login action = ”lostpassword”] برای صفحه رمز عبور گمشده.
[action-my-login action = "resetpass"] از آن در صفحه رمز عبور بازنشانی استفاده کنید.
ایجاد یک صفحه ورود سفارشی وردپرس با استفاده از WPForms
WPForms بهترین افزونه سازنده فرم وردپرس در بازار است. به شما اجازه می دهد تا به راحتی فرم های ورود و ثبت نام سفارشی را برای وب سایت خود ایجاد کنید. WPForms یک افزونه برتر وردپرس است و شما برای دسترسی به افزونه ثبت نام کاربر حداقل به برنامه حرفه ای آنها نیاز دارید. کاربران WPBeginner می توانند با استفاده از کد کوپن WPForms 50٪ تخفیف دریافت کنند : SAVE50 اولین کاری که باید انجام دهید نصب و فعال سازی افزونه WPForms است. پس از فعال سازی ، باید وارد صفحه تنظیمات » WPForms شوید تا کلید مجوز خود را وارد کنید. می توانید این اطلاعات را در حساب خود در وب سایت WPForms پیدا کنید.
پس از وارد کردن کلید مجوز ، می توانید افزونه ها را نصب کنید. پیش بروید و از صفحه WPForms »Addons بازدید کرده و آدرس ثبت نام کاربر را بیابید.
بعد ، روی دکمه Install Addon کلیک کنید تا افزونه بارگیری و فعال شود. شما اکنون آماده ایجاد فرم های ورود به سیستم سفارشی خود هستید.
به صفحه WPForms بروید » جدید اضافه کنید و به پایین به" فرم ورود کاربر "بروید.
برای ادامه باید روی دکمه "ایجاد فرم ورود کاربر" کلیک کنید.
WPForms فرم ورود کاربر را با قسمتهای مورد نیاز بارگیری می کند. می توانید روی قسمتها کلیک کنید تا توضیحات یا متن خود را در اطراف آنها اضافه کنید.
می توانید تنظیمات دیگر را نیز تغییر دهید. به عنوان مثال ، به طور خودکار "ارسال" را به عنوان عنوان دکمه اضافه می کند. می توانید روی آن کلیک کنید و سپس به جای آن به Login تغییر دهید.
همچنین می توانید تصمیم بگیرید که پس از ورود کاربر با موفقیت وارد سیستم شوید. به برگه تنظیمات » تأیید بروید و عملی را انتخاب کنید.
می توانید کاربر را به هر URL دیگری هدایت کنید ، وی را به صفحه اصلی هدایت کنید یا به سادگی پیامی را به او نشان دهید که اکنون به سیستم وارد شده است.
هنگامی که از تنظیمات فرم راضی شدید ، بر روی دکمه ذخیره در گوشه سمت راست بالای صفحه کلیک کرده و سازنده فرم را ببندید.
افزودن فرم ورود به سیستم سفارشی به صفحه وردپرس
WPForms افزودن فرم ورود به سیستم سفارشی خود را در هر پست یا صفحه وردپرس بسیار آسان می کند.
به سادگی صفحه ای را که می خواهید فرم ورود به آن را اضافه کنید ویرایش کنید یا یک صفحه جدید ایجاد کنید. در صفحه ویرایش صفحه ، بلوک WPForms را به قسمت محتوای خود اضافه کنید.
بعد ، فرم ورود به سیستم خود را که قبلا ایجاد کرده اید انتخاب کنید و بلوک WPForms به طور خودکار آن را در داخل محتوا بارگیری می کند.
اکنون می توانید ویرایش صفحه فرم ورود را ادامه دهید ، یا تغییرات خود را ذخیره کرده و منتشر کنید.
طراحی صفحه فرم ورود به وردپرس خود را سفارشی کنید
به طور پیش فرض ، صفحه فرم ورود به سیستم وردپرس سفارشی شما از الگو و سبک صفحه تم شما استفاده خواهد کرد. این ابزارها دارای منوهای ناوبری ، سرصفحه ، پاورقی و نوار کناری موضوع شما هستند. اگر می خواهید کل صفحه را کاملاً تصاحب کنید و چیزی را از ابتدا طراحی کنید ، می توانید از یک افزونه صفحه ساز وردپرس استفاده کنید . با یک افزونه صفحه ساز ، می توانید یک صفحه آرایی سفارشی ایجاد کنید و سپس ویجت فرم ورود به سیستم را که توسط Theme My Login یا WPForms ارائه شده اضافه کنید. در تصویر زیر ، ما از پلاگین محبوب Beaver Builder استفاده کرده ایم . ما از یک تصویر پس زمینه در یک طرح تمام صفحه استفاده کردیم و سپس دو ستون اضافه کردیم. در یک ستون متن و یک دکمه اضافه کردیم. در ستون دیگر ، ویجت WPForms را اضافه کردیم.
مزیت Beaver Builder این است که 100٪ محلول کشیدن و رها کردن است.
توجه: از آنجا که قبلاً وارد سیستم شده اید ، ممکن است هر دو افزونه Theme My Login و WPForms پیش نمایش زنده فرم ورود را نشان ندهند. افزونه WPForms گزینه ای دارد که می توانید در تنظیمات فرم آن را خاموش کنید.
اگر افزونه های صفحه ساز WordPress مورد شما نیستند ، پس می توانید از CSS سفارشی برای فرم دهی به فرم و خود صفحه ورود استفاده کنید. همچنین می توانید از پلاگین CSS Hero برای افزودن سبک های سفارشی CSS استفاده کنید.
نشان و ورود به سیستم وردپرس را تغییر دهید
شما همیشه نیازی به ایجاد صفحه ورود کاملاً سفارشی وردپرس برای وب سایت خود ندارید. در حقیقت ، بسیاری از وب سایت ها در حالی که هنوز از صفحه ورود به سیستم پیش فرض استفاده می کنند ، فقط آرم وردپرس و url آدرس را جایگزین می کنند. اگر می خواهید لوگوی وردپرس را در صفحه ورود به سیستم با آرم خود جایگزین کنید ، پس می توانید با استفاده از یک افزونه وردپرس یا با افزودن کد سفارشی به راحتی این کار را انجام دهید. ما هر دو روش را به شما نشان خواهیم داد که می توانید از روشی استفاده کنید که مناسب شما باشد.با استفاده از یک افزونه ، آرم ورود به سیستم وردپرس و URL را تغییر دهید
اولین کاری که باید انجام دهید نصب و فعال سازی Colorlib Login Customizer است پس از فعال شدن ، این پلاگین یک مورد جدید از منو با عنوان "ورود به سیستم Customizer" را به نوار کناری مدیر وردپرس اضافه می کند. با کلیک بر روی آن ، تنظیم کننده ورود به سیستم راه اندازی می شود.
تنظیم کننده ورود ، صفحه ورود به سیستم پیش فرض وردپرس شما را با گزینه های سفارشی سازی در سمت چپ و پیش نمایش زنده در سمت راست بارگیری می کند.
برای جایگزینی آرم وردپرس با آرم خود ، روی برگه "گزینه های آرم" در سمت راست کلیک کنید.
از اینجا می توانید آرم وردپرس را پنهان کنید ، آرم سفارشی خود را بارگذاری کنید ، URL و متن آرم را تغییر دهید.
این افزونه همچنین به شما امکان می دهد صفحه پیش فرض ورود به وردپرس را کاملاً شخصی سازی کنید. می توانید ستون ها ، تصویر پس زمینه ، تغییر رنگ فرم ورود به سیستم و موارد دیگر را اضافه کنید.
در واقع ، شما می توانید یک صفحه ورود به سیستم وردپرس سفارشی بدون تغییر URL پیش فرض ورود به وردپرس ایجاد کنید.
پس از پایان کار ، به سادگی بر روی دکمه انتشار کلیک کنید تا تغییرات خود را ذخیره کنید.
اکنون می توانید برای مشاهده فرم ورود سفارشی خود به صفحه ورود به وردپرس مراجعه کنید.
بدون پلاگین (کد) نشان و ورود به سیستم وردپرس را تغییر دهید
این روش به شما امکان می دهد آرم وردپرس را در صفحه ورود به سیستم با آرم سفارشی خود جایگزین کنید . ابتدا باید آرم سفارشی خود را در کتابخانه رسانه بارگذاری کنید. به صفحه Media »افزودن جدید بروید و آرم سفارشی خود را بارگذاری کنید. پس از بارگذاری تصویر ، روی پیوند "ویرایش" در کنار آن کلیک کنید. این صفحه ویرایش رسانه را باز می کند ، جایی که شما باید URL فایل را کپی کرده و در یک فایل متنی خالی بر روی رایانه خود جای گذاری کنید. در مرحله بعدی ، باید کد زیر را به فایل functions.php قالب خود یا یک پلاگین مخصوص سایت اضافه کنید .function wpb_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(http://path/to/your/custom-logo.png);
height:100px;
width:300px;
background-size: 300px 100px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );
این کد فقط جای آرم وردپرس را می گیرد. این پیوند آرم را که به وب سایت WordPress.org نشان می دهد تغییر نمی دهد.
بیایید این را تغییر دهیم
به سادگی کد زیر را به فایل functions.php قالب خود یا یک پلاگین مخصوص سایت اضافه کنید. می توانید این کد را دقیقاً در زیر کدی که قبلاً اضافه کرده اید اضافه کنید.
function wpb_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
function wpb_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );
