بررسی Css در ساختار ووکامرس

Css در ساختار ووکامرس

با سلام و عرض ادب خدمت شما؛
در ادامه بررسی و پژوهش های کاربردی در ووکامرس همراه شما هستیم! با اطلاعاتی در مورد پیکره کلی استایل بندی های ووکامرس، Css در ساختار ووکامرس و همچنین در مورد روش های استایل دهی در ووکامرس و استایل های پیشفرض آن گفت و گو خواهیم کرد. دوستان تا انتها همراه من باشید.

Css در ساختار ووکامرس

شما میتوانید به عنوان یک توسعه دهنده با باز کردن بخش assets/css/ در هاست خود در فولدر ووکامرس به فایل های استایل ووکامرس دسترسی داشته باشید. اما در این آموزش قرار است در مورد فایل های woocommerce.scss و woocommerce.css  صحبت کنیم.

1. woocommerce.css

این فایل یک فایل استایل فشرده سازی شده است! که در آن هیچ دکمه space استفاده نشده است. این مورد سبب میشود سرعت لود آن بسیار بالا باشد. این فایل اصلی ترین فایل Css در ساختار ووکامرس است که تمامی استایل های ووکامرس با آن درست شده و ایجاد شده است.

2. woocommerce.scss

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

این دو فایل به صورتی نوشته شده اند که با تمامی قالب های استاندارد ووکامرس هماهنگ باشند و بتوانند نیاز های کاربران را برآورده نمایند. این فایل ها به صورت کد نویسی شده است!! که حالت واکنش گرایی فروشگاه را حفظ نموده و در تمامی عرض صفحات نمایش به درستی عمل کند. البته که همیشه نمیتواند کامل باشد و همیشه کاربران میخواهند Css در ساختار ووکامرس را تغییر دهند اما به سلیقه خود.

البته در این میان توجه به نکته ای مهم بسیار ضروری است و آن هم این است که توصیه میشود این فایل را تغییر ندهید و ویرایش نکنید. چرا که در هنگام بروزرسانی ووکامرس تمامی تغییرات شما از بین خواهند رفت و بازگردانی هر باره آن ها بسیار سخت و بی دلیل است.

اما برای حل این مشکل روش های دیگری موجود است که بهترین روش آن استفاده از استایل های اصلی وردپرس است. همانند فایل rtl.css که میتوانید کد های تغییر یافته را در آن قرار دهید.

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

گاهی ممکن است شما از نظر برنامه نویسی css در جایگاه بالایی قرار داشته باشید و بخواهید استایل های خود را برای ووکامرس بنویسید! و اصلا نمیخواهید که ووکامرس از استایل های پیشفرض خود در ساختار ووکامرس css استفاده کند. برای این منظور نیاز است که به ووکامرس بگوئید که نباید استایل ها را از فایل های گفته شده بخواند و باید از فایلی که شما میخواهید خوانده شود.

برای این منظور میتوانید کد زیر را در فایل functions.php قالب خود قرار دهید:

// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] );    // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] );        // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
return $enqueue_styles;
}

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

با استفاده از کد بالا سایت شما استایل های ووکامرس را نمی خواند. حال شما این فرصت را دارید تا Css در ساختار ووکامرس دلخواه خود را به آن اعمال نمائید.

دلتون شاد!

 

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

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

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

دیدگاهتان را بنویسید

دوره‌های آموزشی