Ahoj, milí uživatelé pluginu WordPress Tooltip, doufám, že vás tato zpráva zastihne v pořádku a že si užíváte krásné dny se svou rodinou. Obdrželi jsme tiket od úžasného uživatele WordPress Tooltip, který nahlásil konflikt CSS se svým motivem v pluginu WordPress Tooltips. Náš WordPress vývojář zkontroloval motiv a zjistil, že je v konfliktu s Bootstrapem a Font Awesome, které jsou použity v tooltipech, mimo jiné. Abychom vyřešili problém pro našeho cenného uživatele tooltipu, náš vývojář WordPress Tooltips vydal novou verzi: WordPress Tooltips Pro Plus 35.8.8.
1: Vyřešen konflikt mezi motivem a frameworkem Bootstrap zahrnutým v tooltipu WordPress:
Ahoj podpora,
Především: obrovské díky za neuvěřitelně rychlou reakci a noční práci.
S verzí 35.8.8 je téměř vše na mé straně v pořádku:
Stránka objednávek WooCommerce → PHP varování zmizela ✅
Salient → Administrativní panel typografie → již není rozbitý ✅
Sociální ikony v záhlaví/zápatí → vypadají dobře ✅
Je tu jen jedna regrese, která se objevila hned po aktualizaci na 35.8.8:
Na úvodní stránce je rozbitý mobilní záhlaví/hero layout (blok menu/záhlaví se posouvá a rozestupy jsou špatné).
To bylo již opraveno v předchozí verzi, ale s 35.8.8 se to vrátilo.
Ještě jednou, moc děkuji za vaši neúnavnou práci a super rychlé odpovědi — opravdu si vážím vaší flexibility a pomoci!
S pozdravem,
Vyřešili jsme problém pro uživatele tooltipu a odpověděli jsme:
Ahoj
Doufám, že vás tato zpráva zastihne v pořádku a že máte šťastné dny se svou rodinou
Omlouváme se za problém, zkontrolovali jsme kódy motivu a našeho pluginu, také jsme tento problém testovali na různých rozlišeních a nakonec jsme zjistili, že byl způsoben konfliktem mezi Bootstrapem a motivem. Řešení je jednoduché, prosím, otevřete globální nastavení tooltipů a deaktivujte možnost: „Povolit / Zakázat Bootstrap CSS, aby se předešlo konfliktům s motivem?“, na naší straně jsme zjistili, že vše funguje dobře
Můžete prosím provést test a dát nám zpětnou vazbu? Pokud bude nějaký problém, neváhejte nám říct, vyřešíme to pro vás co nejdříve
Děkujeme, mějte požehnaný den se svými blízkými
S pozdravem,
Podpora WordPress Tooltips
2: Stránka objednávek WooCommerce: pod sekcí podrobností objednávky se stále objevuje několik PHP varování (týkající se post_type, který je null):
Hotovo, přepsali jsme naše kódy takto, abychom vyřešili problém:
if (isset($post->post_type)) {
if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Zobrazit úryvek v tooltipu?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }
Nyní to funguje dobře
3: Administrativní panel typografie Salient: uživatelské rozhraní pod Salient → Typografie se stává rozbitým a nevyrovnaným, když je aktivní WordPress Tooltips Pro.
Hotovo, zkontrolovali jsme kód jádra motivu a zjistili jsme, že obsahuje třídu .tooltip, která je v konfliktu s třídou .tooltips v našem souboru admin.css. Přepsali jsme náš plugin WordPress Tooltips tímto způsobem:
Načíst soubor admin.css pro plugin WordPress Tooltips v oblasti wp-admin pouze tehdy, když aktuální obrazovka patří k pluginu.
Kódy:
if (isset($_GET[‘post_type’]))
{
$tooltips_admin_post_type_check = sanitize_text_field($_GET[‘post_type’]);
if ($tooltips_admin_post_type_check === ‘tooltips’)
{
wp_enqueue_style(‘tooltips_pro_admin_css’, plugin_dir_url(__FILE__) . ‘asset/css/admin/admin.css’);
}
}
Nyní to funguje dobře
4: Sociální ikony: Ikony Font Awesome v menu a zápatí (sociální odkazy) se stále zobrazují nesprávně nebo jako prázdné boxy.
Hotovo, v motivu Salient jsme zjistili, že načítají své skripty pozdě takto:
add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );
Přepsali jsme náš plugin, abychom načítali Font Awesome pozdě, abychom se vyhnuli konfliktům s jinými motivy nebo pluginy:
add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);
Takže všechny kódy v motivu Salient se spustí jako první, naše kódy nakonec načtou Font Awesome.
Nyní to funguje dobře
Motiv uživatele používal Font Awesome 6.5 a naše Font Awesome Tooltips také využívaly Font Awesome 6.4 ve WordPress Tooltips Pro Plus 35.8.8. Aktualizovali jsme Font Awesome tooltips, aby používaly nejnovější verzi: Font Awesome 7.1. Co je Font Awesome?
Font Awesome je populární ikony toolkit a webový font, který poskytuje obrovskou sbírku škálovatelných vektorových ikon a sociálních log. Umožňuje vývojářům snadno začlenit vysoce kvalitní ikony do svých webových stránek a aplikací bez potřeby souborů obrázků. Hlavní funkce Font Awesome:
Škálovatelné ikony: Díky tomu, že jsou vektorové, mohou být ikony Font Awesome škálovány na jakoukoli velikost bez ztráty kvality, což je činí ideálními pro responzivní designy.
Kompatibilita napříč prohlížeči: Font Awesome funguje bez problémů ve všech moderních webových prohlížečích.
Snadná integrace: Vývojáři mohou snadno integrovat Font Awesome do svých projektů pomocí jednoduchého <link> tagu nebo jeho instalací prostřednictvím správců balíčků jako npm nebo Yarn.
Přizpůsobitelnost: Ikony mohou být stylizovány pomocí CSS, což umožňuje změny v barvě, velikosti, rotaci a mnohem více, aby vyhovovaly designovým požadavkům webu.
Přístupnost: Ikony Font Awesome mohou být učiněny přístupnými prostřednictvím správných HTML atributů, což zajišťuje, že jsou použitelné pro čtečky obrazovky.
Pravidelné aktualizace: Toolkit je často aktualizován o nové ikony, což vylepšuje jeho knihovnu v průběhu času.
Proč uživatelé mají rádi Font Awesome:
Široká rozmanitost: Font Awesome nabízí tisíce ikon pokrývajících různé kategorie, což uživatelům poskytuje dostatek možností najít ideální ikonu pro jakoukoli aplikaci.
Jednoduchost: Syntaxe pro používání Font Awesome je přímočará, což usnadňuje implementaci vývojářům všech úrovní dovedností.
Výkon: Jako sada ikon založená na písmu se Font Awesome obvykle načítá rychleji než tradiční obrázkové ikony, což přispívá k lepšímu výkonu webových stránek.
Podpora komunity: S velkou komunitou uživatelů a komplexní dokumentací mohou vývojáři snadno najít podporu, návody a příklady.
Konzistentní styl: Všechny ikony mají jednotný styl, což pomáhá udržovat vizuální konzistenci napříč webovými aplikacemi.
Bezplatné a placené možnosti: Font Awesome nabízí jak bezplatné, tak prémiové verze, což uživatelům umožňuje vybrat si podle svých potřeb a rozpočtu.
Závěr
Font Awesome se stal oblíbeným řešením pro mnoho vývojářů díky své všestrannosti, snadnému použití a rozsáhlé knihovně ikon. Ať už vytváříte jednoduchou webovou stránku nebo složitou webovou aplikaci, Font Awesome poskytuje nástroje potřebné k vylepšení designu uživatelského rozhraní a zlepšení uživatelského zážitku. Co jsou Font Awesome Tooltips?
Font Awesome Tooltips jsou funkce, která umožňuje vývojářům vytvářet hoverable informační boxy nebo nápovědy pomocí ikon Font Awesome, zahrnutých ve verzi wordpress tooltips pro plus 19.9.8. Tyto tooltips poskytují další kontext nebo informace o prvku na webové stránce, když nad ním uživatel přejede kurzorem. Hlavní funkce Font Awesome Tooltips:
Ikony: Můžete snadno začlenit ikony z knihovny Font Awesome do svých tooltips, což zvyšuje vizuální přitažlivost a uživatelský zážitek.
Přizpůsobení: Tooltips mohou být stylizovány a přizpůsobeny tak, aby odpovídaly designu vaší webové stránky, což umožňuje úpravy v barvě, velikosti a umístění.
Responzivita: Často se dobře přizpůsobují různým velikostem obrazovky, což je činí vhodnými pro desktopové i mobilní rozhraní.
Přístupnost: Správně implementované tooltips mohou zlepšit přístupnost tím, že poskytují další informace, aniž by zaneřádily uživatelské rozhraní.
Podpora JavaScriptu: Mnoho implementací tooltipů využívá JavaScript nebo CSS frameworky (jako Bootstrap) k vylepšení funkčnosti, jako jsou efekty zobrazení a skrytí.
Jak přidat Font Awesome Tooltips do vašeho příspěvku WordPress
Vytváření atraktivního obsahu ve vašich příspěvcích WordPress je nyní snazší s Font Awesome tooltips! Postupujte podle těchto jednoduchých kroků, abyste vylepšili své příspěvky krásnými ikonami, které poskytují další informace vašim čtenářům. Krok 1: Vytvořte nový příspěvek WordPress
Začněte vytvořením nového příspěvku ve WordPressu. V editoru jednoduše vložte zkrácený kód Font Awesome tooltip takto:
[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]
Tento zkrácený kód Font Awesome tooltip vám umožní zobrazit tooltip ve vašem příspěvku.
Další zkrácené kódy wordpress tooltips naleznete v našem podrobném dokumentu o zkrácených kódech tooltipů; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Krok 2: Náhled vašeho tooltipu
Jakmile přidáte zkrácený kód, přejděte na front-end vašeho příspěvku WordPress. Uvidíte krásnou ikonu otázkového kruhu, která vypadá takto:
Ikona Font Awesome Tooltip
Když uživatelé přejedou kurzorem nad otázkovým kruhem, objeví se vyskakovací okno tooltipu, které poskytne více podrobností:
Vyskakovací okno Font Awesome Tooltip Krok 3: Přizpůsobte svůj tooltip
Máte flexibilitu přizpůsobit velikost a barvu vašich ikon Font Awesome. Například, pokud chcete, aby byla ikona otázkového kruhu větší, jednoduše změňte parametr velikosti z 2x na 3x, 4x nebo dokonce větší! Zde je příklad: vyskakovací okno tooltipu font awesome na front-endu
Chcete-li změnit barvu, upravte parametr barvy na jakoukoli hex hodnotu, kterou preferujete, například #cccccc nebo #eeeeee. Krok 4: Vyberte styl své ikony
Můžete také upravit styl svého Font Awesome tooltipu změnou parametru set:
fas — Solid ikony
far — Pravidelné ikony
fab — Brand ikony
Rychlé shrnutí toho, co potřebujete vědět:
tooltip_id: Toto je ID tooltipu, který jste vytvořili v editoru tooltipů WordPress.
set: Vyberte mezi solid (fas), pravidelnými (far) nebo brand (fab) ikonami.
icon: Použili jsme ikonu otázkového kruhu, ale pamatujte, že máte na výběr více než 1 588 úžasných ikon!
size: Nebojte se zvýšit velikost na 3x, 4x atd., podle vašich designových preferencí.
color: Přizpůsobte barvu tak, aby odpovídala vašemu webu, například #eeeeee.
Nyní jste připraveni vylepšit své příspěvky WordPress s potěšujícími Font Awesome tooltips! Šťastné blogování! Závěr:
Nyní jste připraveni obohatit své příspěvky na WordPressu o nádherné tooltipy Font Awesome! Šťastné blogování!
Závěr:
Font Awesome zahrnuje více než 1 500 vysoce kvalitních ikon, které lze přizpůsobit velikosti, barvě a stylu pomocí CSS. Tyto ikony jsou navrženy tak, aby byly kompatibilní s různými prohlížeči. Tooltipy Font Awesome jsou užitečnou součástí pro zlepšení interakce uživatelů a poskytování užitečných informací vizuálně atraktivním způsobem na webových stránkách.
Pokud je něco, co bychom měli změnit, neváhejte nám to říct, pokusíme se to co nejdříve splnit (je 01:52 ráno).
Pokud vše funguje správně, prosím, změňte přístup na vaší testovací stránce, nikdy jsme se nepřihlásili do vašeho účtu, abychom chránili vaše soukromé údaje a osobní informace
Děkujeme, mějte požehnaný den se svými blízkými
S pozdravem,
Podpora WordPress Tooltipů
