Cómo agregar iconos para tipos de publicaciones personalizadas en WordPress

 ¿Alguna vez se preguntó cómo podría agregar iconos personalizados para sus tipos de publicaciones personalizadas en WordPress? Si es así, entonces estás en el lugar correcto. En este artículo, le mostraremos cómo agregar íconos para tipos de publicaciones personalizadas en WordPress.

WordPress comenzó a usar una fuente de iconos llamada Dashicons desde WordPress 3.8 . Estos iconos de fuentes se ven geniales en cualquier dispositivo o tamaño de pantalla. Bueno, puedes aprovechar estos íconos para asignar íconos personalizados a tus tipos de publicaciones.

Video tutorial

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Agregar íconos de tipo de publicación personalizados usando un complemento

Lo primero que debe hacer es instalar y activar el complemento CPT Custom Icon . Tras la activación, simplemente vaya a Configuración »Configuración de iconos personalizados de CPT donde verá sus tipos de publicaciones personalizadas en la lista. A continuación, haga clic en el botón 'Elegir icono' junto a un tipo de publicación personalizada y luego seleccione una fuente del menú.

Elegir una fuente para su tipo de publicación personalizada usando un complemento

Agregar iconos usando el complemento de interfaz de usuario de tipo de publicación personalizada

Si es nuevo en el registro de un tipo de publicación personalizada, le recomendamos que utilice el complemento de IU de tipo de publicación personalizada para crear y administrar taxonomías y tipos de publicación personalizados .

Agregar un ícono a un tipo de publicación personalizada creado con el complemento CPT UI es muy simple. Es compatible con Dashicons de forma predeterminada, por lo que primero debe visitar el sitio web de Dashicons y seleccionar el icono que desea usar para su tipo de publicación.

Copiar una clase de icono del sitio web de Dashicons

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-groups, dashicons-calendar, dashicons-cart, etc. Necesita copiar la clase CSS y editar el tipo de publicación personalizada que desea editar en la interfaz de usuario de CPT. Todo lo que necesita 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.

Agregar el icono de fuente en el complemento de interfaz de usuario de tipo de publicación personalizada

También puede crear un icono de imagen usted mismo y cargarlo haciendo clic en Medios »Agregar 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 de menú en la configuración de la interfaz de usuario de CPT.

Agregar manualmente un icono a un tipo de publicación personalizada

Si creó un tipo de publicación personalizada colocando un código en el complemento específico de su sitio o en el archivo functions.php, puede agregar íconos 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, agréguelo a su código de tipo de publicación personalizada como este:

1
'menu_icon'           => 'dashicons-cart',

También puede agregar la URL completa de un archivo de imagen que desea mostrar como icono, como este:

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

Aquí hay un fragmento de código completo que crea un tipo de publicación personalizada llamado productos con un ícono de menú:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Register Custom Post Type
function custom_post_type() {
 
    $labels = array(
        'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
        'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
        'menu_name'           => __( 'Products', 'text_domain' ),
        'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
        'all_items'           => __( 'All Items', 'text_domain' ),
        'view_item'           => __( 'View Item', 'text_domain' ),
        'add_new_item'        => __( 'Add New Item', 'text_domain' ),
        'add_new'             => __( 'Add New', 'text_domain' ),
        'edit_item'           => __( 'Edit Item', 'text_domain' ),
        'update_item'         => __( 'Update Item', 'text_domain' ),
        'search_items'        => __( 'Search Item', 'text_domain' ),
        'not_found'           => __( 'Not found', 'text_domain' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
    );
    $args = array(
        'label'               => __( 'Products', 'text_domain' ),
        'description'         => __( 'Post Type Description', 'text_domain' ),
        'labels'              => $labels,
        'supports'            => array( ),
        'taxonomies'          => array( 'category', 'post_tag' ),
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'menu_icon'           => 'dashicons-cart',
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'page',
    );
    register_post_type( 'Products', $args );
 
}
 
// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

Esperamos que este artículo te haya ayudado a agregar iconos para tus tipos de publicaciones personalizadas en WordPress. Es posible que también desee ver cómo usar las fuentes de iconos en el editor de publicaciones de WordPress .