WordPress (WP), Font Awesome i WooCommerce (Woo) je open-source software. WooCommerce je určen pro malé až velké online obchodníky používající WordPress. Zásuvný modul byl uveden 27. září 2011 a rychle si získal oblibu pro svou jednoduchost instalace a přizpůsobení a pro postavení základního produktu na trhu jako freeware (i když mnoho jeho volitelných rozšíření je placených a proprietárních).

WooCommerce byl poprvé vyvinut vývojářem témat WordPress WooThemes, který najal Mikea Jolleyho a Jamese Kostera, vývojáře ze společnosti Jigowatt, aby pracovali na odnoži Jigoshopu, z níž se stal WooCommerce. V lednu 2020 se odhadovalo, že Woo používá přibližně 3,9 milionu webových stránek. V listopadu 2014 se v kalifornském San Franciscu konala první konference WooConf, zaměřená na elektronické obchodování.

Zúčastnilo se jí 300 účastníků. V květnu 2015 společnosti WooThemes a WooCommerce koupila společnost Automattic, provozovatel webu WordPress.com a hlavní přispěvatel do softwaru WP. V prosinci 2020 společnost Woo získala MailPoet, populární plugin pro správu newsletterů ve WordPressu.

Obsah

WooCommerce WordPress Font Awesome na Fontello

Zejména pokud používate plugin (pluginy) které sami o sobě používají vlastní implementaci fontu Awesome (kupříkladu YITH Woo Wishlist) po přidání vlastního fontu Awesome – třeba pro použití na celém webu (obvykle) a toto provedete vložením řádku s importem do styles.css

@import url("/wp-content/font/css/all.css");

nebo pomocí externího linku

@import url("https://fontawesome.com/fonts/css/all.css");

mohou se začít dít různé věci :) Třeba u plugin, nebo v jiné části webu může přestat fungovat (částečně nebo celkově) vykreslování ikon. Projeví se to obvykle tak, že ikony které plugin s jinou verzi Font Awesome na webu vykresluje mizí, zobrazí se částečně nebo jsou nahrazeny nesmyslnou ilustrací.

Příkladem třeba YITH plugin Woo Wishlist kde rozšíření provozuje list přání. Po aktivaci jedné z možností vkládá klikací srdíčka do obrázků, pro přidání nabízeného (momentálně) nedostupného zboží na takzvaný Seznam přání.

Nekonfliktní implementaci proto provedeme tak, že importovací link vložíme do souboru header.php

Pokud používáte child_theme pak soubor header.php přesuneme ze zložky

 /wp-content/themes/moje_šablona/header.php

/wp-content/themes/moje_child_theme/header.php

Font Awesome hostujeme lokálně. Ze (v době psaní článku pracujeme s verzí 5.15.4) staženého (odkaz na konci textu) fontawesome-free-5.15.4-web.zip souboru nahrajeme potřebné složky css a webfonts do připravené složky v naší instalaci WordPress, třeba /wp-content/pismo/. Pro upload stylů lze použít FTP (Filezilla, WinSCP) nebo SFTP protokol – dle možností které máte

Následně upravíme soubor header.php

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <link href="/wp-content/pismo/css/all.css" rel="stylesheet"> <!--load all styles -->
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>

To je vše. Niní fungují instalované pluginy používající Font Awesome i přidané ikony do úprav obchodu. Jak přidat ikony do WooCommerce Můj účet popíšeme v článku na pokračování.

Tip!
Plugin Font Awesome je zpětně kompatibilní s Font Awesome v4. Rovněž umí otestovat webovou stránku na případne konflikty verzí Fontu Awesome.

Nepotřebuju 1000 ikon

Co v případě, že potřebujete pouze několik ikon? Existuje online služba, webový generátor jménem Fontanello. V něm pomocí vyhledávače najdete a označíte potřebné ikony. Když máte naklikáno vše co potřebujete stáhnete včetně stylů jako .zip balíček. Import ikon do layoutu pomocí CSS je obdobný jako v příkladu nahoře. Cestu pro import pojmenujeme dle ména které jste na webu Fontanello uvedli ve formuláři generátoru.

@font-face {
  font-family: 'card';
  src: url('/font/dashb.eot?65114073');
  src: url('/font/dashb.eot?65114073#iefix') format('embedded-opentype'),
       url('/font/dashb.woff2?65114073') format('woff2'),
       url('/font/dashb.woff?65114073') format('woff'),
       url('/font/dashb.ttf?65114073') format('truetype'),
       url('/font/dashb.svg?65114073#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'dashb';
    src: url('../font/dashb.svg?65114073#fontello') format('svg');
  }
}

/* Ikona pro logout menu v zákazníckém rozhraní */
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before {
font-family: "dashb";
padding-right: 20px;
font-size: 18px;
content: '\e805';
color: red;
}

Užitečné odkazy:
Font Awesome WordPress plugin

https://wordpress.org/plugins/font-awesome/

Font Awesome cheat sheet

https://fontawesome.com/v5/cheatsheet

Font Awesome stažení fontawesome-free-*-web.zip

https://use.fontawesome.com/releases/v5.15.4/fontawesome-free-5.15.4-web.zip (odkaz na stažení přímo)

Fontanello web generátor

https://fontello.com/

Návod na použití Awesome:

https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

Pro verze:
Po přihlášení se (registraci) do programu Pro lze testovat beta verzi Font Awesome 6.0

Užitečné

Domovská stránka Font Awesome.
Text Woocommerce šablona v češtině.

WooCommerce WordPress Font Awesome na Fontello

Nepotřebuju 1000 ikon

Užitečné

Související příspěvky: