Cómo usar Dashicons en WordPress

WordPress iconos shortcodes

Cómo cambiar los iconos de administración de WordPressUna de mis cosas favoritas sobre el tema de administración con WordPress es la nueva fuente de iconos Dashicons. Aporta una sensación de estándar y uniformidad a los iconos del panel de control con su aspecto distintivo y una amplia gama de iconos para que los autores de temas y plugins puedan elegir y utilizar con facilidad.

Sin embargo, parece que no todos los autores de temas y plugins se han subido al carro de Dashicons. Insisten en utilizar sus propios iconos de imagen personalizados que no encajan en absoluto con el nuevo diseño. Esto incluye cosas como iconos de colores que no se adaptan a los diferentes esquemas de color incluidos con WordPress. Otros autores no establecen un icono para su menú o tipo de entrada, lo que resulta en muchos de esos mismos iconos de entrada con tachuelas o iconos de engranaje genéricos. Esto conduce a un tablero de instrumentos desordenado, que no me gusta.

Dashicons es la fuente de iconos utilizada oficialmente en WordPress admin. Lo bueno de esto es que se puede añadir algunas señales visuales en su sitio web sin hincharlo. Visuales como las imágenes aumentan los tiempos de carga y no escalan bien, mientras que SVGs requieren que usted lea un poco para poner realmente a utilizar Hoy vamos a mostrar cómo usted puede conseguir estos iconos de fuentes instaladas en su proyecto de WordPress.

¿Cómo añado un Dashicon en WordPress?

Para añadir Dashicons ve a la página oficial de Dashicons y haz clic en el icono que quieras utilizar. A continuación, haz clic en el enlace “Copiar HTML” situado en la parte superior de la página y copia el código HTML del icono que quieras utilizar.

  Cómo optimizar la página de finalizar compra para no perder ventas

¿Cómo puedo cambiar el dashicon en WordPress?

Visita el sitio web de Dashicons y elige el icono que quieras. Selecciónalo y haz clic en “Copiar CSS” para copiar el código necesario para utilizar ese icono en CSS. Lo siguiente es obtener el ID de ese menú. Para ello, utiliza la herramienta Inspeccionar elemento de tu navegador.

¿Cómo añado un dashicon a un tipo de entrada personalizado?

Puede asignar uno de ellos a su tipo de entrada personalizado copiando y pegando el nombre de la clase Dashicon en el campo de CPT UI denominado Menu Icon. Puede encontrar el nombre de la clase dashicon a la derecha del icono en WordPress.org. Ejemplos de Dashicons: dashicons-admin-site.

No se muestran los dashicons de WordPress

Introduzca Dashicons. Los dashicons son iconos de fuentes que se introdujeron en WordPress 3.8. Son esos increíbles y geniales iconos que ves cuando entras en tu panel de control. ¿No sería genial si pudieras añadirlos a tu tema también?

Empecemos con un ejemplo sencillo. Los Dashicons ya están incluidos en WordPress desde la versión 3.8 pero aún necesitas incluirlos para que se muestren correctamente en el front-end de tu sitio; es decir, en tu tema.

Para hacer que su tema Dashicons listo primero abra su archivo functions.php (que se encuentra en Apariencia>Editor – por defecto se abrirá el archivo CSS de su tema actual. Sigue adelante y busca el archivo functions.php y haz clic en él para cargarlo en el Editor).

Puedes ir un paso más allá y añadir Dashicons a tu meta post, o en otras palabras añadir Dashicons delante del nombre del autor, fecha, categoría o etiqueta; dependiendo de tu tema y la información que muestra.

Dado que ya has añadido Dashicons a tu tema, todo lo que tienes que hacer ahora es abrir tu archivo style.css (o utilizar el editor CSS personalizado, que siempre es una mejor opción para no perder los cambios una vez que tu tema se actualice), encontrar el selector correspondiente y añadir el código CSS.

  Plantilla en Español – Felicidad 1-0

Familia tipográfica dashicons

Junto con el renovado WP-Admin, WordPress 3.8 también trajo un conjunto de nuevos iconos llamados Dashicons. Dashicons es un icono de fuente diseñado por Mel Choyce que fue creado principalmente para adaptarse a la nueva interfaz de usuario de WP-Admin, desde el editor de pantalla de contenido hasta el menú de administración, como se puede ver en la captura de pantalla a continuación.

Como WordPress lo utiliza ahora para ofrecer iconos en WP-Admin, también deberías utilizarlo en tus temas y plugins. Mediante el uso de un conjunto de iconos de fuente, como Dashicons, puede personalizar fácilmente la salida a través de CSS. Si usted es un desarrollador que desea actualizar sus plugins o temas, de acuerdo con el último diseño de WordPress, así como el uso de sus nuevas propiedades, este artículo es definitivamente para usted.

Asumiendo que incorporas Custom Post Type en tu tema o plugin, puedes usar Dashicons de la siguiente manera. Custom Post Type utiliza menu_icon para mostrar el icono. Antes de WordPress 3.8, puedes añadir la ruta de tu icono de imagen en él. En la versión 3.8, este parámetro también se puede utilizar para declarar el icono de Dashicons.

Dashicons wordpress

Dashicons se introdujo por primera vez en la versión 3.8 de WordPress. Son esos increíbles y geniales iconos que ves cuando entras en tu panel de control. Por defecto, el archivo CSS de Dashicons sólo se carga en el back-end de WordPress. Así que se necesita un poco de código para utilizar Dashicons en sus entradas y páginas front-end.

Dashicons es una fuente de iconos como FontAwesome que viene incluida con cada instalación de WordPress. En primer lugar, se introdujo en la versión 3.8 de WordPress. Es ligera e incluye suficientes iconos para que la mayoría de los usuarios puedan usarla en el sitio web para diseñarlo. Así que podrías evitar instalar un conjunto de iconos de terceros que podría afectar al rendimiento de tu sitio.

  Heartbleed el mayor fallo de seguridad de la historia de Internet: qué es y qué hacer para asegurar WordPress

Como te dije al principio por defecto solo se ejecuta en el backend de WordPress así que primero necesitas habilitar Dashicon para usarlo en el frontend de tu sitio web aquí están los pasos para usar Dashicons en WordPress.

Para utilizar Dashicons primero tienes que hacer tu tema listo para Dashicons. Para ello sólo tiene que añadir el siguiente código en su archivo functions.php. Si usted no sabe cómo agregar el código en el archivo function.php a continuación, sólo tienes que seguir los siguientes pasos.