no-img
طراحی از جنس وردپرس

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


طراحی از جنس وردپرس

ادامه مطلب

ZIP
طراحی قالب برای افزونه ووکامرس
zip
خرداد ۱۲, ۱۳۹۷

طراحی قالب برای افزونه ووکامرس


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

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

برای آنکه بتوانید از این آموزش بهره لازم را ببرید چند پیش نیاز برای این دوره ضروریست :

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

دانلود وردپرس 

دانلود افزونه ووکامرس

۲- آشنایی با اصول طراحی قالب وردپرس و دستی بر HTML , CSS.

۳- آشنایی با نحوه کار با inspect element  مرورگر گوگل کروم .

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

طراحی قالب ووکامرس

بعد از اینکه موارد بالا را به درستتی انجام دادید وارد پیشخوان وردپرس خود شوید . خب اولین اتفاقی که شما شاهد آن هستید عبارت “پوسته شما توسط پشتیبانی ووکامرس شناسایی نمیشود – اگر با مشکل ناسازگاری طرح مواجه شدید، راهنمای یکپارچگی را مطالعه کنید یا یکی از پوسته های ووکامرس را انتخاب کنید” در قسمت اعلان های وردپرس می باشد . دلیل این خطا این است که قالبی که شما بر روی وردپرس نصب کرده اید از افزونه ووکامرس پشتیبانی نمی کند برای حل این موضوع  باید قالب نصب شده بر روی سایت وردپرسی خود را با افزونه ووکامرس هماهنگ کنیم . در قدم اول باید فایل functions.php قالب خود را باز کرده به کد زیر را به آن اضافه و ذخیره کنید :

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

روش دومی هم برا حل این مشکل وجود دارد که باید به دایرکتوری قالب خودمان برویم و از فایل page.php قالب یک کپی ایجاد کنیم و نام آن را برابر با woocommerce.php قرار بدهیم و آن را مطابق با دستور زیر ویرایش کنیم :

قبل از ویرایش

بعد از ویرایش

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

صفحات ووکامرس

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

  • برگه تسویه حساب (checkout)
  • برگه سبد خرید (cart)
  • برگه حساب کاربری (my-account)
  • برگه فروشگاه (shop)
  • صفحه آرشیو محصولات (دسته بندی ها و تگ ها)
  • صفحه داخلی محصولات

نکته مهم:

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

فایل page.php

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

اما برای طراحی سایر صفحات شما نیاز دارید که آن ها را طراحی کنید چرا که با مشاهده این صفحات شاهد برهم ریختگی های عناصر html خواهید بود که برای قالب شما اصلا جالب نیست حال برای رفع این مشکل رجوع می کنیم به خطوط بالایی این آموزش و سراغ فایل woocommerce.php که در بالا ساختیم را می رویم . اگر این فایل را هنوز ایجاد نکرده اید سریعاً این کار را انجام داده و سپس در فایل header.php قالب تگ مربوط به body را اینگونه ویرایش کنید :

خب باید بگیم که مشکل حل شد . اینکار باعث می شود تا تمامی کلاس های ووکامرس به قالب شما افزوده شود و دیگر برهم ریختگی های عناصر html  را شاهد نخواهید بود فقط تنها موضوعی که مطرح است در حال حاضر چپ چین بودن عناصر می باشد که اگر تسلط در زمینه CSS , HTML و البته با inspect element  کروم آشنا باشید می توانید براحی این عناصر را راست چین کرده و محیطی زیبا برای صفحات ووکامرس ایجاد کنید .

راهنمایی :

در راست چین کردن این عناصر حتماَ به خاصیت text-align  و direction و float و left و right  نگاهی ویژه داشته باشید و اگر این موارد به چپ چین هستند آن ها را مقدار right بدهید . درضمن از padding و margin ها غافل نشوید . 

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

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

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

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

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

قابلیت های ووکامرس

  • لایت باکس
  • زوم
  • اسلایدر

برای فعال کردن این موارد کد زیر را به functions.php اضافه کنید :

چگونه تعداد نمایش محصولات در فروشگاه را مدیریت کنیم ؟

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

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

موفقیت شما آرزوی ماست .



موضوعات :
آموزش , وردپرس , ووکامرس

درباره نویسنده

rdesigns 10 نوشته در طراحی از جنس وردپرس دارد . مشاهده تمام نوشته های

دیدگاه ها


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *