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

در بخش اول آموزش های ووکامرس فارسی ه، ما به تنظیمات کلی درووکامرس فارسی   WooCommerce پرداختیم، که در آن شما می توانستید طراحی های CSS در ووکامرس فارسی  WooCommerce را فعال کنید.​برای بدست آوردن یک ظاهر خوب از ووکامرس فارسی  Woocommerce قصد داریم یه مقدار عمیق تر بشیم. حدود ۹۰% Css های ووکامرس فارسی  Woocommerce خوب بنظر میرسند و نیاز به تغییر خاصی ندارند و شما میتوانید به راحتی از طریق صفحه تنظیمات این css ها را فعال و استفاده نمایید

شما باید قادر باشد که به سرعت ببینید که چگونهووکامرس فارسی  WooCommerce با تم شما کار خواهد کرد. اگر شما نیاز به هر گونه تغییراتی درCSS دارید پس اقدامات زیر را انجام دهید:

۱. /wp-content/plugins/woocommerce/assets/woocommerce.css را قرار داده و این فایل را در پوشه ی قالب ووکامرس خود کپی کنید. من معمولا آن را در یک فایل به نام woocommerce.css کپی می کنم.

۲. این فایل فشرده شده ی CSS است، بنابراین شما باید آن را استخراج کنید،من از Coda from Panic به عنوان ویرایشگر کدهای PHP و Web Toolkit استفاده می کنم، بنابراین “Tidying” کردن CSS که قابل خواندن شود امری نسبتا آسان به نظر می رسد.در ضمن شما میتوانید از beautify your CSS برای خوشگل تر کردن هرچه بیشتر CSS خود استفاده کنید .

۳. شما همچنین نیاز به اضافه کردن تصاویرووکامرس فارسی  WooCommerce به تم خود خواهید داشت. برای این کار به سادگی /wp-content/plugins/woocommerce/assets/images/ را در پوشه ای در داخل پوشه تم خود کپی کرده و مطمئن شوید که مسیر در woocommerce.css جدید شما به روز رسانی شده است.

۴. لازم است که قالب ووکامرس خود را مجبور به شناختن stylesheet های اضافه شده بکنیم.کافیست کد زیر را در header.php قبل تگ head قرار دهید :

<?php
function my_woo_style() {
wp_register_style( 'my-woocommerce', get_template_directory_uri() . '/woocommerce.css', null, 1.0, 'screen' );
wp_enqueue_script( 'my-woocommerce' );
}

add_action( 'wp_enqueue_scripts', 'my_woo_syle' );
?>

حالا وردپرس درباره ی stylesheet جدید ما می داند و آن را به صفحات وردپرس تولید شده توسط ما اضافه خواهد کرد. شما می توانید اطلاعات بیشتر در این باره را از registering and registering and enqueuing styles in the WordPress Codex. دریافت کنید.

۵. در تنظیمات عمومیWooCommerce مطمئن شوید که تیک گزینه ی “Enable WooCommerce CSS styles” را برداشته اید. یا اگر مایل باشید می توانید آن را از طریق پوسته ووکامرس خود غیر فعال کنید.(کد زیر را در functions.php پوسته خود قرار دهید )

<?php
// Disable WooCommerce styles
define( 'WOOCOMMERCE_USE_CSS', false );
?>

من در حال حاضر یک کپی ازWooCommerce deafult CSS در داخل تم خود دارم، بنابراین می توانم آنها را بدون اینکه بوسیله ی به روز رسانی پلاگین پاک شوند، به روز رسانی کنم. ظاهر آن باید دقیقا شبیه به زمانی که پیش فرض CSS را از طریق تنظیمات فعال کردید، به نظر برسد. شما می توانید بسیاری از تغییرات خود را با CSS انجام دهید، اگر مشکلی دارید، دو مورد دیگر وجود دارد که باید بیشتر در مورد آنها بدانید. ایجاد لفاف div در اطراف محتوای ووکامرس فارسی  WooCommerce ، احتمالا اولین مشکل شما خواهد بود. شما می توانید از صفحه قالب (template) شخصی خود برایووکامرس فارسی  WooCommerce استفاده کنید تا برای تمام محتوای آن مورد استفاده قرار گیرد.

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

 

۱.فایل page.php قالب خود را همان جا کپی کنید و به آن نام wocommerce.php را بدهید

۲. در ویرایشگر کد انتخابی خودتان، فایل های جدید خود را باز کرده و حلقه را در آنجا قرار دهید. این کد معمولا به شکل زیر شروع می شود:

<?php if ( have_posts() ) : ?>

و به این شکل پایان می پذیرد:

<?php endif; ?>

بسته به قالب ووکامرس شما این کد می تواند متفاوت باشد.

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

 

۳. حلقه را با کد زیر جایگزین کنید:

<?php woocommerce_content(); ?>

برخی از ویژگی های و طراحی هایWooCommerce را می توان با استفاده از اقدامات و فیلترهایWooCommerce انجام داد. درست مانند هسته ی وردپرسWooCommerce نیز دارای مجموعه ی گسترده ای از اقدامات و فیلترها می باشد که شما می توانید آنها را به چیزی قلاب کرده و یا اجرا کنید. با استفاده از اقدامات زیر می توانید لفاف div را تغییر دهید:

<?php
//Change Wrapper
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', create_function('', 'echo "&lt;div id=\"mycontent\"&gt;";'), 10);
add_action('woocommerce_after_main_content', create_function('', 'echo "&lt;/div&gt;";'), 10);
?>

با چسباندن کد بالا به فایل functions.php قالب خود ،  می توانید کدهای پیش فرض را در اطراف خروجیWooCommerce تغییر دهید. در مثال زیر، از یک ID ی mycontent استفاده کرده ایم، ولی البته شما می توانید آن را بر روی هر آنچه که نیاز دارید تنظیم کنید.

بسیاری از اقدامات مفید دیگر وجود دارند که شما می توانید از آن برای سفارشی کردنWooCommerce و حتی انجام کارهای بیشتری استفاده کنید، برخی از موارد مورد علاقه ی من به شرح زیر است:

<?php
//Remove Breadcrumbs
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);

//Get Rid of Stupid Tabs
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10);
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20, 2);
add_action( 'woocommerce_single_product_summary', 'woocommerce_product_description_panel', 20 );

//Remove Product Reviews
remove_action( 'woocommerce_product_tabs', 'woocommerce_product_reviews_tab', 30 );
remove_action( 'woocommerce_product_tab_panels', 'woocommerce_product_reviews_panel', 30 );

//Remove Sidebar from WooCommerce
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
?>

اگر هنوز کنترل بیشتری می خواهید، می توانید تمامی فایل های قالب ووکامرس را برای WooCommerce اجرا کنید. پوشه /wp-content/plugins/woocommerce/templates را به فولدر قالب خود بیاورید و نام آن را به woocommerce تغییر دهید . هم اکنون می توانید فایل های تم را تغییر دهید، بدون ترس از آنکه توسط به روز رسانی پلاگین باعث پاک شدن آنها . WooCommerce documentation کاملا خوب است و همیشه در حال بهبود یافتن است شما همچنین می توانید با رفتن به WooCommerce GitHub repo. بیشتر خود را درگیر این موضوع کنید.

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

در نهایت،WooThemes چند قالب ووکامرس رایگان را برایووکامرس فارسی  WooCommerce ارائه می دهد، که می تواند به عنوان یک نقطه ی شروع بسیار خوب و یک راه بسیار عالی به منظور کسب اطلاعات بیشتر در مورد چگونگی قالب گذاری WooCommerce به شما خدمت کن. “Mystile” یک پوسته ووکامرس بسیار خوب و رایگان برایWooCommerce است و ظاهری تمیز و مدرن را برای هر گونه فروشگاه ارائه و واقعا ویژگی های کامل WooCommerce را نشان می دهد. قالب های رایگان عالی به نظر می رسند و به مقدار زیادی انعطاف پذیر هستند، در حالی که تم های محدود همانطور که انتظار می رود، همه چیز را کمی پیشرفته تر و با گزینه های زیادی برای کار کردن، ارائه می دهند. بسیاری از تم هایWooCommerce بیشتر شبیه به چارچوب هستند، بنابراین می توانید یک تم کوچک برای خودتان و علائم مخصوص به خودتان را ایجاد کنید.

extensions

قالب ووکامرس

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