Denontzat gertatzen da.

Gustuko duzun gai bat aurkitzen duzu, instalatu eta hilabete batzuk ematen dituzu zure webgunearen itxuraz gozatzen. Baina gero, hilabete batzuk igaro ondoren, gaia zaharkituta hasten da. Aspergarri samarra.

Arazo bakarra zera da, ez duzula ordu pare bat eman nahi zerbait berriaren bila. Zure gaiari piki apur bat gehitzeko modurik balego, nabarmentzeko apur bat.

Eskuak etsipenez altxatu baino lehen, utz iezadazu erakusteko modu erraz bat. gaia esfortzu handiegirik gabe eta zure webgunea moteldu dezaketen alferrikako irudiak gehitu gabe.

Sartu Dashicons. Dashicons WordPress 3.8-n sartu ziren letra-tipo-ikonoak dira. Zure aginte-panelean saioa hasten duzunean ikusten dituzun ikono ikaragarri eta fresko horiek dira. Ez al litzateke polita izango zure gaiari ere gehituko bazenitu?

Beno, egin dezakezu eta nola erakutsiko dizut.

Nola erabil ditzakezu Dashicons zure nabigazio menua?

Has gaitezen adibide sinple batekin. Dashicons dagoeneko sartuta daude WordPress-en 3.8 bertsiotik, baina hala ere sartu behar dituzu zure webgunearen aurrealdean behar bezala bistaratzeko; hau da, zure gaia.

1. urratsa: Prestatu zure gaia Dashicons

Zure gaia Dashicons prest egon dadin lehenik ireki zure functions.php fitxategia (Itxura&gt-en dago ;Editor - modu lehenetsian zure uneko gaiaren CSS fitxategia irekiko du. Aurrera eta bilatufunctions.php fitxategia eta egin klik gainean Editorean kargatzeko.)

2. urratsa: Jarri script-a ilaran

Joan behealdera eta itsatsi lerro hauek kodearen amaieran:

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

Ondo da! Orain zure gaia prest dago Dashicons erabiltzeko.

3. urratsa: Dashicons gehitzea menuko elementuetan

Gehitu dezagun Dashicon bat zure Home estekarako. Joan Dashicons webgunera eta hautatu nahi duzun ikonoa.

Eguneratzea: Dashicons hasiera batean GitHub.io-n zeuden eskuragarri, baina ordutik WordPress.org-en egon dira eskuragarri.

4. urratsa:

Egin klik nahi duzun ikonoan (kasu honetan hasierako ikonoa hautatu dut) eta gero egin klik Kopiatu HTML aukeran. Pop-up leiho bat emango dizu behar duzun kodearekin.

5. urratsa:

Itzuli zure WordPress panelera, egin klik Itxura &gt. ; Menuak eta itsatsi kodea Nabigazio-etiketa dioen tokian.

Hala ere, hitza agertzea nahi baduzu, idatzi div-ko itxieraren ondoren.

Egin klik gainean. gorde eta kargatu zure hasierako orria. Zure etxeko estekak Dashicon polit eta kurruskaria erakutsi beharko luke orain.

Nabigazio menuko elementu guztietarako edo etxerako soilik egin dezakezu hori. Errepikatu goiko urratsak bat datozen ikonoekin. Erraza izan zen, ezta?

Nola erabiltzen dituzu Dashicons argitalpenaren meta-an?

Urrats bat harago joan eta Dashicons gehi dezakezu zure argitalpenaren metara, edo bestela esanda, Dashicons gehitu egilearen aurrean. izena, data, kategoria edo etiketa; araberazure gaia eta bistaratzen duen informazioa.

Dagoeneko Dashicons ilaran jarri duzunez zure gaian, orain egin behar duzun guztia zure style.css fitxategia irekitzea da (edo erabili CSS editore pertsonalizatua, hau da, beti aukera hobea dezazun). ez galdu aldaketak gaia eguneratzen denean!), bilatu bat datorren hautatzailea eta gehitu CSS kodea.

Demagun zure izenaren edo egilearen izenaren aurrean ikono bat gehitu nahi duzula.

1. urratsa:

Lehenik eta behin nahi dugun ikono bat aukeratuko dugu.

2. urratsa:

Ondoren, egin klik gainean, eta oraingoan hautatu Kopiatu CSS. Berriz ere, leiho ireki bat emango dizu itsatsi behar duzun kodearekin.

3. urratsa:

Orain ireki zure style.css eta aurkitu dagokion hautatzailea, kasu honetan – .sarrera-egilea. Gehituz : aurretik eta gero Dashicons webgunetik kopiatu duzun CSS kodea itsatsiz, egilearen izenak ikono polit bat izango du aurrean. Dashicons letra-tipoa erabiltzen ari zarela ere zehaztu behar duzu. Aldatutako kodea honelakoa da:

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

Egin dezagun estilo pixka bat ere, eta orain osaturiko kodea honelakoa izango da:

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

Azken emaitza

Beraz, zer Azkenean itxura izango du honek?

Horrelako zerbait:

Dashicons erabiltzeko modu asko daude: utzi zure sormena indartzen eta ikusi zer egin dezakezun.

Dena bateratzea

Goiko adibideez gain, zure backend-ean Dashicons erabil dezakezu desberdinak zehazteko.argitalpen mota desberdinetarako ikonoak, edo mezuen izenburuetan, widgeten izenburuetan erabil ditzakezu edo helmuga-orri pertsonalizatu bat sortzen ari bazara, zure guneko orrialde desberdinak bereiz ditzakezu.

Hona hemen zerren oinarrizko adibide bat. hauek sortzeko erabil ditzakezu: