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

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

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

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

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

۳- آشنایی با ابزار inspect element مرورگرهای فایرفاکس یا گوگل کروم

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

برای شروع کار یک قالب وردپرس را که با ووکامرس هماهنگ نیست به دلخواه انتخاب کنید و روی سایت یا لوکال هاست خود نصب کنید

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

با قرار دادن کد بالا میتوانید خطای ذکر شده را از بین ببرید، این اولین قدم در طراحی قالب ووکامرس میباشد

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

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

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

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

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

برای حل این مشکل ابتدا فایل header.php قالب خود را در یک ویرایشگر حرفه ای مثل Notepad++ باز کنید و به دنبال تگ <body> بگردید و آن را پاک کنید و به جای آن کد زیر را قرار دهید.

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

سپس از فایل page.php پوسته خود یک کپی بگیرید و نام آن را برابر woocommerce.php قرار دهید.

اکنون فایل woocommerce.php را در ویرایشگر متن (مثل notpead++) باز کنید و حلقه وردپرس و تمام کدهای درون آن را حذف کنید، مانند زیر:

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

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

اما محتوای فروشگاه استایل خاصی ندارند و راست چین هم نیستند، برای حل این مورد باید با ابزار inspect element مانند عکس زیر قسمت های مختلف که نیاز به تغییر دارند را انتخاب کنید تا کلاس و کدهای Css آنها پیدا شود و سپس در انتهای فایل style.css قالب خود استایل دهی کنید و ویرایش های لازمه را برای تغییر ظاهر فروشگاه انجام دهید

ابزار inspect element در طراحی قالب ووکامرس میتواند کمک شایانی به شما کند.

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

برای راست چین کردن باید کلاس هایی را که text-align آن ها left است برابر با right و کلاس هایی را که Direction آن ها برابر با ltr است برابر با rtl قرار دهید

مطالب مرتبط

دیدگاهی بنویسید.

بهتر است دیدگاه شما در ارتباط با همین مطلب باشد.