WordPress Teması Nasıl Yapılır WooCommerce Hazır

WordPress Temanızı WooCommerce'ı Tezler ile Uyumlu Hale Getirin

Yani temanıza bir dükkan eklemek istiyorsunuz – harika! WooCommerce mükemmel bir seçimdir. Teknik olarak konuşan HERŞEY temalar “WooCommerce Uyumlu” çünkü bir eklenti. Teoride, herhangi bir eklenti herhangi bir WordPress temasıyla (düzgün kodlanmış) çalışmalıdır..


Bir tema geliştiricisi olarak, temanıza daha iyi uyum sağlamak veya WooCommerce ayarlarında (mağazadaki sütun sayısını değiştirmek gibi) mevcut olmayan son kullanıcılarınıza seçenekler sunmak 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..

Önemli: Aşağıdaki snippet’lerin çoğu yalnızca WooCommerce’da bulunan işlevleri kullanır. Bu nedenle, bu snippet’lerin dağıtım için oluşturulan bir temanın sadece function.php dosyanızın altına dökülmediğinden emin olun. Temanızı başkalarıyla paylaşacak veya satacaksanız, parçacıkları yalnızca WooCommerce eklentisi etkin olduğunda yüklenen kendi dosyalarına yerleştirdiğinizden emin olun..

WooCommerce’ın 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).

// WooCommerce etkinse true döndüren yeni sabit ekle
define ('WPEX_WOOCOMMERCE_ACTIVE', sınıf_existler ('WooCommerce'));

// WooCommerce'ın etkin olup olmadığını kontrol etme
eğer (WPEX_WOOCOMMERCE_ACTIVE) {
// Bir şey yap...
// Tüm Woo düzenlemelerinize yeni bir dosya eklemek gibi.
}

WooCommerce Desteği Bildirme

Bu, temanıza ekleyen ve WooCommerce desteğini “etkinleştiren” ve son kullanıcıya temanın uyumlu olmadığını bildiren eklentiden gelen uyarıları engelleyen ilk ve en önemli kod parçasıdır.

add_action ('after_setup_theme', işlev () {
add_theme_support ('woocommerce');
});

WooCommerce CSS’yi Kaldır

Şahsen, 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 çok kolay.

Aşağıdaki kod parçası TÜM WooCommerce stillerini kaldırmak içindir:

// Tüm Woo Stillerini Kaldır
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

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

işlev wpex_remove_woo_styles ($ styles) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
$ stilleri döndür;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

WooCommerce Ürün Galerisi, Yakınlaştırma ve Işık Kutusu’nu etkinleştirme (v3.0 +)

WooCommerce 3.0’da yeni bir ürün galerisi, yakınlaştırma ve ışık kutusu tanıttılar. Temanızda bunlardan yararlanmak istiyorsanız, bunların tümü “add_theme_support” yoluyla etkinleştirilmelidir..

add_theme_support ('wc-ürün-galeri-kaydırıcı');
add_theme_support ('wc-ürün-galeri-zoom');
add_theme_support ('wc-ürün-galeri-lightbox');

Dükkan Başlığını Kaldır

Birçok tema zaten arşiv başlıklarını görüntülemek için işlevlere sahiptir, bu nedenle bu kod WooCommerce’den ekstra başlığı kaldırır ve daha sonra CSS ile gizlenir..

add_filter ('woocommerce_show_page_title', '__return_false');

Dükkanın Arşiv Başlığını Değiştir

Temanız arşivlerinizin başlığını görüntülemek için archive_title () veya get_archive_title () işlevlerini kullanıyorsa, mağaza arşivi başlığı yerine ürün sayfanızın adını almak için filtre aracılığıyla kolayca değiştirebilirsiniz..

işlev wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('mağaza')) {
$ title = get_the_title ($ shop_id);
}
$ başlık;
}
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ştirme

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

