Cómo añadir iconos para tipos de mensajes personalizados en WordPress

¿Alguna vez te has preguntado cómo puedes añadir iconos personalizados para tus tipos de mensajes personalizados en WordPress? Si es así, entonces estás en el lugar correcto. En este artículo, te mostraremos cómo añadir iconos para los tipos de mensajes personalizados en WordPress.

WordPress empezó a usar una fuente de iconos llamada Dashicons desde WordPress 3.8. Estos iconos de fuentes se ven muy bien en cualquier dispositivo o tamaño de pantalla. Bueno, puedes aprovechar estos iconos para asignar iconos personalizados a tus tipos de mensajes.

Video Tutorial

Suscribirse a AprenderWP

Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.

Adición de iconos de tipos de mensajes personalizados mediante un plugin

Lo primero que debe hacer es instalar y activar el plugin CPT Custom Icon. Después de la activación, simplemente vaya a Settings » CPT Custom Icon Settings donde verá sus tipos de mensajes personalizados en la lista. A continuación, haz clic en el botón «Seleccionar icono» junto a un tipo de mensaje personalizado y, a continuación, selecciona una fuente del menú.

Adición de iconos mediante el plugin de interfaz de usuario de tipo personalizado

Si es nuevo en el registro de un tipo de mensaje personalizado, le recomendamos que utilice el plugin de interfaz de usuario de tipo de mensaje personalizado para crear y administrar tipos y taxonomías de mensajes personalizados.

Añadir un icono a un tipo de mensaje personalizado creado con el plugin CPT UI es muy sencillo. Soporta Dashicons por defecto, así que primero tienes que visitar el sitio web de Dashicons y seleccionar el icono que quieres usar para tu tipo de mensaje.

Al hacer clic en un icono de la lista se mostrará una versión más grande del icono en la parte superior. Junto a él, verá la clase CSS del icono. Será algo así como dashicons-grupos, dashicons-calendario, dashicons-carro, etc. Necesita copiar la clase CSS y editar el tipo de mensaje personalizado que desea editar en la interfaz de usuario de CPT. Todo lo que tiene que hacer es hacer clic en el enlace Opciones avanzadas y desplazarse hacia abajo hasta la sección Icono de menú, luego pegar la clase CSS y guardar los cambios.

También puede crear un icono de imagen usted mismo y subirlo haciendo clic en Medios » Añadir nuevo . Después de la carga, haga clic en el enlace Editar y copie la URL del archivo de imagen. Ahora simplemente pegue esta URL en el campo del icono del menú en la configuración de la interfaz de usuario de CPT.

Adición manual de un icono a un tipo de mensaje personalizado

Si ha creado un tipo de mensaje personalizado colocando un código en el archivo plugin específico de su sitio o functions.php, puede añadir iconos de menú manualmente. Una vez más, simplemente visite el sitio web de Dashicons para seleccionar un icono y copiar la clase CSS. Después de esto, añádalo a su código postal personalizado de esta manera:

1$0027menu_icon$0027 => $0027dashicons-cart$0027,

También puede añadir la URL completa de un archivo de imagen que desee mostrar como icono, de esta manera:

1$0027menu_icon$0027 => $0027http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png$0027,

Aquí hay un fragmento de código completo que crea un tipo de mensaje personalizado llamado productos con un icono de menú:

123456789101112131414151617181920212223242526272829303132333435363738394041424344// Registrar Custom Post Typefunctioncustom_post_type() { $labels= array( $0027name$0027 => _x( `productos$0027, $0027Post Type General Name$0027, text_domain$0027), $0027singular_name$0027 => _x( `Producto$0027, `Post Type Singular Name$0027, `text_domain$0027), `menú_name$0027 => __( `Productos$0027, `texto_dominio$0027), `parental_item_colon$0027 => __($0027Elemento superior:texto_dominio$0027), `todos_los_artículos$0027 => __( `todos los artículos$0027, `texto_dominio$0027), `ver_artículo$0027 => __( `ver artículo$0027, `texto_dominio$0027),        add_new_item$0027 => __( $0027Add New Item$0027, $0027text_domain$0027), $0027add_new$0027 => __( $0027Add New$0027, $0027text_domain$0027), ` edit_item$0027 => __( $0027Edit Item$0027, text_domain$0027), $0027update_item$0027 => __( $0027Update Item$0027, $0027text_domain$0027), $0027search_items$0027 => __( ` Search Item$0027, `text_domain$0027), ` not_found$0027 => __( ` Not found$0027, $0027text_domain$0027), ` not_found_in_trash$0027 => __($0027Not found in Basura$0027, ` Not found_in_in_trash$0027, «Basura$0027, $0027text_domain$0027), );    args= array( `etiqueta$0027 => __( `productos$0027, `dominio_de_texto$0027), `descripción$0027 => __( `dominio_de_texto$0027, `texto$0027), `etiquetas$0027 => $etiquetas, `apoyos$0027 => array( ), `tapononomías$0027 => array( `categoría$0027, `e_e_etiqueta$0027), `jerarquía$0027 => falso, `público jerárquico$0027 => verazco, `demuestren$0027`crial$0027 => verdadero,        show_in_menu$0027 => true, ` show_in_nav_menus$0027 => true, ` show_in_admin_bar$0027 => true, ` menu_position$0027 => 5, ` menu_icon$0027 => ` dashicons-cart$0027,        can_export$0027 => true, ` has_archive$0027 => true, ` exclude_from_search$0027=> false, `public_queryable$0027 => true, ` capability_type$0027 => `page$0027, );    register_post_type( $0027Productos$0027, $args); } // Enganchar en la acción `init$0027 actionadd_action( $0027init$0027, ` custom_post_type$0027, 0 );

Esperamos que este artículo le haya ayudado a añadir iconos para sus tipos de mensajes personalizados en WordPress. También puedes ver cómo usar las fuentes de iconos en el editor de mensajes de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Google+.

Deja un comentario