Saltar al contenido

Cómo utilizar y mostrar Dashicons en WordPress

Cómo usar y mostrar Dashicons en WordPress

Una de las formas más sencillas de cambiar el aspecto de su sitio de WordPress es cambiando el tema. Sin embargo, buscar el tema adecuado puede llevar mucho tiempo, por lo que cambiarlo con frecuencia para actualizar su sitio no es la solución más eficaz.

Aquí es donde los Dashicons de WordPress pueden resultar útiles.

Los Dashicons son los íconos de fuentes oficiales de WordPress disponibles desde la versión 3.8. Son escalables, livianos y personalizables mediante CSS. Es por eso que puedes usar dashicons sin afectar la velocidad de carga de la página de tu sitio web.

En este artículo, le mostraremos cómo habilitar y usar el ícono de fuente Dashicons configurado en WordPress.

¿Que son los filtros y como usar add filter en WordPress

Cómo usar y mostrar Dashicons en WordPress

La biblioteca Dashicons está disponible de forma predeterminada en el panel de administración de WordPress. Sin embargo, debes habilitar Dashicons manualmente si deseas agregar íconos a tu tema.

En las siguientes secciones, le enseñaremos cómo utilizar la biblioteca Dashicons en WordPress.

Activar Dashicons en WordPress

El primer paso para habilitar Dashicons en WordPress es editar el archivo funciones.php de tu tema.

  1. Ir a Apariencia editor de archivos de temas en el área de administración de WordPress.
Leer  +30 de las mejores páginas con WordPress para inspirarte en 2024
Panel de control de WordPress
  1. Abre el archivo funciones.php.
Archivo Functions.php del tema de WordPress
  1. Agregue el siguiente fragmento de código al final del archivo funciones:
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); 
function load_dashicons_front_end() { 
wp_enqueue_style( 'dashicons' ); 
}
  1. Una vez hecho esto, seleccione Actualizar archivo. Ahora puede utilizar Dashicons en la interfaz de su sitio web de WordPress.

Consejo profesional

Asegúrese de agregar el código al tema de su hijo para evitar que futuras actualizaciones del tema reviertan los cambios.

Cómo encontrar códigos HTML y CSS de Dashicon

Después de habilitar Dashicons para la interfaz de su sitio web, puede agregar íconos a las publicaciones, la página de inicio o partes de su tema.

Siga los pasos a continuación para agregar Dashicons a los elementos del menú.

  1. Acceda a la biblioteca de íconos Dashicons en Recursos para desarrolladores de WordPress. Haga clic en el icono elegido, presione el enlace Copiar HTML y copie el código HTML de Dashicons en la ventana emergente.
Página de recursos para desarrolladores de WordPress
  1. Ir a Apariencia Menús en su panel de WordPress. Haga clic en el elemento del menú para expandir el menú desplegable y pegue el código HTML en el cuadro de texto. etiqueta de navegación antes del texto.
  2. Hacer clic Guardar menú. Siga estos pasos para otros elementos del menú que desee modificar.

Además del código CSS, Dashicons también proporciona el código HTML y el carácter de glifo para los íconos de fuente para acelerar el proceso de creación del sitio web. Utilice la función de filtro para encontrar un ícono de fuente específico y copie el código apropiado en cualquier lugar de su sitio de WordPress usando un editor de texto.

Por ejemplo, copie el código CSS para agregar un ícono de fuente al archivo. estilo.css. Puede utilizar un editor CSS personalizado para modificar su archivo CSS si no le gusta lo que ofrece el editor de archivos de temas.

Aquí hay algunas formas diferentes de usar Dashicons en WordPress:

  • En la portería titular, por ejemplo, de cara al título.
  • En la configuración del complemento.
  • Como parte del contenido de publicaciones y páginas.
  • Dentro o frente a un bloque de Gutenberg.
Leer  Cómo insertar una imagen en WordPress con los editores de bloques y clásico
1714728961 325 Los 20 mejores temas de WordPress para criptomonedas en 2024.webp

Creando íconos personalizados con Dashicons

El proyecto Dashicons dejó de aceptar solicitudes de íconos en 2020. Por lo tanto, la única forma de crear un ícono personalizado es modificarlo usando código CSS.

Aquí hay un fragmento de código de ejemplo para cambiar el tamaño y el color de Dashicons. ponlo en tu archivo estilo.css y asegúrese de que el selector CSS esté dirigido al elemento elegido para que este método funcione.

.dashicons { 
font-size: 50px; 
width: 50px; 
height: 50px; 
color: blue;
}

