آیا می خواهید یک صفحه ورود وردپرس سفارشی برای وب سایت خود ایجاد کنید؟
اگر سایت عضویت در وردپرس یا یک فروشگاه آنلاین ، در این صورت بسیاری از کاربران شما اغلب صفحه ورود را مشاهده می کنند. سفارشی کردن صفحه ورود پیش فرض وردپرس به شما امکان می دهد تجربه کاربری بهتری را ارائه دهید.
در این راهنمای نهایی ، ما روش های مختلف ایجاد صفحه ورود به سیستم وردپرس را به شما نشان می دهیم. همچنین می توانید از این آموزش برای ایجاد صفحه ورود سفارشی WooCommerce نیز استفاده کنید.
در اینجا چیزی است که از این راهنما خواهید آموخت.
چرا صفحه ورود به سیستم WordPress سفارشی ایجاد کنید؟ h4>
وردپرس دارای سیستم مدیریت کاربر . با این کار کاربران می توانند در فروشگاه های تجارت الکترونیک ، وب سایت های عضویت یا در یک وبلاگ.
به طور پیش فرض ، صفحه ورود به سیستم مارک و نشان وردپرس را نشان می دهد. اگر وبلاگ کوچکی را اداره می کنید یا تنها شخصی هستید که به مدیر دسترسی دارید این خوب است.
با این حال ، اگر وب سایت شما به کاربران امکان می دهد ثبت نام کنند و وارد سیستم شوند ، سپس یک صفحه ورود سفارشی تجربه کاربری بهتری را ارائه می دهد.
استفاده از آرم و طراحی خود باعث می شود که کاربران احساس راحتی کنند. در حالی که هدایت مجدد آنها به صفحه ورود به سیستم پیش فرض وردپرس که به نظر هیچ چیزی شبیه وب سایت شما نیست ممکن است از نظر کاربران مشکوک باشد.
سرانجام ، صفحه ورود به سیستم پیش فرض حاوی چیزی غیر از فرم ورود نیست. با ایجاد یک صفحه ورود سفارشی می توانید از آن برای تبلیغ صفحات دیگر یا تبلیغات ویژه استفاده کنید.
همانطور که گفته شد ، بیایید نگاهی به چند نمونه از طراحی صفحه ورود به سیستم وردپرس سفارشی بیندازیم.
نمونه های طراحی صفحه ورود به وردپرس h4>
دارندگان وب سایت می توانند صفحه ورود به وردپرس را با استفاده از سبک ها و تکنیک های مختلف سفارشی کنند.
بعضی ها صفحه ورود به سیستم سفارشی ایجاد می کنند که از موضوع و رنگ وب سایت خود استفاده می کند. دیگران ، صفحه ورود به سیستم پیش فرض را با اضافه کردن پس زمینه سفارشی ، رنگ ها و آرم اختصاصی خود به آن تغییر می دهند.
1. WPForms
WPForms بهترین افزونه فرم تماس با وردپرس موجود در بازار. به طور هم زمان افزونه آنها همچنین دارای یک افزونه برای ایجاد فرمهای زیبا ورود به وردپرس و ثبت نام است که بعداً در این مقاله به شما نشان خواهیم داد.
صفحه ورود سفارشی آنها از طرح دو ستونی استفاده می کند. ستون سمت چپ شامل فرم ورود به سیستم و ستون سمت راست برای برجسته کردن تبلیغات و سایر فراخوان ها است. در مثال بالا ، آنها از صفحه ورود به سیستم برای به اشتراک گذاشتن گزارش سالانه خود استفاده می کنند. از مارک تجاری سفارشی ، تصویر زمینه و رنگ مارک برای ایجاد یک تجربه ورود به سیستم منحصر به فرد استفاده می کند.
2. عروسی من را تکان دهید
وب سایت Rock My Wedding از عنوان modal پنجره برای نمایش فرم ورود و ثبت نام . مزیت استفاده از پنجره بازشو این است که کاربران می توانند بدون خارج شدن از صفحه وارد سیستم شوند. آنها را از بارگذاری صفحه جدید نجات می دهد و تجربه کاربری سریع تری را ارائه می دهد.
3. ژاکلین استیو
Jacquelynne Steeves یک وب سایت هنر و صنایع دستی است که نویسنده آن مطالبی را در مورد تزئین خانه ، ساخت لحاف ، الگو ، گلدوزی و غیره منتشر می کند. صفحه ورود به سیستم آنها از یک تصویر پس زمینه سفارشی متناسب با موضوع وب سایت خود با فرم ورود در سمت راست استفاده می کند.
4. Church Motion Graphics
در صفحه ورود این شرکت طراحی گرافیک متحرک از یک پس زمینه رنگارنگ استفاده می شود که نشان دهنده آنچه مربوط به تجارت آنها است. از همان سرصفحه ، پاورقی و منوهای ناوبری سایت در صفحه ورود به سیستم استفاده می کند. فرم ورود به سیستم کاملاً ساده و دارای پس زمینه تیره است.
5. بررسی مدیریت MITSLoan
وب سایت MITSLoan Management Review از صفحه ورود به سیستم پیش فرض وردپرس استفاده می کند. برای مخفی کردن نام تجاری وردپرس از CSS سفارشی با آرم خاص خود استفاده می کند.
ایجاد یک صفحه ورود سفارشی Front-End در وردپرس h4>
چندین افزونه وردپرس وجود دارد که می توانید با استفاده از آنها یک صفحه ورود سفارشی در وردپرس ایجاد کنید. ما دو افزونه مختلف به شما نشان خواهیم داد و شما می توانید یکی از مواردی را که مناسب شما است انتخاب کنید.
آموزش فیلم h4>
اگر دستورالعمل های کتبی را ترجیح می دهید ، فقط به خواندن ادامه دهید.
ایجاد صفحه ورود به وردپرس با استفاده از Theme My Login
اولین کاری که باید انجام دهید نصب و فعال کردن افزونه Theme My Login . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
پس از فعال شدن ، Theme My Login به طور خودکار URL هایی را برای ورود ، ورود به سیستم ، ثبت نام ، رمز ورود فراموش شده و تنظیم مجدد رمز ورود شما ایجاد می کند.
با مراجعه به صفحه Theme My Login »عمومی می توانید این URL های ورود به سیستم وردپرس را سفارشی کنید. برای اصلاح این URL های استفاده شده توسط افزونه برای اقدامات ورود به پایین ، به بخش “Slugs” بروید.
Theme My Login همچنین به شما امکان می دهد از کد کوتاه برای ایجاد صفحات ورود به سیستم و ثبت سفارشی استفاده کنید. می توانید برای هر اقدام به سادگی یک صفحه ایجاد کنید و سپس صفحه جلوی صفحه را اینجا اضافه کنید ، تا افزونه بتواند کاربران را به درستی پیدا کند و آنها را هدایت کند.
بیایید با صفحه ورود به سیستم شروع کنیم.
برای ایجاد صفحه جدید WordPress به صفحه »افزودن مطلب جدید بروید. شما باید به صفحه خود یک عنوان بدهید و سپس کد کوتاه “[theme-my-login]” را در داخل محتوا وارد کنید.
اکنون می توانید صفحه خود را منتشر کرده و پیش نمایش آن را مشاهده کنید تا صفحه ورود سفارشی خود را در عمل مشاهده کنید.
برای ایجاد صفحات دیگر با استفاده از کد کوتاه زیر روند را تکرار کنید.
[action-my-login action = “ثبت نام”] برای فرم ثبت نام.
[theme-my-login action = ”lostpassword”] برای صفحه رمز عبور گمشده.
[action-my-login action = ”resetpass”] از آن در صفحه رمز عبور بازنشانی استفاده کنید.
ایجاد صفحه ورود به سیستم WordPress سفارشی با استفاده از WPForms
WPForms بهترین افزونه سازنده فرم وردپرس در بازار است. به شما اجازه می دهد تا به راحتی فرم های ورود و ثبت نام سفارشی را برای وب سایت خود ایجاد کنید.
WPForms یک افزونه برتر وردپرس است و شما برای دسترسی به افزونه ثبت نام کاربر حداقل به برنامه حرفه ای آنها احتیاج دارید. کاربران WPBeginner می توانند با استفاده از کد کوپن WPForms 50٪ تخفیف بگیرند: SAVE50
اولین کاری که باید انجام دهید نصب و فعال سازی افزونه WPForms است. برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
پس از فعال سازی ، باید وارد صفحه WPForms »تنظیمات شوید تا کلید مجوز خود را وارد کنید. می توانید این اطلاعات را در حساب خود در وب سایت WPForms پیدا کنید.
پس از وارد کردن کلید مجوز ، می توانید افزونه ها را نصب کنید. پیش بروید و از صفحه WPForms »افزودنی ها بازدید کرده و آدرس ثبت نام کاربر را بیابید.
بعد ، روی دکمه Install Addon کلیک کنید تا افزونه بارگیری و فعال شود. اکنون آماده ایجاد فرم های ورود به سیستم سفارشی خود هستید.
به صفحه WPForms »افزودن موارد جدید بروید و به پایین به الگوی” فرم ورود کاربر “بروید. برای ادامه باید روی دکمه “ایجاد فرم ورود کاربر” کلیک کنید.
WPForms فرم ورود کاربر را با قسمتهای مورد نیاز بارگیری می کند. می توانید روی قسمتها کلیک کنید تا توضیحات یا متن خود را در اطراف آنها اضافه کنید.
می توانید تنظیمات دیگر را نیز تغییر دهید. به عنوان مثال ، به طور خودکار “ارسال” را به عنوان عنوان دکمه اضافه می کند. می توانید روی آن کلیک کنید و سپس به جای آن به Login تغییر دهید.
همچنین می توانید تصمیم بگیرید که پس از ورود کاربر با موفقیت وارد سیستم شوید. به برگه تنظیمات »تأیید بروید و اقدامی را انتخاب کنید.
می توانید کاربر را به هر URL دیگری هدایت کنید ، وی را به صفحه اصلی هدایت کنید یا به سادگی پیامی را به او نشان دهید که اکنون به سیستم وارد شده است.
هنگامی که از تنظیمات فرم راضی شدید ، بر روی دکمه ذخیره در گوشه سمت راست بالای صفحه کلیک کرده و سازنده فرم را ببندید.
افزودن فرم ورود به سیستم سفارشی به صفحه وردپرس
WPForms افزودن فرم ورود به سیستم سفارشی خود را در هر پست یا صفحه وردپرس بسیار آسان می کند.
به سادگی صفحه ای را ویرایش کنید که می خواهید فرم ورود به آن را اضافه کنید یا صفحه جدیدی ایجاد کنید. در صفحه ویرایش صفحه ، بلوک WPForms را به قسمت محتوای خود اضافه کنید.
بعد ، فرم ورود به سیستم را که قبلا ایجاد کرده اید انتخاب کنید و بلوک WPForms آن را به طور خودکار در داخل محتوا بارگیری می کند.
اکنون می توانید ویرایش صفحه فرم ورود به سیستم را ادامه دهید یا تغییرات خود را ذخیره کرده و منتشر کنید.
سفارشی سازی فرم صفحه ورود به سیستم وردپرس h4>
به طور پیش فرض ، صفحه فرم ورود به سیستم WordPress سفارشی شما از الگو و سبک صفحه تم شما استفاده خواهد کرد. این دارای منوهای ناوبری طرح زمینه ، سرصفحه ، پاورقی و ابزارک های نوار کناری است.
اگر می خواهید کل صفحه را به طور کامل تصاحب کنید و چیزی را از ابتدا طراحی کنید ، می توانید از افزونه صفحه ساز WordPress .
با یک افزونه صفحه ساز ، می توانید یک صفحه آرایی سفارشی ایجاد کنید و سپس ابزارک فرم ورود به سیستم را که توسط Theme My Login یا WPForms ارائه شده اضافه کنید.
در تصویر زیر ، ما از محبوب پلاگین Beaver Builder . ما از یک تصویر پس زمینه در یک طرح تمام صفحه استفاده کردیم و سپس دو ستون اضافه کردیم. در یک ستون متن و یک دکمه اضافه کردیم. در ستون دیگر ، ویجت WPForms را اضافه کردیم.
سود Beaver Builder این است که 100٪ راه حل کشیدن و رها کردن است.
توجه: از آنجا که قبلاً وارد سیستم شده اید ، ممکن است هر دو افزونه Theme My Login و WPForms پیش نمایش زنده فرم ورود را نشان ندهند. افزونه WPForms دارای گزینه ای است که می توانید در تنظیمات فرم آن را خاموش کنید.
اگر افزونه های صفحه ساز WordPress مورد علاقه شما نیستند ، می توانید از CSS سفارشی برای فرم و فرم صفحه ورود به سیستم. همچنین می توانید از افزونه CSS Hero تا بتوانید به راحتی سبک های سفارشی CSS را اضافه کنید.
نشان و ورود به سیستم وردپرس و URL را تغییر دهید h4>
شما همیشه نیازی به ایجاد صفحه کاملاً سفارشی ورود به وردپرس برای وب سایت خود ندارید. در حقیقت ، بسیاری از وب سایت ها در حالی که هنوز از صفحه ورود به سیستم پیش فرض استفاده می کنند ، فقط آرم وردپرس و آدرس اینترنتی آرم را جایگزین می کنند.
اگر می خواهید آرم وردپرس خود را در صفحه ورود به سیستم با آرم خود جایگزین کنید ، پس می توانید این کار را با استفاده از یک افزونه وردپرس یا با افزودن کد سفارشی به راحتی انجام دهید. ما هر دو روش را به شما نشان خواهیم داد که می توانید از روشی استفاده کنید که مناسب شما باشد.
آرم ورود به سیستم وردپرس و URL را با استفاده از یک افزونه تغییر دهید h4>
اولین کاری که باید انجام دهید نصب و فعال کردن برنامه سفارشی سازی Colorlib . پلاگین برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
پس از فعال شدن ، این افزونه یک مورد منوی جدید با عنوان “ورود به سیستم” به نوار کناری مدیر وردپرس اضافه می کند. با کلیک روی آن ، تنظیم کننده ورود به سیستم راه اندازی می شود.
تنظیم کننده ورود به سیستم ، صفحه ورود پیش فرض وردپرس شما را با گزینه های سفارشی سازی در سمت چپ و پیش نمایش زنده در سمت راست ، بارگیری می کند.
برای جایگزینی آرم وردپرس با آرم خود ، روی برگه “گزینه های آرم” در سمت راست کلیک کنید. از اینجا می توانید آرم وردپرس را مخفی کنید ، آرم سفارشی خود را بارگذاری کنید ، URL و متن آرم را تغییر دهید.
همچنین این افزونه به شما امکان می دهد صفحه پیش فرض ورود به وردپرس را کاملاً شخصی سازی کنید. می توانید ستون ها ، تصویر پس زمینه ، تغییر رنگ فرم ورود به سیستم و موارد دیگر را اضافه کنید.
اساساً ، بدون تغییر URL پیش فرض ورود به وردپرس ، می توانید یک صفحه ورود سفارشی وردپرس ایجاد کنید.
پس از اتمام کار ، برای ذخیره تغییرات خود کافیست بر روی دکمه انتشار کلیک کنید. اکنون می توانید برای مشاهده فرم ورود به سیستم سفارشی خود به صفحه ورود وردپرس مراجعه کنید.
آرم ورود به سیستم وردپرس و URL بدون پلاگین (کد) را تغییر دهید h4>
این روش به شما امکان می دهد آرم وردپرس را در صفحه ورود به سیستم با خود وارد کنید آرم سفارشی .
ابتدا باید آرم سفارشی خود را در کتابخانه رسانه بارگذاری کنید. به صفحه رسانه »افزودن موارد جدید بروید و آرم سفارشی خود را بارگذاری کنید.
پس از بارگذاری تصویر ، روی پیوند “ویرایش” در کنار آن کلیک کنید. این صفحه ویرایش رسانه را باز می کند ، جایی که شما باید URL فایل را کپی کرده و در یک فایل متنی خالی بر روی رایانه خود جای گذاری کنید.
در مرحله بعدی ، باید کد زیر را به فایل functions.php یا یک افزونه اختصاصی سایت .
تابع wpb_login_logo () {؟>
فراموش نکنید که URL پرونده پس زمینه را با URL فایلی که قبلاً کپی کرده اید جایگزین کنید. همچنین می توانید سایر ویژگی های CSS را متناسب با تصویر آرم سفارشی خود تنظیم کنید.
اکنون می توانید برای مشاهده آرم سفارشی خود به صفحه ورود به وردپرس مراجعه کنید.
این کد فقط جای آرم وردپرس را می گیرد. این پیوند آرم را که به وب سایت WordPress.org نشان می دهد تغییر نمی دهد.
اجازه دهید این را تغییر دهیم.
به سادگی کد زیر را به پرونده functions.php طرح زمینه خود یا یک پلاگین مخصوص سایت اضافه کنید. می توانید این کد را دقیقاً در زیر کدی که قبلاً اضافه کرده اید اضافه کنید.
تابع wpb_login_logo_url () {
بازگشت به خانه_ url ()؛
}
add_filter ('login_headerurl'، 'wpb_login_logo_url')؛
تابع wpb_login_logo_url_title () {
بازگشت "نام و اطلاعات سایت خود"؛
}
add_filter ('login_headertitle'، 'wpb_login_logo_url_title')؛
فراموش نکنید که "نام و اطلاعات سایت شما" را با نام واقعی سایت خود جایگزین کنید. آرم سفارشی در صفحه ورود شما اکنون به صفحه اصلی سایت شما نشان داده می شود.
این همه است. امیدواریم این مقاله به شما کمک کند تا روش های مختلفی را برای ایجاد صفحه ورود وردپرس برای وب سایت خود بیاموزید. همچنین ممکن است بخواهید راهنمای نهایی امنیت وردپرس برای نکاتی در مورد بهبود امنیت ورود به سیستم وردپرس.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/plugins/how-to-create-custom-login-page-for-wordpress/.