Li passa a tothom.

Trobeu un tema que us agradi, l'instal·leu i passeu uns mesos gaudint de l'aspecte del vostre lloc. Però després, al cap d'uns mesos, el tema comença a sentir-se obsolet. Una mica avorrit.

L'únic problema és que no vols passar un parell d'hores buscant alguna cosa nova. Si només hi hagués una manera d'afegir una mica de condiment al vostre tema, una mica de toc per fer-lo destacar.

Abans d'aixecar les mans desesperada, deixeu-me que us ensenyarà una manera senzilla de donar-li un gust més. tema sense massa esforç i sense afegir imatges innecessàries que podrien alentir el vostre lloc.

Introduïu Dashicons. Els Dashicons són icones de tipus de lletra que es van introduir a WordPress 3.8. Són aquestes icones increïbles i genials que veus quan inicies sessió al tauler. No estaria bé si també els poguéssiu afegir al vostre tema?

Bé, podeu fer-ho i us mostraré com.

Com podeu utilitzar els Dashicons al vostre tema. menú de navegació?

Comencem per un exemple senzill. Els Dashicons ja s'inclouen a WordPress des de la versió 3.8, però encara els heu d'incloure per aconseguir que es mostrin correctament a la part frontal del vostre lloc; és a dir, el teu tema.

Pas 1: Prepara el teu tema Dashicons

Per preparar el teu tema Dashicons, primer obriu el fitxer functions.php (que es troba a Aparença> ;Editor: de manera predeterminada, obrirà el fitxer CSS del vostre tema actual. Continueu i cerqueufunctions.php i feu-hi clic per carregar-lo a l'Editor.)

Pas 2: poseu a la cua l'script

Desplaceu-vos fins a la part inferior i enganxeu aquestes línies del codi al final:

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

D'acord! Ara el vostre tema està llest per utilitzar Dashicons.

Pas 3: Afegeix Dashicons als elements del menú

Afegim un Dashicon per a l'enllaç d'inici. Dirigiu-vos al lloc web de Dashicons i seleccioneu la icona que us agradi.

Actualització: els Dashicons estaven disponibles originalment a GitHub.io, però des de llavors ja estan disponibles a WordPress.org.

Pas 4:

Feu clic a la icona desitjada (en aquest cas he seleccionat la icona d'inici) i després feu clic a Copia HTML. Us donarà una finestra emergent amb el codi que necessiteu.

Pas 5:

Torneu al vostre tauler de control de WordPress, feu clic a Aparença > ; Menús i enganxeu el codi just on diu Etiqueta de navegació.

Si encara voleu que aparegui la paraula, escriviu-la després del parèntesi de tancament del div.

Feu clic a deseu i carregueu la vostra pàgina d'inici. El vostre enllaç d'inici ara hauria de mostrar un Dashicon agradable i nítid.

Podeu fer-ho per a tots els elements del menú de navegació o només per a casa. Només heu de repetir els passos anteriors amb les icones coincidents. Va ser fàcil, oi?

Com s'utilitzen els Dashicons al meta de la publicació?

Podeu anar un pas més enllà i afegir Dashicons al meta de la vostra publicació o, en altres paraules, afegir Dashicons davant de l'autor. nom, data, categoria o etiqueta; depenent deel vostre tema i la informació que mostra.

Com que ja heu posat Dashicons en cua al vostre tema, ara només heu d'obrir el vostre fitxer style.css (o utilitzar l'editor CSS personalitzat, que sempre és una millor opció perquè no perdis els canvis un cop s'actualitzi el tema!), cerqueu el selector coincident i afegiu el codi CSS.

Diguem que voleu afegir una icona davant del vostre nom o del nom del vostre autor.

Pas 1:

Primer triarem una icona que ens agradaria.

Pas 2:

A continuació, feu-hi clic i aquesta vegada seleccioneu Copia CSS. De nou, us mostrarà una finestra emergent amb el codi que heu d'enganxar.

Pas 3:

Ara obriu el vostre style.css i busqueu el selector corresponent, en aquest cas – .entry-author. En afegir :before i després enganxar el codi CSS que heu copiat del lloc web de Dashicons, el nom de l'autor tindrà una bonica icona al davant. També heu d'especificar que esteu utilitzant el tipus de lletra Dashicons. El codi modificat té aquest aspecte:

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

Afegim també una mica d'estil, i ara el codi completat té aquest aspecte:

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

El resultat final

I què? Al final es veurà això?

Alguna cosa com això:

Hi ha tantes maneres d'utilitzar Dashicons: deixeu que la vostra creativitat s'apoderi i vegeu què podeu fer.

Ajuntar-ho tot

A part dels exemples anteriors, podeu utilitzar Dashicons al vostre backend per especificar diferentsicones per a diferents tipus de publicacions, o bé les podeu utilitzar als títols de les vostres publicacions, als títols dels widgets o, si esteu creant una pàgina de destinació personalitzada, podeu diferenciar les diferents pàgines del vostre lloc.

Aquí teniu un exemple bàsic del que podríeu utilitzar-los per crear: