How to Use Dashicons in WordPress

Cómo usar Dashicons en WordPress

Los Dashicons son un conjunto de iconos de fuentes integrados en WordPress que se introdujeron en WordPress 3.8 durante la revisión masiva de la interfaz de usuario del backend y se utilizan de forma predeterminada para los diversos enlaces en la barra de administración izquierda. Estos íconos, aunque fueron creados para el kernel, se pueden usar en sus propios complementos y temas personalizados, no solo al definir tipos de publicaciones personalizadas o crear paneles de administración personalizados, sino también en el diseño de temas de front-end si lo desea. Mejor aún, ¡es muy simple!

Uso de Dashicons para tipos de publicaciones personalizadas

Cuando guarda un nuevo tipo de publicación personalizada en WordPress, todo lo que necesita hacer es configurar el menu_icon argumento igual al nombre de la clase CSS del Dashicon que desea utilizar y este icono se establecerá como el icono que se muestra en el lado izquierdo de su nombre de tipo de publicación personalizada en el panel de administración de WordPress. Solo visita el Página de inicio de Dashicons y haga clic en cualquier icono que desee utilizar y verá el nombre de la clase en la parte superior junto al icono para que pueda copiarlo y pegarlo.

Ejemplo:

// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
	'public' => true,
	'menu_icon' => 'dashicons-portfolio',
	'label' => __( 'Portfolio', 'local' ),
);

Captura de pantalla:

A continuación se muestra una captura de pantalla que muestra cómo se vería el ícono Dashicon para el tipo de publicación de la cartera. No sé si recuerdas esto, pero antes de Dashicons tenías que configurar una URL de imagen personalizada para tu ícono de tipo de publicación y cuando usabas muchos complementos en el sitio, los íconos a menudo no coincidían y el administrador se veía bastante mal. Ahora los íconos de tipo de publicación coinciden con la interfaz de usuario de WP predeterminada y se ven bien.

wordpress-dashicons-captura de pantalla

Uso de Dashicons en el diseño de temas de front-end

Hoy en día, muchos temas usan íconos para el front-end para cosas como meta de publicación (fecha, categoría, etiqueta, autor), así como íconos de encabezado como íconos de usuario, búsqueda y tienda. Si bien el ícono de fuente más utilizado y popular es FontAwesome y funciona muy bien para la mayoría de los proyectos, también es un conjunto de iconos realmente grande con muchos iconos que probablemente nunca usarías; puede utilizar un sitio web generador de fuentes como Fontello para crear una hoja de estilo que contenga solo los iconos que necesita, pero otra alternativa es usar Dashicons que ya está incluido en su instalación de WordPress, todo lo que tiene que hacer es cargar los scripts en la interfaz.

Simplemente agregue lo siguiente a functions.php de su tema para cargar Dashicons en el front-end (insértelo a través de un tema secundario si está personalizando un tema existente y no creando el suyo propio).

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'dashicons' );
} );

Ahora puede insertar un icono a través de HTML como tal:

<span class="dashicons dashicons-menu"></span>

Cambio simple donde dice “menú” al icono que desea utilizar. Este HTML se puede pegar en cualquier lugar del tema donde desee que aparezca un icono. Incluso puede insertar el código HTML en los elementos de su menú pegando el código HTML directamente en el campo “etiqueta” de su elemento de menú.

Cómo crear un shortcode de Dashicons

Otra solución para usar Dashicons en la interfaz sería crear un código corto que pueda usar en cualquier lugar del sitio. Esta es una buena opción si está creando un sitio para un cliente y desea facilitarle la colocación de iconos en el sitio para que no tengan que preocuparse por HTML. Aquí hay un ejemplo de cómo se vería este código, simplemente agregue el código a su archivo functions.php (u otro archivo que no sea de plantilla cargado por functions.php)

add_shortcode( 'dashicon', function( $atts ) {
	$atts = shortcode_atts( array(
		'icon' => 'menu',
	), $atts, 'bartag' );
	if ( ! empty( $atts[ 'icon' ] ) ) {
		return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
	}
} );

Usando el shortcode:

[dashicon icon="chart-pie"]

Notar: El código abreviado anterior asume que ya siguió el paso anterior y cargó la hoja de estilo de Dashicons en su interfaz. Si no lo ha hecho, puede agregar la función “wp_enqueue_style” del fragmento anterior a la derecha en el código corto y la hoja de estilo solo se cargará cuando se use un icono. Sin embargo, se recomienda cargar la secuencia de comandos globalmente, de lo contrario, la hoja de estilo de los iconos se cargará en el pie de página de su sitio para que los iconos aparezcan después de renderizar su sitio y provoquen un ligero “parpadeo”.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba