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

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

آنچه در این مقاله میخوانید:

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

خرید افزونه دیجیتس

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

پشتیبانی دیجیتس از سامانه پیامکی

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

خرید سامانه پیامکی و احراز هویت

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

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

ساخت لیست ویژه و الگوی متن

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

ساخت لیست ویژه

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

1. از این بخش یک عنوان برای لیست ویژه خود انتخاب میکنیم. این اسم اهمیتی ندارد.
2. نوع لیست رو لیست سیاه قرار میدیم.
3. خط پیامکی که به ما اختصاص داده شده رو از این بخش میتونیم انتخاب کنیم.

ساخت الگوی متن

در مرحله بعدی از زیر منوی ابزار ویژه گزینه وبسرویس خدماتی رو انتخاب میکنیم. با کلیک روی درج متن جدید، قوانین رو تایید کرده  و به مرحله بعد میرویم. حالا طبق راهنمای زیر الگوی متن خودمون رو میسازیم.

1. این بخش رو حتما مطالعه کنید تا بتونید انواع الگوهای متن مختلف رو به صورت صحیح بسازید.
2. یک عنوان برای الگوی متن خود انتخاب کنید. این عنوان رو فقط شما می بینید و اهمیتی ندارد.
3. در این بخش از متغیر {0} استفاده میکنیم. همچنین طبق تصویر در خط بعدی آدرس سایت خود را وارد میکنیم

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

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

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

1. از این بخش میتونیم سامانه پیامکی که خریدیم رو انتخاب کنیم
2. نام کاربری خودتون رو وارد کنید.
3. رمز عبور خود را وارد کنید. (نام کاربری و رمز عبور همان اطلاعات ورود به پنل کاربری پیامکی شماست)
4. شماره خط ارسال کننده پیامک خودتون رو وارد کنید. (این همان شماره ای است که در مراحل قبل برای ساخت لیست ویژه انتخاب کرده بودیم.)
5. این گزینه رو روی بله تنظیم میکنیم تا بتونیم از الگوی متن استفاده کنیم.
6. در مرحله قبلی بعد از ساخت و تایید الگوی متن، یک کد متن هم در نظر گرفته شده بود که این عدد رو در این بخش وارد میکنیم.
7. تو این کادر فقط عبارت %OTP% رو وارد میکنیم. این همان متغیری هست که برای ارسال کد یکبار مصرف استفاده میشه.
8. برای اینکه اطمینان حاصل کنید که اتصال سامانه به دیجیتس به درستی انجام شده یانه، در این بخش میتونید شماره موبایل خودتون رو وارد کنید و تست کنید که آیا پیام برای شما ارسال میشه یا خیر. اگه پاسخ 1 رو در این بخش دریافت کردید یعنی تنظیمات به درستی انجام شده است.

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

در این تب ما میتونیم طبق راهنمای زیر تنظیمات افزونه دیجیتس و هماهنگی اون با ووکامرس رو انجام بدیم.

1. از طریق این گزینه میتونیم انتخاب کنیم که نام کاربری از چه چیزی تشکیل بشه. ما اینجا از اعداد تصادفی استفاده کردیم.
2. از این بخش میتونیم انتخاب کنیم که فرم فراموشی رمز عبور دیجیتس برای ما فعال بشه.
3. همچنین با فعال کردن این گزینه فرم فراموشی رمز دیجیتس ، تبدیل به فرم پیشفرض ما میشه.
4. از اینجا میتونیم انتخاب کنیم که وقتی کاربر میخواد شماره موبایل خودش رو وارد کنه، کد کشور به صورت پیشرفض روی ایران تنظیم شده باشه. تا دیگه نیازی به انتخاب کشور نباشه.
5. از این بخش میتونیم تعیین کنیم که فقط شماره های داخل ایران مجاز به ثبت نام باشن و کشورهای دیگه این اجازه رو نداشته باشن.
6. با فعال کردن این گزینه میتونیم کد کشور رو مخفی کنیم. (البته پیشنهاد میشه که این گزینه رو فعال نکنید تا کاربر گیج نشه)
7. کد تاییدی که برای کاربر ارسال میشه به صورت پیشفرض 4 رقمی هست که میتونیم از این بخش تعداد ارقام کد تایید رو تغییر بدیم.
8. به صورت پیشفرض کاربر بعد از 60 ثانیه میتونه مجددا درخواست ارسال کد بده . از این گزینه میتونیم این زمان رو کمتر یا بیشتر کنیم.
9. اگه این گزینه رو فعال کنید ، برگه حساب کاربری ووکامرس با آدرس my account به صفحه ورودی دیجیتس تغییر پیدا میکنه. (پیشنهاد میشه که این گزینه رو فعال کنید تا افزونه دیجیتس به خوبی با ووکامرس هماهنگ بشه)
10. با فعال کردن این گزینه اطلاعات کاربری ووکامرس با اطلاعات دیجیتس یکسان و هماهنگ میشه.

تنظیمات فرم های دیجیتس

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

حالا میتوانید از بخش تنظیمات فرم دیجیتس، روش انتخابی خودمون برای ورود و ثبت نام رو تنظیم کنیم. به راهنمای زیر دقت کنید.

1. از بخش فیلد ورود اطلاعاتی که برای ورود کاربر نیاز هست رو فعال میکنیم.
2. همچنین از بخش فیلدهای عضویت هم میتونیم انتخاب کنیم که کدوم گزینه ها فعال یا غیر فعال باشه . همچنین کدوم گزینه ها اجباری یا اختیاری باشن.
3. با کلیک روی افزودن فیلد، میتونیم اطلاعات دیگه ای رو هم موقع ثبت نام از کاربر دریافت کنیم

طراحی استایل فرم ها

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

1. از این بخش میتونیم استایل های مختلف دیجیتس رو ببینیم و طرح مورد نظر خودمون رو انتخاب کنیم.
2. از بخش تنظیمات صفحه میتونیم یک تصویر بک گراند برای صفحه ورود و ثبت نام خودمون انتخاب کنیم.
3. فرم ورود و ثبت نام یک رنگ پس زمینه داره که میتونیم از این گزینه این رنگ و میزان شفافیت اون رو انتخاب کنیم.
4. همچنین از این بخش میتونیم یک سایه به حاشیه فرم خودمون اعمال کنیم.
5. رنگ سایه خودمون رو هم میتونیم از اینجا تعیین کنیم.
6. حاشیه های فرم ما میتونه گرد باشه که از این بخش میتونیم میزان خمیدگی حاشیه ها یا border radius رو تعیین کنیم.
7. برای تغییر رنگ دکمه های ورود و ثبت نام میتونین از این بخش اقدام کنید.
8. رنگ متن دکمه خود را تعیین کنید.
9. در صفحه ورود و ثبت نام یک گزینه ای به اسم برگشت وجود داره که از این گزینه میتونین رنگ متن این دکمه رو تغییر بدید.
10. افزونه دیجیتس قسمتی به اسم css سفارشی گذاشته تا بتونیم با کدنویسی استایل بهتری به فرم های خودمون بدیم. ما در این آموزش از کدهای زیر استفاده کردیم تا فرم خودمون رو سفارشی کنیم.

/*دکمه ثبت نام*/
.digits_login_form .dig_ma-box .bgtransborderdark {
    border: 1px solid!important;
    border-color: #246cfc!important;
    background: #246cfc!important;
    color: #fff!important;
}

/*حذف سایه دکمه*/
.dig_ma-box .button {
    border: none;
    box-shadow: 0px 0px 0px rgb(0 0 0 / 10%); 
}

/*رنگ برچسب ها*/
.digits_login_form .dig_sml_box_msg_head, .digits_login_form .dig_ma-box .digits-form-select .select2-selection__rendered, .digits_login_form .dig_ma-box .dark a, .digits_login_form .dig_ma-box .dark .dig-cont-close, .digits_login_form .dig_ma-box .dark, .digits_login_form .dig_ma-box .dark .minput label, .digits_login_form .dig_ma-box .dark .minput input, .digits_login_form .dig_ma-box .darke {
    color: rgb(66 66 66)!important;
}

امیدواریم این آموزش براتون مفید بوده باشه 🙂 از طریق بخش دیدگاه ها لطفا نظرات خود را با ما در میان بگذارید.