Hufanyika kwa kila mtu.

Unapata mandhari unayopenda, unaisakinisha na kutumia miezi michache kufurahia mwonekano wa tovuti yako. Lakini basi, baada ya miezi michache, mandhari huanza kuhisi kuwa ya zamani. Inachosha kidogo.

Tatizo pekee ni kwamba, hutaki kutumia saa kadhaa kutafuta kitu kipya. Laiti kungekuwa na njia ya kuongeza kitoweo kidogo kwenye mada yako, mwaliko kidogo ili kuifanya ionekane.

Kabla hujainua mikono yako juu kwa kukata tamaa, wacha nikuonyeshe njia rahisi ya kutia viungo yako. mandhari bila juhudi nyingi, na bila kuongeza picha zisizo za lazima ambazo zinaweza kupunguza kasi ya tovuti yako.

Ingiza Dashicons. Dashikoni ni ikoni za fonti ambazo zilianzishwa katika WordPress 3.8. Ni zile aikoni za kupendeza na za kupendeza unazoona unapoingia kwenye dashibodi yako. Je, haingekuwa vyema ikiwa ungewaongeza kwenye mandhari yako pia?

Sawa, unaweza na nitakuonyesha jinsi gani.

Unawezaje kutumia Dashikoni kwenye yako. menyu ya kusogeza?

Hebu tuanze kwa mfano rahisi. Dashikoni tayari zimejumuishwa kwenye WordPress tangu toleo la 3.8 lakini bado unahitaji kuzijumuisha ili kuzifanya zionyeshwe vizuri kwenye sehemu ya mbele ya tovuti yako; yaani, mandhari yako.

Hatua ya 1: Fanya Dashikoni za mada yako kuwa tayari

Ili kufanya Dashikoni za mada yako kuwa tayari kwanza fungua faili yako ya function.php (inapatikana katika Mwonekano> ;Mhariri - kwa chaguo-msingi itafungua faili ya CSS ya mandhari yako ya sasa.function.php faili na ubofye juu yake ili kuipakia kwenye Kihariri.)

Hatua ya 2: Panga hati

Sogeza hadi chini na ubandike mistari hii. ya msimbo mwishoni:

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

Sawa! Sasa mandhari yako yako tayari kutumia Dashicons.

Hatua ya 3: Kuongeza Dashikoni kwenye vipengee vya menyu

Hebu tuongeze Dashicon kwa kiungo chako cha Mwanzo. Nenda kwenye tovuti ya Dashicons na uchague ikoni unayopenda.

Sasisho: Dashikoni zilipatikana kwenye GitHub.io, lakini zimepatikana kwenye WordPress.org.

Hatua ya 4:

Bofya aikoni inayotaka (katika kesi hii nilichagua ikoni ya nyumbani) kisha ubofye Nakili HTML. Itakupa kidirisha ibukizi chenye msimbo unaohitaji.

Hatua ya 5:

Rudi kwenye dashibodi yako ya WordPress, bofya Mwonekano > ; Menyu na ubandike msimbo pale inaposema Lebo ya Urambazaji.

Ikiwa bado ungependa neno lionekane, liandikishe baada ya kufunga mabano ya div.

Bofya kwenye mabano ya div. hifadhi na upakie ukurasa wako wa nyumbani. Kiungo chako cha nyumbani sasa kinapaswa kuonyesha Dashicon nzuri na safi.

Unaweza kufanya hivi kwa vitu vyote vya menyu ya kusogeza au kwa ajili ya nyumbani pekee. Rudia tu hatua zilizo hapo juu na ikoni zinazolingana. Hiyo ilikuwa rahisi sivyo?

Unatumiaje Dashikoni katika meta ya chapisho?

Unaweza kwenda hatua zaidi na kuongeza Dashikoni kwenye meta ya chapisho lako, au kwa maneno mengine ongeza Dashikoni mbele ya mwandishi. jina, tarehe, kategoria au lebo; kutegemeamandhari yako na taarifa inayoonyesha.

Kwa kuwa tayari umeweka Dashikoni kwenye mada yako, unachotakiwa kufanya sasa ni kufungua faili yako ya style.css (au tumia kihariri Maalum cha CSS ambacho ni chaguo bora kila wakati ili usipoteze mabadiliko mara tu mandhari yako yakisasishwa!), tafuta kiteuzi kinacholingana na uongeze msimbo wa CSS.

Tuseme unataka kuongeza aikoni mbele ya jina lako au jina la mwandishi wako.

Hatua ya 1:

Kwanza tutachagua aikoni tunayopenda.

Hatua ya 2:

Kisha ubofye juu yake, na wakati huu chagua Nakili CSS. Tena, itakupa kidirisha ibukizi chenye msimbo unaohitaji kubandika.

Hatua ya 3:

Sasa fungua style.css yako na kupata kichaguzi sambamba, katika kesi hii - .entry-mwandishi. Kwa kuongeza :before na kisha kubandika msimbo wa CSS ulionakili kutoka kwa tovuti ya Dashicons, jina la mwandishi litakuwa na ikoni nzuri mbele yake. Pia unahitaji kutaja kuwa unatumia fonti ya Dashicons. Nambari iliyorekebishwa inaonekana kama hii:

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

Wacha tuongeze mtindo kidogo pia, na sasa nambari iliyokamilika inaonekana kama hii:

.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; } 

Matokeo ya mwisho

Ili iweje hili litakuwaje mwishowe?

Kitu kama hiki:

Kuna njia nyingi sana unazoweza kutumia Dashikoni - acha ubunifu wako usimame na uone unachoweza kufanya.

Kuyaweka yote pamoja

Kando na mifano iliyo hapo juu, unaweza kutumia Dashikoni katika mazingira yako ya nyuma kubainisha tofauti.aikoni za aina tofauti za machapisho, au unaweza kuzitumia katika mada za machapisho yako, vichwa vya wijeti, au ikiwa unaunda ukurasa maalum wa kutua unaweza kutofautisha kati ya kurasa tofauti za tovuti yako.

Huu hapa ni mfano wa msingi wa nini unaweza kuzitumia kuunda: