وبلاگ

پکیج آموزش ساخت فروشگاه با المنتور
آموزش 0 تا 100 ساخت فروشگاه اینترنتی با المنتور

آموزش ساخت فروشگاه اینترنتی با المنتور

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

اگه دوره رایگان دوس داری می تونی از دوره آموزش افزونه Rank Math هم سری بزنی!

عناوین محتوا

جلسه 1

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

جلسه 2

طراحی هدر و فوتر به صورت کامل

جلسه 3

ساخت کامل صفحه اصلی سایت فروشگاهی

جلسه 4

ساخت آرشیو محصولات ووکامرس

جلسه 5

ساخت و طراحی صفحه تکی محصول ووکامرس

جلسه 6

طراحی بخش دسته بندی محصولات فروشگاه

جلسه 7

ساخت صفحه سبد خرید و پرداخت سفارشی

جلسه 8

طراحی و ساخت صفحه حساب کاربری سفارشی

جلسه 9

ساخت باکس محصولات اختصاصی و سفارشی

جلسه 10

ساخت مگامنو (منوی چندستونه) برای فروشگاه

جلسه 11

ساخت صفحه ورود و ثبت نام اختصاصی فروشگاه اینترنتی

جلسه 1 :

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

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

آموزش نصب افزونه المنتور و المنتور پرو

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

نصب افزونه المنتور و المنتور پرو

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

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

 

آموزش نصب افزونه ووکامرس

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

پیشخوان وردپرس > افزونه ها > افزودن

با این کار میخواهیم تا افزونه در وردپرس نصب کنیم

سپس در صفحه باز شده در سمت چپ صفحه در کادر جستجو عبارت “woocoommrce” را تایپ کنید و منتظر باشید تا افزونه از مخزن وردپرس پیدا و برای شما نمایش داده شود. افزونه ووکامرس به صورت کاملا رایگان و فارسی در مخزن وردپرس موجود است.

جستجوی افزونه ووکامرس
جستجوی افزونه ووکامرس

در صفحه باز شده در کادر افزونه مورد نظر بر روی دکمه “نصب” کلیک کنید و منتظر باشید تا افزونه نصب شود. این کار ممکن است چند ثانیه یا دقیقه طول بکشد و باید منتظر باشید.

بعد از نصب بر روی دکمه “فعال نمایید” کلیک کنید تا افزونه فعال شود.

فعال کردن ووکامرس
فعال کردن ووکامرس

بعد از فعال سازی ووکامرس، منویی جدید در پیشخوان وردپرس اضافه می شود. سپس مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > ووکامرس > پیکربندی

وارد پیکربندی ووکامرس می شویم

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

پیکربندی واحد پولی
پیکربندی واحد پولی

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

جلسه 2 :

طراحی هدر و فوتر به صورت کامل

طراحی هدر و فوتر به صورت کامل

طراحی هدر و فوتر فروشگاه به صورت کامل

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

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

 

ساخت هدر سایت

برای طراحی هدر ابتدا باید مسیر زیر را در وردپرس خود دنبال کنید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

وارد پیکربندی ووکامرس می شویم

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

ساخت هدر در المنتور
ساخت هدر در المنتور

در تصویر بالا 2 فیلد و یک دکمه قرار دارد که باید طبق تصویر بالا این 2 فیلد را پر کنید و در آخر بر روی دکمه ایجاد قالب کلیک کنید.

  • نوع قالب را مشخص کنید : باید حتما بر روی “سربرگ” باشد.
  • برای قالب خود نامی انتخاب کنید : در این فیلد هم باید یک نام برای هدر خود انتخاب کنید.
ویرایش هدر سایت با المنتور
ویرایش هدر سایت با المنتور

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

ویجت های طراحی هدر سایت
ویجت های طراحی هدر سایت

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

تصویر هدری که ما طراحی کردیم را در زیر می توانید مشاهده کنید : 

سربرگ طراحی شده برای فروشگاه
سربرگ طراحی شده برای فروشگاه

در زیر روال کار را توضیح داده ایم : 

  1. استفاده از یک ردیف 3 ستونه : یک سکشن یا بخش با 3 ستون ایجاد کردیم برای طرح بندی هدر سایت.
  2. استفاده از ویجت تصویر برای لوگو : برای نمایش لوگو در سمت راست از ویجت تصویر استفاده کردیم.
  3. استفاده از ویجت فهرست ناوبری برای منو : برای نمایش منوی وردپرس باید از فهرست ناوبری استفاده کنیم.
  4. استفاده از بخش داخلی 3 ستونه : برای ستون بندی و طرح بندی آیکون ها باید از ویجت بخش داخلی استفاده کنیم و یک ردیف 3 ستونه ایجاد کنیم.
  5. استفاده از ویجت منوی سبد خرید : برای نمایش آیکون سبد خرید از ویجت سبدخرید استفاده کردیم.
  6. استفاده از ویجت فرم جستجو : برای نمایش فرم جستجو به صورت تمام صفحه از ویجت فرم جستجو استفاده کردیم.
  7. استفاده از ویجت آیکون : برای نمایش آیکون حساب کاربری از ویجت آیکون استفاده کردیم.

در آخر بر روی دکمه انتشار کلیک کنید.

تنظیمات انتشار سربرگ
تنظیمات انتشار سربرگ

سپس در صفحه باز شده همانند تصویر بالا باید ابتدا بر روی دکمه “اضافه کردن شرط” کلیک کنید و در بخشی که در بالا ظاهر می شود باید بر روی “ورودی سایت” سایت قرار دهید و در آخر بر روی ذخیره و انتشار کلیک کنید.

طراحی فوتر فروشگاه

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

مراحل زیر را دنبال کنید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

پوسته ساز المنتور

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

ساخت قالب فوتر برای فروشگاه
ساخت قالب فوتر برای فروشگاه

در صفحه ای که باز می شود، نوع قالب را مشخص کنید را بر روی “پاورقی” قرار دهید.(این مورد مشخص می کند که طرح مورد نظر برای فوتر سایت هست).

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

فوتر طراحی شده ساخت فروشگاه با المنتور
فوتر طراحی شده ساخت فروشگاه با المنتور

در انتها یک فوتر طراحی کردیم که تصویر این فوتر را در بالا می توانید مشاهده کنید و در زیر یک توضیح درباره المان ها و ویجت ها داده ایم : 

  • ساخت یک ردیف 5 ستونه : ابتدا یک سکشن و یا بخش 5 ستونه ایجاد کردیم تا فوتر سایت را دسته بندی کنیم.
  • استفاده از ویجت جعبه آیکون : از 3 ویجت جعبه آیکون استفاده کردیم برای نمایش اطلاعات تماس.
  • ویجت سربرگ : استفاده از 4 ویجت سربرگ برای عناوین بخش ها
  • ویجت لیست آیکون : استفاده از 3 ویجت لیست آیکون برای لیست بندی محتوا ها
  • سکشن کپی رایت : ایجاد یک سکشن 2 ستونه برا بخش کپی رایت که در یکی متن قرار دادیم و در یکی تصویر.

در آخر بعد از طراحی بر روی دکمه انتشار کلیک کنید.

تنظیمات انتشار فوتر سایت
تنظیمات انتشار فوتر سایت

در صفحه ای که باز می شود بر روی دکمه “اضافه کردن شرط” کلیک کنید و با این کار ما تعیین می کنیم که فوتر در کجا نمایش داده شود و برای اینکه می خواهیم در همه سایت نمایش داده شود بر روی “کل سایت” قرار می دهیم و در آخر بر روی دکمه “ذخیره و بستن” کلیک می کنیم.

جلسه 3 :

ساخت کامل صفحه اصلی سایت فروشگاهی

ساخت آرشیو محصولات ووکامرس

طراحی و ساخت صفحه اصلی فروشگاه

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

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

 

ساخت صفحه

باید برای صفحه اصلی خود یک صفحه در وردپرس ایجاد کنیم، برای این منظور به مسیر زیر در وردپرس بروید : 

پیشخوان وردپرس > برگه ها > افزودن جدید

ایجاد یک صفحه در وردپرس

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

ساخت صفحه جدید
ساخت صفحه جدید

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

صفحه ویرایشگر المنتور
صفحه ویرایشگر المنتور

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

صفحه ای که ما طراحی کردیم همانند تصویر زیر هست : 

صفحه اصلی ساخته شده برای فروشگاه
صفحه اصلی ساخته شده برای فروشگاه

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

جلسه 4 :

ساخت آرشیو محصولات ووکامرس

ساخت آرشیو محصولات ووکامرس

ساخت بخش آرشیو محصولات در المنتور

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

حالا در اینجا می خواهیم تا صفحه آرشیو محصولات را برای فروشگاه خود ایجاد و طراحی کنیم. برای این منظور ابتدا مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

وارد پوسته ساز المنتور می شوید

در صفحه باز شده بر روی دکمه “افزودن جدید” کلیک کنید.

ساخت صفحه آرشیو محصولات
ساخت صفحه آرشیو محصولات

در این صفحه در بخش “نوع قالب را مشخص کنید” را باید آرشیو محصولات را انتخاب کنید و در زیر یک نام برای نمونه خود انتخاب کنید و در آخر بر روی ایجاد قالب کلیک کنید تا صفحه ساز المنتور برای شما باز شود.

ویجت های المنتور آرشیو محصولات
ویجت های المنتور آرشیو محصولات

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

صفحه آرشیو محصولات طراحی شده
صفحه آرشیو محصولات طراحی شده

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

شرایط نمایش آرشیو محصولات
شرایط نمایش آرشیو محصولات

در این صفحه بر روی دکمه “اضافه کردن شرط” شرط کلیک کنید و سپس در زیر فیلد مورد نظر را بر روی “آرشیو همه محصولات” قرار دهید و در آخر بر روی “ذخیره و بستن” کلیک کنید تا صفحه ساخته شده منتشر شود. تا اینجا اگر هر دسته بندی محصولات را باز کنید میبینید که با استایل این صفحه برای شما نمایش داده می شود.

جلسه 5 :

ساخت و طراحی صفحه تکی محصول ووکامرس

ساخت و طراحی صفحه تکی محصول ووکامرس

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

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

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

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

در بتدا مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

وارد پوسته ساز المنتور می شویم

در صفحه باز شده در بالا بر روی دکمه “افزودن جدید” کلیک کنید.

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

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

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

صفحه تکی محصول نهایی
صفحه تکی محصول نهایی

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

شرایط نمایش محصول تکی ووکامرس
شرایط نمایش محصول تکی ووکامرس

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

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

جلسه 6 :

طراحی بخش دسته بندی محصولات فروشگاه

طراحی بخش دسته بندی محصولات فروشگاه

ساخت صفحه اختصاصی دسته بندی محصولات

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

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

در ابتدا مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > برگه ها > افزودن جدید

باید یک صفحه ایجاد کنیم

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

ساخت دسته بندی ووکامرس
ساخت دسته بندی ووکامرس

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

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

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

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

جلسه 7 :

ساخت صفحه سبد خرید و پرداخت سفارشی

ساخت صفحه سبد خرید و پرداخت سفارشی

طراحی صفحه سبدخرید و پرداخت سفارشی

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

 

چطور این صفحات را ایجاد کنیم؟؟

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

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

 

ساخت صفحه سبدخرید

در ابتدا به مسیر زیر بروید : 

پیشخوان وردپرس > برگه ها > همه برگه ها

نمایش همه برگه های سایت

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

ویرایش صفحه سبدخرید
ویرایش صفحه سبدخرید

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

ساخت دموی سبدخرید
ساخت دموی سبدخرید

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

صفحه سبدخرید نهایی ووکامرس
صفحه سبدخرید نهایی ووکامرس

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

ساخت صفحه پرداخت

بعد از سبد خرید می رسیم به ساخت صفحه پرداخت. همه روال ها همانند ساخت صفحه سبدخرید هست و فقط باید عناوین ها را تغییر بدهیم. برای این منظور به مسیر زیر در وردپرس بروید : 

پیشخوان وردپرس > برگه ها > همه برگه ها

نمایش همه برگه های سایت

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

ویرایش صفحه پرداخت ووکامرس
ویرایش صفحه پرداخت ووکامرس

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

ویرایش دموی صفحه پرداخت
ویرایش دموی صفحه پرداخت

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

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

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

جلسه 8 :

طراحی و ساخت صفحه حساب کاربری سفارشی ووکامرس

طراحی و ساخت صفحه حساب کاربری سفارشی

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

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

منظور از صفحه حساب کاربری چیست؟

وقتی کاربری در سایت ثبت نام می کند یا محصولی را خریداری می کند، به صفحه حساب کاربری هدایت می شود و می توانید همه محصولات، خریدها، فاکتورهای، سفارش ها و … دسترسی داشته باشید و این اطلاعات برای هر کاربری جدا نمایش داده می شود.

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

اولین مرحله وارد مسیر زیر شوید : 

پیشخوان وردپرس > برگه ها

وارد بخش برگه های وردپرس می شویم

در این بخش همه برگه های وردپرس را می توانید مشاهده کنید. در بین برگه برگه ای با نام “حساب کاربری من” وجود دارد که چرا باید موس را بر روی این برگه ببرید و بر روی دکمه ویرایش کلیک کنید.

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

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

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

ویرایش صفحه حساب کاربری من با المنتور
ویرایش صفحه حساب کاربری من با المنتور

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

تصویر نهایی صفحه حساب کاربری ووکامرس
تصویر نهایی صفحه حساب کاربری ووکامرس

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

 

کدهای استفاده شده در آموزش

				
					.woocommerce-MyAccount-navigation {
display:none;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}
				
			
جلسه 9 :

ساخت باکس محصولات اختصاصی و سفارشی

ساخت باکس محصولات اختصاصی و سفارشی

ساخت جعبه محصولات سفارشی ووکامرس با المنتور

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

منظور از باکس محصولات چیست؟ 

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

در ابتدا افزونه زیر را نصب کنید : 

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

بعد از نصب افزونه فوق ، مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

وارد پوسته ساز المنتور می شوید

در صفحه باز شده در بالا صفحه بر روی دکمه “افزودن جدید” کلیک کنید.

ایجاد حلقه محصولات
ایجاد حلقه محصولات

در صفحه باز شده نوع قالب را بر روی “Loop قرار دهید و سپس بعد از انتخاب یک نام در آخر بر روی دکمه “ایجاد قالب” کلیک کنید و منتظر باشید تا صفحه ساز المنتور برایتان باز شود.

حلقه محصولات نهایی
حلقه محصولات نهایی

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

ذخیره حلقه محصولات در المنتور
ذخیره حلقه محصولات در المنتور

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

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

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

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

سپس در تنظیمات ویجت پست ها همانند تصویر زیر مقادیر را قرار دهید : 

تنظیمات محتوا برای ویجت پست ها
تنظیمات محتوا برای ویجت پست ها
  1. پوسته را بر روی گزینه “Custom” قرار دهید.
  2. Select a default template را بر روی گزینه “حلقه محصولات سفارشیاین همان نمونه ای هست که در مرحله قبلی نام گذاری کردیم.

حالا به بخش تنظیمات “کوئری” بیایید و منبع را بر روی “محصولات” قرار دهید. حالا اگر دقت کنید در صفحه میبینید که محصولات با همان استایل طراحی شده توسط ما نمایش داده شد.

نمایش نهایی حقله محصولات در صفحه
نمایش نهایی حقله محصولات در صفحه

حالا می توانید همه محصولات را با این استایل و طرح بندی نمایش دهید.

می توانید از بهترین قالب فروشگاهی المنتور یعنی قالب Woodmart دیدن کنید.

جلسه 10 :

ساخت مگامنو (منوی چندستونه) برای فروشگاه

ساخت مگامنو (منوی چندستونه) برای فروشگاه

ساخت مگامنوی حرفه ای و سفارشی در المنتور

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

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

بعد از اینکه افزونه را در وردپرس نصب کردید به مسیر زیر بیاید : 

پیشخوان وردپرس > HT Menu

وارد پیکربندی افزونه مگامنو وارد می شوید.

در صفحه باز شده زبانه “Style” را انتخاب کنید و تنظیمات این بخش را همانند تصویر زیر انجام دهید : 

تنظیمات استایل افزونه مگامنوی المنتور
تنظیمات استایل افزونه مگامنوی المنتور
  • Menu Items Color : رنگ آیتم های منو را می توانید تنظیم کنید.
  • Menu Hover & Active Color : رنگ آیتم های منو در حالت فعال و هاوور
  • Sub Menu Width : اندازه و طول مگامنو را می توانید تعیین کنید.
  • Sub Menu Background Color : رنگ پس زمینه زیرمگامنو را می توانید تنظیم کنید.
  • Sub Menu Items Color : رنگ زیر منو ها را تعیین کنید
  • Sub Menu Items Hover Color : رنگ آیتم های زیر منو در حالت هاوور
  • Mega Menu Width : طول مگا منو
  • Mega Menu Background Color : رنگ پس زمینه مگامنو

دقت داشته باشید که برای هر زیر منو باید یک قالب در المنتور ایجاد کنید.

به طول مثال : برای محصولات می توانید یک قالب ایجاد کنید و برای نوشته ها و … یک قالب جدا. این قالب ها همان زیر منو ها هستند.

برای مثال ما در این بخش می خواهیم یک زیر منوی 3 ستونه ایجاد کنیم.

ابتدا مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > قالب ها > افزودن جدید

برای ایجاد قالب باید به این بخش وارد شویم

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

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

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

طراحی نهایی زیر منوی مگامنو
طراحی نهایی زیر منوی مگامنو

حال بر روی دکمه انتشار کلیک کنید.

حالا باید مگامنوی ساخته شده را برای منوی مورد نظر قرار دهیم، برای این کار ابتدا مسیر زیر را دنبال کنید:

پیشخوان وردپرس > نمایش > فهرست ها

وارد بخش منوهای وردپرس می شویم

سپس در صفحه باز شده در بخش Mega menu Settings باید گزینه “Enable megamenu?” را فعال کنید و سپس بر روی دکمه “Save” کلیک کنید.

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

فعال کردن مگامنو
فعال کردن مگامنو

در آخر بر روی دکمه ذخیره فهرست کلیک کنید.

حالا پیش بروید و سربرگ ساخته شده در مراحل قبل را با المنتور ویرایش کنید (چون می خواهیم تا منوی مورد نظر را در منوی هدر سایت قرار دهیم).

سپس از بین ویجت های المنتور، همانند تصویر زیر ویجت “Inline Megamenu” را بکشید و جایگزین منوی قبلی نمایید.

تنظیمات مگامنو
تنظیمات مگامنو

حالا باید منوی شما همانند تصویر زیر نمایش داده شود.

ویجت مگامنوی المنتور
ویجت مگامنوی المنتور

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

مگامنوی نهایی طراحی شده
مگامنوی نهایی طراحی شده

در تصویر بالا نمونه مگامنوی طراحی شده توسط ما را مشاهده می کنید.

جلسه 11 :

آموزش ساخت صفحه ورود و ثبت نام برای فروشگاه

ساخت آرشیو محصولات ووکامرس

چگونه صفحه ورود و ثبت نام برای فروشگاه ایجاد کنیم؟

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

 

مرحله اول : پنهان کردن بخش ها

در ابتدا باید افزونه های رایگان زیر را نصب کنید : 

این افزونه رایگان هست و در مخزن وردپرس موجوده.

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

پیشخوان وردپرس > برگه ها > همه برگه ها

دسترسی به همه برگه های وردپرس

در صفحه ای که باز شده باید حساب کاربری که در جلسه 9 طراحی کردیم را مشاهده کنید. حالا باید بر روی اولین سکشن بیاید و سپس روی یکی از سکشن ها کلیک کنید و در سمت راست در گزیینه های المنتور بر روی تب “Stax Visibility” بیاید.

نمایش شرایط برای کاربران
نمایش شرایط برای کاربران

سپس به بخش بعدی یعنی “User Role” بروید و تنظیمات این بخش را همانند تصویر زیر انجام دهید.

شرایط نمایش برای کاربران واردشده
شرایط نمایش برای کاربران واردشده

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

مرحله دوم : نمایش بخش ورود و ثبت نام

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

افزونه Theme My Login برای سیستم ورود و ثبت نام دارای شورتکدهایی هست که در زیر لیست این شورتکدها را برای  شما عزیزان قرار دادیم : 

				
					[theme-my-login] | شورتکد ورود و ثبت نام
				
			
				
					[theme-my-login action="login"] |  شورتکد ورود
				
			
				
					[theme-my-login action="register"] |  شورتکد ثبت نام
				
			
				
					[theme-my-login action="lostpassword"] |  شورتکد فراموشی رمز 
				
			
				
					[theme-my-login action="resetpass"] | شورتکد ریست رمز 
				
			

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

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

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

حالا باید در بخش “Stax Visibility” تنظیم کنید که کلا بخش ورود و ثبت نام فقط برای کاربران مهمان نمایش داده شود، برای این کار روی سکشن ها کلیک کنید و همانند تصویر زیر تنظیم کنید : 

نمایش نحوه نمایش
نمایش نحوه نمایش

سپس در بخش بعدی یعنی “User Role” باید همانند تصویر زیر عمل کنید.

شرایط نمایش برای کاربران مهمان
شرایط نمایش برای کاربران مهمان

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

ویدئوی آموزشی

4/5 - (13 امتیاز)

در خدمت شما هستیم!

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