Az ikonok lenyűgözőek!
Erős vizuális kapcsolat kialakításával képesek gyorsan kommunikálni a közönséggel.
Ez az oka annak, hogy az ikonokat széles körben használják mindenhol, beleértve a WordPress webhelyeket is.
Ezenkívül unalmas lehet, ha több hónapig ugyanazt a témát használja a webhelyén. Gyakori.
És akkor valami érdekesebbet fogsz keresni, ezt használva, és újra unatkozni fogsz,
És a ciklus megy tovább és tovább…
Szóval, hogyan tudod kihagyni az unalom ciklusát?
A Dashicon egy kiváló módszer!
Fűszerezheti webhelye esztétikáját, és segíthet kiemelkedni. Ezenkívül megkíméli Önt attól, hogy extra erőfeszítéseket tegyen, és ne zsúfolja el webhelyét felesleges képekkel, amelyek lassítják az oldal sebességét.
Tehát nézzük meg a Dashiconokat, és azt, hogyan használhatod őket hatékonyan a WordPress webhelyeden.
Mi az a WordPress Dashicon?
A Dashiconok a WordPress hivatalos ikon-betűtípusai, amelyeket évekkel ezelőtt vezettek be a 3.8-as verziójával. Ezek a betűtípusok klasszak és lenyűgözőek, ha a webhelyén használod őket. Ezek kiváló minőségű SVG fájlok, amelyeket könnyedén méretezhet bármilyen méretre pixelezés nélkül.
Mivel natív WordPress-támogatással rendelkeznek, mivel saját csapatuk hozta létre őket, közvetlenül használhatja őket további szkriptek betöltése nélkül. Körülbelül 350 ikon-betűtípus található, amelyeket a hivatalos oldalon találhat meg WordPress fejlesztői források.
Ezeket az ikonokat a téma alapján kategorizálták, emellett láthat egy dinamikus keresőmezőt, amely lehetővé teszi az elérhető ikonok szűrését.
Az alábbi ikonokat használhatja:
- WordPress irányítópult
- Navigációs menük
- Oldalak és bejegyzések
- Metaadatok
- Szerkesztő elemek
- Egyéni bővítmények és témák
- Admin panelek
- Front-end kialakítás
Észreveszi, hogy ismételten „ikonokat” mondok?
Itt csak az ikon betűtípusokra gondolok.
Nem képek ikonok formájában.
Igen, van különbség a kettő között.
Fejtsük fel ezt.
Mi a különbség a képikonok és az ikon-betűtípusok között?
Az ikon-betűtípusok és a képikonok némileg hasonlóak, de az ábécé helyett vektorszimbólumok vannak az ikon-betűtípusokban.
Ez túl technikás lett?
Hadd tisztázzam ezt.
Alapvetően ezek az ikon-betűkészletek olyan képekhez hasonlítanak, amelyek segítségével szimbólumokat adhat hozzá webhelyéhez, de nem egy valódi képhez.
Rengeteg előnnyel szolgálnak számodra.
Hogyan?
Fejtse ki a következő részben.
Miért érdemes használni őket?
- Méretezhető, mint a webhelyén használt szövegek, mivel betűtípusok
- Könnyű, ami nem befolyásolja az oldal betöltési sebességét a képekhez képest
- Képes beállítani az ikon színét a CSS-en keresztül, és további tulajdonságokat adhat hozzá, például színátmenet színét, árnyékát stb.
- Kiválóan alkalmas túl sok HTTP-kérés megmentésére azáltal, hogy egyszerre töltheti be a betűtípusokat, amelyeket oldalain használhat. Ha sok képet használ a webhelyen, akkor sok kérést kell benyújtania a letöltésükhöz, ami megnöveli az oldal betöltési idejét.
- Könnyen használható és beállítható, mint a képeken. Felismerhető és kreatív szimbólumokat adhat hozzá anélkül, hogy minden alkalommal újra létrehozná őket, amikor ikonra van szüksége egy videolejátszóhoz, e-mailhez, zenéhez vagy bármi máshoz.
- Nagyobb hozzáférhetőség, mert közvetlenül a WordPressbe vannak beépítve
Hogyan kell használni őket?
A Dashicons használata nem rakétatervezés.
Bízz bennem; Mindkettőt ismerem :0
Kövesse az alábbi lépéseket a WordPress Dashicons használatának megkezdéséhez.
1. lépés: Engedélyezze a Dashiconokat a WordPress webhelyén
Mielőtt elkezdené, engedélyezze a Dashiconokat, ahol például egy témára van szüksége. Ehhez hozzá kell adni néhány kódot a function.php fájlhoz.
Csinálni:
- Először nyissa meg a téma/megjelenés szerkesztőjét a WordPress irányítópultjáról.
- Nyissa meg a function.php fájlt.
- Görgessen a fájl végéig, és adjon hozzá néhány sornyi kódot a szkriptek sorba rendezéséhez
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
A fenti példa a Dashiconok engedélyezésére szolgál a frontenden.
A functions.php fájl szerkesztése előtt feltétlenül hozzon létre gyermektémát. Ennek az az oka, hogy ha közvetlenül szerkeszti a témafájlt, és frissítés érkezik a témához, akkor az felülírja a fájlon végzett összes módosítást.
2. lépés: Keresse meg a Dashicon HTML- és CSS-kódjait
A WordPress.org egy Dashicon-könyvtárat kínál, amely segít megtalálni az egyes ikonokhoz tartozó CSS- és HTML-kódokat. Itt lépjen a Fejlesztői erőforrások oldalra, és keresse meg a használni kívánt Dashiconokat, majd:
- Kattintson a kívánsága ikonjára.
- Kattintson rá a „CSS másolása” vagy a „HTML másolása” között.
- Most egy felugró ablakot fog látni. Csak másolja a kódot a vágólapra.
- Döntse el, hol szeretné használni az ikont, például témák, metaadatok, navigációs menü stb.
- Illessze be a másolt kódot a kiválasztott hely szövegmoduljába vagy szövegszerkesztőjébe.
- A módosítás ikon egyéni CSS használatával néz ki
Ez az.
Emellett alapértelmezés szerint az összes ikon 20 pixeles. Módosíthatja a CSS-elemek használatával, például a Google Chrome Inspect Element vagy a Firefox FireBug segítségével.
Hogyan hozhatja ki a legtöbbet a WordPress Dashiconokból?
Látta, hogyan használhatja a Dashiconokat a webhelyén, és most látni fogjuk, hogy konkrét célokra használják.
1. A navigációs menü használata
Ha ikonokat szeretne hozzáadni a menühöz, kövesse az alábbi lépéseket:
- Lépjen a Menük/Megjelenés menüpontra az irányítópulton
- Másolja a menüikonhoz tervezett HTML-kódokat a WordPress.org webhelyről
- Illessze be az irányítópult „Navigációs címkéjére”.
- Kattintson a „Mentés” gombra, majd töltse be a kezdőlapot. Meg kell jelennie a hűvös és éles ikonnak.
2. Post meta használata
A Dashiconokat közvetlenül a dátum, a szerző neve, címke vagy kategória előtt használhatja a téma és a megjelenített adatok alapján.
Mivel már sorba helyezte a Dashiconokat, nyissa meg a style.css fájlt. Ellenkező esetben választhat egyéni CSS-szerkesztőt is, amely nem hagyja elveszni a változtatásokat a téma frissítése után. Ezután adja hozzá a CSS-kódot, miután megtalálta a megfelelő választót.
3. A WordPress háttérrendszeren
Ha különböző ikonokat szeretne a különböző egyéni bejegyzéscímekhez, bejegyzéstípusokhoz vagy widgetekhez, akkor ez könnyen megtehető.
Egy gyors tipp: Hozzon létre egy rövid kódot
A Dashicons egyszerű használatához rövid kódot hozhat létre hozzá. Hasznos, különösen akkor, ha webhelyet készít ügyfelei számára, akik könnyen beilleszthetik a Dashiconokat anélkül, hogy a kódokkal vacakolnának.
Következtetés
Remélem, a dolgok elég világosak az Ön oldalán a WordPress Dashiconokkal kapcsolatban. Nemcsak a webhely esztétikáját fedik le, hanem könnyen használhatók is, és javítják az oldal betöltési sebességét.
És tudod, a „szépség és az agy” ritka kombináció.
Tehát siessen, használja ezeket a szemet gyönyörködtető Dashiconokat WordPress webhelyén!
