Vitrin WooCommerce Temasını Özelleştirmek için 80'den Fazla Püf Noktası : Nihai Vitrin Teması Özelleştirme Kılavuzu

WooCommerce vitrin temanızı özelleştirmenin bir yolunu mu arıyorsunuz? Bu makale, WooCommerce Storefront temanızı özelleştirmek için kullanabileceğiniz 80'den fazla farklı numaraya sahiptir. Bu kılavuzu okuduktan sonra WooCommerce Storefront tema özelleştirmesi kolay olmalıdır.

WooCommerce Storefront, ücretsiz olan basit ve güçlü bir temadır. Bu tema, ürün sunumu ve kullanıcı erişimi açısından mağazanız üzerinde size büyük kontrol sağlar. Ücretsizdir ve size alt temalar aracılığıyla çok sayıda özelleştirme seçeneği sunar.

WooCommerce Storefront temasını özelleştirmek için tüm püf noktalarını öğrenmeden önce, temel bilgileri bize bildirin. Ek olarak, WooCommerce Storefront Temasının nasıl kurulacağı ve yapılandırılacağı hakkında ayrıntılı bir kılavuz olacaktır.

Vitrin WooCommerce Teması

WooCommerce projeniz var mı? Cevabınız evet ise, o zaman Storefront, WooCommerce ile zarif bir şekilde çalışmak üzere oluşturulmuş en iyi e-Ticaret temasıdır.

Bu tema, WooCommerce Core geliştiricileri tarafından, her türlü özelleştirmeye açık, temiz ve minimal bir tasarımla geliştirilmiştir.

Bu tema, herhangi bir cihazda çalışacak duyarlı bir tasarıma sahiptir. İşte bu temayı indirerek elde edeceğiniz harika özelliklerden bazıları:

• • Zarif tasarım.
  • Duyarlı düzen.
  • SEO dostu işaretleme.
  • Özel sayfa şablonları.
  • Özgür.
  • GPL lisanslıdır.
  • Diğer diller için çeviri hazır.

WooCommerce Vitrin Teması Nasıl Kurulur ve Yapılandırılır

Storefront temasını indirmek, WordPress siteniz için başka bir eklenti yüklemek gibidir. İlk olarak, Görünüm , Temalar ve son olarak Yeni Ekle'ye gitmeniz gerekir. Arama alanına 'storefront' yazın ve ardından yükle düğmesine tıklayın.

Kurulduktan sonra, Etkinleştir düğmesini kullanarak temayı etkinleştirebilirsiniz.

Ek olarak, Storefront'un en son sürümünü indirmek için wordpress.org adresini ziyaret edebilirsiniz. Ardından, ayıklanan klasörü FTP aracılığıyla sunucunuzdaki temalar dizinine yükleyebilirsiniz. Bundan sonra, Görünüm'e, ardından Temalar'a giderek temayı etkinleştirmeniz gerekir.

Sayfa Şablonları

Storefront, varsayılan WooCommerce sayfalarına ek olarak otomatik olarak iki ek sayfa şablonu oluşturur. Bunlar Ana Sayfa ve Tam genişliktir.

Ana Sayfa Şablonu.

Ana Sayfa şablonu, tüm ürünlerinizi göstermenin harika bir yolunu sunar ve size ürünler ve ürün kategorilerine ilişkin bir genel bakış sunar. Mağazanızın ziyaretçileri, mağazanıza girerken ilk olarak bu sayfaya gelir.

Yeni bir sayfa oluşturmanız ve görüntülemek için biraz içerik eklemeniz gerektiğinden, kurulumu çok kolaydır. Ardından, Sayfa Nitelikleri meta kutusundaki şablonlar açılır menüsünden 'Ana Sayfa'yı seçmeniz gerekecektir.

Bu sayfayı yayınladıktan sonra, Ayarlar'a ve ardından Okuma'ya giderek onu ana sayfa olarak ayarlayabilirsiniz.

Ardından 'Statik bir sayfa' seçeneğini işaretleyecek ve ardından 'Ön sayfa' açılır menüsünden oluşturulan ana sayfayı seçeceksiniz. Değişiklikleri kaydettikten sonra, bunlar otomatik olarak ön uca yansıtılacaktır.

Yapılandırma tamamlandıktan sonra Ana Sayfanızın birden fazla bölümü olmalıdır.

Önerilen ürünler, hayran favorileri, indirimdeki ürünler ve en çok satanlar gibi farklı kümeler görüntülenir. Bu öğelerin görüntülenme şekli, arka uçtaki sıra ile aynıdır.

Ek olarak, ürünlere ve ardından kategorilere tıklayarak değişiklik yapmak için sürükle ve bırak özelliğini kullanabilirsiniz.

Sepette ve ödemede Tam Genişlik

Tam Genişlik, sepetiniz ve ödeme sayfalarınız için önerilen bir seçenek olan, kenar çubukları olmadan tüm sayfaya yayılan diğer şablondur. Bu, sepet ve ödeme sayfalarına giderek ve Sayfa Nitelikleri bölümündeki açılır menüden 'Tam Genişlik'i seçerek yapılabilir.

Menüleri yapılandırma

Vitrin, birincil ve ikincil menü konumlarının varsayılan bir organizasyonuna sahiptir. Birincil menü, site logosunun hemen altında görüntülenir. Belirli bir birincil menü ayarlamadıysanız, WooCommerce tüm sayfalarınızı bir 'birincil menü' olarak görüntüler.

İkincil menü, logonun hemen yanında, arama kutusuna yerleştirilmiş. Ancak bu ikincil menü yalnızca bir menü atarsanız görünecektir.

Yeni bir menü oluşturma ve sayfa ekleme

Bu, yönetici panelinde Görünüm ve ardından Menüler'e giderek yapılabilir. Sol tarafta 'sayfalar' adında bir başlık göreceksiniz. Yayınladığınız tüm sayfaların bir listesini almak için Tümünü Görüntüle düğmesini tıklayın.

İstediğiniz sayfaları işaretleyin ve ardından Menüye Ekle'yi tıklayın. Sayfaları basitçe sürükleyip bırakarak menü sırasını özelleştirmek çok kolaydır.

Widget'ları Yerleştirme

Vitrin Teması, web sitenize widget yerleştirmek için size üç farklı alan sunar. Başlık widget'ları içeriğin üzerine, sitenizin başlığının hemen altına yerleştirilebilir. Kenar çubuğu widget'ları, seçtiğiniz düzene göre yan tarafa yerleştirilir. Ek olarak, mevcut dört widget arasından seçiminize göre alt bilgi widget'ları yerleştirebilirsiniz.

Artık WooCommerce Storefront temasını kurmanın ve yapılandırmanın temellerini öğrendiğinize göre, bu temayı özelleştirmek için yapabileceğiniz farklı numaralara bir göz atalım.

1. Bir alt tema oluşturma

WooCommerce vitrininizi özelleştirmenin karmaşık püf noktalarını incelemeden önce, Storefront temamız için bir alt tema oluşturalım. Alt temalar, ana temaya bağlı olan küçük temalardır. Ana temanın stil sayfalarını ve özel işlevlerini geçersiz kılarlar, böylece sayfalarınızın farklı bölümlerinde değişiklikler oluştururlar.

Neden bir çocuk teması oluşturmalıyız? Bunun nedeni, Storefront'un çekirdeğinin sürekli olarak güncellenmesidir ve bu, tüm özelleştirme çabalarınız için bir risk oluşturacaktır. Bu, özel çalışmalarımızı kaybetmeden Storefront'u güvenle yükseltebileceğiniz anlamına gelir.

Alt tema oluşturmanın en iyi yolu, Child Theme Configurator eklentisini indirmek ve etkinleştirmektir. İlk alt temanızı oluşturmak için sihirbazı izleyin.

2. Mağazanıza bir logo ekleyin

Bu, panonuzda Temalar ve ardından Özelleştir altında bulunan Tema Özelleştirici kullanılarak yapılabilir. Bir resim yükleyerek bir logo eklemek için 'site kimliği' seçeneğini seçin. Herhangi bir Storefront teması için önerilen boyut 470 piksele 110 pikseldir. Ardından, 'Yayınla' düğmesine tıklayarak değişiklikleri kaydedeceksiniz.

3. Başlık boyutunu özelleştirin

Burada yine Theme Customizer'ı kullanacağız, ancak 'Ek CSS' bölümüne bir miktar CSS kodu yazacağız.

Aşağıdaki kodu ekleyin:

 * Masthead */
#masthead.site başlığı {
   yükseklik: 155 piksel! önemli;
   kenar boşluğu:0px
}
/* Masthead için Mobil CSS */
@media yalnızca ekran ve (maksimum genişlik: 320 piksel) {
   #masthead.site başlığı {
   yükseklik: 80 piksel!önemli;
   kenar boşluğu:0px;
}
}
/* Masthead menüsü */
.storefront-birincil-navigasyon a, .cart-contents a {
   marj:0 0 0 0;
}
.main-navigasyon ul {
   dolgu:0 0 10px 4px!önemli;
}
.main-navigasyon li {
   yükseklik:38 piksel!önemli;}
/* Masthead menüsü için Mobil CSS */
@media yalnızca ekran ve (maksimum genişlik: 320 piksel) {
.main-navigasyon ul {
   arka plan:#D6DDE4!önemli;
}
}
/* Başlık alanı */
.site başlığı {
üst dolgu:0.5em;
}
.site-header .özel-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
kenar boşluğu-alt: -45px;
}

İşte sonuç:

4. Temanın başlığından arama çubuğunu kaldırın

Bu kodu 'Ek CSS' bölümüne ekleyin.

 .site başlığı .widget_product_search
görüntü yok;
}

İşte sonuç:

5. Mobil cihazlar için ayrı bir Açılır menü oluşturun

Storefront, tüm ekran boyutlarına güzel bir şekilde uyum sağlayarak son derece duyarlı olacak şekilde tasarlanmıştır. Birden fazla menünüz varsa, ziyaretçilerinizin dikkatini web sitesindeki belirli yerlere yönlendirmeniz önemlidir. WordPress Özelleştiriciyi kullanarak tam da bunu yapmak için aşağıdaki kod parçasını ekleyebilirsiniz.

Görünüm'e gidin, ardından Özelleştir'e ve ardından 'Menüler' seçeneğini seçin, küçük ekranlar için 'El Menüsü'nü seçerek özel menü tasarımımızı oluşturabiliriz.

6. Müşteri incelemelerini kapatın

Varsayılan olarak, WooCommerce ve vitrin, incelemeler için standart bir işlevselliğe sahiptir. Bu çok güzel entegrasyon, ziyaretçilerinizin ürünleriniz hakkında ne düşündüğünü bilmenizi sağlar.

Ancak, müşteri yorumları her türlü e-ticaret mağazası için geçerli olmayabilir. Müşteri incelemelerini kapatmak için WooCommerce ayarlarına gidin ve 'Ürünler' sekmesine gidin. Sayfanın alt kısmında yorumları istediğiniz gibi güncelleyebileceğiniz 'yorumlar' bölümü bulunmaktadır.

7. Ürün kategorileri resimlerini ana sayfadan kaldırın

WooCommerce, ürünleri ve ürün kategorilerini resimleriyle birlikte ana sayfada görüntülemenize olanak tanır. Ancak, kategorilerin salt metin olarak görüntülenmesini tercih ediyorsanız, bu satırı alt temanızın functions.php dosyasına eklemeniz gerekir. Bunu function.php dosyasının sonuna eklemeniz yeterlidir.

 remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

İşte sonuç:

8. Başlık menüsü rengini değiştirin

Özelleştirici, başlığı istediğiniz renklerle özelleştirmemize olanak tanır. Bu, Özelleştir'e ve ardından Başlık'a gidip istediğiniz rengi seçerek yapılabilir.

Ancak bu seçenek, arama çubuğu, oturum açma bölümü ve logo dahil olmak üzere tüm başlık bölgesini renklendirir. Aşağıdaki kod parçacığını Ek CSS paneline ekleyerek başlık menüsüne farklı bir arka plan elde etmek için.

 .storefront-birincil-navigasyon,
.ana navigasyon ul.menu ul.alt menü{
arka plan rengi:#f0f0f0;
}

İşte sonuç:

9. Birincil gezinme çubuğunu gizle

Vitrin Teması varsayılan olarak tüm sayfaları bir menü olarak görüntüler. Birincil gezinme çubuğunu gizlemek istiyorsanız menüyü silmek yeterli değildir. Basitçe Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 .storefront-birincil-navigasyon {
görüntü yok;
}

İşte sonuç:

10. Mağaza sayfasında ürün başlığını gizleyin

Mağaza sayfasında ürün başlığını gizlemek için, Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 h2.woocommerce-loop-product__title {
ekran: yok !önemli;
}

İşte sonuç:

11. Başlıktaki boşluğu kaldırın

Basitçe Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 .site-branding {
kenar boşluğu-alt: 0px;
}

İşte sonuç:

12. Arama çubuğunun genişliğini artırın

Arama çubuğunun genişliğini genişletmek isterseniz ne yapardınız? Ek CSS bölümünü kullanarak aşağıdaki satırları ekleyin:

 .woocommerce-active .site-header .site-arama {
genişlik: %44.739;
}
#masthead .site-search .widget_product_search girişi[type="arama"] {
genişlik: 700 piksel !önemli;
}

İşte sonuç:

13. Başlık ve menü arasındaki boşluğu kaldırın

Basitçe Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 .site başlığı {
yükseklik: 77 piksel;
}
.col-dolu {
üst: -84 piksel;
}
@media yalnızca ekran ve (maksimum genişlik: 640 piksel) {
.site başlığı {
yükseklik: otomatik;
}
.col-dolu {
üst: 0;
}
}

İşte sonuç:

14. WooCommerce Kayıt Sayfasına fazladan metin ekleme

Yeni kayıt yaptıranlar için bir Teşekkür veya indirim kuponları sunmak isteyebileceğimizden, kayıt sayfasına bir mesaj eklemek önemlidir. Bunu arşivlemek için alt temanın function.php dosyasına bir işlev eklemeniz yeterlidir.

 add_action('bp_signup_profile_fields', function() {
// Aşağıdan düzenlemeye başlayın.
?>
<p class="bildirim-kontrol kutusu">
Lütfen e-postalarınızı kontrol etmeyi ve kayıt işlemini onaylamayı unutmayın.
<strong>%10 indirim çeki</strong>!
</p>
<?php
// Düzenlemeyi bitir.
} );

15. Vitrin temasındaki kırıntıları kaldırın

Çoğu web sitesindeki sayfaların en üstüne, kolay gezinmeyi sağlamak için içerik kırıntıları eklenir. Sayfanın veya ürünün ait olduğu kategoriyi gösteren her sayfanın üst kısmında bulunurlar.

Ekmek kırıntıları, Arama Motoru Optimizasyonu için harika bir araçtır, ancak bunları kaldırmak istiyorsanız, alt temanın function.php dosyasına aşağıdaki kodu eklemeniz yeterlidir:

 add_filter('woocommerce_get_breadcrumb', '__return_false');

İşte sonuç:

16. Logodaki URL bağlantısını değiştirin

Genel olarak WordPress temaları, sitelerin ana sayfasını logoya bağlayın. Bu işlev çoğu web sitesi için standarttır ve kullanıcılar logoya her tıkladıklarında ana sayfaya geri dönebileceklerini umarlar.

Ana sayfa farklı bir konumdaysa ne olur? Bu, özel bir bağlantı istiyorsak URL'yi yapılandırmanız gerektiği anlamına gelir. Bunu değiştirmek için, alt temanın function.php dosyasına aşağıdaki kodu eklememiz gerekiyor:

 add_action( 'storefront_header' , 'custom_storefront_header', 1 );
işlev custom_storefront_header () {
remove_action( 'storefront_header', 'storefront_site_branding', 20);
add_action( 'storefront_header', 'custom_site_branding', 20 );
function custom_site_branding() {
// BURADA logonuzun veya site başlığınızın bağlantısını ayarlayın
$bağlantı = home_url('/özel-bağlantım/');
?>
<div class="site-branding">
<?php
if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
$custom_logo_id = get_theme_mod('custom_logo');
if ( $custom_logo_id ) {
$custom_logo_attr = array('class' => '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('isim', 'görüntüleme');
}
$logo = sprintf( '<a href="%1$s" class="özel-logo-link" rel="home" itemprop="url">%2$s</a>',
esc_url($bağlantı),
wp_get_attachment_image( $custom_logo_id, 'dolu', yanlış, $custom_logo_attr )
);
}
elseif ( is_customize_preview() ) {
$logo = sprintf( '<a href="%1$s" class="özel-logo-link" style="display:none;"><img class="özel-logo"/></a>' , esc_url($bağlantı));
}
$html = is_front_page() ? '<h1 class="logo">' . $logosu . '</h1>' : $logosu;
} elseif ( function_exists( 'jetpack_has_site_logo' ) && jetpack_has_site_logo() ) {
$logo = site_logo()->logo;
$logo_id = get_theme_mod('özel_logo');
$logo_id = $logo_id ? $logo_id : $logo['id'];
$size = site_logo()->theme_size();
$html = sprintf( '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',
esc_url($bağlantı),
wp_get_attachment_image( $logo_id, $boyut, yanlış, dizi(
'class' => 'site-logo eki-' . $boyut,
'veri boyutu' => $boyut,
'itemprop' => 'logo'
))
);
$html = application_filters('jetpack_the_site_logo', $html, $logo, $boyut);
} Başka {
$etiket = is_front_page() ? 'h1' : 'böl';

$html = '<' . esc_attr($etiket) . ' class="beta site-title"><a href="' . esc_url( $bağlantı ) .'" rel="home">' . esc_html( get_bloginfo( 'ad' ) ) . '</a></' . esc_attr( $etiket ) .'>';

if ( '' !== get_bloginfo( 'açıklama' ) ) {
$html .= '<p class="site-description">' . esc_html( get_bloginfo( 'açıklama', 'görüntüleme' ) ). '</p>';
}
}
yankı $html;
?>
</div>
<?php
}
}

Özel bağlantı 7. satırda ( '/my-custom-link/' ); ' , özel bağlantınızı "özel bağlantım" ile değiştirerek ekleyeceğiniz yer.

17. Mağaza sayfasından kategorileri tamamen kaldırın

Bu özellik basit kategorileri kaldırır. Functions.php dosyasına aşağıdaki satırları eklemeniz gerekir:

 function storefront_child_reorder_homepage_contant() {
remove_action('ana sayfa', 'storefront_product_categories', 20 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

İşte sonuç:

18. Sepetten ve mini sepetten ürün resmini kaldırın

Bunu yapmak için, aşağıdaki kodu alt temanızın functions.php dosyasına eklemeniz yeterlidir:

 add_filter('woocommerce_cart_item_thumbnail', '__return_false');

İşte sonuç:

19. Mağazamızın sayfasındaki son ürünler

Yeni bir ürün eklediğinizde, ön sayfadaki 'Yeni gelen' bölümüne eklenir. Bu, Storefront temasındaki varsayılan ayardır. Ancak, sürekli olarak listenize ürün eklerseniz, bunlar mağaza sayfasını karıştırabilir. Bu bölümde ek bilgileri de görüntülemek isteyebilirsiniz.

Bu bölümü kaldırmak için aşağıdaki kodu alt temanın function.php dosyasına eklemeniz yeterlidir.

 function storefront_child_reorder_homepage_contant() {
remove_action('ana sayfa', 'storefront_recent_products', 30 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

İşte sonuç:

20. En çok satan ürünleri mağaza sayfasından kaldırın

Bazıları için bu arzu edilen bir özellik olmayabilir. En çok satan bölümü kaldırmak için aşağıdaki kodu alt temanın function.php dosyasına eklemeniz yeterlidir.

 function storefront_child_reorder_homepage_contant() {
remove_action('ana sayfa', 'storefront_best_selling_products', 70 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

İşte sonuç:

21. Öne çıkan ürünleri kaldırın

Aynı şekilde öne çıkan ürünler bölümünü devre dışı bırakmak isteyebilirsiniz. Bu, alt temanın functions.php dosyasına aşağıdaki kod parçacığını ekleyerek yapılabilir:

 function storefront_child_reorder_homepage_contant() {
remove_action('ana sayfa', 'storefront_featured_products', 40 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

İşte sonuç:

22. Yapışkan bir "Sepete Ekle" düğmesini entegre edin

Açıklama, resim galerisi ve ek bilgiler gibi ürünleriniz hakkında önemli bilgiler vermeniz önemlidir. Sonuçta, bu uzun bir sayfaya neden olabilir.

Ancak, müşteriyi ürünü sepete eklemek için sayfanın en üstüne kaydırmaya zorlamadan sepete ürün ekleme sürecini kolaylaştırmak istiyorsanız, sepete yapışkan bir "Sepete Ekle" düğmesi ekleyebilirsiniz. ekranın üst kısmı.

Bu, WooCommerce için Sepete Yapışkan ekle adlı bir eklenti kullanılarak yapılabilir. Tüm ürün sayfalarınızda yapışkan "Sepete ekle" düğmelerinin keyfini çıkarmak için basitçe kurun ve etkinleştirin.

İşte sonuç:

23. Ödeme sayfasına bir açılır şehir listesi ekleyin

Ödeme sayfasına şehirlerin bir açılır listesini eklemeniz, müşterilerimizin kişisel bilgilerini hızlı bir şekilde doldurmalarına yardımcı olacaktır. Bu, yalnızca ürünlerinizi gönderebileceğiniz uygun şehirleri yapmanızı sağlayacaktır.

Aşağıdaki kodu alt temanın function.php dosyasına eklemeniz yeterlidir:

 add_filter('woocommerce_default_address_fields', 'override_checkout_city_fields', 10, 1 );
function override_checkout_city_fields($fields) {
// Burada dizide istediğiniz şehirleri tanımlayın (İşte şehirlere bir örnek)
$option_cities = dizi(
'' => __( 'Şehrinizi seçin' ),
'a' => 'a',

);

$fields['city']['type'] = 'select';
$fields['city']['options'] = $option_cities;

$alanlarını döndür;
}

Kodun beşinci satırına bakarsanız, şehirler listemizi tanımlayabilirsiniz. 'a' => kodunun ilk kısmı şehrin kimliğidir ve boşluk veya boş karakter içeremez. Şehrin adını tam olarak görünmesini istediğiniz şekilde yazmanız yeterlidir.

İşte sonuç:

24. Ürün sayfasından ürün miktarı artı ve eksi butonlarını gizleyin

Ürün miktarını artırmak veya azaltmak için artı ve eksi butonları ile metin alanını gizlemeniz için Ek CSS bölümüne aşağıdaki CSS kodunu eklemeniz yeterlidir:

 .miktar {
ekran: yok !önemli;
}

İşte sonuç:

25. Ürün sayfasında "Sepete Ekle" düğmesini gizleyin

Bunu yapmak için, Özelleştir ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 .single_add_to_cart_button {
ekran: yok !önemli;
}

İşte sonuç:

26. Vitrin teması kredisini alt bilgiden kaldırın

Varsayılan olarak, WooCommerce Storefront teması, alt bilgiye bir tema kredisi ekler. Kişisel bir dokunuşa sahip bir altbilgi isteyebilirsiniz. Tema kredisini kaldırmak için, alt temanın functions.php dosyasına aşağıdaki işlevi eklemeniz yeterlidir:

 add_action( 'init', 'custom_remove_footer_credit', 10 );
işlev custom_remove_footer_credit () {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
add_action( 'storefront_footer', 'custom_storefront_credit', 20 );
}
function custom_storefront_credit() {
?>
<div class="site bilgisi">
&kopyala; <?php echo get_bloginfo( 'ad' ) . ' ' . get_the_date('Y'); ?>
</div><!-- .site bilgisi -->
<?php
}

İşte sonuç:

27. Vitrin widget bölümü rengini ve yazı tipi boyutunu değiştirin

Özelleştiriciyi kullanarak sayfa widget'larının yazı tipi rengini veya boyutunu değiştirmenin doğrudan bir yolu yoktur. Aşağıdaki CSS kod satırlarını ekleyerek bunu kolayca değiştirebilirsiniz. Bunu yapmak için, Özelleştir ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 .widget alanı .widget {
yeşil renk;
yazı tipi boyutu: 1em;
}

İşte sonuç:

28. Ürün resminde Vitrin "İndirim" rozetini gösterin

WooCommerce Storefront temasının varsayılan sürümü, belirli bir ürün için indirim veya indirimli fiyat tanımlamanıza olanak tanır. Ancak, ürün resmine İndirim rozeti eklemek istiyorsanız, Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 ul.products li.product .onsale {
konum: mutlak;
üst: 137 piksel;
sağ: 62 piksel;
}

İşte sonuç:

29. "İndirim" rozetinin rengini değiştirin

İndirim rozetinin rengini değiştirmek için, Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 .satılık {
arka plan rengi: #FFFFFF;
sınır rengi: yeşil;
yeşil renk;
}

İşte sonuç:

30. Miktar “artı-eksi” kutu rengini değiştirin

Bu, miktar artı ve eksi düğmelerinin arka plan rengini değiştirerek yapılabilir. Bunu yapmak için, Özelleştir ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 .miktar .qty {
renk: #000;
arka plan rengi: #f5df72;
}

İşte sonuç:

31. Vitrin başlığının arka plan rengi nasıl değiştirilir?

WordPress Özelleştirici, Storefront temasının başlığının arka plan rengini değiştirmemize olanak tanır. Bunu yapmak için, Özelleştir'e ve ardından Başlık bölümüne gidin:

32. Başlıktaki mini arabanın arka plan rengini değiştirin

Başlığın rengini değiştirirken, minicart açılır menüsü bu rengi devralır. Ancak, ek görünürlük için aşağıdaki CSS kurallarını kullanarak bunu değiştirebilirsiniz. Basitçe Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

.

 woocommerce.widget_shopping_cart {
arka plan: beyaz;
sınır yarıçapı: 12 piksel;
}

İşte sonuç:

33. Telif Hakkının Altına CSS Kullanarak Vitrin Alt Bilgisine Resim Ekleme

Telif hakkı metninin altına kendi logonuzu, kabul edilen ödemelerinizi veya ortak rozetinizi eklemek istiyorsanız, Katmanlar , Özelleştir'e gidin ve ardından Altbilgi'yi tıklayın.

Paneli genişletmek için Özelleştirme'ye tıklayın ve arka planda Görüntü Seç'e tıklayın.

İstediğiniz resmi seçin ve ekleyin .

Tekrar Yok ve Alt öğesini seçin veya istediğiniz gibi manuel olarak konumlandırın.

Özelleştiriciye geri dönün ve paneli genişletmek için CSS'ye tıklayın. Ancak, yüzdelerin sizin belirlediğiniz özelliklere uygun olduğundan emin olmalısınız. Ardından aşağıdaki satırları ekleyin:

 .site bilgisi:sonra {
içerik: '';
arka plan resmi: url(kendi URL'nizi ekleyin);
Ekran bloğu;
genişlik: 100 piksel;
yükseklik: 100 piksel;
kenar boşluğu: 0 otomatik;
}

34. Altbilgideki boşluk nasıl kaldırılır

Basitçe Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırı ekleyin:

 .footer-widgets { padding-top: 0; }

İşte sonuç:

35. Başlık nasıl kaldırılır, ancak menü nasıl korunur

Basitçe Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 #masthead > .col-dolu,
#masthead .site-header-cart {
görüntü yok;
}

36. Köprülerden alt çizgi nasıl kaldırılır

Varsayılan olarak, Vitrin teması bağlantıların altını çizer ve bunları kaldırmak istiyorsanız, Özelleştir'e ve ardından Ek CSS bölümüne gidin ve aşağıdaki satırları ekleyin:

 a {
metin-dekorasyon: yok !important;
}

İşte sonuç:

37. WooCommerce Storefront temasındaki Gönderilerde öne çıkan görseller nasıl kaldırılır

Alt temanın function.php dosyasına aşağıdaki satırı eklemeniz yeterlidir:

 remove_action( 'storefront_post_content_before', 'storefront_post_thumbnail', 10 );

38. Vitrin ana sayfasındaki Yatay çizgilerin rengi nasıl değiştirilir?

Aşağıdaki kodu alt temanızın custom.css dosyasına eklemeniz yeterlidir:

 .page-template-template-homepage .hentry .entry-header,
.page-template-template-homepage .hentry,
.page-template-template-homepage .storefront-product-section {
sınır rengi: kırmızı;
}

39. Storefront WooCommerce indirimde rozeti nasıl özelleştirilir

Ek CSS bölümünüze aşağıdaki kodu eklemeniz yeterlidir:

 .satılık {
arka plan rengi: #FFFFFF;
kenarlık rengi: #FF0000;
renk: #FF0000;
}

İşte sonuç:

40. Logo, ikincil gezinme ve arama çubuğunun boyutu nasıl değiştirilir?

Hepsini bir kerede değiştirmek için, aşağıdaki kodu Ek CSS bölümünüze eklemeniz yeterlidir:

 @medya ekranı ve (min-width: 768px) {
/* LOGO */
.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { genişlik: %30 !important; /* İsterseniz px değerlerini kullanın, örn. 350 piksel */ }

/* İKİNCİL NAVİGASYON */
.site-başlığı .ikincil-gezinme { genişlik: %40 !önemli; /* İsterseniz px değerlerini kullanın, örn. 350 piksel */ }

/* ARAMA ÇUBUĞU */
.site-header .site-arama { genişlik: %30 !önemli; /* İsterseniz px değerlerini kullanın, örn. 350 piksel */ }

41. Tam genişliğe gitmek için WooCommerce ürün sayfalarındaki kenar çubuğu nasıl kaldırılır

Aşağıdaki kodu alt temanın function.php dosyasına eklemeniz yeterlidir:

 add_action('get_header', 'remove_storefront_sidebar');
if ( is_product() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}
Bu satırı Ek CSS bölümünüze ekleyin:
body.woocommerce #birincil { genişlik: %100; }

İşte sonuç:

42. Menü öğelerine nasıl resim veya simge eklenir.

Bunu yapmak için, Menü Resmini kurun ve etkinleştirin, Simgeler kolay eklenti ve istediğiniz gibi simgelerinizi ekleyin. İstediğiniz boyutları farklı menü alanlarına eklemeniz yeterlidir.

İşte görsel bir açıklama:

43. Storefront'a bir üst çubuk nasıl eklenir

Bu, sosyal simgeler veya hoş geldiniz mesajı gibi harika şeyler eklemek için yapılabilir. Bunu eklemek için, alt temanın function.php dosyasına aşağıdaki kod satırlarını eklemeniz yeterlidir:

 /**
* Başlıktan önce Storefront'a bir üst çubuk ekler.
*/
function storefront_add_topbar() {
?>
<div id="topbar">
<div class="col-dolu">
<p>WooStore'u Test Etmeye Hoş Geldiniz</p>
</div>
</div>
<?php
}
add_action( 'storefront_before_header', 'storefront_add_topbar');

Ardından, bu CSS'yi özelleştiricinizdeki Ek CSS bölümüne ekleyin:

 #üst çubuk {
arka plan rengi: #1F1F20;
yükseklik: 40 piksel;
satır yüksekliği: 40 piksel;
}

#topbar p {
renk: #fff;
}

İşte sonuç:

44. Üst çubuğunuza özel bir mesaj nasıl eklenir

Bu, üst çubuğa özel bir mesaj eklemenin başka bir yoludur. Alt temanın function.php dosyasına aşağıdaki kod satırlarını eklemeniz yeterlidir:

 /**
* Başlıktan önce Storefront'a bir üst çubuk ekler.
*/
function storefront_add_topbar() {
küresel $current_user;
get_currentuserinfo();

if ( ! boş( $current_user->user_firstname ) ) {
$user = $current_user->user_firstname;
} Başka {
$kullanıcı = __( 'misafir', 'vitrin-çocuk');
}

?>
<div id="topbar">
<div class="col-dolu">
<p>Hoş geldiniz <?php echo $user ?>!</p>
</div>
</div>
<?php
}
add_action( 'storefront_before_header', 'storefront_add_topbar'); 

45. Storefront ile Meta Slider tam genişlikte nasıl yapılır

Meta Slider'lar birçok WordPress sitesinde çok popülerdir. Kaydırıcıyı tam genişlikte olacak şekilde uzatmak için bu kod parçasını ekleyin. Alt temaya ekleyin, kaydırıcıyı tam genişlikte olacak şekilde uzatın:

 add_action('init', 'child_theme_init');
function child_theme_init() {
add_action( 'storefront_before_content', 'woa_add_full_slider', 5);
}
function woa_add_full_slider() { ?>
<div id="kaydırıcı">
<?php echo do_shortcode("[metaslider id=388 yüzdegenişlik=100]"); ?>
</div>
<?php
}

Ancak, bunu yapmak için bir eklenti kullanabilirsiniz ve buna iyi bir örnek WooSlider eklentisidir.

46. ​​Storefront'a fazladan Google Yazı Tipleri nasıl eklenir

Bu çok kolaydır ve Easy Google Fonts eklentisini indirip etkinleştirmeniz yeterlidir. WordPress Topluluğundaki 300.000'den fazla kullanıcı bu iyi yazı tipi eklentisine güveniyor.

47. Başlıktan arama çubuğu nasıl kaldırılır

Bu, aşağıdaki kodu alt temanın function.php dosyasına yapıştırarak arama çubuğunu başlıktan kaldırmanın alternatif bir yoludur:

 add_action('init', 'jk_remove_storefront_header_search');
function jk_remove_storefront_header_search() {
remove_action( 'storefront_header', 'storefront_product_search', 40 );
}

İşte sonuç:

48. Vitrin Önünde Sayfa Başlıkları nasıl gizlenir

Sayfa başlıklarını gizlemek istiyorsanız, wordpress.org topluluğunda bulunan Title Toggle for Storefront Theme eklentisini yüklemeniz ve etkinleştirmeniz gerekir. 10.000'den fazla kullanıcı bu eklentiye güveniyor.

49. Storefront alt bilgisinde 'designed by WooThemes' nasıl kaldırılır

Bu, daha önce tartışıldığı gibi bu soruna alternatif bir çözümdür. Bu kodu alt temanın function.php dosyasına eklemeniz gerekir:

 add_action( 'init', 'custom_remove_footer_credit', 10 );
işlev custom_remove_footer_credit () {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
add_action( 'storefront_footer', 'custom_storefront_credit', 20 );
}
function custom_storefront_credit() {
?>
<div class="site bilgisi">
&kopyala; <?php echo get_bloginfo( 'ad' ) . ' ' . get_the_date('Y'); ?>
</div><!-- .site bilgisi -->
<?php
}

İşte sonuç:

50. Vitrin menünüze Font Awesome simgeleri nasıl eklenir

Bu, wordpress.org topluluğunda bulunan Font Awesome 4 Menus eklentisi kullanılarak yapılabilir. 50.000'den fazla kullanıcı bu eklentiye güveniyor.

51. Storefront'ta mobil görünümde 'Navigasyon' nasıl yeniden adlandırılır

Bunu yapmak için, bu kodu alt temanın function.php dosyasına eklemeniz yeterlidir:

 function storefront_primary_navigation() {
?>
<nav id="site-navigasyon" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menü Adını Düzenle', 'vitrin'); ?></düğmesi>
<?php wp_nav_menu( array( 'theme_location' => 'birincil' ) ); ?>
</nav><!-- #site-navigasyon -->
<?php
}

İşte sonuç:

52. Vitrin 'Hesabım sayfasında' müşteri avatarı nasıl eklenir

Bu, alt temanın function.php dosyasına aşağıdaki kod satırlarını ekleyerek yapılabilir:

/**
* Karşılama mesajından sonra Müşteri avatarını Hesabım sayfasında yazdırın
*/
function storefront_myaccount_customer_avatar() {
$current_user = wp_get_current_user();

echo '<div class="myaccount_avatar">' . get_avatar( $current_user->user_email, 72, '', $current_user->display_name ) . '</div>';
}
add_action( 'woocommerce_before_my_account', 'storefront_myaccount_customer_avatar', 5 );
Ardından, Ek CSS bölümüne aşağıdaki CSS komut kurallarını ekleyin:
.myaccount_avatar {
sağ kenarlık: 1px katı rgba(0, 0, 0, 0.1);
yüzer: sol;
dolgu-sağ: 10px;
genişlik: 83 piksel;
}

.myaccount_user {
sol kenarlık: 3px düz #787E87;
Sağa çık;
sol dolgu: 10 piksel;
genişlik: %88;
}

İşte sonuç:

53. WooCommerce Vitrin Alt Bilgi Yüksekliği nasıl değiştirilir

Ek CSS bölümüne aşağıdaki CSS kodunu ekleyerek WooCommerce Storefront altbilgi yüksekliğini değiştirmek çok kolaydır:

 bölüm.footer-widget'ları {
üst dolgu: 25 piksel;
}

div.site bilgisi {
üst dolgu: 16 piksel;
alt dolgu: 25 piksel;
}

İşte sonuç:

54. Belirli bir Ana Sayfa Bölümünü Vitrin Önüne Arka Plan Resmi Ekleme

Varsayılan Storefront temasında ürün kategorileri, son ürünler, öne çıkan ürünler, popüler ürünler, indirimdeki ürünler ve en çok satan ürünler olmak üzere altı bölüm bulunur. Ek CSS bölümüne aşağıdaki kodu eklemeniz yeterlidir:

 .storefront özellikli ürünler{
background-image: url(URL'nizi buraya ekleyin);
arka plan konumu: merkez merkez;
arka plan tekrarı: tekrar yok;
arka plan boyutu: kapak;
-o-arka plan boyutu: kapak;
}

İşte sonuç:

55. Vitrin Ana Sayfası Bölümlerine Arka Plan Rengi Ekleme

Bunun için öncelikle renk eklemek istediğiniz bölümü tanımlamanız gerekir. Bu, aşağıdaki kodu Ek CSS bölümüne ekleyerek kolayca yapılabilir:

 .storefront özellikli ürünler{
arka plan rengi:#FFEB3B;
}

İşte sonuç:

56. Ana Sayfa Bölüm Başlığı Nasıl Kaldırılır veya Gizlenir

Bunu yapmak için önce kaldırmak veya gizlemek istediğiniz bölümü tanımlamanız gerekir. Bu, aşağıdaki kodu Ek CSS bölümüne ekleyerek yapılabilir:

 .storefront-son-products .section-title {display:none;}
.storefront-product-categories .section-title {display:none;}
.storefront-featured-products .section-title {display:none;}
.storefront-popular-products .section-title {display:none;}
.storefront-on-sale-products .section-title {display:none;}
.storefront-en çok satan-ürünler .section-title {display:none;}

İşte sonuç:

57. Ana Sayfa Bölüm Başlığı Nasıl Değiştirilir

Bunu yapmak için önce başlığını kaldırmak istediğiniz bölümü tanımlamanız gerekir. Bu liste, vitrin ana sayfası bölümü filtrelerini belirlemenize yardımcı olacaktır:

• storefront_product_categories_args
• storefront_recent_products_args
• storefront_featured_products_args
• storefront_popular_products_args
• storefront_on_sale_products_args
• storefront_best_selling_products_args

Alt temanın function.php dosyasına aşağıdaki kodu ekleyin:

 add_filter( 'storefront_featured_products_args', 'custom_storefront_product_featured_title');

// Ön Sayfa Öne Çıkan Ürünler Başlığı
function custom_storefront_product_featured_title( $args ) {
$args['title'] = __( 'Yeni Öne Çıkan Ürünlerin Başlığı Burada', 'vitrin');
$args döndür;
}

İşte sonuç:

58. Ana Sayfa Bölümü Ürün Başına Nasıl Arttırılır

Alt temanın function.php dosyasına aşağıdaki kod satırlarını eklemeniz yeterlidir.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_page');
// Sayfa başına Öne Çıkan Öne Çıkan Ürünler
işlev custom_storefront_featured_product_per_page( $args ) {
$args['per_page'] = 10;
$args döndür;
}

59. Ana Sayfa Bölüm Ürün Sütun Izgarası veya Sütun Nasıl Arttırılır

Alt temanın function.php dosyasına aşağıdaki kod satırlarını eklemeniz yeterlidir.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row');

// Öne Çıkan Öne Çıkan Ürünler sütunu
işlev custom_storefront_featured_product_per_row( $args ) {
$args['sütunlar'] = 2;
$args döndür;
}

İşte sonuç:

60. Ana Sayfada Daha Fazla Kategori Nasıl Görüntülenir

Alt temanın function.php dosyasına aşağıdaki kod satırlarını eklemeniz yeterlidir.

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page');

// Kategori Ürünleri
function custom_storefront_category_per_page( $args ) {
$args['sayı'] = 10;
$args döndür;
}

61. Ana Sayfa Bölüm Başlığının altına Açıklama Nasıl Eklenir

Bu kodu alt temanın function.php dosyasına eklemeniz yeterlidir:

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');

function custom_storefront_product_featured_description(){ ?>
<p class="element-title--sub">
<?php echo "Bölüm açıklaması burada";?>
</p>
<?php }

62. Vitrin Ana Sayfasından en çok oy alan ürünler bölümü nasıl kaldırılır

Bunu yapacak iki kişi vardı. Biri, bu bölümü kaldırmanıza yardımcı olacak eklenti yüklüyor. Ana Sayfa Kontrol eklentisine bir göz atabilirsiniz.

Ancak, kancaları kullanarak bölümü kolayca kaldırabilirsiniz. Bu, alt temanın function.php dosyasına aşağıdaki satırı ekleyerek yapılır:

 remove_action( 'ana sayfa', 'storefront_popular_products', 50 );

Ek olarak, Ek CSS bölümüne aşağıdaki kodu ekleyerek kaldırabilirsiniz:

 .storefront-popular-products .section-title {display:none;}

63. En Çok Oy Alan Ürünler Bölüm Başlığı Nasıl Değiştirilir

Bu kodu alt temanın function.php dosyasına eklemeniz yeterlidir:

 add_filter( 'storefront_popular_products_args', 'custom_storefront_product_popular_title');
// Ön Sayfa Öne Çıkan Ürünler Başlığı
işlev custom_storefront_product_popular_title( $args ) {
$args['title'] = __( 'En İyi Ürünler', 'mağaza');
$args döndür;
}

64. En Çok Oy Alan Bölümde Daha Fazla Ürün Nasıl Görüntülenir

Storefront için varsayılan, En Çok Oy Alanlar Bölümünde 4 ürün görüntüler. Bu örnekte, 15 ürüne çıkaracağız. Bu kodu alt temanın function.php dosyasına eklemeniz yeterlidir:

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page');

// Sayfa başına Öne Çıkan Öne Çıkan Ürünler
işlev custom_storefront_top_product_per_page( $args ) {
$args['per_page'] = 12;
$args döndür;
}

65. İndirimdeki Ürünler Bölümü Vitrin Ana Sayfasından Nasıl Kaldırılır

Bunu yapacak iki kişi vardı. Biri, bu bölümü kaldırmanıza yardımcı olacak eklenti yüklüyor. Ana Sayfa Kontrol eklentisine bir göz atabilirsiniz.

Ancak, kancaları kullanarak bölümü kolayca kaldırabilirsiniz. Bu, alt temanın function.php dosyasına aşağıdaki satırı ekleyerek yapılır:

 remove_action( 'ana sayfa', 'storefront_on_sale_products', 60 );

66. İndirimdeki Ürünlerin Arka Plan Rengi Nasıl Değiştirilir

Bu, aşağıdaki kodu Ek CSS bölümüne ekleyerek yapılabilir:

 .storefront-satış-ürünleri{
arka plan rengi:#FFEB3B;
}

67. Düğmeler nasıl özelleştirilir

Düğmeler, Özelleştirici kullanılarak değiştirilebilir. Görünüm'e ve ardından Özelleştir'e gidin. Düğmeler'e tıklayın ve ardından istediğiniz gibi şekillendirin.

İşte bir örnek:

68. Storefront özel alt bilgi bağlantıları nasıl eklenir

Bu kodu kullanarak özel altbilgi bağlantıları ekleyebilecek ve bunları istediğiniz gibi biçimlendirebileceksiniz. Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 add_filter('storefront_credit_links_output', işlev( $varsayılan_bağlantılar) {
$çıktı = [
sprintf(
'<a href="%s">%s</a>', get_home_url(), 'Buraya Özel Bağlantılar Ekleyin'

),

$default_links
];
dönüş patlaması(
' <span role="separator" aria-hidden="true"></span> ', $output
);
} );

İşte sonuç:

69. Vitrin vitrini arşivlerden bir blog alıntısı göster

WooCommerce Storefront temanızda bir blog çalıştırıyorsanız, bu kod blog gönderisi arşivlerinde tam içerik yerine blog alıntısını görüntüleyebilir. Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 add_action('init', function() {
remove_action( 'storefront_loop_post', 'storefront_post_content', 30 );
add_action('storefront_loop_post', function() {
echo '<div class="giriş içeriği" itemprop="articleBody">';
if( has_post_thumbnail() ) {
the_post_thumbnail( 'büyük', [ 'itemprop' => 'görüntü' ]);
}
the_alıntı();
yankı '</div>';
}, 30 );
} );

70. Özel bir Metaviewport Etiketi nasıl eklenir

Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 add_filter('wpex_meta_viewport', function() {
return '<meta name="viewport" content="width=cihaz genişliği, ilk ölçek=1, maksimum ölçek=1" />';
} );

71. Önerilen eklentiler bildirimi nasıl kaldırılır

Eklenti bildirimleri bazıları için can sıkıcı olabilir ve onu kaldırmak çok kolaydır. Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 // Belirli eklentileri kaldır
işlev my_recommended_plugins( $eklentiler ) {
// WooCommerce'i yüklemek için bildirimi kaldırın
unset( $plugins['woocommerce']);
// Eklentileri döndür
$eklentileri döndür;
}
add_filter('wpex_recommended_plugins', 'my_recommended_plugins');
// Tüm eklentileri kaldır
// BİLDİRİM AYRICA GÜNCELLEMELERDEN HABERDAR OLMAK İÇİN KULLANILDIĞINDAN BAZI EKLENTİLERİ KULLANIYORSANIZ BU TAVSİYE EDİLMEMEKTEDİR
add_filter('wpex_recommended_plugins', '__return_empty_array');

72. Alt bilgi belirtme çizgisini koşullu olarak gösterme veya gizleme

Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 function my_callout_visibility( $bool ) {
// Ön sayfada gizle
if ( is_front_page() ) {
$bool = yanlış;
}
// boole döndür
$bool döndür;
}
add_filter( 'wpex_callout_enabled', 'my_callout_visibility', 20 );

73. Meta üreteci teması nasıl kaldırılır

Bu, temanın hangi sürümünü kullandığınız konusunda bilgilendirilmeniz için destek için kullanılır. Orada olmasıyla ilgili bir sorun yok ama kaldırmak istiyorsanız burada nasıl.

Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 add_action('init', function() {
remove_action( 'wp_head', 'wpex_theme_meta_generator', 1 );
}, 10 )

74. Başlıksız sayfalar için başlık altına otomatik olarak boşluk nasıl eklenir

Herhangi bir sayfa için ana Sayfa Başlığını devre dışı bıraktığınızda, başlığın altında boşluk kalmaz. Bu kod parçacığı, üst kısımla aynı hizada bir kaydırıcı, resim veya başka bir içerik ekleyebilmeniz için boşluk eklemenize yardımcı olur. Ek CSS bölümüne aşağıdaki kodu eklemeniz yeterlidir:

 body.page-header-disabled #main {
üst dolgu: 30 piksel;
}

75. Mobil cihazlarda en üste kaydırma düğmesi nasıl gizlenir

Ek CSS bölümüne aşağıdaki kodu eklemeniz yeterlidir:

 @media yalnızca ekran ve (maksimum genişlik: 959 piksel) {
#site-scroll-top { görüntü: yok !important; }
}

76. Üst bilgi ve alt bilgi “kutulu” düzenin dışına nasıl taşınır

Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 işlev myprefix_move_header_footer_out_of_boxed_layout() {
// Üstbilgi/altbilgiyi kaldır
remove_action('wpex_hook_wrap_top', 'wpex_header');
remove_action('wpex_hook_wrap_bottom', 'wpex_footer');
// Üstbilgi/altbilgiyi yeniden ekle
add_action('wpex_outer_wrap_before', 'wpex_header', 9999);
add_action('wpex_outer_wrap_after', 'wpex_footer');
}
add_action( 'init', 'myprefix_move_header_footer_out_of_boxed_layout');

77. Izgara modüllerine daha fazla sütun seçeneği nasıl eklenir

Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 // Bu işlev, sütun seçimlerini ekleyecek, ardından özel CSS'nizi eklemeniz gerekecek
// gerçek sütun için. Örnek '.span_1_of_8{ genişlik: %12,5; }'
function prefix_grid_columns( $columns ) {
$sütunlar['8'] = '8';
$sütunlar['9'] = '9';
$sütunlar['10'] = '10'; // istediğiniz kadar ekleyin
$sütunları döndür;
}
add_filter('wpex_grid_columns', 'myprefix_grid_columns');

78. Başlık altına ikincil özel menü nasıl eklenir

Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 function add_custom_menu_above_main_content() { ?>
<div class="my-nav-wrapper clr">
<div class="container clr"> <!-- .navbar içeriğini ortalayın -->
<?php
// 1. Çözüm, gezinme çubuğu kısa kodunu ekleyin
echo do_shortcode('[vcex_navbar menu="60"]' ); // menü kimliğini değiştir
// WP menüsünü kullanarak 2. Çözüm bkz.
// @ https://codex.wordpress.org/Function_Reference/wp_nav_menu argümanlar için
$args = dizi();
wp_nav_menu( $args );
// Çözüm 3, uberMenu gibi bir menü eklentisi kullanın
do_shortcode('[menu_shortcode_bura]'); ?>
</div>
</div>
<?php }
add_action('wpex_hook_header_after', 'add_custom_menu_above_main_content');

79. Sayfa başlığından başlık nasıl kaldırılır ve yalnızca içerik kırıntıları bırakılır

Basitçe bu kod satırlarını alt temanın function.php dosyasına ekleyin:

 // Sayfa başlık alanından başlığı kaldır
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'); // Toplam v5+
} );

80. Eylem Referansları

Bunlar, Storefront temasında kullanılan tüm mevcut add_action() işlevleridir. do_action tarafından tanımlandığı gibi bir kancaya bir işlev ekler.

Genel

Genel Eylem işlevlerinden bazıları şunlardır:

storefront_before_site – Executed after opening <body> tag

 storefront_before_content – ​​<div id="content"> etiketini açmadan önce yürütülür
storefront_content_top – <div id="content"> etiketi açıldıktan sonra yürütülür

başlık

 storefront_before_header – <div id="page"> etiketinden sonra yürütülür
storefront_header – <header id="masthead"> etiketinin <div class="col-full"> içinde yürütülür
Ana Sayfa
storefront_homepage – Ana sayfa içerik bölümünün <div class="col-full"> içinde yürütülür

Ürün kategorileri

 storefront_homepage_before_product_categories – <section class="storefront-product-categories"> ana sayfa bölümünden önce yürütülür storefront_homepage_after_product_categories_title` – <h2 class="section-title"> ürün kategorileri bölümünden sonra yürütülür storefront_homepage_after_product_categories – <section class="storefront sonra yürütülür -ürün kategorileri"> ana sayfa bölümü

Son Ürünler

 storefront_homepage_before_recent_products – <section class="storefront-recent-products"> ana sayfa bölümünden önce yürütülür storefront_homepage_after_recent_products_title – <h2 class="section-title"> son ürünler bölümünden sonra yürütülür storefront_homepage_after_recent_fronts – <section class="'den sonra yürütülür son ürünler"> ana sayfa bölümü

Özel Ürünler

 storefront_homepage_before_featured_products – <section class="storefront-featured-products"> öğesinden önce yürütülür
ana sayfa bölümü storefront_homepage_after_featured_products_title – <h2 class="section-title"> öğesinden sonra yürütülür
öne çıkan ürünler bölümü başlığı storefront_homepage_after_featured_products – <section class="storefront-featured-products"> ana sayfa bölümünden sonra yürütülür

Popüler ürünler

 storefront_homepage_before_popular_products – <section class="storefront-popular-products"> ana sayfa bölümünden önce yürütülür storefront_homepage_after_popular_products_title – <h2 class="section-title"> popüler ürünler bölümünden sonra yürütülür storefront_homepage_after_popular_fronts – <section class="'den sonra yürütülür popüler ürünler"> ana sayfa bölümü

indirimli ürünler

 storefront_homepage_before_on_sale_products – <section class="storefront-on-sale-products"> ana sayfa bölümünden önce yürütülür storefront_homepage_after_on_sale_products_title – <h2 class="section-title"> indirimli ürünler bölümü başlığından sonra yürütülür storefront_homepage_after_on_sale_products bölümünden sonra yürütülür ="storefront-on-sale-products"> ana sayfa bölümü

En çok satan ürünler

 storefront_homepage_before_best_selling_products – <section class="storefront-best-selling-products"> ana sayfa bölümünden önce yürütülür
storefront_homepage_after_best_selling_products_title – <h2 class="section-title"> en çok satan ürünler bölümü başlığından sonra yürütülür
storefront_homepage_after_best_selling_products – <section class="storefront-best-selling-products"> ana sayfa bölümünden sonra yürütülür

Blog arşiv sayfası

 storefront_loop_before – Blog arşivindeki tüm gönderilerden önce yürütülür
storefront_loop_post – Blog arşivindeki her gönderiden önce yürütülür
storefront_post_content_before – Blog arşivindeki her gönderinin içeriğinden önce yürütülür
storefront_post_content_after – Blog arşivindeki her gönderinin içeriğinden sonra yürütülür

Genel sayfa

 storefront_page_before – Tek sayfalarda `<main id=”main”>` etiketinden sonra yürütülür
storefront_page – Tek sayfalarda `<div id=”post-…”>` etiketinin açılmasından sonra yürütülür
storefront_page_after – Tek sayfalarda `<div id=”post-…”>` etiketinin sonunda yürütülür

Tek gönderi

 storefront_single_post_before – Tek blog gönderilerinde <main id="main"> etiketinin açılmasından sonra yürütülür
storefront_single_post_top – Tek gönderilerde <div id="post-..."> etiketinin açılmasından sonra yürütülür
storefront_single_post – Gönderi içeriğini göstermek için storefront_single_post_top kancasından hemen sonra yürütülür
storefront_single_post_bottom – Tek gönderilerde <div id="post-..."> kapanış etiketinden önce yürütülür
storefront_single_post_after – Tek blog gönderilerinde <main id="main"> kapanış etiketinden önce yürütülür

kenar çubuğu

storefront_sidebar – Pencere öğelerinin mevcut olması koşuluyla, kenar çubuğu içeren tüm sayfalarda yürütülür

altbilgi

 storefront_before_footer – <footer id="colophon"> etiketinden önce yürütülür
storefront_footer – <footer id="colophon"> etiketi kapatılmadan önce yürütülür
storefront_after_footer – <footer id="colophon"> etiketi kapatıldıktan sonra yürütülür

Filtreler başvuru kılavuzu

Bu bölüm, Storefront temasında bulunan en sık kullanılan filtrelerden bazılarını listeler.

Yorumlar

Dosya: yorumlar.php

storefront_comment_form_args - yorum yanıt başlığı HTML'sini önce ve sonra filtrele

Vitrin şablon işlevleri

Dosya: /inc/storefront-template-functions.php

Navigasyon menüsü

storefront_menu_toggle_text - duyarlı menü geçiş metnini filtreleyin

Ana Sayfa

Ürün kategorileri

 storefront_product_categories_args - ana sayfa ürün kategorisi argümanlarını filtreleyin
storefront_product_categories_shortcode_args - ana sayfa ürün kategorisi kısa kod bağımsız değişkenlerini filtreleyin

Son Ürünler

 storefront_recent_products_args - ana sayfadaki son ürün argümanlarını filtreleyin
storefront_recent_products_shortcode_args - ana sayfadaki son ürünler kısa kod argümanlarını filtreleyin

Özel Ürünler

 storefront_featured_products_args - ana sayfada öne çıkan ürünler argümanlarını filtreleyin.
storefront_featured_products_shortcode_args - ana sayfada öne çıkan ürünler kısa kod bağımsız değişkenlerini filtreleyin.

Popüler ürünler

 storefront_popular_products_args - ana sayfadaki popüler ürünler argümanlarını filtreleyin.
storefront_popular_products_shortcode_args - ana sayfa popüler ürünler kısa kod argümanlarını filtreleyin.

indirimli ürünler

 storefront_on_sale_products_args - ana sayfayı indirimli ürünler argümanlarında filtreleyin.
storefront_on_sale_products_shortcode_args - indirimli ürünler kısa kod argümanlarında ana sayfayı filtreleyin

En çok satan ürünler

 storefront_best_selling_products_args – ana sayfada en çok satan ürünler argümanlarını filtreleyin
storefront_best_selling_products_shortcode_args - ana sayfada en çok satan ürünler kısa kod argümanlarını filtreleyin

Tek gönderi

storefront_single_post_posted_on_html - ayrıntılarda yayınlanan tekliyi filtreleyin

altbilgi

 storefront_footer_widget_rows – alt bilgi widget satırlarının sayısını filtreler (varsayılan: 1)
storefront_footer_widget_columns – alt bilgi widget sütunlarının sayısını filtreler (varsayılan: 4)
storefront_copyright_text – altbilgi telif hakkı metnini filtreler
storefront_credit_link – alt bilgi kredi bağlantısını filtreler

Vitrin fonksiyonları

Dosya: /inc/storefront-functions.php

 storefront_header_styles - başlık stillerini filtrele
storefront_homepage_content_styles - ana sayfa içerik stillerini filtreleyin

Vitrin sınıfları

Dosya: /inc/class-storefront.php

 storefront_custom_background_args – varsayılan arka plan argümanlarını filtreler
storefront_default_background_color – varsayılan site arka plan rengini filtrele
storefront_sidebar_args - varsayılan kenar çubuğu bağımsız değişkenlerini filtreleyin
storefront_google_font_families - varsayılan Google Font ailelerini filtrele
storefront_navigation_markup_template - navigasyonun çıktı işaretlemesini filtreleyin.

WooCommerce şablon işlevleri

Dosya: /woocommerce/storefront-woocommerce-template-functions.php

 storefront_upsells_columns – yukarı satış sütunlarını filtreleyin (varsayılan: 3)
storefront_loop_columns - varsayılan ürün döngüsü görüntüsünü filtrele (varsayılan: 3)
storefront_handheld_footer_bar_links - elde taşınır alt bilgi çubuğu bağlantılarını filtreler

WooCommerce sınıfları

Dosya: /woocommerce/class-storefront-woocommerce.php

 storefront_ Related_products_args – ilgili ürün argümanlarını filtreleyin
storefront_product_thumbnail_columns – ürün küçük resim sütunlarını filtreleyin (varsayılan: 4)
storefront_products_per_page - ürünleri ürün kategorilerinde sayfa başına filtreleyin.

Çözüm

Vitrin temasını özelleştirmek istiyorsanız, bu kapsamlı Vitrin özelleştirme kılavuzunda paylaşılan bu ipuçları, başlamak için en iyi yer olmalıdır. Bu aynı zamanda size Storefront alt temasını hızlıca ekleyebileceğiniz ve sonuçları anında alabileceğiniz kod parçacıkları da sunar. Bu Vitrin özelleştirme kılavuzunu faydalı bulacağınızı umuyorum.

Benzer Makaleler

1. 4 Basit Seçenek ile Storefront ve WooCommerce Altbilgi Bağlantısı ile Oluşturulmuş Nasıl Kaldırılır
2. Bir Eklenti Kullanarak Vitrin Alt Bilgi Metni ve Bağlantıları Nasıl Kaldırılır
3. WordPress Menü Öğelerini Ayrı Ayrı Şekillendirme WordPress Menü CSS Sınıfları
4. Divi Mobile Menüsü Kaydırılabilir Hızlı Düzeltme Çözümü Nasıl Yapılır
5. Eklenti Kullanmadan WordPress'te Numara Sayfalandırma Nasıl Oluşturulur