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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پاسخ دهید

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