Mindenkivel előfordul.

Találsz egy témát, ami tetszik, telepíted, és néhány hónapig élvezed az oldalad kinézetét. De aztán néhány hónap múlva a téma kezd unalmasnak tűnni. Egy kicsit unalmasnak.

A probléma csak az, hogy nem akarsz néhány órát azzal tölteni, hogy valami újat keress. Bárcsak lenne egy mód arra, hogy egy kis fűszert adj a témádhoz, egy kis fényt, hogy kitűnjön.

Mielőtt kétségbeesetten felemelnéd a kezed, hadd mutassak neked egy egyszerű módszert, amivel túl sok erőfeszítés nélkül feldobhatod a témádat, anélkül, hogy felesleges képeket adnál hozzá, amelyek lelassíthatják az oldaladat.

Lépj be a Dashicons-ba. A Dashicons olyan betűtípus ikonok, amelyeket a WordPress 3.8-ban vezettek be. Ezek azok a félelmetes és menő ikonok, amelyeket akkor látsz, amikor bejelentkezel a műszerfaladba. Nem lenne klassz, ha a témádhoz is hozzáadhatnád őket?

Nos, megteheted, és én meg is mutatom, hogyan.

Hogyan használhatja a Dashicons-t a navigációs menüben?

Kezdjük egy egyszerű példával. A dashikonok már a 3.8-as verzió óta szerepelnek a WordPressben, de még mindig be kell építened őket, hogy megfelelően jelenjenek meg a webhelyed front endjén; vagyis a témádban.

1. lépés: Készítse elő a téma Dashicons készítését

Ahhoz, hogy a téma Dashicons kész először nyissa meg a functions.php fájlt (megtalálható a Megjelenés>Szerkesztő - alapértelmezés szerint megnyitja a jelenlegi téma CSS fájlját. Menj előre, és keresse meg a functions.php fájlt, és kattintson rá, hogy betöltse a szerkesztőbe.).

2. lépés: A szkript sorba állítása

Görgessen egészen az aljára, és illessze be ezeket a kódsorokat a végére:

 //Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Rendben! Most már a témád készen áll a Dashicons használatára.

3. lépés: Dashicons hozzáadása a menüpontokhoz

Adjunk hozzá egy Dashicon-t a Home linkünkhöz. Menjünk át a Dashicons weboldalra, és válasszuk ki a nekünk tetsző ikont.

Frissítés: A dashikonok eredetileg a GitHub.io-n voltak elérhetők, de azóta a WordPress.org-on is elérhetővé váltak.

4. lépés:

Kattintson a kívánt ikonra (ebben az esetben a home ikont választottam), majd kattintson a HTML másolása gombra. Ez egy felugró ablakot fog adni a szükséges kóddal.

5. lépés:

Menj vissza a WordPress műszerfalra, kattints a Megjelenés> Menük és illeszd be a kódot oda, ahol a Navigációs címke áll.

Ha továbbra is szeretné, hogy a szó megjelenjen, írja be a záró div zárójel után.

Kattintson a mentésre, és töltse be a kezdőlapját. A kezdőlap linkjének most már egy szép, éles Dashicon-t kell megjelenítenie.

Ezt megteheti az összes navigációs menüpontra vagy csak a főoldalra. Csak ismételje meg a fenti lépéseket a megfelelő ikonokkal. Ez könnyű volt, igaz?

Hogyan használod a Dashicons-t a poszt metában?

Egy lépéssel tovább mehetsz, és Dashicons-t adhatsz a poszt meta, vagy más szóval Dashicons-t adhatsz a szerző neve, dátum, kategória vagy tag elé; a témádtól és a megjelenített információktól függően.

Mivel már beállítottad a Dashicons-t a témádban, most már csak annyit kell tenned, hogy megnyitod a style.css fájlt (vagy használhatod a Custom CSS szerkesztőt, ami mindig jobb megoldás, így nem veszíted el a változtatásokat, ha a témád frissül!), megkeresed a megfelelő szelektorokat és hozzáadod a CSS kódot.

Tegyük fel, hogy egy ikont szeretne a neve vagy a szerző neve elé helyezni.

1. lépés:

Először is kiválasztunk egy ikont, amit szeretnénk.

2. lépés:

Ezután kattints rá, és ezúttal válaszd a CSS másolása lehetőséget. Ismét egy felugró ablakot kapsz a beillesztendő kóddal.

3. lépés:

Most nyisd meg a style.css-t, és keresd meg a megfelelő szelektort, ebben az esetben - .entry-author. A :before hozzáadásával, majd a Dashicons weboldalról másolt CSS kód beillesztésével a szerző neve elé egy szép ikon kerül. Azt is meg kell adnod, hogy a Dashicons betűtípust használod. A módosított kód így néz ki:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Adjunk hozzá egy kis stilizálást is, és a kész kód így néz ki:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

A végeredmény

Hogy fog ez végül kinézni?

Valahogy így:

A Dashicons sokféleképpen felhasználható - engedje szabadjára a kreativitását, és nézze meg, mit tehet.

Összeállítjuk az egészet

A fenti példákon kívül használhatod a Dashicons-t a backendben, hogy különböző ikonokat adj meg a különböző poszttípusokhoz, vagy használhatod őket a posztok címeiben, widgetek címeiben, vagy ha egyéni landing page-et hozol létre, akkor megkülönböztetheted a webhely különböző oldalait.

Íme egy alapvető példa arra, hogy mire használhatod őket: