Πώς να κάνετε ένα θέμα WordPress έτοιμο για το WooCommerce

Κάντε το Θέμα WordPress σας WooCommerce συμβατό με αυτά τα χρήσιμα αποσπάσματα

Θέλετε λοιπόν να προσθέσετε ένα κατάστημα στο θέμα σας – φοβερό! Το WooCommerce είναι μια εξαιρετική επιλογή. Τεχνικά μιλώντας ΟΛΑ τα θέματα είναι “WooCommerce Compatible” επειδή είναι ένα πρόσθετο. Θεωρητικά, οποιοδήποτε πρόσθετο πρέπει να λειτουργεί με οποιοδήποτε θέμα WordPress (που κωδικοποιείται σωστά).


Ως προγραμματιστής θεμάτων, αν και ίσως θέλετε να τροποποιήσετε την έξοδο του WooCommerce για να ταιριάζει καλύτερα στο θέμα σας ή να παρέχετε επιλογές στους τελικούς χρήστες σας που δεν είναι άμεσα διαθέσιμες στις ρυθμίσεις του WooCommerce (όπως αλλαγή του αριθμού των στηλών στο κατάστημα). Παρακάτω θα βρείτε μερικά χρήσιμα αποσπάσματα που μπορείτε να χρησιμοποιήσετε για να παρέχετε «καλύτερη» υποστήριξη για το WooCommerce στο θέμα σας και / ή για να αλλάξετε τα πράγματα για το συγκεκριμένο σχέδιό σας.

Σπουδαίος: Πολλά από τα παρακάτω αποσπάσματα χρησιμοποιούν λειτουργίες που διατίθενται μόνο στο WooCommerce. Γι ‘αυτό, βεβαιωθείτε ότι αυτά τα αποσπάσματα δεν απλώς απορρίπτονται στο κάτω μέρος του αρχείου functions.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, είναι πολύ εύκολο.

Το παρακάτω απόσπασμα προορίζεται για την κατάργηση ΟΛΩΝ των στυλ WooCommerce:

// Καταργήστε όλα τα στυλ Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Αυτό το απόσπασμα είναι ένα παράδειγμα κατάργησης υπό όρους συγκεκριμένων στυλ CSS:

συνάρτηση wpex_remove_woo_styles ($ στιλ) {
unset ($ στυλ ['woocommerce-general']);
unset ($ στιλ ['woocommerce-layout']);
unset ($ στιλ ['woocommerce-smallscreen']);
επιστροφή στυλ $;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Ενεργοποίηση WooCommerce Product Gallery, Zoom & Lightbox (v3.0 +)

Στο WooCommerce 3.0 εισήγαγαν μια νέα συλλογή προϊόντων, ζουμ και lightbox. Όλα αυτά πρέπει να ενεργοποιηθούν μέσω του “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');

Alter The Αρχείο Τίτλος για το κατάστημα

Εάν το θέμα σας χρησιμοποιεί τις λειτουργίες archive_title () ή get_archive_title () για την εμφάνιση του τίτλου για τα αρχεία σας, μπορείτε εύκολα να το τροποποιήσετε μέσω ενός φίλτρου για να τραβήξετε το όνομα της σελίδας του προϊόντος σας αντί για τον τίτλο του αρχείου καταστήματος.

συνάρτηση wpex_woo_archive_title ($ title) {
εάν (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”, πρέπει επίσης να προσθέσετε τις μοναδικές τάξεις στην ετικέτα σώματος για να λειτουργούν οι στήλες. Ενώ οι συντομεύσεις Woo έχουν ένα περιτύλιγμα div με τις σωστές τάξεις που δεν κάνουν οι σελίδες καταστημάτων, γι ‘αυτό χρειαζόμαστε δύο λειτουργίες.

// Αλλάξτε στήλες καταστημάτων
συνάρτηση wpex_woo_shop_columns ($ στήλες) {
επιστροφή 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Προσθέστε σωστή κλάση σώματος για στήλες καταστήματος
συνάρτηση wpex_woo_shop_columns_body_class ($ class) {
εάν (is_shop () || is_product_category () || is_product_tag ()) {
$ class [] = 'στήλες-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 ($ class) {
εάν (is_singular ('product')) {
$ class [] = 'στήλες-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 ($ item, $ args) {

// Βεβαιωθείτε ότι έχετε αλλάξει 'wpex_main' στην τοποθεσία του μενού σας !!!!
εάν ($ args-> theme_location === 'wpex_main') {

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

αν (is_cart ()) {
$ css_class. = 'current-menu-item';
}

αντικείμενα $. = '
  • "; $ item. = 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-> cart_contents_count; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. ενδιάμεσο ($ 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); έξοδος $. = '"; έξοδος $. = '"; $ output. = wp_kses_post ($ html); έξοδος $. = '"; επιστροφή εξόδου $; } // Ενημέρωση συνδέσμου καλαθιού με AJAX συνάρτηση wpex_main_menu_cart_link_fragments ($ fragments) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); επιστροφή θραυσμάτων $; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    συμπέρασμα

    Το WooCommerce θα λειτουργεί με οποιοδήποτε θέμα από προεπιλογή, αλλά προσθέτοντας κάποια επιπλέον υποστήριξη για την προσθήκη, έτσι ώστε να ταιριάζει καλύτερα στο θέμα σας, είναι πολύ εύκολο να το κάνετε. Στην πραγματικότητα έγραψα αυτήν την ανάρτηση ενώ κωδικοποιούσαμε το θέμα του Blog & Shop του New York WordPress, έτσι ώστε τα περισσότερα από αυτά τα tweaks να περιλαμβάνονται στο θέμα μας Ή αν προτιμάτε, μπορείτε να αγοράσετε το θέμα για να ρίξετε μια ματιά στον τρόπο με τον οποίο όλα έγιναν (δείτε τα αρχεία στο 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