نحوه ساخت قالب وردپرس WooCommerce آماده است

موضوع وردپرس خود را WooCommerce با تکه های مفید مفید سازگار کنید

بنابراین می خواهید یک مغازه به موضوع خود اضافه کنید – عالی! WooCommerce یک انتخاب عالی است. از نظر فنی همه مضامین “WooCommerce سازگار” است زیرا این افزونه است. در تئوری ، هر افزونه باید با هر موضوع WordPress (که به طور صحیح کدگذاری شده است) کار کند..


به عنوان یک توسعه دهنده تم اگرچه ممکن است بخواهید خروجی WooCommerce را بهینه تر کنید تا موضوع شما متناسب تر باشد یا گزینه هایی را برای کاربران نهایی ارائه دهد که به راحتی در تنظیمات WooCommerce در دسترس نباشند (مانند تغییر تعداد ستون های فروشگاه). در زیر چند قطعه مفید را مشاهده می کنید که می توانید از آنها برای ارائه پشتیبانی بهتر “WooCommerce” در موضوع خود و / یا تغییر موارد برای طراحی خاص خود استفاده کنید..

مهم: بسیاری از قطعه های زیر از توابع موجود فقط در WooCommerce استفاده می کنند. بنابراین اطمینان حاصل کنید که این قطعه ها فقط در انتهای پرونده توابع.php شما در یک موضوع ایجاد شده برای توزیع ریخته نشده اند. اگر می خواهید موضوع خود را با دیگران به اشتراک بگذارید یا بفروشید ، مطمئن شوید که قطعات را فقط در صورت فعال بودن افزونه WooCommerce در پرونده خود بارگذاری کرده اید..

بررسی کنید آیا WooCommerce فعال است یا خیر

در مضامین من می خواهم یک ثابت سفارشی را تعریف کنم که می تواند مورد استفاده قرار گیرد تا بررسی شود آیا WooCommerce فعال است از این طریق می توانم پرونده ها را وارد کنم یا فقط توابع WooCommerce را فعال کنید (اگر هنوز این کار را نکرده اید) پیام مهم را در بالا مشاهده کنید..

// ثابت جدید را اضافه کنید که در صورت فعال بودن WooCommerce درست است
تعریف ("WPEX_WOOCOMMERCE_ACTIVE" ، class_exists ("WooCommerce"))؛

// بررسی میزان فعال بودن WooCommerce
اگر (WPEX_WOOCOMMERCE_ACTIVE)
// کاری بکنید...
// مانند افزودن یک پرونده جدید با تمام ویرایشهای Woo.
}

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

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

add_action ('after_setup_theme' ، عملکرد ()
add_theme_support ('woocommerce')؛
})؛

WooCommerce CSS را حذف کنید

من شخصاً ترجیح می دهم سبک های WooCommerce را نادیده بگیرم تا از بروز مشکلات احتمالی با افزونه های WooCommerce شخص ثالث جلوگیری کنم با این حال ، اگر می خواهید تمام سبک های WooCommerce را حذف کنید ، بسیار آسان است.

قطعه زیر برای از بین بردن ALL سبک های WooCommerce است:

// حذف کلیه سبکهای Woo
add_filter ('woocommerce_enqueue_styles'، '__return_empty_array')؛

این قطعه نمونه ای از حذف شرط های خاص CSS است:

عملکرد wpex_remove_woo_styles ($ سبک)
unset ($ سبک ['woocommerce-General'])؛
تنظیم نشده است ($ سبک ['woocommerce-طرح'])؛
unset ($ سبک ['woocommerce-smallscreen'])؛
استایل $ را برگردانید.
}
add_filter ('woocommerce_enqueue_styles'، 'wpex_remove_woo_styles')؛

فعال کردن گالری محصولات WooCommerce ، بزرگنمایی و جعبه نور (v3.0 +)

در WooCommerce 3.0 آنها یک گالری محصول جدید ، زوم و سبد را معرفی کردند. اگر می خواهید در موضوع خود از آنها استفاده کنید ، همه این موارد باید از طریق “add_theme_support” فعال شوند.

add_theme_support ('wc-product-gallery-slider')؛
add_theme_support ('wc-product-gallery-zoom')؛
add_theme_support ('wc-product-gallery-lightbox')؛

عنوان فروشگاه را حذف کنید

بسیاری از مضامین در حال حاضر وظایفی برای نمایش عناوین بایگانی دارند بنابراین این کد عنوان اضافی را از WooCommerce حذف می کند که بهتر است آن را از طریق CSS مخفی کنید..

add_filter ('woocommerce_show_page_title'، '__return_false')؛

عنوان بایگانی فروشگاه را تغییر دهید

اگر مضمون شما از توابع archive_title () یا get_archive_title () برای نمایش عنوان برای بایگانی خود استفاده می کند ، می توانید به راحتی آن را از طریق یک فیلتر تنظیم کنید تا به جای عنوان بایگانی فروشگاه ، نام صفحه محصول خود را بگیرید..

عملکرد wpex_woo_archive_title (عنوان $) {
if (is_shop () && $ shop_id = wc_get_page_id ('فروشگاه')) {
$ title = get_the_title ($ shop_id)؛
}
عنوان $ را برگردانید
}
add_filter ('get_the_archive_title'، 'wpex_woo_archive_title')؛

تعداد محصولات نمایش داده شده در هر صفحه را در مغازه تغییر دهید

استفاده می شود برای تغییر تعداد محصولات در هر صفحه در بایگانی فروشگاه و محصولات (دسته ها و برچسب ها).

// پست های فروشگاه Alter WooCommerce در هر صفحه
عملکرد wpex_woo_posts_per_page ($ cols) {
بازگشت 12؛
}
add_filter ('loop_shop_per_page'، 'wpex_woo_posts_per_page')؛

تعداد ستون های نمایش داده شده در مغازه را در هر سطر تغییر دهید

من نمی فهمم چرا WooCommerce به این روش کار می کند ، اما شما نمی توانید فیلتر ‘loop_shop_columns ‘را تغییر دهید ، همچنین باید کلاس های منحصر به فرد را بر روی برچسب بدنه اضافه کنید تا ستون ها کار کنند. در حالی که کد کوتاه وو دارای یک بسته بندی تقسیم شده با کلاس های صحیح است اما صفحات فروشگاه چنین نمی کنند ، به همین دلیل ما به دو عملکرد نیاز داریم.

// ستون های فروشگاه Alter
عملکرد wpex_woo_shop_columns ($ ستون) {
بازگشت 4؛
}
add_filter ('loop_shop_columns'، 'wpex_woo_shop_columns')؛

// اضافه کردن کلاس صحیح بدن برای ستون های فروشگاه
عملکرد wpex_woo_shop_columns_body_class ($ کلاس) {
if (is_shop () || is_product_categor () || is_product_tag ()) {
$ کلاس [] = 'ستون -4'؛
}
کلاسهای $ را برگردانید
}
add_filter ('body_class'، 'wpex_woo_shop_columns_body_class')؛

پیکان های بعدی و قبلی پیج را تغییر دهید

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

عملکرد wpex_woo_pagination_args ($ آرگومان)
$ args ['prev_text'] = ''؛
$ args ['next_text'] = ''؛
$ args بازگشت؛
}
add_filter ('woocommerce_pagination_args' ، 'wpex_woo_pagination_args')؛

متن نشان نشان OnSale را تغییر دهید

مخصوصاً در سایتهایی که از زبان دیگری استفاده می کنند یا برای حذف علامت تعجب که من طرفدار زیادی ندارم مفید است.

عملکرد wpex_woo_sale_flash ()
برگشت '" esc_html __ ("فروش" ، "تجارت جهانی"). "'؛
}
add_filter ('woocommerce_sale_flash' ، 'wpex_woo_sale_flash')؛

ستون های ریز عکسها را در گالری محصولات تغییر دهید

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

عملکرد wpex_woo_product_thumbnails_columns ()
بازگشت 4؛
}
add_action ('woocommerce_product_thumbnails_columns'، 'wpex_woo_product_thumbnails_columns')؛

تعداد محصولات مرتبط نمایش داده شده را تغییر دهید

استفاده می شود برای تغییر تعداد محصولات نمایش داده شده برای محصولات مرتبط در صفحه محصول واحد.

// تنظیم محصولات مرتبط برای نمایش 4 محصول
عملکرد wpex_woo_related_posts_per_page ($ آرگومان) {
$ args ['posts_per_page'] = 4؛
$ args بازگشت؛
}
add_filter ('woocommerce_output_related_products_args'، 'wpex_woo_related_posts_per_page')؛

تعداد ستون ها در هر سطر را برای بخش های مرتبط و به فروش بر روی محصولات تغییر دهید

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

// ستونهای فروش بالا را فیلتر کنید
عملکرد wpex_woo_single_loops_columns ($ ستون) {
بازگشت 4؛
}
add_filter ('woocommerce_up_sells_columns' ، 'wpex_woo_single_loops_columns')؛

// بحث های مربوط به فیلتر
عملکرد wpex_woo_related_columns ($ آرگومان)
$ args ['ستون'] = 4؛
$ args بازگشت؛
}
add_filter ('woocommerce_output_related_products_args'، 'wpex_woo_related_columns'، 10)؛

// کلاس های بدنه را برای افزودن کلاس ستون فیلتر کنید
عملکرد wpex_woo_single_loops_columns_body_class ($ کلاس) {
if (is_singular ("محصول")) {
$ کلاس [] = 'ستون -4'؛
}
کلاسهای $ را برگردانید
}
add_filter ('body_class'، 'wpex_woo_single_loops_columns_body_class')؛

پیوند سبد خرید و هزینه سبد خرید را به منوی خود اضافه کنید

این قطعه یک مورد سبد WooCommerce را به منوی شما اضافه می کند که هزینه کالاهای موجود در سبد خرید شما را نشان می دهد. به علاوه اگر سایت شما دارای Font-Awesome فعال باشد ، نمادی از کیسه خرید کوچک نمایش داده می شود. مهم: این توابع نباید به صورت مشروط is_admin () پیچیده شوند زیرا به AJAX تکیه می کنند تا هزینه خود را به روز کنید ، باید اطمینان حاصل کنید که عملکردها در صورت بازگشت__ (ad_admin) صحیح و نادرست در دسترس هستند..

// پیوند سبد خرید را به منو اضافه کنید
تابع wpex_add_menu_cart_item_to_menus ($ مورد ، $ استدلال) {

// اطمینان حاصل کنید که تغییر "wpex_main" خود را به مکان منو دهید !!!!
if ($ args-> theme_location === 'wpex_main') {

$ css_class = 'menu-item menu-item-type-menu-menu-item-type-woocommerce-cart'؛

if (is_cart ())
$ css_class. = 'آیتم فعلی-منو'؛
}

$ اقلام. = '
  • '؛ $ اقلام. = wpex_menu_cart_item ()؛ $ اقلام. = '
  • '؛ } بازگشت $ اقلام؛ } add_filter ('wp_nav_menu_items'، 'wpex_add_menu_cart_item_to_menus'، 10، 2)؛ // عملکرد لینک اصلی سبد خرید منو را برمی گرداند عملکرد wpex_menu_cart_item () $ output = ''؛ $ cart_count = WC () -> cart-> cart_contents_count؛ $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval ($ cart_count)؛ if ($ cart_count) { $ url = WC () -> cart-> get_cart_url ()؛ } دیگه $ url = wc_get_page_permalink ('فروشگاه')؛ } $ html = $ cart_extra = WC () -> cart-> get_cart_total ()؛ $ html = str_replace ('مقدار'، ''، $ html)؛ $ خروجی. = ''؛ $ خروجی. = ''؛ $ خروجی. = wp_kses_post ($ html)؛ $ خروجی. = ''؛ بازده $ بازده؛ } // لینک سبد خرید را با AJAX به روز کنید عملکرد wpex_main_menu_cart_link_fragments ($ $) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item ()؛ قطعات $ را برگردانید. } add_filter ('add_to_cart_fragments'، 'wpex_main_menu_cart_link_fragments')؛

    نتیجه

    WooCommerce بصورت پیش فرض با هر موضوعی کار خواهد کرد اما اضافه کردن برخی پشتیبانی اضافی برای این افزونه به گونه ای که بهتر متناسب با موضوع شما بسیار آسان است. من در واقع این مطلب را نوشتم در حالی که برنامه نویسی وبلاگ و فروشگاه WordPress در نیویورک را کدنویسی کرده است ، بنابراین بیشتر این ترفندها در موضوع ما گنجانده شده است. یا اگر ترجیح می دهید این موضوع را خریداری کنید تا نگاهی به نحوه انجام همه کارها بیندازید (به پرونده های wpex-new-york / inc / woocommerce مراجعه کنید) – ممکن است روشی آسان تر برای شما باشد که یاد بگیرید چگونه به درستی اضافه کنید پشتیبانی سفارشی برای افزونه WooCommerce با نگاه کردن به یک موضوع از قبل کدگذاری شده.

    آیا قطعه های دیگری که فکر می کنید در این لیست قرار دارند وجود دارد یا می توانید هنگام تهیه مضامین جدید WooCommerce جدید ، مفید واقع شوید.?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map