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

آیا می‌ خواهید صفحه ورود سایت خود را سقارشی کنید؟

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

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

در این مقاله موارد زیر را یاد خواهید گرفت:

• چرا یک صفحه ورود سفارشی به وردپرس ایجاد کنیم؟
• نمونه طراحی صفحه ورود به وردپرس
• ایجاد صفحه ورود به وردپرس با استفاده از Theme My Login
• ایجاد صفحه ورود سفارشی وردپرس با استفاده از WPForms
• ایجاد صفحه ورود سفارشی به وردپرس با استفاده از SeedProd
• تغییر لوگو و URL ورود به وردپرس
• تغییر لوگو و URL ورود به وردپرس با استفاده از یک افزونه
• تغییر لوگو و URL ورود به وردپرس بدون افزونه (کد)
• غیرفعال کردن تغییر زبان صفحه ورود به وردپرس

---

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

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

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

با این حال، اگر وب سایت شما به کاربران اجازه ثبت نام و ورود به سیستم را می دهد، یک صفحه ورود سفارشی تجربه کاربری بهتری را ارائه می‌ دهد.

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

در نهایت، صفحه ورود پیش فرض حاوی چیزی جز فرم ورود نیست و با ایجاد یک صفحه ورود سفارشی، می‌ توانید از فضا برای تبلیغ سایر صفحات یا پیشنهادات ویژه استفاده کنید.

در بخش های بعدی چند نمونه از طراحی صفحه ورود سفارشی به وردپرس را می‌بینیم.

---

نمونه‌ های طراحی صفحه ورود به وردپرس

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

در اینجا چند نمونه از این طراحی‌ ها را می‌ بینیم.

WPForms

WPForms بهترین افزونه فرم تماس وردپرس در بازار است و شامل یک افزونه برای ایجاد فرم‌ های ورود و ثبت نام وردپرس است.

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

صفحه ورود به سیستم آن که در بالا نشان داده شده است به کاربران اجازه می‌ دهد تا از ویژگی‌ های جدید مطلع شوند. این صفحه از نام تجاری سفارشی، تصویر پس‌ زمینه و رنگ‌ های برند برای ایجاد یک تجربه ورود منحصر به فرد استفاده می‌ کند.

Jacquelynne Steves

Jacquelynne Steeves یک وب سایت هنری و صنایع دستی است که در آن نویسنده مطالبی در مورد تزئین خانه، ساخت لحاف، الگوها، گلدوزی و موارد دیگر منتشر می‌کند.

صفحه ورود آنها از یک تصویر پس زمینه سفارشی استفاده می‌ کند که با موضوع وب سایت آنها با فرم ورود در سمت راست مطابقت دارد.

Church Motion Graphics

صفحه ورود به سایت شرکت طراحی موشن گرافیک از پس‌ زمینه‌ ای رنگارنگ استفاده کرده که نشان‌دهنده موضوع کسب‌ و کار آن‌ها است.

از همان هدر، پاورقی و منوهای ناوبری سایت در صفحه ورود استفاده می‌ کند. پس زمینه فرم ورود، روشن و بسیار ساده است.

MITSloan Management Review

MITSloan Management Review از یک روش پاپ آپ (pop up) برای نمایش فرم ورود و ثبت نام استفاده می‌ کند.

مزیت استفاده از پاپ آپ این است که کاربران می‌توانند بدون ترک صفحه وارد آن شوند و آن‌ ها را از بارگذاری صفحه جدید نجات می‌ دهد و تجربه کاربری سریع تری را ارائه می‌ دهد.

آیا آماده یادگیری نحوه ایجاد صفحه ورود سفارشی در وردپرس هستید؟

---

ایجاد یک صفحه ورود به وردپرس با استفاده از Theme My Login

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

اولین کاری که باید انجام دهید این است که افزونه Theme My Login را نصب و فعال کنید.

پس از فعال‌سازی، Theme My Login به‌طور خودکار URL‌ هایی را برای اقدامات سفارشی ورود، خروج، ثبت نام، فراموشی رمز عبور و بازنشانی رمز عبور ایجاد می‌ کند.

با مراجعه به صفحه Theme My Login >> General می‌ توانید این URL‌ های ورود به وردپرس را سفارشی کنید. به بخش “Slugs” بروید تا این URL‌ های مورد استفاده توسط افزونه، برای اقدامات ورود را تغییر دهید.

Theme My Login همچنین به شما این امکان را می‌ دهد از کدهای کوتاه برای ایجاد صفحات ورود و ثبت نام سفارشی استفاده کنید. شما به سادگی می‌ توانید برای هر عمل یک صفحه ایجاد کرده و سپس صفحه اسلاگ را در اینجا اضافه کنید تا افزونه بتواند کاربران را به درستی پیدا کرده و هدایت کند.

بیایید با صفحه ورود شروع کنیم.

برای ایجاد یک صفحه وردپرس جدید به مسیر، Page >> Add New بروید.
در مرحله بعد، باید به صفحه خود یک عنوان بدهید و سپس کد کوتاه زیر [theme-my-login] را در صفحه وارد کنید.

[theme-my-login]

حالا می‌ توانید صفحه خود را منتشر کرده و پیش نمایش آن را مشاهده کنید تا صفحه ورود سفارشی خود را در عمل مشاهده کنید.

در وب سایت آزمایشی ما اینگونه به نظر می‌ رسد:

به سادگی این فرآیند را برای ایجاد صفحات دیگر با استفاده از کدهای کوتاه زیر تکرار کنید.

برای فرم ثبت نام : [theme-my-login action=”register”]

برای صفحه رمز گم شده : [theme-my-login action=”lostpassword”]

برای صفحه بازنشانی رمز عبور : [theme-my-login action=”resetpass”]

---

ایجاد یک صفحه ورود سفارشی به وردپرس با استفاده از WPForms

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

پس از فعال‌سازی، باید از صفحه تنظیمات WPForms دیدن کنید تا کلید مجوز خود را وارد کنید. می‌توانید این اطلاعات را در حساب کاربری خود در وب سایت WPForms پیدا کنید.

پس از وارد کردن کلید مجوز، می‌توانید افزونه‌ را نصب کنید.

پس از آن از صفحه WPForms >> Addons دیدن کنید و افزونه ثبت نام کاربر را پیدا کنید.

سپس بر روی دکمه Install Addon کلیک کنید تا افزونه دانلود و فعال شود. اکنون آماده ایجاد فرم‌ های ورود سفارشی خود هستید.

به مسیر WPForms >> Add New page  بروید و به سمت پایین برای دیدن کادر‘User Login Form’ اسکرول کنید و برای ادامه باید روی دکمه “Use Template” کلیک کنید.

WPForms فرم ورود کاربر را با فیلدهای لازم بارگیری می‌ کند.

می‌ توانید روی فیلدها کلیک کنید تا توضیحات یا متن خود را در اطراف آنها اضافه کنید.

می‌ توانید تنظیمات دیگر را نیز تغییر دهید.

برای مثال، عنوان دکمه پیش‌فرض «ارسال» است. می‌ توانید روی دکمه کلیک کنید و سپس متن را به “ورود” تغییر دهید.

شما همچنین می‌توانید تصمیم بگیرید که پس از ورود کاربر با موفقیت، چه اتفاقی می‌افتد.

باید به تنظیمات >> برگه تأیید بروید و یک اقدام را انتخاب کنید همچنین می‌توانید کاربر را به هر URL دیگری هدایت کنید، او را به صفحه اصلی هدایت کنید، یا به سادگی به او پیامی نشان دهید که اکنون وارد شده است.

هنگامی که از تنظیمات فرم تکمیل شد، روی دکمه “ذخیره” در گوشه سمت راست بالای صفحه کلیک کنید و فرم ساز را ببندید.

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

WPForms اضافه کردن فرم ورود سفارشی در هر پست یا صفحه وردپرس را بسیار آسان می‌ کند.

صفحه ای که می‌ خواهید فرم ورود به آن اضافه کنید، ویرایش کنید یا یک فرم جدید ایجاد کنید. سپس، در صفحه ویرایش صفحه، بلوک WPForms را به منطقه محتوای خود اضافه کنید.

در مرحله بعد، فرم ورود را که قبلا ایجاد کرده اید انتخاب کنید، و بلوک WPForms به طور خودکار آن را در قسمت محتوا بارگذاری می‌ کند.

اکنون می‌ توانید به ویرایش صفحه فرم ورود به سیستم ادامه دهید یا تغییرات خود را ذخیره و منتشر کنید.

---

ایجاد یک صفحه ورود سفارشی به وردپرس با استفاده از SeedProd

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