Agregue Dashicons a los tipos de publicaciones personalizadas de WordPress

Los tipos de publicaciones personalizadas de WordPress aparecen en el menú de control. Al igual que otros elementos del menú, un tipo de publicación personalizada tiene un ícono al lado. El único problema es que WordPress asigna el mismo icono que el predeterminado. Entradas.

Panel de control de WordPress

Agregar Dashicons a sus tipos de publicaciones personalizadas puede resolver este problema y hacer que su panel de administración sea más agradable. Si desarrolla complementos personalizados, puede asignar diferentes íconos para ayudar a retener la atención de los usuarios y mejorar la legibilidad.

Puede insertar manualmente un ícono de menú en su menú de tipo de publicación personalizado o hacerlo usando un complemento. Para este tutorial, le mostraremos cómo agregar Dashicons usando el complemento. UI de tipo de publicación personalizada:

  1. Instale y active el complemento.
Complemento de interfaz de usuario de tipo de publicación personalizado instalado en WordPress
  1. Abre la pestaña Agregar/editar tipos de entrada y seleccione el tipo de entrada personalizada que desea modificar en el menú desplegable. Si aún no has creado uno, hazlo a través de la pestaña Agregar nuevo tipo de contenido.
  2. Desplázate hacia abajo hasta ver la sección Icono de menú. Hacer clic Elige Dashicon y elige un ícono que se ajuste a tu tipo de publicación personalizada. Si ya tiene una imagen preparada, seleccione Elija la imagen del icono para importarlo desde su biblioteca multimedia.
Opción de elegir Dashicon en WordPress
  1. Hacer clic Guardar tipo de contenido para guardar los cambios. Si el proceso es exitoso, verá un mensaje de confirmación y el ícono debería aparecer junto al tipo de entrada personalizada.
Leer  ¿Qué es la caché de objetos en WordPress? Funcionamiento, tipos y activación

Eliminar Dashicons en WordPress

El tamaño del archivo Dashicons es aproximadamente 30 KB. Si bien no es enorme, desactivar Dashicons para que no se cargue automáticamente cuando no esté en uso puede mejorar la velocidad de carga de la página.

Agregue el siguiente fragmento de código al final del archivo funciones.php usando el editor de archivos de su tema. Los Dashicons se desactivarán en la parte frontal de su sitio web para los usuarios registrados.

function disable_dashicon() {
  if (current_user_can( 'update_core' )) {
      return;
  }
  wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'disable_dashicon' );

Conclusión

Los Dashicons son una característica útil que le ahorra la molestia de agregar imágenes innecesarias. Los íconos son livianos, fáciles de insertar y cuentan con soporte nativo de WordPress. Aunque no es para uso front-end, puedes solucionarlo habilitándolo manualmente desde el código fuente.

En esta publicación aprendiste cómo mostrar y deshabilitar Dashicons en WordPress. Esperamos haber respondido a sus preguntas sobre la popular biblioteca de íconos y cómo usarla correctamente.

Si tiene más preguntas, no dude en dejar un comentario a continuación.

Dashicons WordPress – Preguntas frecuentes

Consulte las siguientes preguntas comunes sobre los Dashicons de WordPress.

¿Cuáles son los mejores Dashicons para WordPress?

Algunos de los mejores Dashicons para WordPress son íconos página de inicio del administrador, herramientas de administración, usuarios administradores, publicación de administrador, medios administrativos, menús de widgets de bienvenida Es formatear imagen. Estos íconos se usan comúnmente para diferentes funciones en el panel de WordPress y pueden ayudar a mejorar la experiencia del usuario.

¿Necesito Dashicons en WordPress?

No, no necesitas usar Dashicons en WordPress. Los Dashicons son ideales para mejorar el diseño visual y el estilo de su panel de WordPress y no afectan la funcionalidad de su sitio web. Sin embargo, eliminar Dashicons puede afectar la apariencia de algunos complementos o temas que dependen de ellos.

¿Cómo agrego Dashicons personalizados a WordPress?

Para agregar Dashicons personalizados a WordPress, use la regla Tipo de letra en su CSS e incluya el archivo de fuente Dashicons personalizado. Luego use la propiedad de contenido para mostrar el ícono personalizado, usando un pseudoelemento Antes o después.

¿Qué tamaño tienen los Dashicons en WordPress?

El tamaño de los Dashicons en WordPress, por defecto, es 20 píxeles por 20 píxeles. Sin embargo, esto se puede ajustar usando CSS para cambiar la propiedad del tamaño de fuente o usando un archivo de fuente personalizado con diferentes dimensiones.

Compartir

Deja una respuesta