Pasa a todos.

Atopa un tema que che gusta, instálao e pasas uns meses disfrutando do aspecto do teu sitio. Pero despois, despois duns meses, o tema comeza a sentirse obsoleto. Un pouco aburrido.

O único problema é que non queres pasar un par de horas buscando algo novo. Se houbese un xeito de engadirlle un pouco de picante ao teu tema, un pouco de brillo para que se destaque.

Antes de botar as mans en alto desesperado, déixame mostrarche un xeito sinxelo de condimentar o teu tema. tema sen demasiado esforzo e sen engadir imaxes innecesarias que poidan ralentizar o seu sitio.

Introduce Dashicons. Os dashicons son iconas de fontes que foron introducidas en WordPress 3.8. Son esas iconas incribles e xeniais que ves cando inicias sesión no teu panel. Non sería xenial se tamén os puideses engadir ao teu tema?

Ben, podes e vouche mostrar como.

Como podes usar Dashicons no teu tema. menú de navegación?

Comecemos por un exemplo sinxelo. Os Dashicons xa están incluídos en WordPress desde a versión 3.8 pero aínda debes incluílos para que se mostren correctamente na parte frontal do teu sitio; é dicir, o teu tema.

Paso 1: Prepara o teu tema Dashicons

Para preparar o teu tema Dashicons primeiro abra o ficheiro functions.php (que se atopa en Aparencia> ;Editor: de forma predeterminada abrirá o ficheiro CSS do teu tema actual. Continúa e buscafunctions.php e faga clic nel para cargalo no Editor.)

Paso 2: coloque o script en cola

Desprácese ata o final e pegue estas liñas de código ao final:

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

Está ben! Agora o teu tema está listo para usar Dashicons.

Paso 3: Engadir Dashicons aos elementos do menú

Engademos un Dashicon para a ligazón de inicio. Diríxete ao sitio web de Dashicons e selecciona a icona que che guste.

Actualización: os Dashicons estaban dispoñibles orixinalmente en GitHub.io, pero desde entón puxéronse dispoñibles en WordPress.org.

Paso 4:

Fai clic na icona desexada (neste caso seleccionei a icona de inicio) e despois fai clic en Copiar HTML. Mostrarache unha ventá emerxente co código que necesitas.

Paso 5:

Volve ao teu panel de WordPress, fai clic en Aparencia > ; Menús e pega o código xusto onde di Etiqueta de navegación.

Se aínda queres que apareza a palabra, escríbea despois do corchete do div de peche.

Fai clic en gardar e cargar a súa páxina de inicio. A ligazón da túa casa agora debería mostrar un Dashicon agradable e nítido.

Podes facelo para todos os elementos do menú de navegación ou só para a casa. Só tes que repetir os pasos anteriores coas iconas correspondentes. Foi doado, non?

Como usas Dashicons no meta da publicación?

Podes dar un paso máis e engadir Dashicons ao teu meta de publicación ou, noutras palabras, engadir Dashicons diante do autor. nome, data, categoría ou etiqueta; dependendo deo teu tema e a información que amosa.

Xa que xa colocaches Dashicons en cola no teu tema, agora só tes que abrir o teu ficheiro style.css (ou usar o editor CSS personalizado que sempre é unha mellor opción para non perdas os cambios unha vez que o teu tema se actualice!), busca o selector correspondente e engade o código CSS.

Digamos que queres engadir unha icona diante do teu nome ou do nome do teu autor.

Paso 1:

Primeiro imos escoller unha icona que nos gustaría.

Paso 2:

A continuación, fai clic nel e esta vez selecciona Copiar CSS. De novo, mostrarache unha ventá emerxente co código que debes pegar.

Paso 3:

Agora abre o teu style.css e atopa o selector correspondente, neste caso – .entry-author. Engadindo :before e despois pegando o código CSS que copiaches do sitio web de Dashicons, o nome do autor terá unha bonita icona diante del. Tamén debes especificar que estás a usar o tipo de letra Dashicons. O código modificado ten o seguinte aspecto:

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

Engadimos tamén un pouco de estilo, e agora o código completo ten o seguinte aspecto:

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

O resultado final

E que será así ao final?

Algo así:

Hai moitas formas de usar Dashicons: deixa que a túa creatividade se apodere e vexa o que podes facer.

Xuntar todo

Ademais dos exemplos anteriores, podes usar Dashicons no teu backend para especificar diferentesiconas para diferentes tipos de publicacións, ou podes usalas nos títulos das túas publicacións, títulos de widgets ou, se estás a crear unha páxina de destino personalizada, podes diferenciar entre as diferentes páxinas do teu sitio.

Aquí tes un exemplo básico do que podes usalos para crear: