Cómo agregar iconos para tipos de publicación personalizados en WordPress

Por defecto, los tipos de publicación personalizados se ven todos iguales, lo que puede ser confuso. Los iconos únicos pueden ayudarte a identificar rápidamente diferentes tipos de contenido.

Además, conseguir los iconos adecuados para tus tipos de publicación personalizados puede marcar una gran diferencia en la navegación de tu panel de administración de WordPress. Cuando inicies sesión, verás entradas para publicaciones, páginas y tipos de publicación personalizados en la barra lateral.

En este artículo, te explicaremos cómo añadir iconos diferentes para tus tipos de publicación personalizados.

¿Por qué añadir iconos para tipos de publicación personalizados en WordPress?

Normalmente usas una publicación o una página cuando trabajas con tu sitio web de WordPress. Sin embargo, puedes crear otros tipos de contenido utilizando tipos de publicación personalizados.

Por ejemplo, WooCommerce utiliza un tipo de publicación personalizado llamado 'Producto' para almacenar tu tienda.

Los tipos de publicación personalizados se enumeran en el área de administración de WordPress junto con las publicaciones y páginas en el menú de la izquierda. Cada elemento del menú en WordPress tiene un icono a su lado, que proviene de una fuente de iconos llamada Dashicons.

El problema es que todos los tipos de publicación personalizados usarán el mismo icono que las publicaciones. Por lo tanto, si tienes varios tipos de publicación personalizados, será más fácil encontrar el correcto si todos tienen iconos diferentes.

Con esto en mente, te mostraremos cómo añadir iconos para tipos de publicación personalizados en WordPress. Esto es lo que cubriremos en este tutorial:

• Añadir iconos para tipos de publicación personalizados con un plugin
• Agregar iconos para tipos de publicación personalizados manualmente

¿Listo? Empecemos.

Añadir iconos para tipos de publicación personalizados con un plugin

Si eres nuevo registrando tipos de publicación personalizados o no estás familiarizado con el código, te recomendamos usar el plugin Custom Post Type UI para crear tipos de publicación y taxonomías.

Crear un tipo de publicación personalizado con un plugin

Primero, necesitarás crear un tipo de publicación personalizado. Si ya lo has hecho, puedes saltar a la sección 'Agregar un icono a un tipo de publicación personalizado con un plugin' más abajo.

Una vez que instales y actives el plugin, navega a CPT UI » Agregar/Editar Tipos de Publicación para crear un nuevo tipo de publicación personalizado. Luego, asegúrate de estar en la pestaña 'Agregar Nuevo Tipo de Publicación'.

Luego, deberás proporcionar un slug para tu tipo de publicación personalizado, como 'películas'. Debajo, ingresas los nombres plural y singular, como 'libros' y 'libro'.

Después de eso, querrás hacer clic en el enlace que dice 'Rellenar etiquetas adicionales basadas en las etiquetas elegidas'. Esto completará automáticamente los campos de etiquetas adicionales a continuación y generalmente te ahorrará tiempo.

Alternativamente, puedes agregar manualmente las etiquetas a la sección 'Etiquetas adicionales'.

A continuación, desplazaremos hacia abajo hasta la sección 'Configuración' y configuraremos diferentes atributos para tu tipo de publicación. Cada opción tiene una breve descripción que explica su función.

Por ejemplo, puedes elegir cómo ordenar el tipo de publicación y si hacerlo jerárquico.

Debajo de la configuración general, verás opciones para seleccionar qué funciones de edición admitirá este tipo de publicación. Simplemente marca las opciones que deseas incluir.

Finalmente, haz clic en el botón 'Agregar Tipo de Publicación' para guardar y crear tu tipo de publicación personalizado.

Para obtener instrucciones más detalladas sobre cómo crear un tipo de publicación personalizado usando Custom Post Type UI, es posible que desees ver el primer método en nuestra guía sobre cómo crear un tipo de publicación personalizado en WordPress.

Añadir un icono a un tipo de publicación personalizado con un plugin

Una vez que hayas creado tu tipo de publicación personalizado, es hora de elegir un icono. Este paso es fácil porque el plugin Custom Post Type UI soporta Dashicons por defecto.

Primero, deberás ir a CPT UI » Añadir/Editar Tipos de Publicación y hacer clic en la pestaña ‘Editar Tipos de Publicación’ en la parte superior de la página. Desde aquí, asegúrate de que el tipo de publicación correcto esté seleccionado en el menú desplegable.

Una vez que hayas hecho eso, simplemente desplázate hacia abajo hasta Configuración, cerca de la parte inferior de la misma página, y luego localiza la sección ‘Icono del menú’.

Ahora deberías ver dos opciones para añadir un icono al tipo de publicación personalizado.

El botón ‘Elegir dashicon’ te permite seleccionar cualquier Dashicon, y ‘Elegir icono de imagen’ te permite subir o elegir un icono de imagen de tu biblioteca de medios.

Para este tutorial, haremos clic en el botón ‘Elegir dashicon’.

Ahora puedes navegar por cientos de iconos usando las flechas en la parte superior de la ventana emergente. Además, puedes buscar un Dashicon.

Para este tutorial, buscaremos ‘book’.

Luego, encontramos 4 iconos coincidentes, 2 iconos de ‘Facebook’ y 2 iconos de ‘book’. Simplemente puedes hacer clic en el que desees usar.

La clase CSS del icono seleccionado se ingresará automáticamente en el campo ‘Icono de menú’.

Luego, asegúrate de desplazarte hacia abajo y hacer clic en el botón ‘Guardar tipo de publicación’ para almacenar tu configuración.

Desde aquí, puedes volver a tu panel de administración y localizar el tipo de publicación personalizado en la barra lateral izquierda.

Deberías ver el nuevo icono junto a los tipos de publicación en el menú.

Agregar iconos para tipos de publicación personalizados manualmente

Si creaste tus tipos de publicación personalizados manualmente con código, entonces también tendrás que agregar los iconos manualmente.

Primero, visitemos el sitio web de Dashicons para encontrar el icono que deseas usar para tu tipo de publicación.

Para este tutorial, nos desplazaremos hacia abajo hasta la sección ‘Misceláneos’ y haremos clic en el icono ‘book’.

Luego aterrizarás en una página con más información sobre el icono, como el nombre de la categoría y la clase CSS del icono.

Por ejemplo, en la siguiente captura de pantalla, la categoría es ‘Misceláneos’ y la clase CSS es ‘dashicons-book’.

Copiemos la clase CSS al portapapeles.

Ahora, necesitarás agregar algo de código en el lugar donde creaste el tipo de publicación personalizado. Ese podría ser el archivo functions.php de tu tema, o podrías haber usado un plugin de fragmentos de código como WPCode.

Para ver esto en acción, el fragmento de código a continuación crea un tipo de publicación personalizado llamado 'Libros' y también agrega un ícono de menú al añadir una clase CSS de Dashicons en la Línea 45.

/*
* Creating a function to create our CPT
*/
  
function custom_post_type() {
  
// Set UI labels for Custom Post Type
    $labels = array(
        'name'                => _x( 'Books', 'Post Type General Name', 'twentytwentyone' ),
        'singular_name'       => _x( 'Book', 'Post Type Singular Name', 'twentytwentyone' ),
        'menu_name'           => __( 'Books', 'twentytwentyone' ),
        'parent_item_colon'   => __( 'Parent Book', 'twentytwentyone' ),
        'all_items'           => __( 'All Books', 'twentytwentyone' ),
        'view_item'           => __( 'View Book', 'twentytwentyone' ),
        'add_new_item'        => __( 'Add New Book', 'twentytwentyone' ),
        'add_new'             => __( 'Add New', 'twentytwentyone' ),
        'edit_item'           => __( 'Edit Book', 'twentytwentyone' ),
        'update_item'         => __( 'Update Book', 'twentytwentyone' ),
        'search_items'        => __( 'Search Book', 'twentytwentyone' ),
        'not_found'           => __( 'Not Found', 'twentytwentyone' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'twentytwentyone' ),
    );
      
// Set other options for Custom Post Type
      
    $args = array(
        'label'               => __( 'books', 'twentytwentyone' ),
        'description'         => __( 'Book reviews', 'twentytwentyone' ),
        'labels'              => $labels,
        // Features this CPT supports in Post Editor
        'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
        // You can associate this CPT with a taxonomy or custom taxonomy. 
        'taxonomies'          => array( 'genres' ),
        /* A hierarchical CPT is like Pages and can have
        * Parent and child items. A non-hierarchical CPT
        * is like Posts.
        */
        '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-book',
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'post',
        'show_in_rest' => true,
  
    );
      
    // Registering your Custom Post Type
    register_post_type( 'books', $args );
  
}
  
/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/
  
add_action( 'init', 'custom_post_type', 0 );

Para personalizar el ícono al registrar un tipo de publicación personalizado usando el código anterior, simplemente agrega uno de los siguientes fragmentos a la Línea 45.

'menu_icon'           => 'dashicons-book',

Alternativamente, puedes agregar un ícono de imagen a tu 'Biblioteca de Medios' y usar la URL del ícono en lugar de la clase CSS:

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

Los espacios adicionales en estos fragmentos son intencionales y asegurarán que el código se alinee perfectamente cuando lo pegues en el bloque de código más grande de arriba.

Recuerda que cuando uses este código, debes cambiarlo por tu propia clase CSS de Dashicon o URL de ícono de imagen.

¡Ahí lo tienes!

Esperamos que este tutorial te haya ayudado a aprender cómo agregar íconos para tipos de publicación personalizados en WordPress. A continuación, también puedes consultar nuestras guías sobre cómo incluir tipos de publicación personalizados en los resultados de búsqueda de WordPress y cómo cambiar/convertir tipos de publicación personalizados en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.