مجله خبری هاست ایران » طراحی و توسعه » ایجاد فرم در وردپرس | صفحه لاگین در وردپرس ؛ آموزش تصویری
طراحی و توسعه طراحی وب گرافیک

ایجاد فرم در وردپرس | صفحه لاگین در وردپرس ؛ آموزش تصویری

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

وردپرس یک سیستم مدیریت محتوا یا همان Content Management System و به اختصار CMS است. در حال حاضر حدود ۴۵۰ میلیون وبسایت وردپرسی در سطح وب وجود دارد که آمار خیره‌کننده‌ای است. در این مقاله قصد داریم روش‌های ایجاد فرم در وردپرس را توضیح دهیم. در انتهای مقاله نیز روشی برای تغییر دادن آدرس صفحه‌ای که برای ورود به داشبورد وردپرس در نظر گرفته شده است پرداخته‌ایم.

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

“این مقاله توسط تیم نویسندگان مجله هاست ایران تهیه شده است. هاست ایران یکی از معتبرترین و باسابقه‌ترین ارائه‌دهندگان خدمات وب‌هاستینگ و خرید دامنه است.

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

موارد نیاز به ایجاد فرم در وردپرس

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

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

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

ایجاد فرم یا صفحه لاگین با استفاده از پلاگین WPForms

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

WPForms پلاگینی دارای پلن‌های مختلف است که برای دسترسی باید یکی از پلن‌های آن را خریداری نمایید.

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

استفاده از پلاگین WPForms

پس از وارد کردن کلید، می‌توانید افزونه‌های مورد نظر خود را نیز نصب کنید. افزونه‌ها را در بخش «Addons» می‌توانید بیابید.

استفاده از پلاگین WPForms

با کلیک بر روی «Add New» و در بخش پایین این صفحه، قالب‌هایی برای ایجاد فرم لاگین قرار داده شده‌اند.

استفاده از پلاگین WPForms

این فرم با فیلدهای مورد نیاز برای شما ایجاد خواهند شد، اما در صورت نیاز با مراجعه به تب «Fields» می‌توانید موارد دلخواه خود را اضافه کنید.

استفاده از پلاگین WPForms

همچنین می‌توانید تعیین کنید که به هنگام لاگین کاربر به سایت، چه اتفاقی بیافتد. به این منظور به بخش setting و سپس تب confirmation بروید.

استفاده از پلاگین WPForms

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

استفاده از پلاگین WPForms

پس از انتخاب و تعیین تمام تنظیمات خود، روی دکمه «Save» کلیک کنید تا تمام تغییرات ذخیره شوند.

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

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

استفاده از پلاگین WPForms

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

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

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

فرم لاگین وردپرس خود را سفارشی کنید

طراحی فرم لاگین وردپرس خود را سفارشی کنید

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

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

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

ایجاد فرم با پلاگین Theme My Login

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

پلاگین Theme My Login

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

در ابتدا با صفحه لاگین شروع می‌کنیم:

در بالای صفحه روی دکمه «Add New» کلیک کنید تا صفحه‌ای جدید در وردپرس ایجاد شود. برای این صفحه یک عنوان انتخاب کرده و در بخش shortcode عبارت «[theme-my-login]» را وارد کنید.

استفاده از پلاگین Theme My Login

اکنون می‌توانید صفحه لاگین خود را مشاهده و منتشر کنید.

استفاده از پلاگین Theme My Login

همین مراحل را برای ایجاد صفحات دیگر با استفاده از کدهای کوتاه زیر، ایجاد کنید:

برای فرم ثبت‌نام:

  • [theme-my-login action=”register”]

برای فراموشی رمز عبور:

  • [theme-my-login action=”lostpassword”]

برای تعیین مجدد رمز عبور:

  • [theme-my-login action=”resetpass”]

چند نمونه از فرم‌های لاگین در وردپرس

در ادامه به فرم لاگین یا ثبت نام چند وبسایت وردپرسی پرداخته‌یم:

 وب‌سایت Rock My Wedding

وب‌سایت Rock My Wedding

سایت Rock My Wedding این امکان را برای کاربرانش فراهم آورده است که از طریق دو فرم ورود و ثبت‌نام به‌صورت پاپ‌آپ (Popup) می‌توانند به‌راحتی وارد پرتال کاربری وب‌سایت شوند. از مزیت‌های استفاده از پاپ‌آپ این است که کاربر دیگر نیاز به ترک صفحه‌ی مورد نظر برای لاگین ندارد و با ماندن در آن صفحه می‌تواند به‌سادگی لاگین خود را انجام دهد.

وب‌سایت Jacquelynne Steves

Jacquelynne Steves

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

وب‌سایت Church Motion Graphics

وب‌سایت Church Motion Graphics

در صفحه‌ی لاگین وب‌سایت Church Motion Graphics از یک تصویر پس‌زمینه‌ی رنگارنگ استفاده شده که حرفه و کسب‌وکار این وب‌سایت را بازتاب می‌دهد. این صفحه به‌صورت مشابه از بخش هدر (سرتیتر)، فوتر (پاورقی) و منوی راهبری سایت بهره می‌برد. در واقع همان اجزای اصلی که در وب‌سایت به کار رفته را می‌توانید در صفحه‌ی ورود کاربران نیز مشاهده کنید و یکپارچگی موجود باعث ایجاد حس خوب و بهبود تجربه‌ی کاربری می‌شود. این اجزا و یکپارچگی در حالی بکار گرفته شده است که خود فرم لاگین بسیار ساده و دارای پس‌زمینه‌ای تیره است.

وب‌سایت MITSLoan Management Review

وب‌سایت MITSLoan Management Review

وب‌سایت MITSLoan Management Review از صفحه‌ی لاگین پیش‌فرض وردپرس استفاده می‌کند. این صفحه دارای یک فایل CSS اختصاصی است. همچنین در صفحه‌ی لاگین، لوگوی وردپرس حذف و لوگوی اختصاصی برند جایگزین شده است.

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

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

تغییر آدرس لاگین به شما کمک می‌کند که:

  • امنیت وب‌سایت بالا برود. چرا که بسیاری از کاربران و همچنین ربات‌ها از آدرس ورود به پنل ادمین اطلاع دارند و با مراجعه به آن اقدام به انجام حمله‌ی Brute-force یا Dictionary می‌کنند.
  • شخصی‌سازی صفحه‌ی لاگین به وردپرس و به‌کارگیری طرحی زیبا موجب بهبود تجربه کاربری می‌شود.

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

حال که اهمیت تغییر آدرس لاگین وردپرس را گفتیم، به تغییر آدرس صفحه‌ی ورود وردپرس می‌پردازیم:

پلاگین WPS Hide Login

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

این پلاگین قدرتمند و سبک، به شما این امکان را می‌دهد که بدون ایجاد تغییرات اساسی در کدهای هسته‌ی وردپرس، آدرس صفحه‌ی ورود به داشبورد یا همان ادمین وردپرس را تغییر دهید و بدین‌وسیله از آدرسی یکتا و ایمن استفاده کنید. در واقع نکته‌ی مهم اینجاست که صفحات wp-admin و wp-login.php از دسترس عموم خارج می‌شوند. این پلاگین با انواع نسخه‌های وردپرس، پوسته‌ها و افزونه‌های مختلف سازگار است؛ با این وجود همواره می‌توانید تنها با تغییر نام پوشه‌ی مربوط به آن اقدام به غیرفعال کردن آن نمایید.

اولین کاری که در این مرحله باید انجام دهید، نصب و فعال کردن پلاگین Colorlib Login Customizer است.

پس از فعال کردن پلاگین، منوی جدیدی با برچسب Login Customizer به سایدبار وردپرس اضافه می‌شود. با کلیک بر روی این منو، پلاگین نیز راه‌اندازی خواهد شد.

طراحی فرم لاگین وردپرس خود را سفارشی کنید

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

به‌منظور جایگزینی لوگوی خود با لوگوی وردپرس، روی تب «Logo Options» در سمت راست صفحه کلیک کنید. در این بخش می‌توانید لوگوی وردپرس را مخفی کرده و لوگوی خود را بارگذاری کنید و URL و متن آن را نیز تغییر دهید.

طراحی فرم لاگین وردپرس خود را سفارشی کنید

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

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

پس از پایان اعمال تغییرات، بر روی دکمه انتشار کلیک کنید.

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

تغییر لوگو و URL لاگین داشبورد وردپرس بدون پلاگین

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

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

سپس کدهای زیر را در فایل functions.php تم خود ذخیره کنید:

function wpb_login_logo() { ?>

<style type=”text/css”>

#login h1 a, .login h1 a {

background-image: url(https://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’ );

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

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

تا اینجا، تنها لوگو را جایگزین کرده‌اید و باید لینک آن را نیز تغییر دهید.

با ذخیره کدهای زیر در همان فایل function.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’ );

البته فراموش نکنید که نام سایت و اطلاعات مربوط به آن را در «Your Site Name and Info» جایگزین کنید. اکنون، لوگوی موجود در صفحه لاگین، به صفحه اصلی سایتتان اشاره دارد.

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

“این مقاله توسط تیم نویسندگان مجله هاست ایران تهیه شده است. هاست ایران یکی از معتبرترین و باسابقه‌ترین ارائه‌دهندگان خدمات وب‌هاستینگ و خرید دامنه است.

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

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

افزودن دیدگاه

کلیک برای ثبت دیدگاه