WooCommerce Storefront Temaları Ayarlamak İçin 80+ Püf Noktaları: Ultimate StoreFront Storefront Tema Özelleştirme Kılavuzu
Woocommerce mağaza temasını ayarlamanın yollarını mı arıyorsunuz? Bu makalede, Woocommerce mağaza temasını ayarlamak için kullanabileceğiniz 80’den fazla farklı hileye sahiptir. Bu kılavuzu okuduktan sonra WooCommerce mağaza temasının özelleştirilmesi kolay olmalıdır. WooCommerce mağazası basit ve güçlü bir ücretsiz temadır. Bu tema, ürün sunumları ve kullanıcı erişimi açısından mağazanız üzerinde büyük kontrol sağlar. Bu ücretsizdir ve çocuk temaları aracılığıyla birçok ayar seçeneği sunar. WooCommerce mağaza temasını ayarlamak için tüm püf noktalarını öğrenmeden önce, önce temel bilgileri anlatın. Buna ek olarak, Woocommerce mağaza temasının nasıl kurulacağı ve yapılandırılacağı hakkında ayrıntılı bir rehber olacaktır.
WooCommerce Temalar Vitrini Woocommerce projeniz var mı? Evet ise, mağaza, WooCommerce ile zarif çalışmak için inşa edilmiş en iyi e -ticaret temasıdır. Bu tema, her türlü ayarlamaya açık olan temiz ve minimal bir tasarıma sahip WooCommerce Core’un geliştiricisi tarafından geliştirilmiştir. Bu tema, herhangi bir cihazda çalışacak duyarlı bir tasarıma sahiptir. İşte bu temayı indirmekten alacağınız olağanüstü özelliklerden bazıları:
Zarif tasarım.
Duyarlı düzen.
SEO’nun dostça işaretlemesi.
Özel sayfa şablonu.
Özgür.
Lisanslı GPL.
Çeviri diğer diller için hazırdır.
Woocommerce Mağazaları Temasını Kurulur ve Yapılandırma WordPress siteniz için diğer eklentileri yüklemekle aynı mağaza temasını indirin. İlk olarak, görünüşe, temalara gitmeli ve son olarak yeni eklemelisiniz. Arama sütununda ‘Vitrin’ yazın ve ardından Yükle düğmesini tıklayın.
Kurulduktan sonra, Temayı Etkinleştir düğmesini kullanarak etkinleştirebilirsiniz. Ayrıca, StorFront’un en son sürümünü indirmek için WordPress.org adresini ziyaret edebilirsiniz. Daha sonra çıkarılan klasörü FTP üzerinden sunucunuzdaki tema dizinine yükleyebilirsiniz. Bundan sonra, görünümü, sonra temayı girerek temayı etkinleştirmeniz gerekir. Vitrin sayfası şablonu, WooCommerce varsayılan sayfasının yanı sıra otomatik olarak iki ek sayfa oluşturur. Tam bir veranda ve dolu. Ev şablonu. Home Şablon, 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. Hazırlamak çok kolaydır çünkü yalnızca yeni bir sayfa oluşturmanız ve görüntülemek için biraz içerik eklemeniz gerekir. Ardından, Meta Pages Öznitelik kutusundaki açılır şablondan ‘ana sayfa’ seçmeniz gerekir.
Bu sayfayı yayınladıktan sonra, ayarlara giderek ve sonra okuyarak bir veranda olarak ayarlayabilirsiniz. Daha sonra ‘statik sayfayı’ kontrol edecek ve ardından ‘ön sayfa’ gerilme 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 birkaç parça olmalıdır. Önerilen ürünler, fan 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. Buna ek olarak, Ürüne tıklayarak, kategoriye göre değişiklikler yapmak için sürükleme ve gevşek özelliği kullanabilirsiniz. Sepette tam genişlik ve tam geniş bir ödeme, sepet sayfanız ve ödeme için önerilen seçenek olan yan bıçaklar olmadan sayfanın her yerine uzanan başka bir şablondur. Bu, sepet sayfasını girerek ve ödeme yaparak yapılabilir ve sayfa özniteliğindeki açılır menüden ‘tam geniş’ seçin. Ekran menüsünü yapılandırma birincil ve ikincil menü konumu için varsayılan ayarlara sahiptir. Ana menü site logosunun hemen altında görüntülenir. WooCommerce, belirli bir ana menü ayarlamadıysanız tüm sayfalarınızı ‘ana menü’ olarak görüntüler. İkincil menü, arama kutusuna yerleştirerek logonun hemen yanındadır. Ancak, bu ikincil menü yalnızca bir menü ayarlarsanız görünür. Yeni bir menü oluşturmak ve bu sayfayı eklemek, yönetici panelinde görünüm ve daha sonra menülere giderek yapılabilir. Sol tarafta, ‘Page’ adlı başlığı göreceksiniz. Yayınladığınız tüm sayfaların bir listesini almak için hepsini görün düğmesini tıklayın. İstediğiniz sayfayı kontrol edin, ardından menüye ekle’yi tıklayın. Menü sırasını sadece sayfayı sürükleyerek ve bırakarak ayarlamak kolaydır. Storefront tema widget’ı yerleştirmek, web sitenize widget yerleştirmek için size üç farklı alan sağlar. Başlık widget’ları, site başlığınızın hemen altında içeriğe yerleştirilebilir. Yan çubuk widget, seçtiğiniz düzene göre yan tarafa yerleştirilir. Buna ek olarak, mevcut dört widget seçeneğine göre bir altbilgi widget’ı yerleştirebilirsiniz. Şimdi Woocommerce Storefront temasını kurmanın ve yapılandırmanın temellerini bildikten sonra, bu temayı ayarlamak için yapabileceğiniz çeşitli hilelere bakalım. Çocuk teması oluşturmak Woocommerce pencerenizi ayarlamada karmaşık hileleri keşfetmeden önce, önce mağaza temalarımız için bir çocuk teması yapalım. Çocuk teması, ana temaya bağlı küçük bir temadır. Sayfanızın farklı bölümlerinde değişiklikler oluşturmak için ana temanın özel stilinin ve işlev sayfasının üzerine yazıyorlar. Neden bir çocuğun teması yapmak zorundayız? Bunun nedeni, mağazanın çekirdeğinin güncellenmeye devam etmesi ve bunun tüm ayarlama çabalarınız için bir risk oluşturmasıdır. Bu, özel işimizi kaybetmeden vitrini güvenli bir şekilde artırabileceğiniz anlamına gelir.
Bir çocuğun temasını yapmanın en iyi yolu, Child tema yapılandırıcı eklentisini indirmek ve etkinleştirmektir. İlk çocuğunuzun temasını yapmak için sihirbazı takip edin. 2. Logoyu ekle mağazanıza temanın temasının altındaki temanın ayarlanması kullanılarak yapılabilir, ardından ayarlayın. Görüntü yükleyerek bir logo eklemek için ‘Site Kimliği’ seçeneğini seçin. Her mağaza teması için önerilen boyut 470px kat 110px’dir. Daha sonra ‘Yayıncılık’ı tıklayarak değişiklikleri kaydedeceksiniz. 3. Gölgenin boyutunu ayarlayın Burada özelleştirici temasını tekrar kullanacağız, ancak ‘Ek CSS bölümüne’ birkaç CSS kodu yazacağız. Aşağıdaki kodu ekleyin: * Sandalye */ #Masthead.site-levers {
Yükseklik: 155px! Önemli;
Marj-Bawah: 0px
}
/ * Masthead için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
#Masthead.site-levers {
Yükseklik: 80px! Önemli;
Marj-Bawah: 0px;
}
}
/ * Kutup Kafası Menüsü */
.Storefront-primary-navigation a, .cart-contents a {
Marj: 0 0 0 0;
}
.An-navigation ul {
Dolgu: 0 0 10px 4px! Önemli;
}
.An-navigation li {
Yükseklik: 38px! Önemli;}
/ * Masthead menüsü için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
.An-navigation ul {
Arka plan:#d6dde4! Önemli;
}
}
/ * Coop Alanı */
.Tajuk sitesi {
Dolgu Top: 0.5EM;
}
.Site-Header. Custom-Logo-Link IMG, .Site-Header .Site-Logo-Dashor IMG, .Site-Header. Site-logo-link IMG {
Marj -Bawah: -45px;
} İşte sonuç:
4. Başlık temasından arama çubuğunu silin Bu kodu ‘Ek CSS’ bölümüne ekleyin. .Site-Header .widget_product_search
Ekran: Hiçbir şey;
} İşte sonuç:
5. Çok duyarlı hale getirmek için görüntülenen hücresel cihazlar için ayrı bir açılır menü oluşturun, tüm ekran boyutlarına iyi ayarlayın. Birçok menüiniz varsa, ziyaretçilerinizin dikkatini web sitesindeki belirli yerlere yönlendirmek önemlidir. WordPress ayarlarını kullanarak, bunu yapmak için aşağıdaki kod görüntülerini ekleyebilirsiniz. Görünüşe gidin, ardından özelleştirin ve ardından küçük bir ekran için ‘El Menüsü’ seçerek özel menü tasarımımızı oluşturabileceğimiz ‘Menüler’ seçeneğini seçin. Varsayılan olarak müşteri incelemelerini kapatın, WooOcommerce ve StoreFront incelemeler için standart işlevlere sahiptir. Bu çok iyi entegrasyon, ziyaretçilerin ürününüz hakkındaki görüşlerini bilmenizi sağlar. Ancak, müşteri incelemeleri her türlü e -ticaret mağazası için geçerli olmayabilir. Müşteri incelemelerini kapatmak için WooCommerce ayarlarına gidin ve ‘Ürün’ sekmesini açın. Sayfanın altında, incelemeyi istediğiniz gibi güncelleyebileceğiniz ‘İnceleme’ bölümünü bulacaksınız. 7. Ürün kategorisi görüntüsünü WooCommerce Home’dan silin, veranda üzerindeki görüntü ve ürün kategorilerini görüntülemenizi sağlar. 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:
8. Özelleştirici başlık menüsünü değiştirme, başlığı istediğiniz renge göre ayarlamamızı sağlar. Bu, başlığı özelleştirmek için gezinerek yapılabilir ve istediğiniz rengi seçin. Ancak, bu seçenek arama çubuğu, giriş bölümü ve logo dahil tüm başlık alanını renklendirir. Başlık menüsüne farklı bir arka plan almak için sadece ek CSS paneline aşağıdaki kod görüntülerini ekleyerek. .Storefront-primary-navigation, ana-navigasyon ul.Menu ul.sub-menu {
Arka plan rengi:#f0f0f0; } İşte sonuç: 9. Ana Gezinme Bıçakları SCEFRONT TEMASI Varsayılan olarak tüm sayfaları bir menü olarak görüntüler. Ana gezinme çubuğunu gizlemek istiyorsanız, menüyü kaldırmak yeterli değildir. Ek CSS bölümünü özelleştirmek ve aşağıdaki satırları eklemek için gidin :. Ekran: Hiçbir şey; } İşte sonuç:
10. Ürün başlığını mağaza sayfasındaki mağaza sayfasındaki ürün başlığını gizleyin, özelleştirme, ardından ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin: H2.Woocommerce-Loop-Product__title {
Ekran: Hiçbir şey! Önemli;
} İşte sonuç: 11. Boş alanı başlıktan çıkarın, ardından Ek CSS bölümünü özelleştirin ve aşağıdaki satırları ekleyin :. Site Citting {
Marj-Bawah: 0px;
} İşte sonuç: 12. Arama çubuğunun genişliğini uzatmak istiyorsanız hangi arama çubuğunun genişliğini ekleyin? Ek CSS bölümünü kullanarak aşağıdaki satırı ekleyin:.
Genişlik:%44.739;
} #Masthead .Site-Search .widget_product_search girişi [type = “Ara”] {
Genişlik: 700 piksel! Önemli;
} İşte sonuç: 13. Başlık ve menü arasındaki boşluğu silin, ardından Ek CSS bölümünü özelleştirin ve aşağıdaki satırları ekleyin:
}
.col-full {
Yukarıda: -84 piksel;
}
@Media sadece ekran ve (maksimum genişlik: 640px) { .Tajuk sitesi {
Yükseklik: otomatik;
}
.col-full {
Yukarıda: 0;
}
} İşte sonuç:
14. WooCommerce Kayıt Sayfasına Ek Metin Ekleme Kayıt sayfasına mesaj eklemek önemlidir, çünkü yeni tescil ettirenler için teşekkür etmek veya indirimli kupon sunmak isteyebiliriz. Bunu arşivlemek için, işlevi dosya işlevine ekleyin. Add_action (‘bp_signup_profile_fields’, function () {
// Aşağıda düzenlemeye başlayın.
?>
Lütfen e -postanızı kontrol etmeyi ve kaydını onaylamayı unutmayın.
%10 indirim kuponu ! <? Php
// Son Düzenleme.
}); 15. Pekanın üst kısmındaki mağaza temasındaki ekmek kırıntılarını çıkarın Çoğu web sitesinde, navigasyonu kolaylaştırmak için ekmek kırıntıları eklenir. Sayfanın veya ürünün bulunduğu kategoriyi gösteren her sayfanın üstünde bulunurlar.
Breadcrumbs, arama motoru optimizasyonu için olağanüstü bir araçtır, ancak bunları kaldırmak istiyorsanız, aşağıdaki kodu işlevlere ekleyin. Sonuç bu:
16. Logodaki sitenin sitesi olan WordPress tema logosundaki URL bağlantısını değiştirin. Bu işlev çoğu web sitesi için standarttır ve kullanıcılar logoya her tıkladıklarında verandaya geri dönebileceklerini umarlar. Ya veranda farklı bir konumdaysa? 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 functions.php dosyasına eklememiz gerekir.
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 ()? '
22. Ürününüz hakkında açıklama, resim galerisi ve ek bilgiler gibi önemli bilgiler sağlamak için önemli olan “Troli’ye Ekle” düğmesini entegre edin. Sonunda, bu uzun bir sayfa üretebilir. Bununla birlikte, ürünleri arabaya eklemek için sayfaya geri dönmeye zorlanmadan tramvaya ürün ekleme işlemini basitleştirmek istiyorsanız, ekranın üst kısmındaki “Tramvaya Ekle” düğmesini ekleyebilirsiniz. Bu, WooCommerce için STAKTY ADD adlı bir eklenti kullanılarak yapılabilir. Tüm ürün sayfalarınıza bağlı “Troli’ye Ekle” düğmesinin tadını çıkarmak için yükleyin ve etkinleştirin. Sonuç bu:
23. Ödeme sayfasına şehir açılır listesinin bir listesini ekleyin Ekleme sayfasına şehir açılır listesinin bir listesi eklediğinizde, bu, müşterilerimizin kişisel bilgilerini hızlı bir şekilde doldurmalarına yardımcı olacaktır. Bu, ürününüzü gönderebileceğiniz şehirleri kullanılabilir hale getirmenizi sağlayacaktır. Sadece aşağıdaki kodu functions.php dosyasına ekleyin Çocuk teması: add_filter (‘woocommerce_default_address_fields’, ‘overe_checkout_city_fields’, 10, 1); işlev geçersiz kılın
// Burada şehrin dizisinde istediğiniz diziyi belirleyin (işte şehrin bir örneği) $ option_city = dizi (
” => __ (‘şehrinizi seç’),
‘A’ => ‘A’,
); $ Fields [‘City’] [‘Type’] = ‘Seç’;
$ fields [‘city’] [‘options’] = $ option_cities;
$ Field Return;
} Kodun beşinci satırını görürseniz, şehir listemizi belirleyebilirsiniz. ‘A’ kodunun ilk kısmı, boş alanlar veya karakterler içermeyen bir şehir kimliğidir. Şehrin adını tam olarak istediğiniz gibi yazın. Sonuç bu: 24. Artı düğmesini gizleyin ve ürünün miktarını ürün sayfasından eksi, böylece metnin metnini artı ve eksi düğmelerle gizleyebilmeniz için ürünün miktarını eklemek veya azaltmak için yapmanız gereken tek şey eklemektir. Ek CSS bölümünde CSS kodunu takip edin :. Kraliçe { Ekran: Hiçbir şey! Önemli;
} İşte sonuç:
25. Bunu yapmak için ürün sayfasındaki “Troli’ye Ekle” düğmesini gizleyin, sadece özelleştirme bölümüne gidin ve ardından bir CSS ekleyin ve aşağıdaki satırı ekleyin: .single_add_to_cart_button {
Ekran: Hiçbir şey! Önemli;
} Sonuç şu: 26. Varsayılan olarak alt alttan tema kredisini silin, WooCommerce mağaza teması altbilgiye tema kredisi ekler. Kişisel dokunuşla bir altbilgi isteyebilirsiniz. Tema kredisini silmek için, Function.php dosyasına aşağıdaki işlevi ekleyin Çocuk teması: add_action (‘init’, ‘Custom_remove_footer_credit’, 10); Custom_remove_footer_credit () function {) {) {) {)
Remove_action (‘StoreFront_Footer’, ‘StoreFront_credit’, 20);
Add_action (‘StoreFront_Footer’, ‘Custom_storefront_credit’, 20);
}
Custom_storefront_credit () işlevi {
?> & kopya;
27. Pencerenin rengini değiştirin ve yazı tipi boyutu, ayarlamaları kullanarak sayfa widget’ının yazı tipinin rengini veya boyutunu değiştirmenin doğrudan bir yolu yoktur. Aşağıdaki CSS kod satırlarını ekleyerek kolayca değiştirebilirsiniz. Bunu yapmak için, yalnızca özelleştirme bölümüne gidin, ardından katkı maddesi CSS ve aşağıdaki satırları ekleyin:. Widget bölgesi. Widget {
yeşil renk;
Yazı tipi boyutu: 1em;
} İşte sonuç:
28. WooCommerce mağaza temasının varsayılan ürün sürümündeki “Satış” merdivenini gösterin, belirli ürünler için satış veya indirim fiyatlarını belirlemenize olanak tanır. Ancak, ürün resmine bir satış rozeti eklemek istiyorsanız, özelleştirmeye ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin: UL.
Pozisyon: Mutlak;
Yukarıda: 137px;
Sağ: 62 piksel;
} İşte sonuç:
29. Satış rozetinin rengini değiştirmek için “satış” rozetinin rengini değiştirin, sadece özelleştirmeye gidin, ardından ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin :. {arka plan rengi: #ffffff;
Sınır rengi: yeşil;
yeşil renk;
} İşte sonuç: 30. “Artı-Eksi” kutusunun renginin miktarını değiştirin Miktar düğmesinin arka plan rengini ve eksi değiştirilerek yapılabilir. Bunu yapmak için, özelleştirme bölümüne gidin ve ardından bir CSS ekleyin ve aşağıdaki satırları ekleyin:.
Renk: #000;
Renkler: #F5DF72;
} İşte sonuç: 31. Mağaza başlık ayarının arka plan renginin nasıl değiştirileceği WordPress, mağaza teması başlığında arka plan rengini değiştirmemizi sağlar. Bunu yapmak için, özelleştirme bölümüne gidin, ardından başlık:
32. Başlıktaki minicart arka plan rengini değiştirin Başlık rengini değiştirirken, minicart açılır menü bu rengi devraldı. Ancak, görünürlüğü artırmak için aşağıdaki CSS kurallarını kullanarak değiştirebilirsiniz. Ek CSS bölümünü özelleştirmek ve aşağıdaki satırları eklemek için gezinmeniz yeterlidir: wooocommerce.widget_shopping_cart {
Arka plan: Beyaz;
Sınırlar: 12 piksel;
} İşte sonuç: 33. Telif Hakkı altında CSS kullanarak altbilgi mağazasına resim ekleyin, kendi logonuzu, alınan ödemenizi veya ortak rozeti telif hakkı metni altına eklemek istiyorsanız, katmana gidin, ayarlayın, ardından Footer’ı tıklayın. Paneli genişletmek için Özelleştirme’yi tıklayın ve arka plandaki görüntüyü seçin. İstediğiniz görüntüyü seçin ve ekleyin. Tekrar ve alttan seçin veya istediğiniz gibi manuel olarak konumlandırın. Özelleştiriciye geri dönün ve paneli genişletmek için CSS’yi tıklayın. Ancak, yüzdenin spesifikasyonlarınızla eşleştiğinden emin olmalısınız. Sonra aşağıdaki satırı ekleyin: .info-situs: sonra {content: ”;
Arka plan-görüntü: URL (kendi URL’nizi ekleyin);
Ekran bloğu;
Genişlik: 100 piksel;
Yükseklik: 100 piksel; Marj: 0 otomatik;
} 34. Alt altındaki boşluktan nasıl kurtulur, ardından ek CSS bölümünü özelleştirin ve aşağıdaki satırı ekleyin:. } İşte sonuç:
35. Başlıktan nasıl kurtulur ancak yine de menü, ek CSS bölümünü özelleştirmeye ve aşağıdaki satırları eklemek için yeterlidir: #Masthead & GT; .Colf,
#Masthead .Site-Header-Card { Ekran: Hiçbir şey; }
36. Varsayılan olarak köprünün alt çizgisini nasıl silir, mağaza teması bağlantının altını çizer ve silmek istiyorsanız, özelleştirme bölümüne gidin, ardından ek CSS’yi ekleyin: A {A {A {A {
Metin dekorasyonu: Hiçbir şey! Önemli;
} İşte sonuç: 37. WooCommerce Storefront temasındaki Superior Resimleri Nasıl Silinir WooCommerce Store sadece Fonksiyon’a aşağıdaki satırları ekleyin. 38. Vitrin ana sayfasındaki yatay çizginin renginin nasıl değiştirilmesi, özel dosyaya aşağıdaki kodu ekleyin.
.Page-TEMPLATE-TEMPLATE-HOMPAGE. Vitrin Ürün Bölümü {
Sınır rengi: kırmızı;
} 39. WooCommerce Storefront Satış Rozeti Nasıl Ayarlanır Ek CSS bölümünüze aşağıdaki kodu ekleyin :.
Arka plan rengi: #ffffff;
Sınır rengi: #FF0000;
Renk: #FF0000;
} İşte sonuç: 40. Her şeyi aynı anda değiştirmek için logonun boyutunu, ikincil navigasyon ve arama çubuğunu nasıl değiştirir, ek CSS bölümünüze aşağıdaki kodu ekleyin: @media ekran ve (min-genişlik: 768px) {
/ * Logo */
.Site-Header .Site-Branding, .Site-Header .Site-Logo-Dashor, .Site-Header. Site-logo-link {genişlik:%30! Önemli; /* İsterseniz PX değerini kullanın, örn. 350 piksel */}
/ * İkincil navigasyon */
Remove_action (‘schoolfront_idabarabar’, ‘schoolfront_get_sembarbar’, 10);}
}
Bu satırı ek CSS bölümünüze ekleyin:
body.wooCommerce #Primary {genişlik:%100; } İşte sonuç:
42. Menü öğesine resim veya simgeler nasıl eklenir. Bunu yapmak için, görüntü menüsünü yükleyin ve etkinleştirin, simgeler kolay eklenti yaptı ve simgeni istediğiniz gibi ekleyin. İstenen boyutları farklı menü alanlarına eklemeniz yeterlidir. Aşağıda görsel bir açıklama:
43. Bu mağazaya üst bıçaklar nasıl eklenir sosyal simgeler veya hoş geldiniz mesajları gibi harika şeyler eklemek için yapılabilir. Bunu eklemek için, aşağıdaki kod satırını Function.php çocuk dosyasına ekleyin: /**
* Üst çubuğu başlıktan önce mağazaya ekleyin.
*/ Vitrin function_add_topbar () {
?>
Woostore’u test etmeye hoş geldiniz
Renk: #ff;
} İşte sonuç:
44. Üst çubuğunuza özel bir mesaj nasıl eklenir. Üst çubuğa özel bir mesaj eklemenin başka bir yoludur. Sadece aşağıdaki kod satırını function.php dosyasına ekleyin Çocuk dosyası: /**
* Üst çubuğu başlıktan önce mağazaya ekleyin.
*/
Vitrin function_add_topbar () {
Global $ current_user;
get_currentuserinfo ();
if (! boş ($ current_user-> user_firestname)) {
$ user = $ current_user-> user_firestname;
} değilse {
$ user = __ (‘misafir’, ‘vitrin-child’);}
?>
hoş geldiniz !
Add_action (‘schoolfront_beefore_header’, ‘schoolfront_add_topbar’);
45. Mağaza meta kaydırıcı ile dolu geniş bir meta kaydırıcı nasıl yapılır birçok WordPress sitesinde çok popülerdir. Kaydırıcıyı tam olarak genişletmek için bu koddan biraz ekleyin. Tam geniş olmak için çocuğun temasının gerilmesine ekleyin: add_action (‘init’, ‘child_theme_init’);
Child_theme_init () işlevi {
Add_action (‘schoolfront_beefore_content’, ‘woa_add_full_slider’, 5);
}
Woa_add_full_slider () işlev {?>
Custom_storefront_credit () işlevi {
?>
& kopya;
52. ‘Hesap Sayfam’ vitrine bir müşteri avatarı nasıl eklenir, yalnızca function.php dosyasına aşağıdaki kod satırını ekleyerek yapılabilir Çocuk dosyası:/**
* Hoş geldiniz mesajımdan Müşteri Avatar Baskı
*/
StoreFront_myaccount_customer_avatar () işlevi {
$ current_user = wp_get_current_user ();
Echo ‘
‘. get_avatar ($ current_user-> user_email, 72, ”, $ current_user-> display_name). ”;
}
Add_action (‘wooocommerce_beefore_my_account’, ‘schoolfront_myaccount_customer_avatar’, 5);
Ardından, CSS ek bölümüne aşağıdaki CSS komut kurallarını ekleyin:
.Avatar_akun i {
Sınır-sağ: 1px katı RGBA (0, 0, 0, 0.1); şamandıra: sol; Dolgu-sağ: 10 piksel;
Genişlik: 83 piksel;
}
.akun me_pengguna {
Sınır sol: 3px katı #787e87;
şamandıra: doğru;
Dolgu-sol: 10 piksel;
Genişlik:%88; } İşte sonuç:
53. WooCommerce Shop altbilgisinin yüksekliği nasıl değiştirilir WooCommerce mağaza altbilgisinin yüksekliğini değiştirmek çok kolaydır.
Dolgu Top: 25px;
}
div.situs-info {
Dolgu Top: 16px;
Rulman: 25px;
} İşte sonuç:
54. Belirli ana sayfa temalarının mağazasına arka plan görüntüleri ekleme mağaza varsayılan teması, ü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ı bölüme sahiptir. Ek CSS bölümüne aşağıdaki kodu ekleyin:
Arka plan pozisyonu: orta orta;
Arka Plan-Tekrar: Tekrarlanmamış;
Arka plan boyutu: kapak;
-O-background boyutu: kapanış;
} İşte sonuç:
55. Arka plan rengini mağazanın ön sayfasına ekleyin Bunu yapmak için önce rengi eklemek istediğiniz parçayı tanımlamanız gerekir. Bu, ek CSS bölümüne aşağıdaki kodu ekleyerek kolayca yapılabilir:
Arka plan rengi:#ffeb3b;
} İşte sonuç:
56. 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, ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir: .storefront-recent-producst.
.Storefront-üretim-kategoriler.
.Storefront özellikli ürünler.
.Storefront-popüler ürünler. .Storefront-on-Sale-Producst.
.Storefront en iyi satan ürünler.
57. Ana Sayfanın Başlığı Nasıl Değiştirilir 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:
Showcase_produuk_kateathe kategorisi
Showcase_terkini_produuk_argsetalase_fitur_produuk_args
Showcase_popular_produuk_args
Showcase_on_penjualan_produuk_args Showcase_best_selling_products_args
Function.php dosyasına aşağıdaki kodu ekleyin Çocuklar Tema: Add_filter (‘StoreFront_Featured_Products_args’, ‘Custom_storefront_product_featured_title’);
// Ö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ç: 58. Home Peraga Sepe Ürünü Nasıl Artırılır Kesinlikle Function.php Dosya Çocuk Temasına Aşağıdaki Kod Satırını Ekleyin. add_filter (‘StoreFront_feated_products_shortcode_args’, ‘Custom_storefront_feated_product_per_page’);
// Üstün Ürün Superior sayfa başına
Custom_storefront_featured_product_per_page ($ args) işlevi $ args [‘per_page’] = 10;
geri $ args;
} 59. Ana Sayfa Sayfaları Nasıl Artırılır Izgara sütun ürünü veya sütun, Function.php Dosya Ç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ç:
60. 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ı’] = 10;
geri $ args;
} 61. Veranda bölümünün başlığının altına bir açıklama nasıl eklenir Bu kodu Fonksiyon’a ekleyin.php dosyası Çocuk Teması: Add_action (‘StoreFront_homePage_Aft_Feated_Products_Title’, ‘Custom_storefront_product_feated_descripts’);
$ args [‘başlık’] = __ (‘en iyi ürün’, ‘vitrin’);
geri $ args;
} 64. Storefront için varsayılanın en yüksek değerinde daha fazla ürün nasıl görüntülenir. 4 ürün en yüksek değerde görüntülenir. Bu örnekte, onu 15 ürüne yükselteceğiz. Bu kodu Function.php dosyasına ekleyin Çocuklar Tema: Add_filter (‘StoreFront_Popular_Products_Shortcode_args’, ‘Custom_storefront_top_product_per_page’; // Sayfa başına üstün üstün ürün
Custom_storefront_top_product_per_page ($ args) işlevi {
$ args [‘per_page’] = 12;
geri $ args;
} 65. Satış ürünü bölümünün nasıl silinir Mağazanın ön sayfasından bunu yapacak iki tane vardır. Bunlardan biri, bu bölümü silmenize yardımcı olacak bir eklenti yüklemektir. Ana sayfa kontrol eklentisini görebilirsiniz. Ancak, bir kanca kullanarak bölümü silmeniz yeterlidir. Bu yalnızca Fonksiyon’a aşağıdaki satırları ekleyerek yapılır. 66. Bu ürünün arka plan renginin nasıl değiştirilmesi Ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir:
Arka plan rengi:#ffeb3b;
} 67. Düğmenin nasıl ayarlanır Bir özelleştirici kullanılarak değiştirilebilir. Görünüşe gidin, sonra ayarlayın. Düğmeyi tıklayın ve spesifikasyonlarınıza göre verin. İşte örnekler:
68. Bu kodu kullanarak özel bir altbilgi mağazası nasıl eklenir, özel bir altbilgi bağlantısı ekleyebilirsiniz ve istediğiniz gibi ayarlayabilirsiniz. Bu kod satırını Function.php dosyasına ekleyin Çocuklar Teması: Add_filter (‘StoreFront_credit_links_output’, function ($ default_links) { $ output = [
hızlı koş(
‘%s ‘, get_home_url (), ‘buraya özel bir bağlantı ekle’),
$ default_links
];
Yine patladı (
‘ ‘, $ output
);
}); Sonuç bu:
69. Arşivde Blog Vitrin Teklifini Görüntüle Woocommerce mağaza temasında bir blog çalıştırırsanız, bu kod blog yazısı arşivinde eksiksiz içerik yerine bir blog teklifini görüntüleyebilir. Sadece bu kod satırını function.php dosyasına ekleyin Çocukların teması: add_action (‘init’, function () {
Remove_action (‘StoreFront_Loop_Post’, ‘StoreFront_Post_Content’, 30);
Add_action (‘schorefront_loop_post’, function () {
echo ‘
‘;
if (has_post_thumbnail ()) {
the_post_thumbnail (‘büyük’, [‘itemprop’ => ‘resim’]);
}
alıntı_();
echo ”;
}, 30);
}); 7.
return ”;
}); 71. Eklentilen eklenti bildirimi nasıl silinir eklenti bildirimleri bazı kişilere müdahale edebilir ve silinmesi çok kolaydır. Sadece bu kod satırını function.php dosyasına ekleyin Çocuklar Tema: // Belirli eklentileri sil
İşlev my_recommended_plugins ($ eklentiler) { // woocommerce yüklemek için bildirimi sil
Unset ($ eklentileri [‘wooocommerce’]);
// eklentiyi döndür
$ Eklenti döndür;}
add_filter (‘wpex_recommended_plugins’, ‘my_recommended_plugins’);
// Tüm eklentileri sil
// Birkaç eklenti kullanıyorsanız bu önerilmez, çünkü bildirimler güncellemeyi bilgilendirmek için de kullanılır
add_filter (‘wpex_recommended_plugins’, ‘__return_empty_array’); 72. Koşullu altbilgi bilgileri nasıl görüntülenir veya gizlenir veya bu kod satırını dosya işlevine ekleyin.
// ön sayfada gizle
if (is_front_page ()) {
$ bool = yanlış; }
// boolean return
Dönüş $ bool;
}
add_filter (‘wpex_callout_enabled’, ‘my_callout_visity’, 20); 73. Meta jeneratör temasının nasıl silineceği Destek için kullanılır, böylece kullandığınız tema sürümü hakkında söylenir. Orada sorun yok ama burada silmek istiyorsanız yol var. Sadece bu kod satırını function.php dosyasına ekleyin Çocukların teması: add_action (‘init’, function () {
Remove_action (‘wp_head’, ‘wpex_theme_meta_generator’, 1);
}, 10) 74. Herhangi bir sayfa için ana sayfanın başlığını her devre dışı bıraktığınızda, başlıksız bir sayfa için başlığın altına boşluklar nasıl eklenir, başlığın altında yer kalmaz. Bu kod görüntüleri, bir vardiya, görüntü veya üstte düz olan başka bir içerik ekleyebilmeniz için boşluk eklemenize yardımcı olacaktır. Ek CSS bölümüne aşağıdaki kodu ekleyin: Body.Page-Header-Disabled #Main {
Dolgu Top: 30px;
} 75. Telefondaki kaydırma düğmesi nasıl gizlenir Ek CSS bölümüne aşağıdaki kodu ekleyin: @edia yalnızca ekran ve (maks. ; }
} 76. Üstbilgiler ve altbilgiler düzeni “kutusu” nun dışına taşırır Bu kod satırını dosya işlevine ekleyin.
// üstbilgi/altbilgiyi sil
Remove_action (‘wpex_hook_wrap_top’, ‘wpex_header’);
Remove_action (‘wpex_hook_wrap_bottom’, ‘wpex_footer’);
// üstbilgiyi/altbilgiyi geri ekle
Add_action (‘wpex_outer_wrap_before’, ‘wpex_header’, 9999);
Add_action (‘wpex_outer_wrap_aft’, ‘wpex_footer’);
}
Add_action (‘init’, ‘myprefix_move_header_footer_out_of_boxed_layout’); 77. Izgara modülüne daha fazla sütun seçeneği nasıl eklenir Bu kod satırını Fonksiyon’a ekleyin.
// gerçek sütun için. Örnek ‘.span_1_of_8 {genişlik:%12.5; } ‘
İşlev myprefix_grid_columns ($ sütunlar) {
$ sütunlar [‘8’] = ‘8’;
$ sütunlar [‘9’] = ‘9’;
$ sütunlar [’10 ‘] =’ 10 ‘; // istediğiniz kadar ekle
$ Sütunu döndür;
}
add_filter (‘wpex_grid_columns’, ‘myprefix_grid_columns’); 78. Başlığın altına ikincil bir özel menü nasıl eklerim.Popüler Ürün Başlığı Bölüm StoreFront_homePage_Affer_Popular_Products-“Bölüm Class =” Store Class = “Storefront Ürün Popüler”> Satılık Storefront_HomePage_BEFORE_ SATIŞ-PRODUCTS “> HomeFront_BoregePage_Affer_Onsal_Pructfe Age_Beefore_Best_Selling_Products-Run Veranda’dan Önce Ürünün en iyi bölümünün en iyi bölümünün başlığı
WooCommerce Temalar Vitrini Woocommerce projeniz var mı? Evet ise, mağaza, WooCommerce ile zarif çalışmak için inşa edilmiş en iyi e -ticaret temasıdır. Bu tema, her türlü ayarlamaya açık olan temiz ve minimal bir tasarıma sahip WooCommerce Core’un geliştiricisi tarafından geliştirilmiştir. Bu tema, herhangi bir cihazda çalışacak duyarlı bir tasarıma sahiptir. İşte bu temayı indirmekten alacağınız olağanüstü özelliklerden bazıları:
Zarif tasarım.
Duyarlı düzen.
SEO’nun dostça işaretlemesi.
Özel sayfa şablonu.
Özgür.
Lisanslı GPL.
Çeviri diğer diller için hazırdır.
Woocommerce Mağazaları Temasını Kurulur ve Yapılandırma WordPress siteniz için diğer eklentileri yüklemekle aynı mağaza temasını indirin. İlk olarak, görünüşe, temalara gitmeli ve son olarak yeni eklemelisiniz. Arama sütununda ‘Vitrin’ yazın ve ardından Yükle düğmesini tıklayın.
Kurulduktan sonra, Temayı Etkinleştir düğmesini kullanarak etkinleştirebilirsiniz. Ayrıca, StorFront’un en son sürümünü indirmek için WordPress.org adresini ziyaret edebilirsiniz. Daha sonra çıkarılan klasörü FTP üzerinden sunucunuzdaki tema dizinine yükleyebilirsiniz. Bundan sonra, görünümü, sonra temayı girerek temayı etkinleştirmeniz gerekir. Vitrin sayfası şablonu, WooCommerce varsayılan sayfasının yanı sıra otomatik olarak iki ek sayfa oluşturur. Tam bir veranda ve dolu. Ev şablonu. Home Şablon, 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. Hazırlamak çok kolaydır çünkü yalnızca yeni bir sayfa oluşturmanız ve görüntülemek için biraz içerik eklemeniz gerekir. Ardından, Meta Pages Öznitelik kutusundaki açılır şablondan ‘ana sayfa’ seçmeniz gerekir.
Bu sayfayı yayınladıktan sonra, ayarlara giderek ve sonra okuyarak bir veranda olarak ayarlayabilirsiniz. Daha sonra ‘statik sayfayı’ kontrol edecek ve ardından ‘ön sayfa’ gerilme 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 birkaç parça olmalıdır. Önerilen ürünler, fan 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. Buna ek olarak, Ürüne tıklayarak, kategoriye göre değişiklikler yapmak için sürükleme ve gevşek özelliği kullanabilirsiniz. Sepette tam genişlik ve tam geniş bir ödeme, sepet sayfanız ve ödeme için önerilen seçenek olan yan bıçaklar olmadan sayfanın her yerine uzanan başka bir şablondur. Bu, sepet sayfasını girerek ve ödeme yaparak yapılabilir ve sayfa özniteliğindeki açılır menüden ‘tam geniş’ seçin. Ekran menüsünü yapılandırma birincil ve ikincil menü konumu için varsayılan ayarlara sahiptir. Ana menü site logosunun hemen altında görüntülenir. WooCommerce, belirli bir ana menü ayarlamadıysanız tüm sayfalarınızı ‘ana menü’ olarak görüntüler. İkincil menü, arama kutusuna yerleştirerek logonun hemen yanındadır. Ancak, bu ikincil menü yalnızca bir menü ayarlarsanız görünür. Yeni bir menü oluşturmak ve bu sayfayı eklemek, yönetici panelinde görünüm ve daha sonra menülere giderek yapılabilir. Sol tarafta, ‘Page’ adlı başlığı göreceksiniz. Yayınladığınız tüm sayfaların bir listesini almak için hepsini görün düğmesini tıklayın. İstediğiniz sayfayı kontrol edin, ardından menüye ekle’yi tıklayın. Menü sırasını sadece sayfayı sürükleyerek ve bırakarak ayarlamak kolaydır. Storefront tema widget’ı yerleştirmek, web sitenize widget yerleştirmek için size üç farklı alan sağlar. Başlık widget’ları, site başlığınızın hemen altında içeriğe yerleştirilebilir. Yan çubuk widget, seçtiğiniz düzene göre yan tarafa yerleştirilir. Buna ek olarak, mevcut dört widget seçeneğine göre bir altbilgi widget’ı yerleştirebilirsiniz. Şimdi Woocommerce Storefront temasını kurmanın ve yapılandırmanın temellerini bildikten sonra, bu temayı ayarlamak için yapabileceğiniz çeşitli hilelere bakalım. Çocuk teması oluşturmak Woocommerce pencerenizi ayarlamada karmaşık hileleri keşfetmeden önce, önce mağaza temalarımız için bir çocuk teması yapalım. Çocuk teması, ana temaya bağlı küçük bir temadır. Sayfanızın farklı bölümlerinde değişiklikler oluşturmak için ana temanın özel stilinin ve işlev sayfasının üzerine yazıyorlar. Neden bir çocuğun teması yapmak zorundayız? Bunun nedeni, mağazanın çekirdeğinin güncellenmeye devam etmesi ve bunun tüm ayarlama çabalarınız için bir risk oluşturmasıdır. Bu, özel işimizi kaybetmeden vitrini güvenli bir şekilde artırabileceğiniz anlamına gelir.
Bir çocuğun temasını yapmanın en iyi yolu, Child tema yapılandırıcı eklentisini indirmek ve etkinleştirmektir. İlk çocuğunuzun temasını yapmak için sihirbazı takip edin. 2. Logoyu ekle mağazanıza temanın temasının altındaki temanın ayarlanması kullanılarak yapılabilir, ardından ayarlayın. Görüntü yükleyerek bir logo eklemek için ‘Site Kimliği’ seçeneğini seçin. Her mağaza teması için önerilen boyut 470px kat 110px’dir. Daha sonra ‘Yayıncılık’ı tıklayarak değişiklikleri kaydedeceksiniz. 3. Gölgenin boyutunu ayarlayın Burada özelleştirici temasını tekrar kullanacağız, ancak ‘Ek CSS bölümüne’ birkaç CSS kodu yazacağız. Aşağıdaki kodu ekleyin: * Sandalye */ #Masthead.site-levers {
Yükseklik: 155px! Önemli;
Marj-Bawah: 0px
}
/ * Masthead için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
#Masthead.site-levers {
Yükseklik: 80px! Önemli;
Marj-Bawah: 0px;
}
}
/ * Kutup Kafası Menüsü */
.Storefront-primary-navigation a, .cart-contents a {
Marj: 0 0 0 0;
}
.An-navigation ul {
Dolgu: 0 0 10px 4px! Önemli;
}
.An-navigation li {
Yükseklik: 38px! Önemli;}
/ * Masthead menüsü için CSS hücresel */
@Media sadece ekran ve (maksimum genişlik: 320px) {
.An-navigation ul {
Arka plan:#d6dde4! Önemli;
}
}
/ * Coop Alanı */
.Tajuk sitesi {
Dolgu Top: 0.5EM;
}
.Site-Header. Custom-Logo-Link IMG, .Site-Header .Site-Logo-Dashor IMG, .Site-Header. Site-logo-link IMG {
Marj -Bawah: -45px;
} İşte sonuç:
4. Başlık temasından arama çubuğunu silin Bu kodu ‘Ek CSS’ bölümüne ekleyin. .Site-Header .widget_product_search
Ekran: Hiçbir şey;
} İşte sonuç:
5. Çok duyarlı hale getirmek için görüntülenen hücresel cihazlar için ayrı bir açılır menü oluşturun, tüm ekran boyutlarına iyi ayarlayın. Birçok menüiniz varsa, ziyaretçilerinizin dikkatini web sitesindeki belirli yerlere yönlendirmek önemlidir. WordPress ayarlarını kullanarak, bunu yapmak için aşağıdaki kod görüntülerini ekleyebilirsiniz. Görünüşe gidin, ardından özelleştirin ve ardından küçük bir ekran için ‘El Menüsü’ seçerek özel menü tasarımımızı oluşturabileceğimiz ‘Menüler’ seçeneğini seçin. Varsayılan olarak müşteri incelemelerini kapatın, WooOcommerce ve StoreFront incelemeler için standart işlevlere sahiptir. Bu çok iyi entegrasyon, ziyaretçilerin ürününüz hakkındaki görüşlerini bilmenizi sağlar. Ancak, müşteri incelemeleri her türlü e -ticaret mağazası için geçerli olmayabilir. Müşteri incelemelerini kapatmak için WooCommerce ayarlarına gidin ve ‘Ürün’ sekmesini açın. Sayfanın altında, incelemeyi istediğiniz gibi güncelleyebileceğiniz ‘İnceleme’ bölümünü bulacaksınız. 7. Ürün kategorisi görüntüsünü WooCommerce Home’dan silin, veranda üzerindeki görüntü ve ürün kategorilerini görüntülemenizi sağlar. 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:
8. Özelleştirici başlık menüsünü değiştirme, başlığı istediğiniz renge göre ayarlamamızı sağlar. Bu, başlığı özelleştirmek için gezinerek yapılabilir ve istediğiniz rengi seçin. Ancak, bu seçenek arama çubuğu, giriş bölümü ve logo dahil tüm başlık alanını renklendirir. Başlık menüsüne farklı bir arka plan almak için sadece ek CSS paneline aşağıdaki kod görüntülerini ekleyerek. .Storefront-primary-navigation, ana-navigasyon ul.Menu ul.sub-menu {
Arka plan rengi:#f0f0f0; } İşte sonuç: 9. Ana Gezinme Bıçakları SCEFRONT TEMASI Varsayılan olarak tüm sayfaları bir menü olarak görüntüler. Ana gezinme çubuğunu gizlemek istiyorsanız, menüyü kaldırmak yeterli değildir. Ek CSS bölümünü özelleştirmek ve aşağıdaki satırları eklemek için gidin :. Ekran: Hiçbir şey; } İşte sonuç:
10. Ürün başlığını mağaza sayfasındaki mağaza sayfasındaki ürün başlığını gizleyin, özelleştirme, ardından ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin: H2.Woocommerce-Loop-Product__title {
Ekran: Hiçbir şey! Önemli;
} İşte sonuç: 11. Boş alanı başlıktan çıkarın, ardından Ek CSS bölümünü özelleştirin ve aşağıdaki satırları ekleyin :. Site Citting {
Marj-Bawah: 0px;
} İşte sonuç: 12. Arama çubuğunun genişliğini uzatmak istiyorsanız hangi arama çubuğunun genişliğini ekleyin? Ek CSS bölümünü kullanarak aşağıdaki satırı ekleyin:.
Genişlik:%44.739;
} #Masthead .Site-Search .widget_product_search girişi [type = “Ara”] {
Genişlik: 700 piksel! Önemli;
} İşte sonuç: 13. Başlık ve menü arasındaki boşluğu silin, ardından Ek CSS bölümünü özelleştirin ve aşağıdaki satırları ekleyin:
}
.col-full {
Yukarıda: -84 piksel;
}
@Media sadece ekran ve (maksimum genişlik: 640px) { .Tajuk sitesi {
Yükseklik: otomatik;
}
.col-full {
Yukarıda: 0;
}
} İşte sonuç:
14. WooCommerce Kayıt Sayfasına Ek Metin Ekleme Kayıt sayfasına mesaj eklemek önemlidir, çünkü yeni tescil ettirenler için teşekkür etmek veya indirimli kupon sunmak isteyebiliriz. Bunu arşivlemek için, işlevi dosya işlevine ekleyin. Add_action (‘bp_signup_profile_fields’, function () {
// Aşağıda düzenlemeye başlayın.
?>
Lütfen e -postanızı kontrol etmeyi ve kaydını onaylamayı unutmayın.
%10 indirim kuponu ! <? Php
// Son Düzenleme.
}); 15. Pekanın üst kısmındaki mağaza temasındaki ekmek kırıntılarını çıkarın Çoğu web sitesinde, navigasyonu kolaylaştırmak için ekmek kırıntıları eklenir. Sayfanın veya ürünün bulunduğu kategoriyi gösteren her sayfanın üstünde bulunurlar.
Breadcrumbs, arama motoru optimizasyonu için olağanüstü bir araçtır, ancak bunları kaldırmak istiyorsanız, aşağıdaki kodu işlevlere ekleyin. Sonuç bu:
16. Logodaki sitenin sitesi olan WordPress tema logosundaki URL bağlantısını değiştirin. Bu işlev çoğu web sitesi için standarttır ve kullanıcılar logoya her tıkladıklarında verandaya geri dönebileceklerini umarlar. Ya veranda farklı bir konumdaysa? 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 functions.php dosyasına eklememiz gerekir.
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 7. satırda çalışır '('/my-custom-link/'); ', "Özel Link-I" ile değiştirerek özel bağlantınızı ekleyeceksiniz. 17. Mağaza sayfasının tam kategorisini kaldırın Bu özelliği kategoriyi silmek kolaydır. Aşağıdaki satırı Fonksiyonlara eklemeniz gerekir.
}
Add_action ('init', 'skorfront_child_reorder_homepage_contant'); Sonuç bu:
18. Ürün görüntülerini arabadan ve mini kartlardan kaldırın, sadece aşağıdaki kodu işlevlere ekleyin. Sonuç bu:
19. Mağaza sayfamızdaki en son ürünler Yeni bir ürün eklediğinizde, ön sayfadaki 'Yeni Enter' bölümüne eklendi. Bu, mağaza temasında varsayılan ayarlardır. Ancak, ürünü sürekli listenize eklerseniz, mağaza sayfasını bozabilir. 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:
20. Bazı insanlar için mağaza sayfasından en iyi satılan ürünü kaldırın, bu 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:
21. Üstün ürünleri aynı şekilde silin, üstün ürün bölümünü devre dışı bırakmak isteyebilirsiniz. Bu, Functions.php dosyasına aşağıdaki kod görüntülerini ekleyerek yapılabilir.
Remove_action ('ana sayfa', 'schoolfront_featured_products', 40);
22. Ürününüz hakkında açıklama, resim galerisi ve ek bilgiler gibi önemli bilgiler sağlamak için önemli olan “Troli’ye Ekle” düğmesini entegre edin. Sonunda, bu uzun bir sayfa üretebilir. Bununla birlikte, ürünleri arabaya eklemek için sayfaya geri dönmeye zorlanmadan tramvaya ürün ekleme işlemini basitleştirmek istiyorsanız, ekranın üst kısmındaki “Tramvaya Ekle” düğmesini ekleyebilirsiniz. Bu, WooCommerce için STAKTY ADD adlı bir eklenti kullanılarak yapılabilir. Tüm ürün sayfalarınıza bağlı “Troli’ye Ekle” düğmesinin tadını çıkarmak için yükleyin ve etkinleştirin. Sonuç bu:
23. Ödeme sayfasına şehir açılır listesinin bir listesini ekleyin Ekleme sayfasına şehir açılır listesinin bir listesi eklediğinizde, bu, müşterilerimizin kişisel bilgilerini hızlı bir şekilde doldurmalarına yardımcı olacaktır. Bu, ürününüzü gönderebileceğiniz şehirleri kullanılabilir hale getirmenizi sağlayacaktır. Sadece aşağıdaki kodu functions.php dosyasına ekleyin Çocuk teması: add_filter (‘woocommerce_default_address_fields’, ‘overe_checkout_city_fields’, 10, 1); işlev geçersiz kılın
// Burada şehrin dizisinde istediğiniz diziyi belirleyin (işte şehrin bir örneği) $ option_city = dizi (
” => __ (‘şehrinizi seç’),
‘A’ => ‘A’,
); $ Fields [‘City’] [‘Type’] = ‘Seç’;
$ fields [‘city’] [‘options’] = $ option_cities;
$ Field Return;
} Kodun beşinci satırını görürseniz, şehir listemizi belirleyebilirsiniz. ‘A’ kodunun ilk kısmı, boş alanlar veya karakterler içermeyen bir şehir kimliğidir. Şehrin adını tam olarak istediğiniz gibi yazın. Sonuç bu: 24. Artı düğmesini gizleyin ve ürünün miktarını ürün sayfasından eksi, böylece metnin metnini artı ve eksi düğmelerle gizleyebilmeniz için ürünün miktarını eklemek veya azaltmak için yapmanız gereken tek şey eklemektir. Ek CSS bölümünde CSS kodunu takip edin :. Kraliçe { Ekran: Hiçbir şey! Önemli;
} İşte sonuç:
25. Bunu yapmak için ürün sayfasındaki “Troli’ye Ekle” düğmesini gizleyin, sadece özelleştirme bölümüne gidin ve ardından bir CSS ekleyin ve aşağıdaki satırı ekleyin: .single_add_to_cart_button {
Ekran: Hiçbir şey! Önemli;
} Sonuç şu: 26. Varsayılan olarak alt alttan tema kredisini silin, WooCommerce mağaza teması altbilgiye tema kredisi ekler. Kişisel dokunuşla bir altbilgi isteyebilirsiniz. Tema kredisini silmek için, Function.php dosyasına aşağıdaki işlevi ekleyin Çocuk teması: add_action (‘init’, ‘Custom_remove_footer_credit’, 10); Custom_remove_footer_credit () function {) {) {) {)
Remove_action (‘StoreFront_Footer’, ‘StoreFront_credit’, 20);
Add_action (‘StoreFront_Footer’, ‘Custom_storefront_credit’, 20);
}
Custom_storefront_credit () işlevi {
?> & kopya;
<? Php
} İşte sonuç:27. Pencerenin rengini değiştirin ve yazı tipi boyutu, ayarlamaları kullanarak sayfa widget’ının yazı tipinin rengini veya boyutunu değiştirmenin doğrudan bir yolu yoktur. Aşağıdaki CSS kod satırlarını ekleyerek kolayca değiştirebilirsiniz. Bunu yapmak için, yalnızca özelleştirme bölümüne gidin, ardından katkı maddesi CSS ve aşağıdaki satırları ekleyin:. Widget bölgesi. Widget {
yeşil renk;
Yazı tipi boyutu: 1em;
} İşte sonuç:
28. WooCommerce mağaza temasının varsayılan ürün sürümündeki “Satış” merdivenini gösterin, belirli ürünler için satış veya indirim fiyatlarını belirlemenize olanak tanır. Ancak, ürün resmine bir satış rozeti eklemek istiyorsanız, özelleştirmeye ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin: UL.
Pozisyon: Mutlak;
Yukarıda: 137px;
Sağ: 62 piksel;
} İşte sonuç:
29. Satış rozetinin rengini değiştirmek için “satış” rozetinin rengini değiştirin, sadece özelleştirmeye gidin, ardından ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin :. {arka plan rengi: #ffffff;
Sınır rengi: yeşil;
yeşil renk;
} İşte sonuç: 30. “Artı-Eksi” kutusunun renginin miktarını değiştirin Miktar düğmesinin arka plan rengini ve eksi değiştirilerek yapılabilir. Bunu yapmak için, özelleştirme bölümüne gidin ve ardından bir CSS ekleyin ve aşağıdaki satırları ekleyin:.
Renk: #000;
Renkler: #F5DF72;
} İşte sonuç: 31. Mağaza başlık ayarının arka plan renginin nasıl değiştirileceği WordPress, mağaza teması başlığında arka plan rengini değiştirmemizi sağlar. Bunu yapmak için, özelleştirme bölümüne gidin, ardından başlık:
32. Başlıktaki minicart arka plan rengini değiştirin Başlık rengini değiştirirken, minicart açılır menü bu rengi devraldı. Ancak, görünürlüğü artırmak için aşağıdaki CSS kurallarını kullanarak değiştirebilirsiniz. Ek CSS bölümünü özelleştirmek ve aşağıdaki satırları eklemek için gezinmeniz yeterlidir: wooocommerce.widget_shopping_cart {
Arka plan: Beyaz;
Sınırlar: 12 piksel;
} İşte sonuç: 33. Telif Hakkı altında CSS kullanarak altbilgi mağazasına resim ekleyin, kendi logonuzu, alınan ödemenizi veya ortak rozeti telif hakkı metni altına eklemek istiyorsanız, katmana gidin, ayarlayın, ardından Footer’ı tıklayın. Paneli genişletmek için Özelleştirme’yi tıklayın ve arka plandaki görüntüyü seçin. İstediğiniz görüntüyü seçin ve ekleyin. Tekrar ve alttan seçin veya istediğiniz gibi manuel olarak konumlandırın. Özelleştiriciye geri dönün ve paneli genişletmek için CSS’yi tıklayın. Ancak, yüzdenin spesifikasyonlarınızla eşleştiğinden emin olmalısınız. Sonra aşağıdaki satırı ekleyin: .info-situs: sonra {content: ”;
Arka plan-görüntü: URL (kendi URL’nizi ekleyin);
Ekran bloğu;
Genişlik: 100 piksel;
Yükseklik: 100 piksel; Marj: 0 otomatik;
} 34. Alt altındaki boşluktan nasıl kurtulur, ardından ek CSS bölümünü özelleştirin ve aşağıdaki satırı ekleyin:. } İşte sonuç:
35. Başlıktan nasıl kurtulur ancak yine de menü, ek CSS bölümünü özelleştirmeye ve aşağıdaki satırları eklemek için yeterlidir: #Masthead & GT; .Colf,
#Masthead .Site-Header-Card { Ekran: Hiçbir şey; }
36. Varsayılan olarak köprünün alt çizgisini nasıl silir, mağaza teması bağlantının altını çizer ve silmek istiyorsanız, özelleştirme bölümüne gidin, ardından ek CSS’yi ekleyin: A {A {A {A {
Metin dekorasyonu: Hiçbir şey! Önemli;
} İşte sonuç: 37. WooCommerce Storefront temasındaki Superior Resimleri Nasıl Silinir WooCommerce Store sadece Fonksiyon’a aşağıdaki satırları ekleyin. 38. Vitrin ana sayfasındaki yatay çizginin renginin nasıl değiştirilmesi, özel dosyaya aşağıdaki kodu ekleyin.
.Page-TEMPLATE-TEMPLATE-HOMPAGE. Vitrin Ürün Bölümü {
Sınır rengi: kırmızı;
} 39. WooCommerce Storefront Satış Rozeti Nasıl Ayarlanır Ek CSS bölümünüze aşağıdaki kodu ekleyin :.
Arka plan rengi: #ffffff;
Sınır rengi: #FF0000;
Renk: #FF0000;
} İşte sonuç: 40. Her şeyi aynı anda değiştirmek için logonun boyutunu, ikincil navigasyon ve arama çubuğunu nasıl değiştirir, ek CSS bölümünüze aşağıdaki kodu ekleyin: @media ekran ve (min-genişlik: 768px) {
/ * Logo */
.Site-Header .Site-Branding, .Site-Header .Site-Logo-Dashor, .Site-Header. Site-logo-link {genişlik:%30! Önemli; /* İsterseniz PX değerini kullanın, örn. 350 piksel */}
/ * İkincil navigasyon */
.Site-başlık. /* İsterseniz PX değerini kullanın, örn. 350 piksel */}
/ * Arama çubuğu */
.Site-Header. Site-Research {genişlik:%30! Önemli; /* İsterseniz PX değerini kullanın, örn. 350 piksel */} 41. WooCommerce Ürün sayfasındaki yan çubuğun nasıl silinmesi Daha geniş hale getirmek için Fonksiyonlara aşağıdaki kodu ekleyin.
Remove_action (‘schoolfront_idabarabar’, ‘schoolfront_get_sembarbar’, 10);}
}
Bu satırı ek CSS bölümünüze ekleyin:
body.wooCommerce #Primary {genişlik:%100; } İşte sonuç:
42. Menü öğesine resim veya simgeler nasıl eklenir. Bunu yapmak için, görüntü menüsünü yükleyin ve etkinleştirin, simgeler kolay eklenti yaptı ve simgeni istediğiniz gibi ekleyin. İstenen boyutları farklı menü alanlarına eklemeniz yeterlidir. Aşağıda görsel bir açıklama:
43. Bu mağazaya üst bıçaklar nasıl eklenir sosyal simgeler veya hoş geldiniz mesajları gibi harika şeyler eklemek için yapılabilir. Bunu eklemek için, aşağıdaki kod satırını Function.php çocuk dosyasına ekleyin: /**
* Üst çubuğu başlıktan önce mağazaya ekleyin.
*/ Vitrin function_add_topbar () {
?>
Woostore’u test etmeye hoş geldiniz
<? Php
}
Add_action ('schoolfront_beefore_header', 'schoolfront_add_topbar'); Ardından, ek CSS bölümüne bu CSS'yi ayarlamanıza ekleyin: #
Arka plan rengi: #1F1F20;
Yükseklik: 40 piksel;
Hat yüksekliği: 40 piksel;
Renk: #ff;
} İşte sonuç:
44. Üst çubuğunuza özel bir mesaj nasıl eklenir. Üst çubuğa özel bir mesaj eklemenin başka bir yoludur. Sadece aşağıdaki kod satırını function.php dosyasına ekleyin Çocuk dosyası: /**
* Üst çubuğu başlıktan önce mağazaya ekleyin.
*/
Vitrin function_add_topbar () {
Global $ current_user;
get_currentuserinfo ();
if (! boş ($ current_user-> user_firestname)) {
$ user = $ current_user-> user_firestname;
} değilse {
$ user = __ (‘misafir’, ‘vitrin-child’);}
?>
hoş geldiniz !
<? Php
}Add_action (‘schoolfront_beefore_header’, ‘schoolfront_add_topbar’);
45. Mağaza meta kaydırıcı ile dolu geniş bir meta kaydırıcı nasıl yapılır birçok WordPress sitesinde çok popülerdir. Kaydırıcıyı tam olarak genişletmek için bu koddan biraz ekleyin. Tam geniş olmak için çocuğun temasının gerilmesine ekleyin: add_action (‘init’, ‘child_theme_init’);
Child_theme_init () işlevi {
Add_action (‘schoolfront_beefore_content’, ‘woa_add_full_slider’, 5);
}
Woa_add_full_slider () işlev {?>
<? Php
} Ancak, bunu yapmak için bir eklenti kullanabilirsiniz ve iyi bir örnek WoosLider eklentisidir. 46. mağazaya ekstra google yazı tipleri nasıl eklenir çok kolaydır ve yalnızca kolay Google Fonts eklentisini indirmeniz ve etkinleştirmeniz gerekir. WordPress topluluğundaki 300.000'den fazla kullanıcı bu iyi yazı tipi eklentisine güveniyor.
47. Bu başlıktan arama çubuğunun nasıl silineceği Dosya işlevine aşağıdaki kodu ekleyerek, başlıktan arama çubuğunu silmenin alternatif bir yoludur.
işlev jk_remove_storefront_header_search () {
Remove_action ('StoreFront_Header', 'StoreFront_product_search', 40);
} İşte sonuç:
48. Sayfa başlığını nasıl gizleyeceğiniz Vitrindeki sayfa başlığını gizlemek istiyorsanız, WordPress.org topluluğunda bulunan mağaza teması başlığı eklentisi için geçiş kurmanız ve etkinleştirmeniz gerekir. 10.000'den fazla kullanıcı bu eklentiye güveniyor. 'Woothemes tarafından tasarlanan' bu altbilgi mağazasında nasıl silinir. Daha önce tartışıldığı gibi bu sorun için alternatif bir çözümdür. Bu kodu dosya işlevine eklemeniz gerekir.
Custom_remove_footer_credit () işlevi {
Remove_action ('StoreFront_Footer', 'StoreFront_credit', 20);
Add_action ('StoreFront_Footer', 'Custom_storefront_credit', 20);
Custom_storefront_credit () işlevi {
?>
& kopya;
<? Php
} İşte sonuç:
50. Müthiş yazı tipi simgesinin vitrin menünüze nasıl eklenmesi WordPress.org topluluğunda bulunan Menus Font Awesome 4 eklentisi kullanılarak yapılabilir. 50.000'den fazla kullanıcı bu eklentiye güveniyor.
51. Mağazadaki hücresel ekrandaki 'navigasyon' adının nasıl değiştirilmesi Bu kodu dosya işlevine ekleyin.
52. ‘Hesap Sayfam’ vitrine bir müşteri avatarı nasıl eklenir, yalnızca function.php dosyasına aşağıdaki kod satırını ekleyerek yapılabilir Çocuk dosyası:/**
* Hoş geldiniz mesajımdan Müşteri Avatar Baskı
*/
StoreFront_myaccount_customer_avatar () işlevi {
$ current_user = wp_get_current_user ();
Echo ‘
‘. get_avatar ($ current_user-> user_email, 72, ”, $ current_user-> display_name). ”;
}
Add_action (‘wooocommerce_beefore_my_account’, ‘schoolfront_myaccount_customer_avatar’, 5);
Ardından, CSS ek bölümüne aşağıdaki CSS komut kurallarını ekleyin:
.Avatar_akun i {
Sınır-sağ: 1px katı RGBA (0, 0, 0, 0.1); şamandıra: sol; Dolgu-sağ: 10 piksel;
Genişlik: 83 piksel;
}
.akun me_pengguna {
Sınır sol: 3px katı #787e87;
şamandıra: doğru;
Dolgu-sol: 10 piksel;
Genişlik:%88; } İşte sonuç:
53. WooCommerce Shop altbilgisinin yüksekliği nasıl değiştirilir WooCommerce mağaza altbilgisinin yüksekliğini değiştirmek çok kolaydır.
Dolgu Top: 25px;
}
div.situs-info {
Dolgu Top: 16px;
Rulman: 25px;
} İşte sonuç:
54. Belirli ana sayfa temalarının mağazasına arka plan görüntüleri ekleme mağaza varsayılan teması, ü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ı bölüme sahiptir. Ek CSS bölümüne aşağıdaki kodu ekleyin:
Arka plan pozisyonu: orta orta;
Arka Plan-Tekrar: Tekrarlanmamış;
Arka plan boyutu: kapak;
-O-background boyutu: kapanış;
} İşte sonuç:
55. Arka plan rengini mağazanın ön sayfasına ekleyin Bunu yapmak için önce rengi eklemek istediğiniz parçayı tanımlamanız gerekir. Bu, ek CSS bölümüne aşağıdaki kodu ekleyerek kolayca yapılabilir:
Arka plan rengi:#ffeb3b;
} İşte sonuç:
56. 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, ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir: .storefront-recent-producst.
.Storefront-üretim-kategoriler.
.Storefront özellikli ürünler.
.Storefront-popüler ürünler. .Storefront-on-Sale-Producst.
.Storefront en iyi satan ürünler.
57. Ana Sayfanın Başlığı Nasıl Değiştirilir 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:
Showcase_produuk_kateathe kategorisi
Showcase_terkini_produuk_argsetalase_fitur_produuk_args
Showcase_popular_produuk_args
Showcase_on_penjualan_produuk_args Showcase_best_selling_products_args
Function.php dosyasına aşağıdaki kodu ekleyin Çocuklar Tema: Add_filter (‘StoreFront_Featured_Products_args’, ‘Custom_storefront_product_featured_title’);
// Ö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ç: 58. Home Peraga Sepe Ürünü Nasıl Artırılır Kesinlikle Function.php Dosya Çocuk Temasına Aşağıdaki Kod Satırını Ekleyin. add_filter (‘StoreFront_feated_products_shortcode_args’, ‘Custom_storefront_feated_product_per_page’);
// Üstün Ürün Superior sayfa başına
Custom_storefront_featured_product_per_page ($ args) işlevi $ args [‘per_page’] = 10;
geri $ args;
} 59. Ana Sayfa Sayfaları Nasıl Artırılır Izgara sütun ürünü veya sütun, Function.php Dosya Ç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ç:
60. 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ı’] = 10;
geri $ args;
} 61. Veranda bölümünün başlığının altına bir açıklama nasıl eklenir Bu kodu Fonksiyon’a ekleyin.php dosyası Çocuk Teması: Add_action (‘StoreFront_homePage_Aft_Feated_Products_Title’, ‘Custom_storefront_product_feated_descripts’);
<? PHP} 62. Mağaza Verandanın En İyi Sıralı Ürün Bir Bölümü Nasıl Silinir Bunu yapacak iki tane vardır. Bunlardan biri, bu bölümü silmenize yardımcı olacak bir eklenti yüklemektir. Ana sayfa kontrol eklentisini görebilirsiniz. Ancak, bir kanca kullanarak bölümü silmeniz yeterlidir. Bu yalnızca Fonksiyon'a aşağıdaki satırları ekleyerek yapılır. Buna ek olarak, ek CSS bölümüne aşağıdaki kodu ekleyerek silebilirsiniz: .storefront-popüler ürünler. Bölüm-başlık {Ekran: Yok;} 63. Üst sıralama ürününün başlığı nasıl değiştirilir. Çocuk: Add_filter ('StoreFront_popular_products_args', 'Custom_storefront_product_popular_title');
// Önde gelen ürün başlığı ön sayfası
$ args [‘başlık’] = __ (‘en iyi ürün’, ‘vitrin’);
geri $ args;
} 64. Storefront için varsayılanın en yüksek değerinde daha fazla ürün nasıl görüntülenir. 4 ürün en yüksek değerde görüntülenir. Bu örnekte, onu 15 ürüne yükselteceğiz. Bu kodu Function.php dosyasına ekleyin Çocuklar Tema: Add_filter (‘StoreFront_Popular_Products_Shortcode_args’, ‘Custom_storefront_top_product_per_page’; // Sayfa başına üstün üstün ürün
Custom_storefront_top_product_per_page ($ args) işlevi {
$ args [‘per_page’] = 12;
geri $ args;
} 65. Satış ürünü bölümünün nasıl silinir Mağazanın ön sayfasından bunu yapacak iki tane vardır. Bunlardan biri, bu bölümü silmenize yardımcı olacak bir eklenti yüklemektir. Ana sayfa kontrol eklentisini görebilirsiniz. Ancak, bir kanca kullanarak bölümü silmeniz yeterlidir. Bu yalnızca Fonksiyon’a aşağıdaki satırları ekleyerek yapılır. 66. Bu ürünün arka plan renginin nasıl değiştirilmesi Ek CSS bölümüne aşağıdaki kodu ekleyerek yapılabilir:
Arka plan rengi:#ffeb3b;
} 67. Düğmenin nasıl ayarlanır Bir özelleştirici kullanılarak değiştirilebilir. Görünüşe gidin, sonra ayarlayın. Düğmeyi tıklayın ve spesifikasyonlarınıza göre verin. İşte örnekler:
68. Bu kodu kullanarak özel bir altbilgi mağazası nasıl eklenir, özel bir altbilgi bağlantısı ekleyebilirsiniz ve istediğiniz gibi ayarlayabilirsiniz. Bu kod satırını Function.php dosyasına ekleyin Çocuklar Teması: Add_filter (‘StoreFront_credit_links_output’, function ($ default_links) { $ output = [
hızlı koş(
‘%s ‘, get_home_url (), ‘buraya özel bir bağlantı ekle’),
$ default_links
];
Yine patladı (
‘ ‘, $ output
);
}); Sonuç bu:
69. Arşivde Blog Vitrin Teklifini Görüntüle Woocommerce mağaza temasında bir blog çalıştırırsanız, bu kod blog yazısı arşivinde eksiksiz içerik yerine bir blog teklifini görüntüleyebilir. Sadece bu kod satırını function.php dosyasına ekleyin Çocukların teması: add_action (‘init’, function () {
Remove_action (‘StoreFront_Loop_Post’, ‘StoreFront_Post_Content’, 30);
Add_action (‘schorefront_loop_post’, function () {
echo ‘
‘;
if (has_post_thumbnail ()) {
the_post_thumbnail (‘büyük’, [‘itemprop’ => ‘resim’]);
}
alıntı_();
echo ”;
}, 30);
}); 7.
return ”;
}); 71. Eklentilen eklenti bildirimi nasıl silinir eklenti bildirimleri bazı kişilere müdahale edebilir ve silinmesi çok kolaydır. Sadece bu kod satırını function.php dosyasına ekleyin Çocuklar Tema: // Belirli eklentileri sil
İşlev my_recommended_plugins ($ eklentiler) { // woocommerce yüklemek için bildirimi sil
Unset ($ eklentileri [‘wooocommerce’]);
// eklentiyi döndür
$ Eklenti döndür;}
add_filter (‘wpex_recommended_plugins’, ‘my_recommended_plugins’);
// Tüm eklentileri sil
// Birkaç eklenti kullanıyorsanız bu önerilmez, çünkü bildirimler güncellemeyi bilgilendirmek için de kullanılır
add_filter (‘wpex_recommended_plugins’, ‘__return_empty_array’); 72. Koşullu altbilgi bilgileri nasıl görüntülenir veya gizlenir veya bu kod satırını dosya işlevine ekleyin.
// ön sayfada gizle
if (is_front_page ()) {
$ bool = yanlış; }
// boolean return
Dönüş $ bool;
}
add_filter (‘wpex_callout_enabled’, ‘my_callout_visity’, 20); 73. Meta jeneratör temasının nasıl silineceği Destek için kullanılır, böylece kullandığınız tema sürümü hakkında söylenir. Orada sorun yok ama burada silmek istiyorsanız yol var. Sadece bu kod satırını function.php dosyasına ekleyin Çocukların teması: add_action (‘init’, function () {
Remove_action (‘wp_head’, ‘wpex_theme_meta_generator’, 1);
}, 10) 74. Herhangi bir sayfa için ana sayfanın başlığını her devre dışı bıraktığınızda, başlıksız bir sayfa için başlığın altına boşluklar nasıl eklenir, başlığın altında yer kalmaz. Bu kod görüntüleri, bir vardiya, görüntü veya üstte düz olan başka bir içerik ekleyebilmeniz için boşluk eklemenize yardımcı olacaktır. Ek CSS bölümüne aşağıdaki kodu ekleyin: Body.Page-Header-Disabled #Main {
Dolgu Top: 30px;
} 75. Telefondaki kaydırma düğmesi nasıl gizlenir Ek CSS bölümüne aşağıdaki kodu ekleyin: @edia yalnızca ekran ve (maks. ; }
} 76. Üstbilgiler ve altbilgiler düzeni “kutusu” nun dışına taşırır Bu kod satırını dosya işlevine ekleyin.
// üstbilgi/altbilgiyi sil
Remove_action (‘wpex_hook_wrap_top’, ‘wpex_header’);
Remove_action (‘wpex_hook_wrap_bottom’, ‘wpex_footer’);
// üstbilgiyi/altbilgiyi geri ekle
Add_action (‘wpex_outer_wrap_before’, ‘wpex_header’, 9999);
Add_action (‘wpex_outer_wrap_aft’, ‘wpex_footer’);
}
Add_action (‘init’, ‘myprefix_move_header_footer_out_of_boxed_layout’); 77. Izgara modülüne daha fazla sütun seçeneği nasıl eklenir Bu kod satırını Fonksiyon’a ekleyin.
// gerçek sütun için. Örnek ‘.span_1_of_8 {genişlik:%12.5; } ‘
İşlev myprefix_grid_columns ($ sütunlar) {
$ sütunlar [‘8’] = ‘8’;
$ sütunlar [‘9’] = ‘9’;
$ sütunlar [’10 ‘] =’ 10 ‘; // istediğiniz kadar ekle
$ Sütunu döndür;
}
add_filter (‘wpex_grid_columns’, ‘myprefix_grid_columns’); 78. Başlığın altına ikincil bir özel menü nasıl eklerim.
<? Php}
Add_action ('wpex_hook_header_after', 'add_custom_menu_above_main_content'); 79. Sayfa Başlığının Başlığı Nasıl Silinir ve Ekmek Kırıntılarını Bırakın Bu Kod Satırını Fonksiyona Ekleyin.php Dosya Çocuk Teması: // Sayfa başlık alanının başlığını silin
Add_action ('init', function () {
Remove_action ('wpex_hook_page_header_inner', 'wpex_page_header_title');
Remove_action ('wpex_hook_page_header_content', 'wpex_page_header_title'); // V5+ sayısı
}); 80. Bu eyleme referans Tüm mağaza temasında kullanılan Add_action () işlevidir. İşlevi, General Do_Raction tarafından tanımlandığı gibi kancaya ekler Bazı genel eylem işlevleri: StoreFront_beefore_site – tag – yürütüldükten sonra yürütüldü – >
StoreFront_Content_Top – StoreFront_beefore_Header’ın Başlığı – Etiketinden sonra yürütüldü
Storefront_header-
içinde
Veranda içerik bölümü schoolfront_homepage_before_product_categories-run Önceden judul bagian üggori produk skorfront_homepage_after_proct = diechek_after_proct Bagian Beranda Produuk Terbaru StoreFront_Homepage_BEFORE_RECENT_PRODUCTS-Dijalankan Sebelum Bagian Beranda STORFRONTS_TITSEP_RECENTF_PROTSHE SETF_PROTF_PROTSHE SETFF SETFF SETSHE <SEKTER SETSE <SEKTER SETSE <SEKTER" <Bölüm class = "StoreFront-
Homefront_homepage_affer_featured_products_title
produk unggulan judul bagian storefront_homepage_after_featured_products – Dijalankan setelah bagian beranda
Produk populer storefront_homepage_before_popular_products – Dijalankan sebelum
bagian beranda storefront_homepage_after_popular_products_title – Dieksekusi setelah
Popüler Ürün Başlığı Bölüm StoreFront_homePage_Affer_Popular_Products-“Bölüm Class =” Store Class = “Storefront Ürün Popüler”> Satılık Storefront_HomePage_BEFORE_ SATIŞ-PRODUCTS “> HomeFront_BoregePage_Affer_Onsal_Pructfe Age_Beefore_Best_Selling_Products-Run Veranda’dan Önce Ürünün en iyi bölümünün en iyi bölümünün başlığı
Storefront_homepage_aft_Best_selling_products-Run Ana bölümden sonra Blog StoreFront_Loop_Before Blog Arşivlerindeki Tüm Gönderilerden Önce Blog Arşivi Run
StoreFront_Loop_Post – Blog Arşivindeki her gönderiden önce çalıştırın
StoreFront_Post_Content_Before – Blogstorefront_post_content_after arşivindeki her bir yayının içeriğinden önce çalıştırın – Genel PageFront_Page_Before – Etiketten sonra yürütülen her bir yayının içeriğinden sonra yürütüldü.
Storefront_page-Etiketlendikten sonra ‘
Bir sayfada açılış
Storefront_page_aft-Etiketin sonunda yürütüldü ‘
`tek bir sayfada bir sayfada schoolfront_single_post_bore-fore-fore-fore-fore-fore-fore` `tek bir blog gönderisinde >
StoreFront_single_post_top -açılış etiketinden sonra
Tek bir gönderide
Storefront_single_post – Gönderi içeriği görüntülemek için StoreFront_single_post_top Hook’tan hemen sonra yürütüldü
schorefront_single_post_bottom -tag
bir gönderide kapanma
Storefront_single_post_aft – Tag’dan önce çalıştırın StoreFront_Idebar’ın yanındaki bir blog yazısında kapanış – Kenar çubuğu içeren tüm sayfalarda çalıştırın, sağlanan widget_beefore_footer dipnotlar – Tag <footer id = "colophon" tag önden önce yürütülür.
Storefront_footer – etiketini kapatmadan önce yürütüldü.
StoreFront_aft_Footer – Kapalı Filtre Referans Kılavuzu Etiketinden sonra yürütülür Bu bölüm, Storefront temasında bulunan en yaygın kullanılan filtrelerden bazılarını içerir. Komentar File: komentar.php storefront_comment_form_args – filter HTML judul balasan komentar sebelum dan sesudah Fungsi template etalase File: /inc/storefront-template-functions.php Menu navigasi storefront_menu_toggle_text – filter teks toggle menu responsif Beranda Kategori Produk storefront_product_categories_args – memfilter argumen kategori produk berandastorefront_product_categories_shortcode_args – Kısa Kod Argümanları Filtreleme Ürün Kategorisi Son Ürün StoreFront_Recent_Products_args – En son ürün argümanlarını filtreleme
StoreFront_Recent_Products_Shortcode_args – Kısa Kodun Filtreleme Argümanı Son ürünler StoreFront_Featured_Products_args – Üstün ev -superior ürünlerinin filtre argümanı.
StoreFront_Feated_Products_shortcode_args – Üstün ürünün kısa kodlu kodlama argümanını filtreleme. Popüler ürün StoreFront_popular_products_args – Popüler ana sayfa ürünlerinin argümanını filtreleme.
StoreFront_popular_products_shortcode_args – Popüler ev ürünlerinin kısa kodunun filtreleme argümanı. SATILIK ÜRÜNLER StoreFront_on_sale_products_args – Filtre Home
Storefront_on_sale_products_shortcode_args -en iyi satılan ürünün kısa kod argümanında ev filtresi StoreFront_Best_selling_products_args -En iyi satan ev satan ürün argümanını filtreleme
storefront_best_selling_products_shortcode_args – memfilter argumen kode pendek produk terlaris beranda Postingan tunggal storefront_single_post_posted_on_html – filter single yang diposting pada detail catatan kaki storefront_footer_widget_rows – memfilter jumlah baris widget footer (default: 1)storefront_footer_widget_columns – memfilter jumlah kolom widget footer (default: 4)
Schorefront_copyright_text – telif hakkı altbilgisi metnini filtreleme
StoreFront_Credit_Link-Footer Kredi Filtre Altbilgisi İşlev Fonksiyon Dosyası: /incn/storefront-junctions.php StoreFront_header_styles-Filter başlık stili
schorefront_homepage_content_styles-filter veranda içerik stili dosya sınıfı: /clas-torefront.php schorefront_custom_background_args-filter varsayılan arka plan argümanı
StoreFront_Default_Background_Color – Filtre Arka Plan Renk Varsayılan Site
StoreFront_ideBar_args – Varsayılan kenar çubuğu argümanını filtreleyin
StoreFront_google_font_families – Family Family Font Google Varsayılan
StoreFront_Navigation_Markup_Template – Filtre Navigasyon Çıktı İşaretlemesi. Woocommerce Şablon Fonksiyon Dosyası: /Woocommerce /StoreFront-Woocommerce-Template-Fonksiyon
StoreFront_Loop_Columns – Filtre Ekran Döngüsü Varsayılan Ürünler (Varsayılan: 3)
schorefront_handheld_footer_bar_links-woocommerce dosyası sınıf altbilgi footer dosyasını filtreleme: /woocommerce/class-torefront-woocommerce.php schoolfront_related_products
StoreFront_product_thumbnail_columns – Ürün küçük resim sütununu filtreleyin (varsayılan: 4)
StoreFront_products_per_page – Ürün kategorisindeki sayfa başına filtreleyin.Sonuç Vakfa temasını ayarlamak istiyorsanız, kapsamlı mağaza ayar kılavuzunda paylaşılan ipuçları başlamak için en iyi yer olmalıdır.Ayrıca, mağaza çocuğunun temasına hızlı bir şekilde ekleyebileceğiniz ve sonuçları anında alabileceğiniz bir kod görüntüsü sunar.Bu mağaza özelleştirme kılavuzunun yararlı olduğunu bulmanız umudum.Mezarlık Makaleleri, Altbilgi Vekili ve Woocommerce Linkleri ile 4 Basit Seçenek
Eklenti kullanarak Metin ve Bağlantı Sabahı Nasıl Silinir
WordPress menü öğelerini ayrı ayrı düzenleme CSS WordPress Menü Sınıfı
Divi hücresel menü için yayılabilecek hızlı bir onarım çözümü nasıl yapılır
Bir eklenti kullanmadan WordPress’te nasıl sayfalandırma numarası yapılır
Storefront_footer – etiketini kapatmadan önce yürütüldü.
StoreFront_aft_Footer – Kapalı Filtre Referans Kılavuzu Etiketinden sonra yürütülür Bu bölüm, Storefront temasında bulunan en yaygın kullanılan filtrelerden bazılarını içerir. Komentar File: komentar.php storefront_comment_form_args – filter HTML judul balasan komentar sebelum dan sesudah Fungsi template etalase File: /inc/storefront-template-functions.php Menu navigasi storefront_menu_toggle_text – filter teks toggle menu responsif Beranda Kategori Produk storefront_product_categories_args – memfilter argumen kategori produk berandastorefront_product_categories_shortcode_args – Kısa Kod Argümanları Filtreleme Ürün Kategorisi Son Ürün StoreFront_Recent_Products_args – En son ürün argümanlarını filtreleme
StoreFront_Recent_Products_Shortcode_args – Kısa Kodun Filtreleme Argümanı Son ürünler StoreFront_Featured_Products_args – Üstün ev -superior ürünlerinin filtre argümanı.
StoreFront_Feated_Products_shortcode_args – Üstün ürünün kısa kodlu kodlama argümanını filtreleme. Popüler ürün StoreFront_popular_products_args – Popüler ana sayfa ürünlerinin argümanını filtreleme.
StoreFront_popular_products_shortcode_args – Popüler ev ürünlerinin kısa kodunun filtreleme argümanı. SATILIK ÜRÜNLER StoreFront_on_sale_products_args – Filtre Home
Storefront_on_sale_products_shortcode_args -en iyi satılan ürünün kısa kod argümanında ev filtresi StoreFront_Best_selling_products_args -En iyi satan ev satan ürün argümanını filtreleme
storefront_best_selling_products_shortcode_args – memfilter argumen kode pendek produk terlaris beranda Postingan tunggal storefront_single_post_posted_on_html – filter single yang diposting pada detail catatan kaki storefront_footer_widget_rows – memfilter jumlah baris widget footer (default: 1)storefront_footer_widget_columns – memfilter jumlah kolom widget footer (default: 4)
Schorefront_copyright_text – telif hakkı altbilgisi metnini filtreleme
StoreFront_Credit_Link-Footer Kredi Filtre Altbilgisi İşlev Fonksiyon Dosyası: /incn/storefront-junctions.php StoreFront_header_styles-Filter başlık stili
schorefront_homepage_content_styles-filter veranda içerik stili dosya sınıfı: /clas-torefront.php schorefront_custom_background_args-filter varsayılan arka plan argümanı
StoreFront_Default_Background_Color – Filtre Arka Plan Renk Varsayılan Site
StoreFront_ideBar_args – Varsayılan kenar çubuğu argümanını filtreleyin
StoreFront_google_font_families – Family Family Font Google Varsayılan
StoreFront_Navigation_Markup_Template – Filtre Navigasyon Çıktı İşaretlemesi. Woocommerce Şablon Fonksiyon Dosyası: /Woocommerce /StoreFront-Woocommerce-Template-Fonksiyon
StoreFront_Loop_Columns – Filtre Ekran Döngüsü Varsayılan Ürünler (Varsayılan: 3)
schorefront_handheld_footer_bar_links-woocommerce dosyası sınıf altbilgi footer dosyasını filtreleme: /woocommerce/class-torefront-woocommerce.php schoolfront_related_products
StoreFront_product_thumbnail_columns – Ürün küçük resim sütununu filtreleyin (varsayılan: 4)
StoreFront_products_per_page – Ürün kategorisindeki sayfa başına filtreleyin.Sonuç Vakfa temasını ayarlamak istiyorsanız, kapsamlı mağaza ayar kılavuzunda paylaşılan ipuçları başlamak için en iyi yer olmalıdır.Ayrıca, mağaza çocuğunun temasına hızlı bir şekilde ekleyebileceğiniz ve sonuçları anında alabileceğiniz bir kod görüntüsü sunar.Bu mağaza özelleştirme kılavuzunun yararlı olduğunu bulmanız umudum.Mezarlık Makaleleri, Altbilgi Vekili ve Woocommerce Linkleri ile 4 Basit Seçenek
Eklenti kullanarak Metin ve Bağlantı Sabahı Nasıl Silinir
WordPress menü öğelerini ayrı ayrı düzenleme CSS WordPress Menü Sınıfı
Divi hücresel menü için yayılabilecek hızlı bir onarım çözümü nasıl yapılır
Bir eklenti kullanmadan WordPress’te nasıl sayfalandırma numarası yapılır
