Estás leyendo la publicación: Cómo usar Dashicons en WordPress: una guía paso a paso
Le pasa a todo el mundo.
Encuentra un tema que le gusta, lo instala y pasa unos meses disfrutando del aspecto de su sitio. Pero luego, después de unos meses, el tema comienza a sentirse obsoleto. Un poco aburrido.
El único problema es que no quieres pasar un par de horas buscando algo nuevo. Si tan solo hubiera una manera de agregar un poco de sabor a su tema, un poco de brillo para que se destaque.
Antes de que se desespere, permítame mostrarle una manera fácil de darle vida a su tema sin demasiado esfuerzo y sin agregar imágenes innecesarias que podrían ralentizar su sitio.
Introduzca Dashicons. Dashicons son iconos de fuentes que se introdujeron en WordPress 3.8. Son esos íconos increíbles y geniales que ves cuando inicias sesión en tu tablero. ¿No sería genial si pudieras agregarlos a tu tema también?
Bueno, puedes y te voy a mostrar cómo.
¿Cómo puedes usar Dashicons en tu menú de navegación?
Comencemos con un ejemplo simple. Los Dashicons ya están incluidos en WordPress desde la versión 3.8, pero aún debe incluirlos para que se muestren correctamente en la parte frontal de su sitio; es decir, su tema.
Paso 1: Prepara tu tema Dashicons
Para hacer que su tema Dashicons esté listo, primero abra su archivo functions.php (que se encuentra en Apariencia>Editor; de manera predeterminada, abrirá el archivo CSS de su tema actual. Adelante, busque el archivo functions.php y haga clic en él para cargarlo en Editor.)
Paso 2: Poner en cola el script
Desplácese hasta el final y pegue estas líneas de código al final:
// Poner en cola el script de Dashicons add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ ); función load_dashicons_front_end() { wp_enqueue_style( ‘dashicons’ ); }
¡Está bien! Ahora su tema está listo para usar Dashicons.
Paso 3: agregar Dashicons a los elementos del menú
Agreguemos un Dashicon para su enlace de Inicio. Dirígete al sitio web de Dashicons y selecciona el icono que te guste.
Etapa 4:
Haga clic en el icono deseado (en este caso, seleccioné el icono de inicio) y luego haga clic en Copiar HTML. Te dará una ventana emergente con el código que necesitas.
Paso 5:
Regrese a su tablero de WordPress, haga clic en Apariencia> Menús y pegue el código justo donde dice Etiqueta de navegación.
Si aún desea que aparezca la palabra, escríbala después del corchete div de cierre.
Haga clic en guardar y cargue su página de inicio. Su enlace de inicio ahora debería mostrar un Dashicon agradable y nítido.
Puede hacer esto para todos los elementos del menú de navegación o solo para el hogar. Simplemente repita los pasos anteriores con los iconos correspondientes. Eso fue fácil, ¿verdad?
¿Cómo se usan los Dashicons en la publicación meta?
Puede ir un paso más allá y agregar Dashicons a la meta de su publicación, o en otras palabras, agregar Dashicons delante del nombre del autor, la fecha, la categoría o la etiqueta; dependiendo de su tema y la información que muestra.
Dado que ya puso en cola Dashicons en su tema, todo lo que tiene que hacer ahora es abrir su archivo style.css (o usar el editor CSS personalizado, que siempre es una mejor opción para no perder los cambios una vez que su tema se actualice), busque el selector correspondiente y agregue el código CSS.
Supongamos que desea agregar un icono delante de su nombre o el nombre de su autor.
Paso 1:
Primero vamos a elegir un ícono que nos gustaría.
Paso 2:
Luego haga clic en él, y esta vez seleccione Copiar CSS. Nuevamente, le dará una ventana emergente con el código que necesita pegar.
Paso 3:
Ahora abra su archivo style.css y busque el selector correspondiente, en este caso, .entry-author. Al agregar :before y luego pegar el código CSS que copió del sitio web de Dashicons, el nombre del autor tendrá un lindo ícono al frente. También debe especificar que está utilizando la fuente Dashicons. El código modificado se ve así:
.entry-author:before { font-family: “dashicons”; contenido: “\f110”; }
Agreguemos un poco de estilo también, y ahora el código completo se ve así:
.entry-author:before { font-family: “dashicons”; contenido: “\f110”; color: #f15123; pantalla: bloque en línea; -webkit-font-smoothing: suavizado; fuente: normal 20px/1; alineación vertical: superior; margen derecho: 5px; margen derecho: 0,5 rem; }
El final resulto
Entonces, ¿cómo será esto al final?
Algo como esto:
Hay tantas maneras en que puede usar Dashicons: deje que su creatividad se apodere y vea lo que puede hacer.
Poniendolo todo junto
Aparte de los ejemplos anteriores, puede usar Dashicons en su backend para especificar diferentes íconos para diferentes tipos de publicaciones, o puede usarlos en los títulos de sus publicaciones, títulos de widgets, o si está creando una página de destino personalizada, puede diferenciar entre diferentes páginas. de tu sitio
Aquí hay un ejemplo básico de lo que podrías usar para crear:
