مقدمه ای در طراحی قالب WooCommerce برای وردپرس

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

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

1. وردپرس و افزونه ی WooCommerce را نصب کرده اید.
2. شما با ساختن قالب برای وردپرس و استفاده از HTML و CSS آشنا هستید.
3. شما باید از ابزار Chrome Developer یا ابزارهای توسعه ی مشابه مانند FireBug استفاده کرده باشید.

شخصی سازیِ فایل CSS افزونه WooCommerce

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

به همین ترتیب، دو روش برای ویرایشِ فایل CSS برای یک قالب WooCommerce وجود دارد:

1. میتوانید از استایل های پیش فرض استفاده کنید و یا آنها را بازنویسی کنید.
2. شاید بخواهید استایل پیش فرض را غیر فعال کنید و از ابتدا شروع کنید.

بازنویسی استایل های پیش فرض

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

شما میتوانید تمام فایل CSS پیش فرض را که در این آدرس ( wp-content\plugins\woocommerce\assets\css\woocommerce.css یا  woocommerce.less ) است، را کپی کنید،  تمام چیزهایی را که نیاز ندارید را پاک کنید، و هر چیزی نیاز داشتید تغییر بدهید; هرچند این کار میتواند وقت گیر باشد، و امکان دارد که در فایل های CSS زیادی تکرار شود.

برای این منظور، معمولا از رویکرد زیر استفاده می کنم:

1. من سایت را از بالا تا پایین نگاه میکنم، و شروع به پیدا کردن استایل هایی که نیاز به تغییر دارند، میکنم.
2. بعد از این کار، از ابزار Chrome Developer (یا ابزارهای مشابه آن) برای شناسایی کلاس ها، و حتی تغییر دادن در browser برای فهمیدن این که سایت چجوری قراره بشه استفاده میکنم. این کارو معمولا به وسیله کلیک راست کردن روی صفحه و انتخاب "inspect element" از لیست منو باز شده انجام میدم.
3. بعدش، کدهای CSS را از Chrome Developer Tools در فایل قالب CSS کپی میکنم.
4. فایل CSS را در ابزار Chrome Developer بازبینی میکنم زیرا ممکن است استایل های پیش فرض در مرورگر های مختلف با مشکل برخورد کند. مهم این است که این مقادیر را تغییر دهید تا CSS خود را در مرورگرهای مختلفی که ممکن است بازدیدکنندگان شما از آن استفاده کنند، سازگار سازند.
5. در نهایت، من مقادیری را که در CSS کپی شده تغییر نداده ام، حذف میکنم. به عنوان مثال، اگر width چیزی را عوض کرده باشم، اما height آن را تغییر نداده باشم، بنابراین نیازی نیست height را در فایل CSS سفارشی خود اضافه کنم.

شخصا، من این رویکرد را در اغلب موارد بهترین کار می دانم، این کار واقعا زمان توسعه را کاهش می دهد.

غیر فعال کردن Stylesheet پیش فرض و شروع از ابتدا

stylesheet پیش فرض را می توان با اضافه کردن یک قطعه کوچک از کد به functions.php قالب های خود را غیر فعال کنید.

1

define('WOOCOMMERCE_USE_CSS', false);

سریعترین راه برای به دست آوردن تمام کلاسهای WooCommerce کپی فایل اصلی CSS WooCommerce در فایل خودتان است و در آن وقت میتوانید هر چیزی را که لازم نیست حذف کنید.

اعلام پشتیبانی از WooCommerce در قالب شما

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

بدون اعلام پشتیبانی WooCommerce،  کاربران پیغام خطایی در زمان نصب مشاهده میکنند.

خوشبختانه این موضوع را می توانید با وارد کردنِ یک قطعه کوچکی از کد به فایل functions.php حل کنید:

1

add_theme_support( 'woocommerce' );

 ویرایش قالب ها

ویرایش CSS در WooCommerce یک راه طولانی است، اما اگر شما واقعا می خواهید صفحات را سفارشی کنید، چطور؟ خوشبختانه، راهی عالی برای انجام این کار وجود دارد.

افزونه WooCommerce همراه با تعدادی از قالب های HTML front-end و همچنین قالب های ایمیل می باشد. به جای ویرایش این فایلها به طور مستقیم درون پلاگین (که یک ایده بسیار بد است چون یکبار اگر یک بار پلاگین را بروزرسانی کنید و تمام تغییرات شما از بین میرود!)، میتوانید آنها را در قالب خود کپی کنید:

1. در دایرکتوری theme، یک پوشه جدید به نام woocommerce ایجاد کنید.
2. به دایرکتوری پلاگین WooCommerce بروید و پوشه "templates" را باز کنید. پوشه templates دارای زیر پوشه های زیادی با تمام قالب های مختلفی است که WooCommerce از آنها استفاده می کند. خوشبختانه ساختار فایل قالب و نامگذاری در WooCommerce آسان است.
3. در پوشه "woocommerce" که اخیرا ایجاد کرده اید، فایل قالب که می خواهید ویرایش کنید را کپی کنید. به یاد داشته باشید ساختار دایرکتوری را در اینجا نگه دارید. اگر قالبی که شما می خواهید آن را ویرایش کنید، در زیر پوشه قرار دارد، به یاد داشته باشید که پوشه فرزند را در دایرکتوری theme خود ایجاد کنید.
4. فایل را از داخل پوشه woocommerce خود ویرایش کنید و تغییرات را ذخیره کنید.

یک مثال کاربردی

ما می خواهیم بعضی از تگ های HTML را در صفحه " My Orders " از WooCommerce عوض کنیم.

اولین کاری که ما باید انجام دهیم این است که قالب را در جای درست قرار دهیم. در این مورد، بخش « My Orders » در « My Account » در WooCommerce قرار دارد. ساختار دایرکتوری به شرح زیر است:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

سپس، یک پوشه در قالب خود به نام "woocommerce" ایجاد کنید و در آن فولدر یک پوشه دوم به نام "myaccount" ایجاد کنید. پس از آن، فایل my-orders.php را در آن دایرکتوری کپی کنید.

چیزی مانند:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

هر گونه تغییری که در این فایل ایجاد شده است، حالا قالب اصلی را تغییر داده است.

حلقه WooCommerce

اگر قبلا قالب وردپرس را از ایجاد یا ویرایش کرده باشید، باید با The Loop آشنا باشید. WooCommerce دارای حلقه خاصی است که شما می توانید برای سفارشی کردنِ صفحات WooCommerce از آن استفاده کنید. برای مثال، ممکن است بخواهید این کار را زمانی انجام دهید که یک sidebar متفاوت برای صفحات WooCommerce خود را بارگیری کنید.

این مقدماتی ترین روشِ یکپارچه سازی به وسیله ایجاد یک قالب سفارشی WooCommerce است که در هر صفحه WooCommerce شامل products، categories و archives اعمال خواهد شد. اگر شما نمی خواهید قالب WooCommerce شما متفاوت از قالب استاندارد باشد، پس لازم نیست قالب سفارشی WooCommerce را ایجاد کنید.

ایجاد قالب یک فرایند مستقیم است:

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

1

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

2

<?php the_title(); ?

3

<?php the_content(); ?>

4

<?php endwhile; endif; ?>

• حلقه خود را با حلقه WooCommerce جایگزین کنید: <؟ php woocommerce_content ()؛ ؟
• حالا، هر تغییری را که میخواهید انجام دهید مانند عوض کردن مکانsidebar یا تغییر layout.

Let's Wrap It Up

حالا شما از مبانیِ یکپارچه سازیِ پلتفرمِ WooCommerce با قالب های وردپرس تان اطلاع دارید.

مهارت هایی که از این مقاله بدست آوردید، شما را برای بسیاری از شرایط در WooCommerce آماده کرده است. اگر شما نیاز به یکپارچگی پیشرفته تر و یا انعطاف پذیرترِ قالب داشته باشید، قدم بعدی این است که اکتشاف hooks، فیلترها و اظهارات شرطی موجود برای استفاده با WooCommerce را ببینید.

لینک های مفید: WooCommerce Plugin from CodeCanyon.