Bir WordPress Teması Nasıl Hazırlanır?

Yani temanıza bir mağaza eklemek istiyorsunuz – harika! WooCommerce harika bir seçimdir. Teknik olarak konuşursak, TÜM temalar bir eklenti olduğu için “WooCommerce Uyumludur”. Teoride, herhangi bir eklenti herhangi bir WordPress temasıyla (doğru şekilde kodlanmış) çalışmalıdır.

Bir tema geliştiricisi olarak, temanıza daha iyi uyması veya son kullanıcılarınıza WooCommerce ayarlarında kolayca bulunmayan seçenekler (mağazadaki sütun sayısını değiştirmek gibi) sağlamak için WooCommerce çıktısını değiştirmek isteyebilirsiniz. Aşağıda, temanızda WooCommerce için "daha iyi" destek sağlamak ve/veya özel tasarımınız için bazı şeyleri değiştirmek için kullanabileceğiniz bazı yararlı snippet'ler bulacaksınız.

WooCommerce'in Etkin olup olmadığını kontrol edin

Temalarımda, WooCommerce'in bu şekilde etkinleştirilip etkinleştirilmediğini kontrol etmek için kullanılabilecek özel bir sabit tanımlamayı seviyorum, yalnızca WooCommerce etkinken dosyaları ekleyebilir veya işlevleri çalıştırabilirim (henüz yapmadıysanız yukarıdaki önemli mesaja bakın).

 // Add new constant that returns true if WooCommerce is active define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) ); // Checking if WooCommerce is active if ( WPEX_WOOCOMMERCE_ACTIVE ) { // Do something... // Such as including a new file with all your Woo edits. }

WooCommerce Desteğini Bildirin

Bu, WooCommerce desteğini "etkinleştiren" ve eklentinin son kullanıcıya temanın uyumlu olmadığını söyleyen uyarılarını önleyen, temanıza eklenecek ilk ve en önemli kod parçasıdır.

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

WooCommerce CSS'yi Kaldır

Şahsen ben 3. taraf WooCommerce eklentileriyle ilgili olası sorunları önlemek için WooCommerce stillerini geçersiz kılmayı tercih ederim. Ancak, tüm WooCommerce stillerini kaldırmak istiyorsanız bu çok kolaydır.

Aşağıdaki snippet, TÜM WooCommerce stillerini kaldırmak içindir:

 // Remove all Woo Styles add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Bu snippet, belirli CSS stillerini koşullu olarak kaldırmanın bir örneğidir:

 function wpex_remove_woo_styles( $styles ) { unset( $styles['woocommerce-general'] ); unset( $styles['woocommerce-layout'] ); unset( $styles['woocommerce-smallscreen'] ); return $styles; } add_filter( 'woocommerce_enqueue_styles', 'wpex_remove_woo_styles' );

WooCommerce Ürün Galerisi, Yakınlaştırma ve Işık Kutusunu Etkinleştirin (v3.0+)

WooCommerce 3.0'da yeni bir ürün galerisi, yakınlaştırma ve ışık kutusu tanıttılar. Bunları temanızda kullanmak istiyorsanız, bunların tümü “add_theme_support” aracılığıyla etkinleştirilmelidir.

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

Mağaza Başlığını Kaldır

Pek çok temanın zaten arşiv başlıklarını görüntüleme işlevleri vardır, bu nedenle bu kod fazla başlığı WooCommerce'den kaldırır, bu da CSS ile gizlemekten daha iyidir.

 add_filter( 'woocommerce_show_page_title', '__return_false' );

Mağazanın Arşiv Başlığını Değiştir

Temanız, arşivlerinizin başlığını görüntülemek içinarchive_title() veya get_archive_title() işlevlerini kullanıyorsa, mağaza arşiv başlığı yerine ürün sayfanızın adını almak için bir filtre aracılığıyla kolayca ince ayar yapabilirsiniz.

 function wpex_woo_archive_title( $title ) { if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) { $title = get_the_title( $shop_id ); } return $title; } add_filter( 'get_the_archive_title', 'wpex_woo_archive_title' );

Mağazada sayfa başına görüntülenen ürün sayısını değiştirin

Mağazada ve ürün arşivlerinde (kategoriler ve etiketler) sayfa başına kaç ürünün görüntüleneceğini değiştirmek için kullanılır.

 // Alter WooCommerce shop posts per page function wpex_woo_posts_per_page( $cols ) { return 12; } add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' );

Her satırda mağazada görüntülenen sütun sayısını değiştirin

WooCommerce'in neden bu şekilde çalıştığını anlamıyorum ama sadece 'loop_shop_columns' filtresini değiştiremezsiniz, sütunların çalışması için body etiketine benzersiz sınıfları da eklemelisiniz. Woo Kısa Kodları, mağaza sayfalarında bulunmayan doğru sınıflara sahip bir div sarmalayıcıya sahipken, bu yüzden iki işleve ihtiyacımız var.

 // Alter shop columns function wpex_woo_shop_columns( $columns ) { return 4; } add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' ); // Add correct body class for shop columns function wpex_woo_shop_columns_body_class( $classes ) { if ( is_shop() || is_product_category() || is_product_tag() ) { $classes[] = 'columns-4'; } return $classes; } add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' );

Sonraki ve Önceki Sayfalandırma Oklarını Değiştirin

Bu snippet, temanızdakilerle eşleşmesi için mağazadaki sayfalandırma oklarını değiştirmenize olanak tanır.

 function wpex_woo_pagination_args( $args ) { $args['prev_text'] = '<i class="fa fa-angle-left"></i>'; $args['next_text'] = '<i class="fa fa-angle-right"></i>'; return $args; } add_filter( 'woocommerce_pagination_args', 'wpex_woo_pagination_args' );

On Sale Rozet Metnini Değiştirin

Özellikle farklı bir dil kullanan sitelerde veya çok da hayranı olmadığım ünlem işaretini kaldırmak için kullanışlıdır.

 function wpex_woo_sale_flash() { return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>'; } add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Ürün Galerisi küçük resim sütunlarını değiştir

Düzeninize bağlı olarak tek ürün galerisi küçük resimleri için sütun sayısını değiştirmek isteyebilirsiniz ve bu işlev tam da bunu yapacaktır.

 function wpex_woo_product_thumbnails_columns() { return 4; } add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Görüntülenen ilgili ürünlerin sayısını değiştirin

Tek ürün sayfasında ilgili ürünler için görüntülenen ürün sayısını değiştirmek için kullanılır.

 // Set related products to display 4 products function wpex_woo_related_posts_per_page( $args ) { $args['posts_per_page'] = 4; return $args; } add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Ürünlerle ilgili ve yukarı satış bölümleri için satır başına sütun sayısını değiştirin

Mağazada olduğu gibi, tek ürün sayfalarındaki ilgili ve üst düzey ürünler için sütun sayısını uygun şekilde değiştirmek istiyorsanız, sütunları filtrelemeli ve gövde sınıflarını buna göre değiştirmelisiniz.

 // Filter up-sells columns function wpex_woo_single_loops_columns( $columns ) { return 4; } add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' ); // Filter related args function wpex_woo_related_columns( $args ) { $args['columns'] = 4; return $args; } add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 ); // Filter body classes to add column class function wpex_woo_single_loops_columns_body_class( $classes ) { if ( is_singular( 'product' ) ) { $classes[] = 'columns-4'; } return $classes; } add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Menünüze dinamik bir sepet bağlantısı ve alışveriş sepeti maliyeti ekleyin

Bu snippet, menünüze sepetinizdeki ürünlerin maliyetini gösteren bir WooCommerce alışveriş sepeti öğesi ekleyecektir. Ayrıca sitenizde Font-Awesome etkinse, küçük bir alışveriş çantası simgesi görüntülenecektir. Önemli : Bu işlevler bir is_admin() koşuluna sarılmamalıdır, çünkü maliyeti güncellemek için AJAX'a güvenirler, is_admin() doğru ve yanlış döndürdüğünde işlevlerin kullanılabilir olduğundan emin olmalısınız.

 // Add the cart link to menu function wpex_add_menu_cart_item_to_menus( $items, $args ) { // Make sure your change 'wpex_main' to your Menu location !!!! if ( $args->theme_location === 'wpex_main' ) { $css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart'; if ( is_cart() ) { $css_class .= ' current-menu-item'; } $items .= '<li class="' . esc_attr( $css_class ) . '">'; $items .= wpex_menu_cart_item(); $items .= '</li>'; } return $items; } add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 ); // Function returns the main menu cart link function 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(); } else { $url = wc_get_page_permalink( 'shop' ); } $html = $cart_extra = WC()->cart->get_cart_total(); $html = str_replace( 'amount', '', $html ); $output .= '<a href="'. esc_url( $url ) .'" class="' . esc_attr( $css_class ) . '">'; $output .= '<span class="fa fa-shopping-bag"></span>'; $output .= wp_kses_post( $html ); $output .= '</a>'; return $output; } // Update cart link with AJAX function wpex_main_menu_cart_link_fragments( $fragments ) { $fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item(); return $fragments; } add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' );

Çözüm

WooCommerce varsayılan olarak herhangi bir temayla çalışır, ancak temanıza daha iyi uyması için eklenti için bazı ekstra destek eklemek çok kolaydır. Aslında bu yazıyı New York WordPress Blog & Shop temamızı kodlarken yazdım, bu yüzden bu tweaks'lerin çoğu temamıza dahil edildi. Veya her şeyin nasıl yapıldığına bir göz atmak için temayı satın almayı tercih ederseniz (wpex-new-york/inc/woocommerce adresindeki dosyalara bakın) – bu, nasıl düzgün şekilde ekleyeceğinizi öğrenmeniz için daha kolay bir yol olabilir. Önceden kodlanmış bir temaya bakarak WooCommerce eklentisi için özel destek.

Bu listeye ait olduğunu düşündüğünüz veya yeni WooCommerce için hazır temalar geliştirirken yardımcı olacağını düşündüğünüz başka parçacıklar var mı?