वर्डप्रेस थीम WooCommerce कैसे तैयार करें

अपने वर्डप्रेस थीम WooCommerce बनाओ Theses सहायक स्निपेट्स के साथ संगत

तो आप अपने विषय में एक दुकान जोड़ना चाहते हैं – कमाल! WooCommerce एक बढ़िया विकल्प है। तकनीकी रूप से बोल रहा हूं सब थीम “WooCommerce संगत” हैं क्योंकि यह एक प्लगइन है। सिद्धांत रूप में किसी भी प्लगइन को किसी भी वर्डप्रेस थीम के साथ काम करना चाहिए (जो ठीक से कोडित है).


एक थीम डेवलपर के रूप में यद्यपि आप अपने विषय को बेहतर ढंग से फिट करने के लिए या अपने संभावित उपयोगकर्ताओं को WooCommerce सेटिंग्स में आसानी से उपलब्ध नहीं होने के लिए (जैसे दुकान पर कॉलम की संख्या में बदलाव) करने के लिए WooCommerce के आउटपुट को ट्वीक करना चाहते हैं। नीचे आपको कुछ उपयोगी स्निपेट मिलेंगे जिनका उपयोग आप अपने विषय में WooCommerce के लिए “बेहतर” समर्थन प्रदान करने के लिए कर सकते हैं और / या अपने विशिष्ट डिजाइन के लिए चीजों को बदल सकते हैं।.

जरूरी: नीचे दिए गए स्निपेट्स में से कई केवल WooCommerce में उपलब्ध कार्यों का उपयोग करते हैं। इसलिए सुनिश्चित करें कि वितरण के लिए बनाई गई थीम में ये स्निपेट केवल आपके कार्य के तल पर डंप नहीं किए गए हैं। यदि आप दूसरों के साथ अपनी थीम साझा करने जा रहे हैं या इसे बेचना चाहते हैं तो स्निपेट को अपनी ही फाइल में लोड करना सुनिश्चित करें जब WooCommerce प्लगइन सक्रिय हो।.

Contents

जांचें कि क्या WooCommerce सक्षम है

मेरे विषयों में, मैं एक कस्टम स्थिरांक को परिभाषित करना पसंद करता हूं जिसका उपयोग यह जांचने के लिए किया जा सकता है कि क्या WooCommerce इस तरह से सक्षम है मैं फ़ाइलों को शामिल कर सकता हूं या फ़ंक्शन तभी चला सकता है जब WooCommerce सक्रिय हो (ऊपर महत्वपूर्ण संदेश देखें यदि आप अभी तक नहीं आए हैं).

// नया निरंतर जोड़ें जो WooCommerce सक्रिय होने पर सही लौटाता है
परिभाषित ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// यदि WooCommerce सक्रिय है तो जाँच करना
अगर (WPEX_WOOCOMMERCE_ACTIVE) {
// कुछ करो...
// जैसे कि आपके सभी वू संपादन के साथ एक नई फ़ाइल शामिल है.
}

WooCommerce समर्थन की घोषणा करें

यह आपके विषय में जोड़ने के लिए कोड का पहला और सबसे महत्वपूर्ण टुकड़ा है जो WooCommerce को “सक्षम” करता है और अंत उपयोगकर्ता को यह बताने से रोकता है कि थीम संगत नहीं है।.

add_action ('after_setup_theme', function () {
add_theme_support ('woocommerce');
};

WooCommerce CSS निकालें

व्यक्तिगत रूप से मैं 3 पार्टी WooCommerce प्लग इन के साथ किसी भी संभावित मुद्दों को रोकने के लिए WooCommerce शैलियों को ओवरराइड करता हूं। हालाँकि, यदि आप सभी WooCommerce शैलियों को निकालना चाहते हैं तो यह बहुत आसान है.

निम्नलिखित स्निपेट सभी WooCommerce शैलियों को हटाने के लिए है:

// सभी वू शैलियाँ निकालें
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

यह स्निपेट सशर्त रूप से विशिष्ट CSS शैलियों को हटाने का एक उदाहरण है:

फ़ंक्शन wpex_remove_woo_styles ($ शैलियाँ) {
unset ($ शैलियाँ ['woocommerce-general']);
अनसेट ($ शैलियों ['वूकोमर्स-लेआउट']);
अनसेट ($ शैलियों ['वूकोमर्स-स्मॉलस्क्रीन']);
$ शैलियों वापस;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

WooCommerce उत्पाद गैलरी, ज़ूम और लाइटबॉक्स (v3.0 +) सक्षम करें

WooCommerce 3.0 में उन्होंने एक नई उत्पाद गैलरी, ज़ूम और लाइटबॉक्स पेश किया। यदि आप अपनी थीम में इनका उपयोग करना चाहते हैं तो इन सभी को “add_theme_support” के माध्यम से सक्षम किया जाना चाहिए.

add_theme_support ('डब्ल्यूसी-उत्पाद-गैलरी-स्लाइडर');
add_theme_support ('wc-product-gallery-zoom');
add_theme_support ('डब्ल्यूसी-उत्पाद-गैलरी-लाइटबॉक्स');

दुकान का शीर्षक निकालें

बहुत सारे थीमों में पहले से ही आर्काइव शीर्षक प्रदर्शित करने के लिए फ़ंक्शन हैं, इसलिए यह कोड WooCommerce से अतिरिक्त शीर्षक को हटा देता है जो बेहतर है फिर इसे सीएसएस के माध्यम से छिपा देना.

add_filter ('woocommerce_show_page_title', '__return_false');

दुकान के लिए पुरालेख शीर्षक बदलो

यदि आपकी थीम आर्काइव_टिटेल () या get_archive_title () फ़ंक्शन का उपयोग कर अपने अभिलेखागार के लिए शीर्षक प्रदर्शित करने के लिए करती है, तो आप दुकान संग्रह शीर्षक के बजाय अपने उत्पाद पृष्ठ का नाम हथियाने के लिए फ़िल्टर के माध्यम से इसे आसानी से ट्विक कर सकते हैं।.

फ़ंक्शन wpex_woo_archive_title ($ शीर्षक) {
अगर (is_shop () && $ shop_id = wc_get_page_id ('shop')) {
$ शीर्षक = 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 इस तरह से क्यों काम करता है, लेकिन आप केवल t loop_shop_columns ‘फ़िल्टर को बदल नहीं सकते हैं, आपको स्तंभों के काम करने के लिए बॉडी टैग में अद्वितीय कक्षाएं भी शामिल करनी होंगी। जबकि वू शॉर्टकोड में सही वर्गों के साथ एक दिव्य आवरण होता है, जो दुकान के पृष्ठों में नहीं होता है, इसलिए हमें दो कार्यों की आवश्यकता होती है.

// आल्टर शॉप कॉलम
फ़ंक्शन 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 ()) {
$ कक्षाएं [] = 'कॉलम -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');

OnSale बैज पाठ बदलें

विभिन्न भाषाओं का उपयोग करने वाली साइटों पर विशेष रूप से उपयोगी या विस्मयादिबोधक चिह्न को हटाने के लिए जो मैं बहुत बड़ा प्रशंसक नहीं हूं.

फ़ंक्शन 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 ['कॉलम'] = 4;
वापसी $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// कॉलम क्लास जोड़ने के लिए बॉडी क्लासेस को फ़िल्टर करें
फ़ंक्शन wpex_woo_single_loops_columns_body_class ($ कक्षाएं) {
अगर (is_singular ('उत्पाद')) {
$ कक्षाएं [] = 'कॉलम -4';
}
$ कक्षाएं लौटाएं;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

अपने मेनू में एक डायनामिक कार्ट लिंक और कार्ट कॉस्ट जोड़ें

यह स्निपेट आपके मेनू में एक WooCommerce कार्ट आइटम जोड़ेगा जो आपकी कार्ट में आइटम की लागत प्रदर्शित करता है। साथ ही अगर आपकी साइट में Font-Awesome enable है तो यह थोड़ा शॉपिंग बैग आइकन प्रदर्शित करेगा. जरूरी: इन कार्यों को is_admin () सशर्त में लपेटा नहीं जाना चाहिए क्योंकि वे AJAX पर निर्भर करते हैं कि लागत को अपडेट करने के लिए आपको यह सुनिश्चित करना चाहिए कि फ़ंक्शन उपलब्ध हैं जब is_admin () सही और गलत रिटर्न देता है.

// मेनू में कार्ट लिंक जोड़ें
फ़ंक्शन wpex_add_menu_cart_item_to_menus ($ आइटम, $ args) {

// सुनिश्चित करें कि आपका परिवर्तन 'wpex_main' आपके मेनू स्थान पर है !!!!
अगर ($ args-> theme_location === 'wpex_main') {

$ css_class = 'मेनू-आइटम मेनू-आइटम-प्रकार-कार्ट मेनू-आइटम-प्रकार-वूकोमर्स-कार्ट';

अगर (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 () { $ आउटपुट = ''; $ cart_count = WC () -> कार्ट-> cart_contents_count; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'। intval ($ cart_count); अगर ($ cart_count) { $ url = WC () -> कार्ट-> get_cart_url (); } अन्य { $ url = wc_get_page_permalink ('shop'); } $ html = $ cart_extra = WC () -> कार्ट-> get_cart_total (); $ html = str_replace ('राशि', '', $ html); $ आउटपुट। = ''; $ आउटपुट। = ''; $ आउटपुट। = wp_kses_post ($ html); $ आउटपुट। = ''; $ आउटपुट लौटाएं; } // AJAX के साथ अपडेट कार्ट लिंक फ़ंक्शन wpex_main_menu_cart_link_fragments ($ टुकड़े) { $ टुकड़े ['। wpex- मेन्यू-कार्ट-कुल'] = wpex_menu_cart_item (); $ टुकड़े लौटाओ; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    निष्कर्ष

    WooCommerce डिफ़ॉल्ट रूप से किसी भी विषय के साथ काम करेगा लेकिन प्लगइन के लिए कुछ अतिरिक्त समर्थन जोड़ देगा ताकि यह आपके विषय को बेहतर ढंग से फिट कर सके। मैंने वास्तव में इस पोस्ट को हमारे न्यूयॉर्क वर्डप्रेस ब्लॉग और शॉप थीम को कोड करते हुए लिखा था, इसलिए इनमें से अधिकांश ट्विक हमारे विषय में शामिल हैं। या यदि आप चाहते हैं कि आप इस विषय पर नज़र रख सकें कि कैसे सब कुछ किया गया था (wpex-new-york / inc / woocommerce पर फ़ाइलें देखें) – यह आपके लिए सीखने का एक आसान तरीका हो सकता है कि कैसे ठीक से जोड़ना है WooCommerce प्लगइन के लिए कस्टम समर्थन पहले से ही कोडित विषय को देखकर.

    क्या कोई अन्य स्निपेट हैं जो आपको लगता है कि इस सूची में हैं या आपको नए WooCommerce- तैयार थीम विकसित करने में मदद मिलेगी?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me