شروع ساختن قالب در ووکامرس – قسمت سوم
به قسمت سوم از ایجاد قالب ووکامرس رسیدیم. در قسمتهای قبل با قابلیتهای مختلف یک سیستم فروشگاه ساز آشنا شدیم. در این قسمت هم میخواهیم به تکمیل این ویژگیها و چگونگی ایجاد تغییر در ساختار ووکامرس بپردازیم. اگر در زمینۀ طراحی سایت و قالب وردپرس فعالیت میکنید با خواندن این مقاله میتوانید تا حدود زیادی با چگونگی ساخت و تغییر ساخت فروشگاه اینترنتی آشنا شوید و اگر هیچ زمینهای از طراحی سایت ندارید به شما توصیه میکنم که ابتدا با چگونگی طراحی سایت و کد نویسی آشنا شوید و اگر قصد دارید فروشگاه اینترنتی موفقی داشتهباشید قبل از هر گونه اقدامی با ما تماس بگیرید. به هر حال به سراغ اصل مطلب میرویم و این مقاله را با تیتر زیر شروع میکنیم:
تغییر جعبه جستجو محصول (ویجت)
get_product_search_form()
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label> <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products…', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" /> <input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" /> <input type="hidden" name="post_type" value="product" /> </form>
نمایش تصویر دستهبندیها در بایگانی دستهبندی
با استفاده از کد زیر میتوانید دستهبندیهای خود را در قسمت بایگانی دستهبندی نمایش دهید. ولی اگر به هر صورتی با کدنویسی و طراحی قالب آشنا نیستید از این کار صرف نظر کنید و ابتدا به آموزش طراحی سایت و کدنویسی مراجعه کنید.
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 ); function woocommerce_category_image() { if ( is_product_category() ){ global $wp_query; $cat = $wp_query->get_queried_object(); $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true ); $image = wp_get_attachment_url( $thumbnail_id ); if ( $image ) { echo '<img src="' . $image . '" alt="' . $cat->name . '" />'; } } }
رفع نقص قالبهای ووکامرس
گاهی اوقات ما قالبهای ووکامرس را زمانی که ورژن جدیدی در دسترس قرار میگیرد به روز رسانی میکنیم. این در مورد نسخه های اصلی مثل (WooCommerce 2.2, 2.6 and 3.0) و همچنین نسخههای فرعی مثل (WooCommerce 3.2.0) کاربرد دارد. ورژن ۳٫۳ با هر موضوعی در ووکامرس هماهنگی دارد.
به هر حال اگر شما از یک تم با قالب قدیمی و یا نسخههای قدیمی ووکامرس استفاده میکنید ، ابتدا باید خودتان را بهروز کنید و از نسخههای جدید استفاده کنید.
طراحان قالب وردپرسی، تمهای خود را در مواقعی که نیاز باشد به روز رسانی میکنند، بنابراین شما فقط باید تم خود را به روز کنید تا قالب های به روز شده را دریافت کنید. اگر شما الگوهای قالب را تغییر دادهاید و یا از یک تم کودک “(تمی که عملکرد و ظاهر خود را از تم اصلی شما به ارث میبرد را تم کودک میگویند.) “استفاده میکنید شما باید قالب خود را به روز کنید. تمهای کودک برای اصلاح یک تم موجود در وردپرس شما قابل استفاده است.
چگونه قالبهای قدیمی خود را به روز رسانی کنیم؟
ما باید مشخص کنیم که چه قالب هایی را برای به روز رسانی میخواهیم انتخاب کنیم، سپس یک بک آپ از قالب قدیمیمان میگیریم تا بتوانیم تنظیمات شخصی خود را روی قالب به روز رسانی شده اعمال کنیم.
برای اینکار به ترتیب زیر عمل کنید:
۱-از ووکامرس خود به قسمت وضعیت سیستم (System Status) بروید. به انتهای صفحه، درست جایی که لیستی از قالبهایی که توسط تم شما/ تم کودک شما لغو شده است بروید. در این قسمت پیامی را مشاهده میکنید که به شما هشدار میدهد که قالب خود را به روز رسانی کنید.


