Ev Özelleştirme Teması WooCommerce Shop [Ana Kılavuz]

Ev Özelleştirme Vekanın teması, tema WooCommerce vitrini ile inşa edilen her çevrimiçi mağazanın anahtarıdır. İyi bir tasarım, mağazanıza ziyaretçileri çeker, markanıza müşteri güvenini oluşturur ve sadık bir müşteriye dönüştürür. Bu öğreticide, arama motorunuzun optimizasyonunu geliştirmek için eşit derecede yararlı olan daha çekici hale getirmek ve genel olarak kullanıcı deneyimini geliştirmek için mağaza teması temanızın ana sayfasına uygulayabileceğiniz bazı basit ev işçiliği ayarlamaları göstereceğim. Mağaza temasında herhangi bir ayar yapmadan önce, ana tema güncellendiğinde değişiklikleri kaybetmekten kaçınmak için önce bir mağaza çocuk teması yapmanız önerilir. Ayrıca, mağaza teması için daha fazla ayar yapmak istiyorsanız, önceki yazıda paylaştığım mağaza özelleştirme kılavuzunu kontrol edebilirsiniz.
Ev Özelleştirme Vekanın teması

WooCommerce mağaza teması, WordPress topluluğunda 200.000’den fazla aktif kuruluma sahiptir. Ana Sayfa temanın 6 bölüm var:
Sayfa içeriği
Ürün kategorisi bölümü
Üstün Ürün Bölümü
En son ürün bölümü
En yüksek değere sahip ürün kısmı
Ürün kısmı satıldı
En İyi Satan Ürün Bölümü
Ancak, özelleştirmeye gitmeden önce verandayı düzenlemeniz gerekir. Verandayı verandada gösterebilmeniz için sayfanıza bir ev şablonu ayarlamanız gerekir. Vekalet temaları, varsayılan WooCommerce sayfasının yanı sıra otomatik olarak iki ek sayfa şablonu oluşturur. Tam bir veranda ve dolu. Burada sadece ana sayfa şablonunu nasıl ayarlayabileceğinizi tartışacağız.
Home Templanda Template Home, tüm ürünlerinizi görüntülemek için iyi bir yol sunarak size ürün ve ürün kategorilerinin genel bir resmini sunar. Mağaza ziyaretçileriniz, mağazanıza girerken önce bu sayfaya inecektir. Ana sayfanın görünümü çok önemlidir, çünkü ziyaretçiler çekici ise bir alıcıya dönüştürülebilir. Çok kolay hazırlayın, çünkü yalnızca: Sitenizin yönetici panelini yönetici olarak girin.
Yeni bir sayfa oluşturun ve görüntülemek için biraz içerik ekleyin.
Ardından, aşağıda gösterildiği gibi meta sayfalar öznitelik kutusundaki açılır şablondan ‘evi’ seçmelisiniz:
Bu sayfayı yayınladıktan sonra, ayarlara giderek ve sonra okuyarak bir veranda olarak ayarlayabilirsiniz.

Daha sonra ‘statik bir sayfayı’ kontrol edecek ve ardından ‘ana sayfa’ açılır menüsünden yapılmış bir ana sayfa seçeceksiniz.
Değişiklikleri kaydettikten sonra, bu değişiklikler otomatik olarak ön uçta yansıtılacaktır.

Yapılandırma tamamlandıktan sonra, ana sayfanızda aşağıda gösterildiği gibi birkaç parça olmalıdır:
Verandada, önerilen ürünler, hayranların favorisi, satılan ürünler ve en çok satanlar gibi çeşitli kümeler sergilenir. Bu öğenin yöntemi arka uçtaki sıraya eşit olarak görüntülenir. Veranda düzenlendikten sonra, şimdi ayarlamayı girebiliriz: 1. WooCommerce Home’dan ürün kategorisi görüntüsünü silin, veranda üzerinde görüntüleri ile ürün ve ürün kategorileri görüntülemenize olanak tanır. Ancak, kategorinin yalnızca metin olarak görüntülenmesini tercih ederseniz, bu satırı function.php dosyasına eklemeniz gerekir. Function.php dosyasının sonuna ekleyin.

Remove_action (‘wooocommerce_beefore_subcategory_title’, ‘wooocommerce_subcategory_thumbnail’, 10); Sonuç bu: 2. Logodaki URL bağlantısını değiştirin Genel olarak, WordPress teması logodaki sitenin sitesini bağlar. Bu, çoğu web sitesi için standart bir işlevdir ve kullanıcılar logoya her tıkladıklarında verandaya geri dönebileceklerini umarlar. Ancak, veranda farklı bir konumdaysa ne olur? Bu, özel bir bağlantı istiyorsak URL’yi yapılandırmanız gerektiği anlamına gelir. Değiştirmek için, aşağıdaki kodu Fonksiyonlara eklememiz gerekir.
Custom_storefront_head () işlevi {

Remove_action (‘StoreFront_Header’, ‘StoreFront_site_branding’, 20);
Add_action (‘StoreFront_header’, ‘Custom_site_branding’, 20);
Custom_site_branding () işlevi {
// Burada logo bağlantınızı veya site başlığınızı ayarlayın
$ link = home_url (‘/link-kustom-me/’);
?>
‘custom-logo’, ‘itemprop’ => ‘logo’);
$ image_alt = get_post_meta ($ custom_logo_id, ‘_wp_attachment_image_alt’, true);
if (boş ($ Image_alt)) {
$ custom_logo_attr [‘alt’] = get_bloginfo (‘name’, ‘ekran’);
}
$ logo = sprintf (‘%2 $ s ‘,
ESC_URL ($ link), wp_get_attachment_image ($ custom_logo_id, ‘full’, yanlış, $ Custom_logo_attr)
);
}
Elseif (is_customize_preview ()) {
$ logo = sprintf (‘<a href = "%1 $ s" class = "custom-logo-link" style = "ekran: yok teşekkür link));
}
$ html = is_front_page ()? '

‘. $ logo. ‘

‘: $ logo;
} elseif (function_exists (‘jetpack_has_site_logo’) && jetpack_has_site_logo ()) {
$ logo = site_logo ()-> logo;
$ logo_id = get_theme_mod (‘Custom_logo’);
$ logo_id = $ logo_id? $ logo_id: $ logo [‘id’];
$ boyut = site_logo ()-> tema_size ();
$ html = sprintf (‘%2 $ s ‘,
ESC_URL ($ link),
wp_get_attachment_image ($ logo_id, $ boyut, yanlış, dizi (
‘Sınıf’ => ‘Site Logosu Ek’. $ boyutu,
‘Veri boyutu’ => $ boyutu,
‘İtemprop’ => ‘logo’
))
);
$ html = appling_filters (‘jetpack_the_site_logo’, $ html, $ logo, $ boyut);
} değilse {
$ tag = is_front_page ()? ‘H1’: ‘Div’;
$ html = ‘ ‘. ESC_html (get_bloginfo (‘ad’)). ‘ ‘;
if (”! == get_bloginfo (‘açıklama’)) {
$ html. = ‘
‘. ESC_html (get_bloginfo (‘açıklama’, ‘ekran’)). ‘
‘;}
}
Gema $ html;
?>

<? Php
}
} Özel Bağlantılar Satır 7'yi ('/My-Custom-Link/') girin; '; , özel bağlantınızı "Özel Bağlantı" ile değiştirerek ekleyeceksiniz.
3. Mağazanızın kategorisini tamamen silin Verandalı Verandadaki kategoriyi tamamen silmek isteyebilirsiniz. Bu özellik yalnızca kategoriyi siler. Yapmanız gereken tek şey aşağıdaki satırı functions.php dosyasına eklemektir: function schoolfront_child_reorder_homepage_contant () {
Remove_action ('ana sayfa', 'schoolfront_product_categories', 20);
}
Add_action ('init', 'skorfront_child_reorder_homepage_contant'); Sonuç bu:
4. Yeni bir ürün ekledikten hemen sonra mağazanızın ana sayfasından en son ürünleri silin, ön sayfadaki 'yeni' bölüme eklenir. Bu, mağaza temasında varsayılan ayarlardır. Ancak, ürünü sürekli listenize eklerseniz, mağaza sayfasını bozabilir. Ayrıca, bu bölümde ek bilgiler de görüntülemek isteyebilirsiniz.
Bu bölümü silmek için, aşağıdaki kodu Function.php'ye Çocuk Dosyasına ekleyin. StoreFront_child_reorder_homepage_contant () işlevi
Remove_action ('ana sayfa', 'schoolfront_recent_products', 30);
}

Add_action (‘init’, ‘skorfront_child_reorder_homepage_contant’); Sonuç bu:
5. Bazı mağaza sahipleri için mağazadan en iyi satan ürünleri kaldırın, bazı dükkan sahipleri için en iyi satan ürünler istenen özellik olmayabilir. En iyi satış bölümünü silmek için, aşağıdaki kodu Dosya Fonksiyonuna ekleyin. StoreFront_child_reorder_homepage_contant () {remove_ace (‘ana sayfa’, ‘schoolfront_best_selling_products’, 70) işlevi;
}
Add_action (‘init’, ‘skorfront_child_reorder_homepage_contant’); Sonuç bu:
6. Üstün ürünleri aynı şekilde silin, mağaza sahipleri üstün ürün bölümünü devre dışı bırakmak isteyebilir. Bu, Functions.php dosyasına aşağıdaki kod görüntülerini ekleyerek yapılabilir.

Remove_action (‘ana sayfa’, ‘schoolfront_featured_products’, 40);
}
Add_action (‘init’, ‘skorfront_child_reorder_homepage_contant’); Sonuç bu:
7. Mağazanın ön sayfasındaki yatay satırın rengini nasıl değiştirir. Özel dosyaya aşağıdaki kodu ekleyin.

.Page-Template-TEMPLATE-HOMPAGE .HENTRY,
.Page-TEMPLATE-TEMPLATE-HOMPAGE. Vitrin Ürün Bölümü {
Sınır rengi: kırmızı;
} 8. Belirli bir ana sayfanın mağazasına bir arka plan görüntüsü ekleyin Varsayılan varsayılan varsayılan olarak, ürün kategorileri, en son ürünler, üstün ürünler, popüler ürünler, satış ürünleri ve en iyi satış ürünleri olmak üzere altı parça vardır. Sadece style.css dosyasına aşağıdaki kodu ekleyin:

.Bir-First Shop {
Arka plan-image: URL (URL’nizi buraya ekleyin);
Arka plan pozisyonu: orta orta;
Arka Plan-Tekrar: Tekrarlanmamış;
Arka plan boyutu: kapak;
-O-background boyutu: kapanış;
} İşte sonuç:
9. Mağazanızın ön sayfasına bir arka plan rengi ekleyin Verandaya bir arka plan rengi eklemek isteyebilirsiniz. Bunu yapmak için önce rengi eklemek istediğiniz parçayı tanımlamanız gerekir. Bu, style.css dosyasına aşağıdaki kodu ekleyerek kolayca yapılabilir:
} İşte sonuç:
10. Verandanın başlığını nasıl sileceğiniz veya gizleyeceğiniz, bunu yapmak için önce silmek veya gizlemek istediğiniz parçayı tanımlamanız gerekir. Bu, style.css dosyasına aşağıdaki kodu ekleyerek yapılabilir: .storefront-recent-ürünler.
.Storefront-üretim-kategoriler.
.Storefront özellikli ürünler.

.Storefront-popüler ürünler.
.Storefront-on-Sale-Producst.
.Storefront en iyi satan ürünler.

11. Verandanın başlığını nasıl değiştirir, bunu yapmak için önce başlığı silmek istediğiniz parçayı tanımlamanız gerekir. Bu liste, ana sayfanın filtresini tanımlamanıza yardımcı olacaktır:
schorefront_product_categories_args
schorefront_recent_products_args
schorefront_featured_products_args
schorefront_popular_products_args
schorefront_on_sale_products_args

schorefront_best_selling_products_args
Aşağıdaki kodu Fonksiyon’a ekleyin.
// Önde gelen ürün başlığı ön sayfası
Custom_storefront_product_featured_title ($ args) işlevi
$ args [‘Title’] = __ (‘Yeni Üstün Ürün Başlığı’, ‘mağaza’); geri $ args;
} İşte sonuç:
12. Ürün sütunu ızgarası/sütun bölümünün ana sayfasının nasıl artırılması, Function.php Dosyası Çocuk Temasına aşağıdaki kod satırını ekleyin. add_filter (‘StoreFront_feated_products_shortcode_args’, ‘Custom_storefront_feated_product_per_row’);
// üstün üstün ürün sütunu
Custom_storefront_featured_product_per_row ($ args) işlevi {
$ args [‘sütun’] = 2;
geri $ args;
} İşte sonuç:
13. Verandada daha fazla kategori nasıl görüntülenir. add_filter (‘StoreFront_product_categories_shortcode_args’, ‘Custom_storefront_category_per_page’);

// Ürün Kategorisi
Custom_storefront_category_per_page ($ args) işlevi {
$ args [‘sayı’] = 4;
geri $ args;
} İşte sonuç:
14. Ana sayfa bölümünün başlığının altına bir açıklama nasıl eklenir Bu kodu işlevine ekleyin.

Custom_storefront_product_featured_description () işlev {?>

<? Php} Bu sonuç:
15. Vitrin verandasının en üst sıradaki ürün kısmı nasıl silinir bunu yapmanın iki yolu vardır. Bunlardan biri, bu bölümü silmenize yardımcı olacak bir eklenti yüklemektir. Ana sayfa kontrol eklentisini görebilirsiniz. Bunu kod aracılığıyla yapmanın daha kolay bir yolunu göreceğiz. Ancak, bir kanca kullanarak bölümü silmeniz yeterlidir. Bu yalnızca Fonksiyon'a aşağıdaki satırları ekleyerek yapılır. Ayrıca, style.css dosyasına veya ek CSS bölümüne aşağıdaki kodu ekleyerek silebilirsiniz: .storefront-popüler ürünler. Üst Sıralı Ürün Bölümünün Başlık Nasıl Değiştirilir Bu kodu Function.php Dosyası Çocuklar Temasına Ekleyin: Add_filter ('StoreFront_Popular_Products_args', 'Custom_storefront_product_popular_title');

// Önde gelen ürün başlığı ön sayfası
Custom_storefront_product_popular_title ($ args) işlevi {
$ args [‘başlık’] = __ (‘en iyi ürün’, ‘vitrin’);
geri $ args;
} İşte sonuç:
17. Varsayılanın en yüksek değerinde daha fazla ürün nasıl görüntülenir En üst düzey bölümde 4 ürün görüntüler. Bu örnekte, 12 ürüne artıracağız. Bu kodu Function.php dosyasına ekleyin Çocuklar Teması: Add_filter (‘StoreFront_Popular_Products_shortcode_args’, ‘Custom_storefront_top_product_per_page’);

// Üstün Ürün Superior sayfa başına

Custom_storefront_top_product_per_page ($ args) işlevi {
$ args [‘per_page’] = 12;
geri $ args;
} İşte sonuç:
18. Satış ürünlerinin mağazanın ön sayfasından nasıl silinir, bunu yapmanın iki yolu vardır. Bunlardan biri, bu bölümü silmenize yardımcı olacak bir eklenti yüklemektir. Ana sayfa kontrol eklentisini görebilirsiniz. Bu örnek için bir kod satırı kullanacağım. Bir kanca kullanarak bölümü silmeniz yeterlidir. Bu yalnızca Fonksiyon’a aşağıdaki satırları ekleyerek yapılır. Sonuç bu: 19. Ev sayfalarının özelleştirme eylemlerine referans Bu mağaza teması, mağaza temasında kullanılan add_action () işlevleridir. İşlevi, başlığın do_raction tarafından tanımlandığı gibi kancaya ekler
Ana sayfa

StoreFront_HomePage-Inside
Ana Sayfa İçeriği Bölümünün
Ürün Kategorisi
StoreFront_homePage_BEFORE_PRODUCT_CATATION- Ana Sayfa Bölümü’nden önce yürütüldü
schorefront_homepage_aft_product_categories_title ‘-

Ürün Kategorileri Bölüm Başlığı
StoreFront_homePage_AFT_PRODUCT_CATECTORIORI- Ana Sayfa Bölümü
Yeni ürün

Storefront_homepage_beefore_recent_products- Ana Sayfa Bölümü

Storefront_homepage_after_recent_products_title-yürütüldü

Son Ürün Bölümü Başlığı
StoreFront_homePage_After_Recent_Products-Execected Üstün Ürünlerin Ana Sayfası Bölümü
Storefront_homepage_beefore_feated_products- Ana Sayfa Bölümü
Storefront_homepage_after_feated_products_title-yürütüldü

özellikli ürün bölümü başlığı
StoreFront_homepage_aft_Feated_products-Execected Ana Sayfa Bölümü
popüler ürünler
Storefront_homepage_beefore_popular_products- Ana Sayfa Bölümü
Storefront_homepage_after_popular_products_title-yürütüldü

Popüler Ürünler Bölüm Başlığı
StoreFront_homepage_aft_popular_products- Ana Sayfa Bölümü’nden sonra yürütüldü
Satılan ürünler
StoreFront_homePage_BEFORE_ON_SALE_PRODUCTS- Ana Sayfa Bölümü’nden önce yürütüldü
StoreFront_homepage_aft_on_sale_products_title-yönetilen

Satış Ürünleri Bölüm Başlığı
StoreFront_homepage_aft_on_sale_products- Ana Sayfa Bölümü
En iyi satan ürün
StoreFront_homePage_BEFORE_BEST_SELLELT_PRODUCTS- Ana Sayfa Bölümü’nden önce yürütüldü
Storefront_homepage_aft_Best_selling_products_title-Execected

en çok satan ürünler bölümü TitlesoreFront_homepage_afts_best_selling_products-uygulamalı
Dosya Showcase işlevi: /cin/storefront-junctions.php
StoreFront_Header_Styles – Başlık Stillerini Filtre
StoreFront_HomePage_Content_Styles – Ana Sayfa İçerik Stilini Filtreleyin
Vitrin Sınıfı
Sonuç Bu makalede, WooCommerce Storefront tema ana sayfası için yapabileceğiniz 18 farklı ev -özelleştirme fikrini vurguladım. Bu özelleştirme test edilmiş ve ekran görüntülerinde gösterildiği gibi işlev görmüştür. Bir WordPress yeni başlayansanız ve Fonksiyonlar.php dosyasını nerede bulacağınızı bilmiyorsanız, şu basit adımları izleyin:
WordPress sitenizi girin ve yönetici kullanıcısı olarak gösterge tablosuna erişin.
Gösterge Tablosu menüsünden görünüm menüsü> Tema Düzenleyici menüsüne tıklayın. Tema düzenleyicisi sayfası açık olduğunda, bir işlev ekleyeceğimiz işlev dosyasını arayın.
Bu o kadar basit. Bu mağazanın ana sayfası özelleştirme teması hakkındaki makaleden, esnek vitrin temasının nasıl görülebilir ve istediğiniz özelleştirmeyi oluşturmak için filtreler ve kancalar kullanabilirsiniz. Ek stil için, CSS kodunu gireceğiniz ek CSS bölümünü veya style.css dosyasını kullanabilirsiniz. Benzer makaleler
WooCommerce Storefront Temaları Ayarlamak İçin 80+ Püf Noktaları: Ultimate StoreFront Storefront Tema Özelleştirme Kılavuzu
Ürünleri WooCommerce’de nasıl gizılır veya kategorilere veya rollere göre ürünler nasıl gizlenir
Woocommerce’de mevcut ürün kategorisinin adını nasıl alabilirim WooCommerce’de Üstün Ürünler Nasıl Düzenlenir
Woocommerce’deki mağaza sayfasından tüm ürünler nasıl gizlenir
WooCommerce Hesaplama Kodu sepetine eklenen ürün nasıl hesaplanır
WooCommerce fiyatları olmadan ürünler nasıl gizlenir
WOOOCOMMERCE Ürünleri Arama Sonuçlarından Nasıl Gizlenir
WooCommerce Ürün Özellikleri Nasıl Kullanılır Adım Adım [Tam Kılavuz]
Bir eklenti kullanmadan WordPress’te nasıl sayfalandırma numarası yapılır

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir