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

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

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

تعریف صفحات ووکامرس در قالب

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

بنابراین فایلی با نام woocommerce.php در شاخه‌ی اصلی قالب خود ایجاد کنید و دستورات لازم برای ایجاد header و footer را در آن بگنجانید.
در بخش میانی به جای حلقه‌ی اصلی وردپرس از دستور woocommerce_content استفاده می‌کنیم:

دستورات شرطی فروشگاه ووکامرس

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

تغییر قالب‌های پیش‌فرض ووکامرس

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

برای مثال اگر یکی از فایل‌های قالب ووکامرس در شاخه‌ی templates/main.php باشد، شما می‌توانید این فایل را با مسیر woocommerce/main.php در قالب خود کپی کنید و آن را تغییر دهید.

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

فایل‌های شیوه نامه( CSS ) ووکامرس

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

به عنوان یک راه حل دیگر می‌توانید از ووکامرس بخواهید تا فایل css به خروجی صفحه اضافه نکند و قالب بندی css را به صورت کامل در قالب اصلی سایت خود بگنجانید. برای این کار کافی است قطعه کد زیر را در functions.php قالب خود قرار دهید.

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

اضافه کردن ویژگی‌های پیشرفته تصویر محصول در ووکامرس

برای اینکه از قابلیت‌های بزرگنمایی و اسلاید و لایت‌باکس تصویر محصولات را هم در ظاهر سایت فعال کنید، کافی است تا کدهای زیر را به فایل functions.php قالب خود بیفزایید:

تغییر عملکردهای ووکامرس

ووکامرس افزونه‌ای قابل توسعه است. برای تغییر دادن عملکردها و فرآیندهای آن می‌بایست از سیستم Hookهای وردپرس( اکشن‌ها و فیلترها ) استفاده کنید و از تغییر دادن فایل‌های اصلی افزونه خودداری نمایید.

۲۰ نظر در مورد «آموزش طراحی قالب ووکامرس»

  • آریا می‌گوید:

    خیلی مسخره آموزش میدین

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

    • کسری می‌گوید:

      به نظر من اشتباه میکنید. این آموزش خیلی هم مفیده اگر پیش زمینه داشته باشید. واقعا خسته شدم بس که آموزش های ایرانی ساعت ها طولش میدن تا یه مطلب چند ثانیه ای رو بگن بعد ادعا میکنن 40 ساعت فیلم آموزشی تولید کردن در صورتی که بخدا تو 20 دقیقه آموزش میشد تمومش کرد. این وقت های اضافه که از دست میدیم عمرمونه. من مدتهاست طراحی میکنم و از صبح زود تا نیمه های شب مجبور به کار کردن و یا بیشتر مشغول مطالعه هستم (چون کار کمه) و به نظرم وقتشه ما ایرانی ها هم مثل خیلی آموزش گاه های خارجی فیلم ها و مطالب آموزشی کوتاه و مفید ایجاد کنیم.

    • رویا ایرانی می‌گوید:

      مسخره نیست خیلی هم مفیده چون شما نمیفهمی فک میکنی مسخرس

    • عباسی می‌گوید:

      بسیار هم عالی و روان
      موفق و پیروز باشید

  • محمد می‌گوید:

    مرسی از آموزش خوبتان برای من مفید بود

  • مهدی می‌گوید:

    ممنون از کیفیت آموزشتون

  • ممنون کوتاه و مفیدبود برای کسی که اطلاعات پایه داشته باشه می تونه مفید باشه

  • محمد می‌گوید:

    مرسی ممنون از آموزش خوبتون
    من قبلا با یه چیزی دیگه برنامه نویسی کردم الان مدتیه که دارم قالب وردپرس می سازم نزدیک یک سال ، می خواستم اگه امکانش هس یه سری منبع مثل کتاب بهم معرفی کنید برای عمق بیشتر و یادگیری بیشتر
    بازم مرسی

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

  • سیدعلی حسینی می‌گوید:

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

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

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

  • محمد می‌گوید:

    سلام
    من یه قالب خرید به اسم kiwi که با edd ساخته شده و الان میخوام این قالب رو با ووکامرس هماهنگ کنم از آموزشتون استفاده کردم و عالی بود.
    اما الان میخوام همین قالب رو تغییرات مهمتری داخل ایجاد کنم برای ووکامرس
    میخوام ابن قالبم رو با قالب کاتالوگ که با ووکامرس سازگاره ادغام کنم
    میشه؟
    از کجا باید شروع کنم؟
    چه آموزشهایی باید ببینم؟
    سایت یا مرجعی معرفی کنید ممنون میشم

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

  • خیلی عالی بود.
    قالب نویسی بلد بودم فقط همینو می‌خواستم.
    تشکر

  • مجتبی می‌گوید:

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

    • با سلام
      روش فایل آسان‌تر است و روش هوک اندکی سریع‌تر که اگر بناباشد در آن روش هم یک فایل مجددا بازخوانی شود، آن مقدار جزئی هم از بین خواهد رفت

  • میلاد می‌گوید:

    با سلام و تشکر از شما

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

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

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

پاسخ دادن به رضا لغو پاسخ

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

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