سوالات متداول
از کجا میتوانم آخرین نسخۀ ووکامرس را پیدا کنم؟
اگر شما میخواهید که از قالبهای پیشفرض به روز رسانی شده استفاده کنید باید آخرین ورژن ووکامرس را در اختیار داشتهباشید.
چند روش آسان برای گرفتن این قالبها وجود دارد:
۱-نسخۀ ووکامرسی که در حال حاضر نصب کردهاید را باید به روز رسانی کنید، بنابراین فایل ها از طریق FTP در سایت شما قابل دسترسی هستند.
۲- آخرین نسخه را از WordPress.org دانلود کنید.
۳- همچنین در GitHub repository تمام نسخهها قابل دسترس هستند.
بازخوردها برای این صفحه اغلب منفی است، آیا نباید دستورالعمل ها را تغییر دهید؟
بازخورد مثبت توسط کسانی که درک می کنند و از دستورالعمل ها همانطور که هست استفاده میکنند با موفقیت همراه است.
در عوض برای کسانی که در زمینۀ طراحی قالب سررشتهای ندارند و نمی تواند دستورالعملها را درک کنند بازخورد از این مطلب منفی است، زیرا ممکن است مراحل کار را به درستی تشخیص ندهند و احساس کنند که این مراحل به اندازه کافی کامل نیستند. همانطور که در ابتدای مقاله عنوان کردم، این مقاله برای کسانی که با طراحی سایت و قالب آشنا هستند کاربرد دارد.
چرا یک دکمه برای به روز رسانی همه چیز وجود ندارد؟
این امکان برای به روز رسانی غیرممکن است. چرا؟ از آنجا که هزاران تم وجود دارد و هر کدام از این تمها با هم متفاوتند. علاوه بر این هر کدام از این تمها به صورت متفاوتی کد شدهاند پس بنابراین نمیتواند یک آپدیت برای همۀ تمها قابل اجرا باشد.
چگونگی تغییر در اندازۀ تصاویر برای طراحان قالب
-
woocommerce_thumbnail
در شبکۀ تولیدات- محصولات مانند صفحۀ فروش استفاده میشود. woocommerce_single
در صفحۀ مختص برای هر محصول استفاده میشود.woocommerce_gallery_thumbnail
برای تغییر گالری، زیر تصویر اصلی در صفحۀ هر محصول استفاده میشود.
woocommerce_single تصویر محصول کامل را به صورت آپلود شده نشان می دهد، بنابراین همیشه به طور پیش فرض باز نشده است. پیشفرض عرض تصاویر ۶۰۰px است.
woocommerce_gallery_thumbnail همیشه مربع بریده شده و به صورت پیش فرض ۱۰۰ × ۱۰۰ پیکسل است.
woocommerce_thumbnail عرض آن به صورت پیش فرض ۶۰۰px است. به صورت مربع بریده شده است و شبکۀ محصول را تمیز تر نشان میدهد. نسبت ابعاد برای نمایش تصاویر میتواند توسط صاحب فروشگاه تغییر کند. مهم است که توجه داشته باشید که با وجود عرض تصویر واقع شده، تم ها می توانند در نهایت تغییر اندازه تصاویر را با استفاده از CSS نمایش دهند و عرض تصویر ممکن است توسط عرض محصول / ستون محصول محدود شود.
تم ها میتوانند اندازه تصویر را تعریف کنند
شروع با WooCommerce 3.3.0، تم ها می توانند اعلام کنند که چه اندازه باید هنگام اعلام پشتیبانی ووکامرس مورد استفاده قرار گیرد.
add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 200,
'gallery_thumbnail_image_width' => 100,
'single_image_width' => 500,
) );
هنگام فراخوانی وردپرس که به طور مثال انتظار می رود یک اندازه تصویر باشد. wp_get_attachment_image_src
woocommerce_thumbnail
woocommerce_single
woocommerce_gallery_thumbnail
سفارشی کردن اندازه تصاویر در قسمت سفارشی سازی
اگر تم شما اندازه تصاویر را تعیین کند، بخش بالا پنهان خواهد شد و تنها گزینۀ برش قابل مشاهده خواهد بود.
تا زمانی که سفارشی سازی “منتشر شود” تغییرات برای مشتریان قابل مشاهده نیستند و ریز عکسها با ابعاد جدید بازسازی شده است.
- ۱: ۱ (برش مربعی)
- دستی (مالک فروشگاه می تواند یک نسبت تصویر را به صورت دلخواه وارد کند)
- برش نخورده (نسبت ابعاد تصاویر را به صورت یکنواخت حفظ میکند)
تغییر اندازه تصاویر از طریق هوکها
در حالی که تم ها میتوانند اندازه تصویر را در عرض مشخصی ثابت کنند و صاحبان فروشگاه میتوانند عرض و نسبت ابعاد را کنترل کنند،
عملکرد wc_get_image_size توسط ووکامرس برای اندازه ابعاد تصویر قابل استفاده است.
woocommerce_get_image_size_{SIZE_NAME_WITHOUT_WOOCOMMERCE_PREFIX}
array(
'width' => 200,
'height' => 200,
'crop' => 1,
)
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 0,
);
} );
ما استفاده از پلاگینها و تمهایی که در این مسیر میروند را به شما نوصیه نمیکنیم. زیرا قابلیت کنترل را از صاحب فروشگاه میگیرد و سیستم تغییرات دستی آنها را اعمال نخواهد کرد. ولی در نظر داشتهباشید که گزینهای برای صاحبان فروشگاه وجود دارد. پس از تغییر در اندازه های تصویر، ممکن است نیاز باشد که ریز عکسها را بازسازی کنید، بنابراین اندازه های جدید برای تصاویر موجود استفاده خواهند شد.
تغییر اندازۀ عکسهای مورد استفاده در ووکامرس از طریق هوکها
فیلتر | توضیحات | پیش فرض |
---|---|---|
single_product_archive_thumbnail_size |
اندازه مورد استفاده در شبکه / کاتالوگ محصول را کنترل می کند.
|
woocommerce_thumbnail |
subcategory_archive_thumbnail_size |
کنترل اندازه مورد استفاده در شبکه محصول / کاتالوگ برای تصاویر گروهی.
|
woocommerce_thumbnail |
woocommerce_gallery_thumbnail_size |
اندازه مورد استفاده در گالری محصول، زیر را به تصویر اصلی کنترل می کند تا تصویر دیگری را تغییر دهد.
|
woocommerce_gallery_thumbnail |
woocommerce_gallery_image_size |
اندازه مورد استفاده در گالری محصول را کنترل می کند.
|
woocommerce_single |
woocommerce_gallery_full_size |
اندازه اندازه مورد استفاده در گالری محصول را کنترل می کند تا بزرگنمایی یا نمایش تصویر کامل را مشاهده کند. | full |
نکته: اندازه کامل توسط وردپرس ثبت شده و در آن به صورت Settings > Media تنظیم شده است.
به عنوان مثال،
اندازه تصویر بند انگشتی گالری را از اندازه ی تصویر کوچک ثبت شده توسط وردپرس به جای woocommerce_gallery_thumbnail استفاده کنید
add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return 'thumbnail';
} );
تکمیل کتابچۀ راهنمای طراحان قالب ووکامرس
یکپارچه سازی تم
همانطور که در قسمت قبل اشاره کردیم سه راه برای یکپارچهسازی تم وجود دارد.که این سه راه حل به طور اختصار۱- Using woocommerce_content()- 2استفاده از هوکها و۳-استفاده از لغو الگوها نام دارد. ما در قسمت دوم مقاله به دو مورد اول اشاره کردیم .
ابتدا در نظر داشتهباشید، اگر از ورژن ۳٫۲ ووکامرس یا ورژن پایینتر استفاده می کنید، باید از یکی از این روش ها استفاده کنید تا مطمئن شوید که فروشگاه ووکامرس و صفحات محصول به طور صحیح در تم مورد نظر شما ارائه میشوند.
هر زمان که در استفاده از هوکها باید این نکته را اضافه کنیم که هر زمانی که بخواهید،
استفاده از لغو الگو
برای به دست آوردن اطلاعات در مورد لغو الگوها ووکامرس و جایگزینی آن با تغییرات دستی خود، بخش ساختار الگو در قسمت دوم را بخوانید، همانطور که اشاره شد استفاده از هوکها به مراتب بهتر از استفاده از لغو الگوهاست. این روش نیاز به نگهداری بیشتری دارد، زیرا قالب ها باید با قالب های اصلی ووکامرس به روز رسانی شود.
اعلام پشتیبانی ووکامرس
لغو الگو ووکامرس فقط در تم هایی که در ووکامرس اعلام پشتیبانی میکنند، فغال است. اگر شما پشتیبانی ووکامرس را در تم خود اعلام نکنید،
ووکامرس فرض می کند که تم شما به صورت سازگار با سیستم ووکامرس طراحی نشده است و برای نمایش فروشگاه از شورت-کدهای پشتیبانی نشده برای تفسیر تم شما استفاده خواهد کرد. اعلام پشتیبانی ووکامرس ساده است و شامل اضافه کردن یک تابع در فایل functions.php تم شما است.
استفاده پایه
function mytheme_add_woocommerce_support() { add_theme_support( 'woocommerce' ); } add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
استفاده با تنظیمات
function mytheme_add_woocommerce_support() { add_theme_support( 'woocommerce', array( 'thumbnail_image_width' => 150, 'single_image_width' => 300, 'product_grid' => array( 'default_rows' => 3, 'min_rows' => 2, 'max_rows' => 8, 'default_columns' => 4, 'min_columns' => 2, 'max_columns' => 5, ), ) ); } add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
thumbnail_image_width و single_image_width اندازه تصویر برای فروشگاه شما را تنظیم میکند.
اگر آنها در هنگام اضافه کردن پشتیبانی از تم ها اعلام نشوند، کاربر میتواند اندازه تصاویر را در قسمت سفارشی سازی زیر ووکامرس، بخش تصاویر محصول تنظیم کند.
تنظیمات product_grid اجازه می دهد طراحان قالب تنظیم پیش فرض، حداقل، و حداکثر تنظیمات ستون و ردیف برای فروشگاه اعمال کنند.
ویژگی های گالری محصولات (قابلیت زوم، کشیدن و ایجاد لایت باکس)
گالری محصول معرفی شده در ورژن ۳٫۰٫۰ از Flexslider، Photoswipe و از پلاگین جی کوئری زوم برای کشیدن، لایت باکس و سایر ویژگی های مرتب شده استفاده میکند. در نسخه های ۳٫۰، ۳٫۱ و ۳٫۲، گالری جدید به طور پیش فرض خاموش است و باید با استفاده از یک قطعه (در زیر) یا با استفاده از یک موضوع سازگار فعال شود. این موضوع به خاطر غیر فعال کردن تمهای معمول در ووکامرس و جایگزینی با اسکریپت های خود است.
در نسخه ۳٫۳+، گالری به طور پیش فرض برای تم های سازگار با ووکامرس خاموش است، مگر اینکه آنها حمایت از آن را اعلام کنند (در زیر).
برای فعال کردن گالری در تم خود، شما می توانید پشتیبانی را به صورت زیر اعلام کنید:
add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-slider' );
لازم نیست که شما از تمام ۳ قسمت گالری پشتیبانی کنید، شما میتوانید هر کدام از ویژگی ها را انتخاب و اعمال کنید. اگر یک ویژگی فعال نیست، به این معنی است که اسکریپت ها بارگذاری نمیشوند و کد گالری در صفحات محصول اجرا نخواهد شد.
remove_theme_support( 'wc-product-gallery-zoom' ); remove_theme_support( 'wc-product-gallery-lightbox' ); remove_theme_support( 'wc-product-gallery-slider' );
امیدوارم که این مقاله به شما کمک کند و از این به بعد بتوانید به راحتی تغییرات لازم را در سیستم ووکامرس خود انجام دهید با نظرات خود به ما کمک کنید که مطالب را به صورت بهینهتری منتشر کنیم تا همۀ کاربرانی که به دنبال حل مشکلاتشان در حوزۀ طراحی سایت و ایجاد قالبهای وردپرس هستند، بتوانند از این راهکارها به بهترین نحو استفاده کنند. از این که تا پایان این مقاله با من همراه بودید از شما متشکرم.
دیدگاهتان را بنویسید