วิธีการสร้างธีม WordPress พร้อม WooCommerce

ทำให้ธีม WordPress ของคุณ WooCommerce เข้ากันได้กับตัวอย่างที่เป็นประโยชน์

ดังนั้นคุณต้องการเพิ่มร้านค้าในธีมของคุณ – ยอดเยี่ยม! WooCommerce เป็นตัวเลือกที่ยอดเยี่ยม พูดในทางเทคนิค ทั้งหมด ชุดรูปแบบคือ “รองรับ WooCommerce” เพราะเป็นปลั๊กอิน ในทางทฤษฎีปลั๊กอินใด ๆ ควรทำงานกับชุดรูปแบบ WordPress ใด ๆ.


ในฐานะนักพัฒนาธีมแม้ว่าคุณอาจต้องการปรับแต่งเอาท์พุทของ WooCommerce ให้เหมาะกับธีมของคุณหรือให้ตัวเลือกแก่ผู้ใช้ปลายทางที่ไม่พร้อมใช้งานในการตั้งค่า WooCommerce (เช่นการเปลี่ยนจำนวนคอลัมน์ในร้านค้า) ด้านล่างคุณจะพบตัวอย่างข้อมูลที่เป็นประโยชน์ที่คุณสามารถใช้เพื่อให้การสนับสนุน “ดีกว่า” สำหรับ WooCommerce ในชุดรูปแบบของคุณและ / หรือแก้ไขสิ่งต่าง ๆ สำหรับการออกแบบเฉพาะของคุณ.

สิ่งสำคัญ: ตัวอย่างข้อมูลด้านล่างจำนวนมากใช้ฟังก์ชั่นที่มีอยู่ใน WooCommerce เท่านั้น ดังนั้นตรวจสอบให้แน่ใจว่าตัวอย่างเหล่านี้ไม่ได้ถูกทิ้งไว้ที่ด้านล่างของไฟล์ functions.php ของคุณในรูปแบบที่สร้างขึ้นเพื่อการแจกจ่าย หากคุณจะแชร์ธีมของคุณกับคนอื่น ๆ หรือขายให้แน่ใจว่าได้วางตัวอย่างในไฟล์ของตัวเองโหลดเฉพาะเมื่อปลั๊กอิน WooCommerce เปิดใช้งาน.

Contents

ตรวจสอบว่าเปิดใช้งาน WooCommerce หรือไม่

ในชุดรูปแบบของฉันฉันต้องการกำหนดค่าคงที่แบบกำหนดเองที่สามารถใช้เพื่อตรวจสอบว่า WooCommerce เปิดใช้งานด้วยวิธีนี้ฉันสามารถรวมไฟล์หรือเรียกใช้ฟังก์ชันเมื่อ WooCommerce เปิดใช้งานอยู่ (ดูข้อความสำคัญด้านบนหากคุณยังไม่ได้).

// เพิ่มค่าคงที่ใหม่ที่คืนค่าจริงถ้า WooCommerce เปิดใช้งาน
define ('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 ทั้งหมดมันเป็นเรื่องง่ายมาก.

ตัวอย่างต่อไปนี้สำหรับการลบสไตล์ WooCommerce ทั้งหมด:

// ลบ Woo Styles ทั้งหมด
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

ตัวอย่างนี้เป็นตัวอย่างของการลบสไตล์ CSS เฉพาะตามเงื่อนไข:

ฟังก์ชั่น wpex_remove_woo_styles ($ styles) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
คืนค่าลักษณะ $;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

เปิดใช้งานแกลเลอรีผลิตภัณฑ์ WooCommerce-Zoom & Lightbox (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 ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('shop')) {
$ 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 ’ได้คุณต้องเพิ่มคลาสที่ไม่ซ้ำใครลงในแท็ก body เพื่อให้คอลัมน์ทำงาน ในขณะที่รหัสย่อของ Woo มีตัวห่อ div ที่มีคลาสที่ถูกต้องที่หน้าร้านไม่ได้นั่นคือเหตุผลที่เราต้องใช้สองฟังก์ชัน.

// เปลี่ยนคอลัมน์ร้านค้า
ฟังก์ชั่น 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_category () || is_product_tag ()) {
$ class [] = 'columns-4';
}
ส่งคืนคลาส $;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

เปลี่ยนลูกศรการแบ่งหน้าถัดไป & ก่อนหน้า

ตัวอย่างนี้จะช่วยให้คุณปรับแต่งลูกศรแบ่งหน้าในร้านค้าเพื่อจับคู่กับชุดรูปแบบของคุณ.

ฟังก์ชัน wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
ส่งคืน args $;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

เปลี่ยนข้อความตราสัญลักษณ์การขาย

มีประโยชน์อย่างยิ่งในเว็บไซต์ที่ใช้ภาษาอื่นหรือเพื่อลบเครื่องหมายอัศเจรีย์ที่ฉันไม่ใช่แฟนตัวยงของ.

ฟังก์ชัน wpex_woo_sale_flash () {
กลับ '' esc_html __ ('ลดราคา', 'woocommerce') '';
}
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) {
$ 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');

// args ตัวกรองที่เกี่ยวข้อง
ฟังก์ชัน wpex_woo_related_columns ($ args) {
$ args ['column'] = 4;
ส่งคืน args $;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// กรองคลาสร่างกายเพื่อเพิ่มคลาสคอลัมน์
ฟังก์ชั่น wpex_woo_single_loops_columns_body_class ($ คลาส) {
ถ้า (is_singular ('ผลิตภัณฑ์')) {
$ class [] = 'columns-4';
}
ส่งคืนคลาส $;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

เพิ่มลิงก์รถเข็นแบบไดนามิกและค่าใช้จ่ายรถเข็นลงในเมนูของคุณ

ตัวอย่างนี้จะเพิ่มรายการรถเข็น WooCommerce ลงในเมนูของคุณที่แสดงต้นทุนของรายการในรถเข็นของคุณ รวมทั้งถ้าไซต์ของคุณเปิดใช้งาน Font-Awesome มันจะแสดงไอคอนกระเป๋าช็อปปิ้งเล็ก ๆ. สิ่งสำคัญ: ฟังก์ชั่นเหล่านี้จะต้องไม่ถูกห่อหุ้มใน is_admin () ตามเงื่อนไขเพราะพวกเขาพึ่งพา AJAX เพื่ออัปเดตค่าใช้จ่ายคุณต้องแน่ใจว่าฟังก์ชั่นนั้นใช้ได้เมื่อ is_admin () ส่งคืนจริงและเท็จ.

// เพิ่มลิงค์รถเข็นไปที่เมนู
ฟังก์ชั่น wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงของคุณ 'wpex_main' เป็นตำแหน่งเมนูของคุณ !!!!
if ($ args-> theme_location === 'wpex_main') {

$ css_class = 'เมนูไอเท็มเมนู - ไอเท็มประเภทรถเข็นเมนู - ไอเท็มประเภท - woocommerce-cart';

if (is_cart ()) {
$ css_class. = 'เมนูรายการปัจจุบัน';
}

$ items. = '
  • '; $ items. = wpex_menu_cart_item (); $ items. = '
  • '; } ส่งคืน $ items; } 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); ถ้า ($ cart_count) { $ url = WC () -> cart-> get_cart_url (); } อื่น { $ url = wc_get_page_permalink ('shop'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('จำนวน', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; ผลตอบแทน $ เอาท์พุท; } // อัปเดตลิงก์รถเข็นด้วย 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 & Shop New York ของเราดังนั้นการปรับแต่งเหล่านี้ส่วนใหญ่จะรวมอยู่ในชุดรูปแบบของเรา หรือถ้าคุณต้องการคุณสามารถซื้อชุดรูปแบบเพื่อดูว่าทุกอย่างเสร็จสิ้นอย่างไร (ดูไฟล์ที่ 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