Cómo hacer un Sitio Web o Blog en 2024 - Guía fácil y Gratuita para Crear un Sitio Web

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 rancio. Un poco aburrido.

El único problema es que no quieres pasar un par de horas buscando algo nuevo. Si solo hubiera una manera de agregar un poco de sabor a su tema, una pequeña llamarada para que se destaque.

Antes de levantar las manos en la desesperación, permíteme mostrarte una manera fácil de darle vida a tu tema sin demasiado esfuerzo y sin agregar imágenes innecesarias que podrían ralentizar tu sitio.

Entra Dashicons. Los Dashicons son iconos de fuentes que se introdujeron en WordPress 3.8. Son esos iconos 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 por un simple ejemplo. 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, tu tema.

Paso 1: Prepara tu tema Dashicons

Para preparar su tema Dashicons, primero abra su archivo functions.php (que se encuentra en Apariencia> Editor; de manera predeterminada, abrirá el archivo CSS de su tema actual. Continúe y busque el archivo functions.php y haga clic en él para cargarlo en Editor.)

🔥 Leer:  Cómo compartir carpetas de iCloud Drive desde iPhone y iPad

Paso 2: ponga en cola el guión

Desplácese hasta el final y pegue estas líneas de código al final:

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

¡Todo 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 ícono que te gusta.

Paso 4:

Haga clic en el icono deseado (en este caso seleccioné el icono de inicio) y luego haga clic en Copiar HTML. Le dará una ventana emergente con el código que necesita.

Paso 5:

Vuelva a su panel de WordPress, haga clic en Apariencia> Menús y pegue el código justo donde dice Etiqueta de navegación.

usando dashicons en la navegación

Si aún desea que aparezca la palabra, escríbala después del corchete div de cierre.

agregando dashicons al menú con word

Haga clic en guardar y cargue su página de inicio. Su enlace de inicio ahora debería mostrar un Dashicon bonito 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 usas Dashicons en post meta?

Puedes ir un paso más allá y agregar Dashicons a la meta de tu publicación, o en otras palabras, agregar Dashicons delante del nombre, fecha, categoría o etiqueta del autor; 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 que no pierda los cambios una vez que se actualice su tema). el selector correspondiente y agregue el código CSS.

🔥 Leer:  Cómo atrapar a Atlas Moth en Animal Crossing New Horizons

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.

agregando dashicons con css

Paso 3:

Ahora abra su style.css y busque el selector correspondiente, en este caso: .entry-author. Al agregar: antes de pegar el código CSS que copió del sitio web de Dashicons, el nombre del autor tendrá un bonito ícono delante. También debe especificar que está utilizando la fuente Dashicons. El código modificado se ve así:

.entry-author:before {

font-family: "dashicons";

content: "f110";
}

Agreguemos también un poco de estilo, y ahora el código completo se ve así:

.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 final resulto

Entonces, ¿cómo será esto al final?

Algo como esto:

ejemplo de navegación

Hay muchas maneras de usar Dashicons: deje que su creatividad se apodere y vea lo que puede hacer.

Poniendolo todo junto

Además de los ejemplos anteriores, puede usar Dashicons en su back-end para especificar diferentes íconos para diferentes tipos de publicaciones, o puede usarlos en sus títulos de publicaciones, títulos de widgets, o si está creando una página de destino personalizada, puede diferenciar entre diferentes páginas de tu sitio.

Un gran ejemplo de esto es la antigua página de inicio de WP Superstars. Aquí puede ver los Dashicons en uso para diferentes áreas del sitio web:

página de inicio "class =" wp-image-2188 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/04/1587560712_184_Como-usar-Dashicons-en-WordPress-una-guia-paso-a-paso.jpg 550w, https: // www .wpsuperstars.net / wp-content / uploads / 2014/10 / dashicons-in-use-homepage-300x94.jpg 300w, https://www.wpsuperstars.net/wp-content/uploads/2014/10/dashicons- in-use-homepage-320x101.jpg 320w "tamaños =" (ancho máximo: 550px) 100vw, 550px "></figure>
<p>Pero los Dashicons no son el único tipo de fuentes de iconos que puede agregar. Consulte nuestro tutorial de FontAwesome Icons para obtener más información.</p>
<div class=