Dostali jste se do situace vyžadující obrázek pro každý z vašich značek WooCommerce? Štěstí pro vás, my také! Měli jsme spoustu produktů a spoustu kategorií, ale chtěli jsme ponechat značky oddělené od skutečných kategorií, takže místo použití podkategorií pod nadřazenou značkou „Značky“ jsme použili značky. O stovky produktů později chtěl náš klient zobrazit obrázek na každé stránce se značkami – konkrétně logo značky. A jé! Žádná taková možnost.
Mohli bychom projít každý jednotlivý produkt, chytit značku značky, vytvořit kategorii a přiřadit ji k nadřazené kategorii „Značky“, ale zdá se to jako spousta práce navíc. To platí zejména vzhledem k tomu, že se nám skutečně líbilo, jak byly značky zobrazeny v cloudu značek na přední straně webu.
Řešení:plugin Taxonomy Images
Zásuvný modul obrázků taxonomie pracuje s vlastními taxonomiemi a přiřazuje možnost GUI pro připojení obrázků k dané taxonomii. V tomto případě je naší taxonomií Product Tag. Implementace vyžaduje dva kroky, instalaci/konfiguraci pluginu a nahrání obrázků a také nastavení šablony značky WooCommerce.
Nastavení pluginu a nahrávání obrázků
- Přihlaste se ke svému administrátorovi WordPress a zvolte Pluginy> Přidat nový
- Vyhledejte a nainstalujte plugin „Taxonomy Images“. Po instalaci jej nezapomeňte aktivovat!
- Přejděte do Nastavení> Obrázky taxnomie
- Zaškrtněte políčko „Značky produktu“ a zvolte „Uložit změny“
Nyní byste měli vidět možnost nahrát obrázek vedle každého jednotlivého štítku produktu v části Produkty> Štítky. Už jsme v polovině! Pokračujte a nahrajte obrázek pro každý štítek, jako byste normálně nahrávali obrázky do WordPress – po nahrání nezapomeňte vybrat tlačítko „Přiřadit k tag_name“ (kde tag_name je skutečný název vašeho tagu). Aktualizujte svůj štítek a jste téměř připraveni!
Konfigurace šablony WooCommerce
Nyní musíme WooCommerce informovat, že si přejete zobrazit obrázek na stránce s jedním tagem. To je trochu složitější a vyžaduje úpravu nějakého kódu. Budete také potřebovat FTP přístup k vaší instalaci WordPress, abyste mohli upravit některé soubory šablon.
Začněte nastavením souboru šablony:
- Přihlaste se přes FTP a přejděte do svého adresáře témat WordPress (wp-content/themes/{název_vašeho_tématu})
- Vytvořte novou složku s názvem woocommerce, pokud ještě neexistuje (tato složka obsahuje všechna přepsání šablon)
- Zkopírujte šablonu stránky značky do této složky. Šablonu stránky značky naleznete pod wp-content/plugins/woocommerce/templates/taxonomy-product_tag.php . Ale počkej! Je v tom jeden trik, ve skutečnosti jen stáhne veškerý obsah z wp-content/plugins/woocommerce/templates/archive-product.php , i když opravdu chceme přepsat pouze značky... ne všechny stránky produktů. Chcete-li to provést, zkopírujte soubor archive-product.php soubor z wp-content/plugins/woocommerce/templates do wp-content/themes/{your_theme_name}/woocommerce poté jej přejmenujte na taxonomy-product_tag.php
Nyní jsme vytvořili soubor šablony pro přepsání, který přepíše pouze značky produktu, a přesto bude obsahovat veškerý obsah, který potřebujeme. Nyní musíme upravit soubor šablony a vložit nějaký kód, který bude zobrazovat obrázky vašich značek produktu. Zde je postup:
Otevřete svůj nový soubor šablony (wp-content/themes/{název_vašeho_theme}/woocommerce/taxonomy-product_tag.php ) pomocí vašeho oblíbeného textového editoru.
Přímo nad řádkem, který vypadá takto:
<?php do_action( 'woocommerce_archive_description' ); ?>
Vložte následující:
<aside id="tag-brand-logo"><?php print apply_filters( 'taxonomy-images-queried-term-image', '' ); ?></aside>
Uložte soubor a přejděte na jednu z vašich stránek s jednotlivými značkami produktu (ujistěte se, že je to ta, na kterou jste skutečně nahráli obrázek!) a vyhřívejte se ve slávě, že jste hackli WooCommerce, abyste dostali své obrázky tam, kde jste je chtěli.
Svůj obrázek můžete také upravit pomocí některých CSS, jako je tento (například):
#tag-brand-logo{ float:right !important; margin-top:-25px; } Pomohl vám tento příspěvek? Chcete další odborné rady na blozích svého hostitele webu a přímo od týmu technické podpory hostingu? Hostujte svůj web WordPress pomocí Websavers, kde podpora přesahuje pouhé hostování!