Kedves WordPress Tooltip Plugin felhasználók!
Remélem, hogy ez az üzenet jól talál titeket, és csodás napokat töltötök a családotokkal. Kaptunk egy jegyet egy csodálatos WordPress Tooltip felhasználótól, aki CSS ütközést jelentett a témájával a WordPress Tooltips Pluginban. WordPress fejlesztőnk ellenőrizte a témát, és megállapította, hogy ütközik a Bootstrap és a Font Awesome használatával, amelyeket a tooltip-ek is használnak, többek között. Az ügyfél számára a WordPress Tooltips fejlesztőnk kiadott egy új verziót: WordPress Tooltips Pro Plus 35.8.8.
1: Megoldottuk a konfliktust a téma és a WordPress tooltipben található Bootstrap keretrendszer között:
Hi Támogató Csapat,
Először is: hatalmas köszönet az elképesztően gyors válaszért és a késő esti munkáért.
A 35.8.8 verzióval szinte minden rendben van az én oldalamon:
WooCommerce Rendelések oldal → a PHP figyelmeztetések eltűntek ✅
Salient → Tipográfia admin panel → már nem törött ✅
Szociális ikonok a fejlécben/láblécben → jól néznek ki ✅
Csak egy regresszió jelentkezett közvetlenül a 35.8.8 frissítése után:
A főoldalon a mobil fejléc/hős elrendezés törött (menü/fejléc blokk eltolódik és a távolságok elcsúsznak).
Ezt már javították az előző verzióban, de a 35.8.8 verzióval visszatért.
Ismét köszönöm a fáradhatatlan munkátokat és a szupergyors válaszokat — nagyon értékelem, hogy mennyire rugalmasak és segítőkészek vagytok!
Üdvözlettel,
Megoldottuk a problémát a tooltip felhasználó számára, és válaszoltunk:
Hi
Remélem, hogy ez az üzenet jól talál, és boldog napokat töltesz a családoddal
Elnézést a problémáért, ellenőriztük a téma és a plugin kódjait, valamint teszteltük ezt a problémát különböző felbontásokon, és végül felfedeztük, hogy a Bootstrap és a téma közötti konfliktus okozta. A megoldás egyszerű, kérlek, nyisd meg a tooltip globális beállítási panelt, és tiltsd le a következő opciót: “Bootstrap CSS engedélyezése/letiltása a téma ütközések elkerülése érdekében?” A mi oldalunkon minden jól működik
Kérlek, végezz egy tesztet, és adj visszajelzést! Ha bármilyen probléma merül fel, ne habozz szólni, megoldjuk neked a lehető leghamarabb
Köszönöm, legyen áldott napod a szeretteiddel
Üdvözlettel,
WordPress Tooltips Támogatás
2: WooCommerce Rendelések oldal: több PHP figyelmeztetés még mindig megjelenik a rendelési részletek szekció alatt (a post_type null értékével kapcsolatos):
Kész, átírtuk a kódjainkat így, hogy megoldjuk a problémát:
if (isset($post->post_type)) {
if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Kivonat megjelenítése a tooltip felugró ablakban?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }
Most jól működik
3: Salient Tipográfia panel: az admin felület a Salient → Tipográfia alatt törötté és elcsúszottá válik, amikor a WordPress Tooltips Pro aktív.
Kész, átnéztük a téma alap kódját, és megállapítottuk, hogy tartalmaz egy .tooltip osztályt, amely ütközik a .tooltips osztállyal az admin.css fájlunkban. Átírtuk a WordPress tooltips plugint így:
Az admin.css fájlt a WordPress Tooltips pluginhoz csak akkor töltjük be a wp-admin területen, ha a jelenlegi képernyő a pluginhoz tartozik.
Kódok:
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’);
}
}
Most jól működik
4: Szociális ikonok: a Font Awesome ikonok a menüben és a láblécben (szociális linkek) még mindig helytelenül vagy üres dobozként jelennek meg.
Kész, a Salient témában felfedeztük, hogy késlekedve töltik be a scriptjeiket így:
add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );
Átírtuk a plugint, hogy a Font Awesome-t késlekedve töltsük be, hogy elkerüljük a konfliktusokat más témákkal vagy pluginekkel:
add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);
Így a Salient téma összes kódja először fut le, a mi kódunk utoljára hívja meg a Font Awesome-t.
Ezért a Salient téma összes kódja prioritással fog végrehajtódni, és a pluginunk végül hívja meg a Font Awesome-t a betöltéshez.
Most jól működik
A felhasználó témája a Font Awesome 6.5-öt használta, míg a mi Font Awesome Tooltips is a Font Awesome 6.4-et használta a WordPress Tooltips Pro Plus 35.8.8 verzióban. Frissítettük a Font Awesome tooltips-t, hogy a legújabb verziót használja: Font Awesome 7.1.
Mi az a Font Awesome?
A Font Awesome egy népszerű ikon toolkit és webfont, amely egy hatalmas, skálázható vektorgrafikus ikonok és szociális logók gyűjteményét kínálja. Lehetővé teszi a fejlesztők számára, hogy könnyedén beépítsenek kiváló minőségű ikonokat weboldalaikba és alkalmazásaikba anélkül, hogy képfájlokra lenne szükségük.
A Font Awesome kulcsfontosságú jellemzői:
Skálázható ikonok: Mivel vektor alapúak, a Font Awesome ikonok bármilyen méretre skálázhatók anélkül, hogy elveszítenék a minőségüket, így tökéletesek a reszponzív tervezéshez.
Böngészőkompatibilitás: A Font Awesome zökkenőmentesen működik minden modern webböngészőben.
Könnyű integráció: A fejlesztők könnyedén integrálhatják a Font Awesome-t projektjeikbe egy egyszerű <link> tag segítségével, vagy telepíthetik csomagkezelők, mint az npm vagy Yarn használatával.
Testreszabható: Az ikonok CSS-sel formázhatók, lehetővé téve a szín, méret, forgatás és sok más változtatását, hogy illeszkedjenek a weboldal tervezési követelményeihez.
Hozzáférhetőség: A Font Awesome ikonok hozzáférhetővé tehetők megfelelő HTML attribútumokkal, biztosítva, hogy a képernyőolvasók számára is használhatóak legyenek.
Rendszeres frissítések: A toolkit gyakran frissül új ikonokkal, folyamatosan bővítve a könyvtárát.
Miért szeretik a felhasználók a Font Awesome-t?
Széles választék: A Font Awesome több ezer ikont kínál számos kategóriában, lehetőséget adva a felhasználóknak, hogy megtalálják a tökéletes ikont bármilyen alkalmazáshoz.
Egyszerűség: A Font Awesome használatának szintaxisa egyszerű, így a fejlesztők minden szintjén könnyen megvalósítható.
Teljesítmény: Mivel egy font-alapú ikon készletről van szó, a Font Awesome általában gyorsabban betöltődik, mint a hagyományos képkonfigurációk, hozzájárulva a weboldal teljesítményének javításához.
Közösségi támogatás: Nagy közössége van a felhasználóknak és átfogó dokumentációja, így a fejlesztők könnyen találhatnak támogatást, útmutatókat és példákat.
Konzisztens stílus: Minden ikon egységes stílussal rendelkezik, ami segít fenntartani a vizuális konzisztenciát a webalkalmazásokban.
Ingyenes és fizetős lehetőségek: A Font Awesome ingyenes és prémium verziókat is kínál, lehetővé téve a felhasználók számára, hogy igényeik és költségvetésük alapján válasszanak.
Következtetés
A Font Awesome sok fejlesztő számára a legjobb megoldássá vált sokoldalúsága, könnyű használata és kiterjedt ikon könyvtára miatt. Akár egy egyszerű weboldalt, akár egy összetett webalkalmazást építesz, a Font Awesome biztosítja a szükséges eszközöket a UI tervezés javításához és a felhasználói élmény fokozásához.
Mi az a Font Awesome Tooltips?
A Font Awesome Tooltips egy olyan funkció, amely lehetővé teszi a fejlesztők számára, hogy lebegő információs dobozokat vagy tippeket hozzanak létre Font Awesome ikonokkal, amelyek a WordPress Tooltips Pro Plus 19.9.8 verziójában találhatók. Ezek a tooltip-ek további kontextust vagy információt nyújtanak egy weboldal eleméről, amikor a felhasználó az egérmutatójával föléjük viszi.
A Font Awesome Tooltips kulcsfontosságú jellemzői:
Ikonok: Könnyedén beépítheted a Font Awesome könyvtár ikonjait a tooltipjeidbe, fokozva a vizuális vonzerőt és a felhasználói élményt.
Testreszabás: A tooltip-ek stílusozhatók és testreszabhatók, hogy illeszkedjenek a weboldalad dizájnjához, lehetővé téve a szín, méret és pozicionálás módosítását.
Reszponzivitás: Gyakran jól alkalmazkodnak a különböző képernyőméretekhez, így alkalmasak asztali és mobil felületekhez egyaránt.
Hozzáférhetőség: A megfelelően megvalósított tooltip-ek javíthatják a hozzáférhetőséget, további információt nyújtva anélkül, hogy zsúfolttá tennék a felhasználói felületet.
JavaScript támogatás: Sok tooltip megvalósítás JavaScript vagy CSS keretrendszereket (mint például Bootstrap) használ a funkcionalitás fokozására, például a megjelenítési és eltüntetési hatásokhoz.
Hogyan adjunk hozzá Font Awesome Tooltips-t a WordPress bejegyzésedhez
A Font Awesome tooltips segítségével könnyebbé vált a vonzó tartalom létrehozása a WordPress bejegyzéseidben! Kövesd ezeket az egyszerű lépéseket, hogy gyönyörű ikonokkal gazdagítsd bejegyzéseidet, amelyek további információt nyújtanak az olvasóidnak.
- lépés: Hozz létre egy új WordPress bejegyzést
Kezdj el egy új bejegyzést létrehozni a WordPressben. A szerkesztőben egyszerűen illeszd be a Font Awesome tooltip shortcode-ot így:
[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]
Ez a Font Awesome tooltip shortcode lehetővé teszi, hogy tooltipet jeleníts meg a bejegyzésedben.
További WordPress tooltips shortcode-okat találhatsz a részletes tooltip shortcode dokumentációnkban: tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/
- lépés: Előnézet a tooltipedhez
Miután hozzáadtad a shortcode-ot, lépj át a WordPress bejegyzésed előnézetére. Látni fogsz egy szép kérdőjel ikon, ami így néz ki:
Font Awesome Tooltip Ikon
Amikor a felhasználók az egérmutatójukat a kérdőjel köré viszik, egy tooltip felugró ablak jelenik meg, amely további részleteket nyújt:
Font Awesome Tooltip Felugró Ablak
- lépés: Testreszabás a tooltipedhez
Rugalmasságod van a Font Awesome ikonjaid méretének és színének testreszabására. Például, ha nagyobbá szeretnéd tenni a kérdőjel ikonodat, egyszerűen változtasd meg a méret paramétert 2x-ről 3x-re, 4x-re vagy akár nagyobbra! Íme egy példa:
A Font Awesome tooltip felugró ablak a front-end-en
A szín megváltoztatásához módosítsd a szín paramétert bármilyen hex értékre, amit preferálsz, például #cccccc vagy #eeeeee.
- lépés: Válaszd ki az ikon stílusát
A Font Awesome tooltip stílusát is módosíthatod a set paraméter megváltoztatásával:
fas — Szilárd ikonok
far — Rendes ikonok
fab — Márka ikonok
Gyors összefoglaló, amit tudnod kell:
tooltip_id: Ez a tooltip azonosítója, amelyet a WordPress tooltip szerkesztőben hoztál létre.
set: Válassz a szilárd (fas), rendes (far) vagy márka (fab) ikonok közül.
icon: A kérdőjel-kör ikont használtuk, de ne feledd, hogy több mint 1,588 lenyűgöző ikon közül választhatsz!
size: Nyugodtan növeld a méretet 3x-re, 4x-re stb., a tervezési preferenciáid alapján.
color: Testreszabhatod a színt, hogy illeszkedjen a weboldaladhoz, például #eeeeee.
Most már készen állsz arra, hogy feldobd a WordPress bejegyzéseidet a csodás Font Awesome tooltip-ekkel! Boldog blogolást!
Következtetés:
A Font Awesome több mint 1,500 kiváló minőségű ikont tartalmaz, amelyeket méret, szín és stílus szerint testre lehet szabni CSS segítségével. Ezek az ikonok úgy lettek tervezve, hogy böngészőfüggetlenek legyenek. A Font Awesome tooltip-ek hasznos elemek a felhasználói interakció javítására és hasznos információk vizuálisan vonzó módon történő megjelenítésére a weboldalakon.
Ha bármire szükséged van, amit meg kell változtatnunk, kérlek, ne habozz szólni, mindent megteszünk, hogy a lehető leghamarabb teljesítsük (most 01:52 van).
Ha minden jól működik, kérlek, változtasd meg a tesztoldalad hozzáférését, soha nem léptünk be a fiókodba, hogy megvédjük a magánadataidat és személyes információidat
Köszönjük, legyen áldott napod a szeretteiddel
Üdvözlettel,
WordPress Tooltip Támogatás
Tooltip Stílus Beállítások — WordPress Tooltips 36.1.8