این قالب شامل منوهای ناوبری، هدر، پاورقی و ویجت‌ های نوار کناری هست.

اگر می‌ خواهید چیزی را از ابتدا طراحی کنید و کل صفحه را به طور کامل در اختیار بگیرید، می‌ توانید از افزونه صفحه ساز وردپرس استفاده کنید.

SeedProd بهترین سازنده صفحه فرود برای وردپرس است. برای مبتدیان مناسب بوده و یک سازنده کشیدن و رها کردن را ارائه می‌ دهد تا به شما در ایجاد هر نوع صفحه فرود، از جمله صفحه ورود، صفحه به زودی، صفحه حالت تعمیر و نگهداری و موارد دیگر کمک کند.

برای این مقاله، ما از نسخه SeedProd Pro استفاده خواهیم کرد که شامل یک قالب صفحه ورود به و بلوک‌ های صفحه پیشرفته برای سفارشی سازی است. همچنین یک نسخه رایگان از SeedProd وجود دارد، اما گزینه ای برای ایجاد صفحه ورود برای وب سایت وردپرس شما را شامل نمی‌ شود.

ابتدا باید افزونه SeedProd را در وب سایت خود نصب کنید. پس از فعال شدن افزونه، به SeedProd در قسمت مدیریت وردپرس خود هدایت خواهید شد.

در اینجا باید کلید مجوز خود را وارد کنید که می‌ توانید به راحتی از حساب SeedProd دریافت کنید. وقتی کلید را وارد کردید، روی دکمه «تأیید کلید» کلیک کنید.

پس از آن، شما آماده ایجاد صفحه ورود خود در SeedProd هستید.

برای شروع به مسیر SeedProd >> Landing Page بروید و سپس با کلیک روی دکمه “Login Page” گزینه “Set up a Login Page” را انتخاب کنید.

در صفحه بعدی می‌ توانید یک الگو برای صفحه ورود خود انتخاب کنید. همچنین گزینه ای برای ایجاد یک صفحه از ابتدا با استفاده از Blank Template وجود دارد.

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

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

پس از وارد کردن این جزئیات، به مسیر زیر بروید و روی دکمه “Save and Start Editing Page” کلیک کنید.

صفحه ورود خود را با استفاده از سازنده کشیدن و رها کردن SeedProd در زیر تب Design ویرایش کنید. سازنده به شما این امکان را می‌دهد که به راحتی هر بلوک صفحه را با کشیدن آن از منوی سمت چپ و قرار دادن آن در هر نقطه از صفحه، به صفحه اضافه کنید.

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

حتی به شما این امکان را می‌ دهدکه بلوک‌ های صفحه موجود در قالب را حذف کنید. تنها کاری که باید انجام دهید این است که روی نماد سطل زباله کلیک کنید تا بلاک صفحه حذف شود.

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

به عنوان مثال، می‌ توانید متن و رنگ فیلدها را تغییر دهید، فونت دیگری را انتخاب کنید، رنگ دکمه را ویرایش کنید و موارد دیگر.

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

همچنین می‌ توانید گزینه استفاده از SeedProd Link را انتخاب کرده و لینک وابسته به SeedProd خود را برای کسب درآمد بیشتر آنلاین، اضافه کنید.

اگر می‌ خواهید صفحه ورود خود را برای موتورهای جستجو بهینه کنید، به تنظیمات SEO بروید و گزینه ای برای نصب افزونه All In One SEO را پیدا کنید.

All in One SEO for WordPress (AIOSEO) بهترین افزونه سئو وردپرس است که به شما امکان می‌دهد وب سایت وردپرس خود را به راحتی برای موتورهای جستجو و پلتفرم‌های رسانه‌ های اجتماعی بهینه کنید.

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

به عنوان مثال، ممکن است بخواهید کد گوگل آنالیتیکس، پیکسل فیس بوک یا کد رهگیری دیگر را در اینجا اضافه کنید.

حالا که تنظیمات صفحه را تغییر داده اید، روی دکمه Save در بالای صفحه کلیک کنید.

سپس باید صفحه ورود خود را فعال کنید که برای این کار باید از سازنده صفحه فرود خارج شده و به SeedProd >> Landing Pages بروید.

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

اکنون می‌توانید به URL صفحه ورود خود بروید و آن را در عمل مشاهده کنید.

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

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

---

تغییر لوگو و URL ورود به وردپرس

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

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

---

تغییر لوگو و URL ورود به وردپرس با استفاده از یک افزونه

افزونه Colorlib Login Customizer را نصب و فعال کنید. پس از فعال سازی این افزونه، یک آیتم منوی جدید را به قالب سفارشی ساز وردپرس اضافه می‌ کند. به سادگی به Appearance >> Customize بروید و روی مورد جدید «Colorlib Login Customizer» کلیک کنید تا افزونه سفارشی‌ ساز صفحه ورود راه‌اندازی شود.

افزونه سفارشی‌ ساز ورود Colorlib، صفحه ورود پیش‌فرض وردپرس شما را با گزینه‌ های سفارشی‌سازی در سمت چپ و پیش‌ نمایش زنده در سمت راست بارگیری می‌ کند.

برای جایگزینی لوگوی وردپرس با لوگوی خود، روی زبانه «Logo options» در سمت راست کلیک کنید.

از اینجا می‌ توانید لوگوی وردپرس را مخفی کنید، لوگوی سفارشی خود را آپلود کنید و URL و متن لوگو را تغییر دهید.

اندازه و رنگ متن و عرض و ارتفاع لوگو را سفارشی کنید.

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

اساسا، شما می‌ توانید یک صفحه ورود به وردپرس سفارشی بدون تغییر آدرس پیش فرض ورود به وردپرس ایجاد کنید.

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

---

تغییر لوگو و URL ورود به وردپرس بدون افزونه (کد)

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

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

پس از بارگذاری تصویر، روی پیوند “ویرایش” در کنار آن کلیک کنید. با این کار صفحه ویرایش رسانه باز می‌ شود، جایی که باید URL فایل را کپی کرده و در جایی مناسب، مانند یک فایل متنی خالی در رایانه خود، جایگذاری کنید.

در مرحله بعد، باید قطعه کد زیر را به فایل functions.php قالب خود یا یک افزونه خاص سایت اضافه کنید.

فراموش نکنید که URL تصویر پس‌ زمینه را در خط ۴ با URL فایلی که قبلاً کپی کرده‌اید جایگزین کنید. همچنین می‌ توانید سایر ویژگی‌های CSS را برای مطابقت با تصویر لوگوی سفارشی خود تنظیم کنید.

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

با این حال، این کد تنها جایگزین لوگوی وردپرس می‌ شود و پیوند لوگو را که به وب سایت WordPress.org اشاره می‌ کند، تغییر نمی‌ دهد.

که برای این کار باید کد زیر را به فایل functions.php قالب خود یا یک افزونه مخصوص سایت اضافه کنید. می‌ توانید آن را درست زیر کدی که قبلاً اضافه کرده‌اید جایگذاری کنید.

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

---

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

وردپرس ۵.۹ یک گزینه ورود کشویی جدید را معرفی کرد که به کاربران امکان می‌ دهد هنگام ورود به وب سایت زبان جدیدی را انتخاب کنند که اگر بیش از یک زبان فعال در سایت وجود داشته باشد، این گزینه ظاهر می‌ شود.

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

اما اگر می‌خواهید صفحه ورود خود را ساده نگه دارید و کاربران شما نیازی به تغییر زبان ندارند، حذف آن می‌تواند به شلوغ نشدن صفحه ورود کمک کند. می‌توانید این کار را با استفاده از یک افزونه یا کد انجام دهید.

غیرفعال کردن تغییر دهنده زبان با یک افزونه

تنها کاری که باید انجام دهید این است که افزونه Disable Login Language Switcher را نصب و فعال کنید. پس از فعال سازی، گزینه تغییر زبان به طور خودکار حذف می‌ شود. هیچ تنظیمات اضافی برای پیکربندی وجود ندارد.

هنگامی که به صفحه ورود به سیستم خود می‌ روید، صفحه ورود استاندارد بدون گزینه تغییر زبان را مشاهده خواهید کرد.

غیرفعال کردن تغییر دهنده زبان با کد

راه دیگری که می‌ توانید تغییر زبان را غیرفعال کنید، اضافه کردن کد به وردپرس است.

قطعه کد زیر را به فایل functions.php خود، در افزونه مخصوص سایت (site-specific plugin) اضافه کرده یا از یک افزونه قطعه کد (code snippets plugin) استفاده کنید.

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

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