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

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

ووکامرس
برای طراحی قالب ووکامرس، نخستین کاری که می‌بایست به انجام برسد، اضافه کردن قطعه کد زیر در فایل 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های موجود در شاخه‌ی اصلی قالب، آن‌ها را به دلخواه تغییر دهید.

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

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


مشاهده‌ی تمامی نوشته‌ها در گروه: ووکامرس. ‏ فهرست برچسب‌ها: , , , , .

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

    • روکاوب می‌گوید:

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

پاسخ دهید

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