// Sayfa başına Alter WooCommerce mağaza gönderileri
işlev wpex_woo_posts_per_page ($ cols) {
dönüş 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Dükkanda satır başına görüntülenen sütun sayısını değiştirme

WooCommerce’ın neden bu şekilde çalıştığını anlamıyorum, ancak yalnızca “loop_shop_columns” filtresini değiştiremezsiniz, ayrıca sütunların çalışması için gövde etiketine benzersiz sınıflar eklemeniz gerekir. Woo Shortcodes, mağaza sayfalarının sahip olmadığı doğru sınıflara sahip bir div sarmalayıcısına sahip olsa da, bu yüzden iki işleve ihtiyacımız var.

// Mağaza sütunlarını değiştirme
işlev wpex_woo_shop_columns ($ sütunlar) {
dönüş 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Mağaza sütunları için doğru gövde sınıfı ekle
işlev wpex_woo_shop_columns_body_class ($ classes) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ classes [] = 'sütun-4';
}
$ sınıfları;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

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

Bu snippet, mağazadaki sayfalandırma oklarını temanızdakilerle eşleşecek şekilde ayarlamanıza olanak tanır.

işlev wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
$ args döndür;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Satışta Rozet Metnini Değiştirme

Özellikle farklı bir dil kullanan sitelerde veya çok büyük bir hayranı olmadığım ünlem işaretini kaldırmak için yararlı.

işlev wpex_woo_sale_flash () {
dönüş ''. esc_html __ ('Satış', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Ürün Galerisi küçük resimleri sütunlarını değiştirme

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 olarak bunu yapar.

işlev wpex_woo_product_thumbnails_columns () {
dönüş 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

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

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.

// İlgili ürünleri 4 ürün görüntüleyecek şekilde ayarla
işlev wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
$ args döndür;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

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

Tıpkı mağaza gibi, tek ürün sayfalarında ilgili ve yukarı satış ürünleri için sütun sayısını düzgün bir şekilde değiştirmek istiyorsanız, sütunları filtrelemeniz ve ayrıca vücut sınıflarını buna göre değiştirmeniz gerekir.

// Sütunları yukarı satışa göre filtrele
işlev wpex_woo_single_loops_columns ($ sütunlar) {
dönüş 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// İlgili değişkenleri filtrele
işlev wpex_woo_related_columns ($ args) {
$ args ['sütunlar'] = 4;
$ args döndür;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Sütun sınıfı eklemek için gövde sınıflarını filtreleme
işlev wpex_woo_single_loops_columns_body_class ($ classes) {
if (is_singular ('ürün')) {
$ classes [] = 'sütun-4';
}
$ sınıfları;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

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

Bu snippet, menünüze sepetinizdeki öğelerin maliyetini gösteren bir WooCommerce sepeti öğesi ekleyecektir. Ayrıca, sitenizde Font-Awesome özelliği etkinse, küçük bir alışveriş çantası simgesi görüntüler. Önemli: Bu işlevler is_admin () koşulunda 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.

// Alışveriş sepeti bağlantısını menüye ekle
işlev wpex_add_menu_cart_item_to_menus ($ item, $ args) {

// 'wpex_main' değişikliğinin Menü konumunuzda olduğundan emin olun !!!!
if ($ args-> theme_location === 'wpex_main') {

$ css_class = 'menü öğesi öğe-öğe-türü-sepeti menü-öğe-tipi-woocommerce-cart';

if (is_cart ()) {
$ css_class. = 'geçerli menü öğesi';
}

$ ürün. = '
  • '; $ ürün. = wpex_menu_cart_item (); $ ürün. = '
  • '; } $ ürün iade; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // İşlev, ana menü sepeti bağlantısını döndürür işlev wpex_menu_cart_item () { $ output = ''; $ cart_count = WC () -> araba-> cart_contents_count; $ css_class = 'wpex-menü-sepeti-toplam wpex-sepeti-toplam-'. aralık ($ cart_count); eğer ($ cart_count) { $ url = WC () -> araba-> get_cart_url (); } Başka { $ url = wc_get_page_permalink ('mağaza'); } $ html = $ cart_extra = WC () -> araba-> get_cart_total (); $ html = str_replace ('miktar', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; $ çıktısı; } // Sepet bağlantısını AJAX ile güncelle işlev wpex_main_menu_cart_link_fragments ($ fragments) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); $ fragmanları döndür; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Sonuç

    WooCommerce varsayılan olarak herhangi bir tema ile çalışacaktı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 ayarların çoğu temamıza dahil edildi. Ya da her şeyin nasıl yapıldığına bakmak için temayı satın almayı tercih ediyorsanız (wpex-new-york / inc / woocommerce’deki dosyalara bakın) – düzgün bir şekilde nasıl ekleyeceğinizi öğrenmenin daha kolay bir yolu olabilir zaten kodlanmış bir temaya bakarak WooCommerce eklentisi için özel destek.

    Bu listeye ait olduğunu düşündüğünüz başka snippet’ler var mı veya yeni WooCommerce’ye hazır temalar geliştirirken faydalı bulabilirsiniz?

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