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

¿Le gustaría elegir nuevos iconos para tipos de contenido personalizados en su panel de administrador?

Cuando accedes a tu sitio de WordPress, ves entradas para entradas, páginas y todos los tipos de contenido personalizados en la barra lateral. Por defecto, los tipos de contenido personalizados utilizarán el mismo icono que las entradas, y esto puede ser difícil de ordenar rápidamente.

En este artículo, le mostraremos cómo añadir diferentes iconos para tipos de contenido personalizado en WordPress.

¿Por qué añadir iconos para tipos de contenido personalizado en WordPress?

La mayoría de las veces, utilizas una entrada o una página cuando trabajas con tu sitio web WordPress. Sin embargo, puede utilizar tipos de contenido personalizados para crear otros tipos de contenido. Por ejemplo, WooCommerce utiliza un tipo de contenido personalizado llamado ‘Producto’ para el inventario de su tienda.

Lostipos de contenido personalizados aparecen en el área de administrador de WordPress junto a entradas y páginas en el menú de la izquierda. Cada elemento / artículo del menú de WordPress tiene un icono al lado, y provienen de una fuente de iconos llamada Dashicons.

El problema es que todos los tipos de contenido personalizados utilizarán el mismo icono que las entradas. Así que si usted tiene varios tipos de contenido personalizado, entonces le resultará más fácil encontrar el correcto si todos ellos tienen diferentes iconos.

Dicho esto, echemos un vistazo a cómo añadir iconos para tipos de contenido personalizado en WordPress. Esto es lo que vamos a cubrir en este tutorial:

• Añadir iconos para tipos de contenido personalizados con un plugin
• Añadir iconos para tipos de contenido personalizados manualmente

Añadir iconos para tipos de contenido personalizado con un plugin

Si es la primera vez que registra tipos de entradas personalizados o no está familiarizado con el código, le recomendamos que utilice el plugin Custom Post Type UI para crear tipos de entradas y taxonomías.

Creación de un tipo de contenido personalizado con un plugin

En primer lugar, debe crear un tipo de contenido personalizado. Si ya lo ha hecho, puede omitir la sección ‘Añadir un icono a un tipo de contenido personalizado con un plugin’ que aparece a continuación.

Una vez que instales y actives el plugin, necesitas ir a CPT UI ” Add/Edit Post Types para crear un nuevo tipo de contenido personalizado. Asegúrate de que estás en la pestaña ‘Añadir nuevo tipo de entrada’.

Tienes que proporcionar un slug para tu tipo de contenido personalizado, como ‘películas’. Debajo, introduce nombres en plural y singular, como ‘libros’ y ‘libro”.

A continuación, haga clic en el enlace “Rellenar etiquetas adicionales a partir de las etiquetas seleccionadas”. Esto rellenará automáticamente los campos de etiquetas adicionales que aparecen más abajo y, por lo general, le ahorrará tiempo.

También puede añadir las etiquetas manualmente en la sección “Etiquetas adicionales”.

A continuación, puede desplazarse hasta la sección de ajustes y establecer diferentes atributos para su tipo de entradas. Cada opción viene con una breve descripción que explica lo que hace.

Por ejemplo, puede elegir cómo ordenar el tipo de entradas y si desea que sea jerárquico.

Debajo de los ajustes generales, verás la opción para seleccionar qué características de edición es compatible con este tipo de entradas. Simplemente marque / compruebe las opciones que desea incluir.

Por último, haga clic en el botón “Añadir tipo de entradas” para guardar y crear su tipo de contenido personalizado.

Para obtener instrucciones más detalladas sobre cómo crear un tipo de contenido personalizado mediante la interfaz de usuario del tipo de entrada personalizado, consulte el primer método de nuestra guía sobre cómo crear un tipo de contenido personalizado en WordPress.

Añadir un icono a un tipo de contenido personalizado con un plugin

Una vez que hayas creado tu tipo de contenido personalizado, puedes elegir un icono. Esto es simple porque el plugin Custom Post Type UI es compatible con Dashicons por defecto.

Primero, dirígete a CPT UI ” Añadir/Editar tipos de entradas y haz clic en la pestaña ‘Editar tipos de entradas’ en la parte superior de la página. Asegúrese de seleccionar el tipo de contenido correcto en el menú desplegable.

Una vez hecho esto, sólo tienes que desplazarte hasta Ajustes, cerca de la parte inferior de la misma página, y localizar la sección “Icono de menú”.

Ahora debería ver dos opciones para añadir un icono al tipo de contenido personalizado. El botón ‘Choose dashicon’ te permite elegir cualquier Dashicon, y ‘Choose image icon’ 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 puede navegar por cientos de iconos utilizando las flechas de la parte superior de la ventana emergente.

También puedes buscar un Dashicon. Para este tutorial, buscaremos ‘libro’.

Aparecen cuatro iconos iguales, dos de “Facebook” y dos de “libro”. Sólo tienes que hacer clic en el que desees utilizar.

La clase CSS del icono seleccionado se introducirá automáticamente en el campo “Icono del menú”.

Asegúrese de desplazarse hacia abajo y hacer clic en el botón “Guardar tipo de entrada” para establecer los ajustes.

Ahora, vuelva a su administrador y localice el tipo de contenido personalizado en la barra lateral izquierda.

Debería ver el nuevo icono junto a los tipos de contenido de las entradas en el menú.

Añadir iconos para tipos de contenido personalizados manualmente

Si usted creó sus tipos de contenido personalizado manualmente con código, entonces usted tendrá que añadir los iconos manualmente también.

En primer lugar, debe visitar el sitio web de Dashicons para encontrar el icono que desea utilizar para su tipo de contenido.

Para este tutorial, desplázate hasta la sección “Varios” y haz clic en el icono “Libro”.

Accederá a una página con más información acerca del 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 “Varios” y la clase CSS es “dashicons-book”.

Debe copiar la clase CSS en el portapapeles.

Ahora tendrás que añadir algo de código en el mismo lugar donde creaste el tipo de contenido personalizado. Podría ser el archivo functions. php de tu tema, o puede que hayas utilizado 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 contenido personalizado llamado “Libros” y también añade un icono de menú mediante la adición de una clase CSS 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 icono al registrar un tipo de contenido personalizado mediante el código anterior, sólo tiene que añadir uno de los siguientes fragmentos de código a la línea 45.

'menu_icon'           => 'dashicons-book',

También puede añadir un icono de imagen a su biblioteca de medios y utilizar la URL del icono en lugar de la clase CSS:

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

Los espacios de más en estos fragmentos de código son intencionados y sirven para que el código quede bien alineado cuando lo pegues en el bloque de código más grande de arriba.

Recuerde que cuando se utiliza este código, es necesario cambiar a su propia clase CSS Dashicon o URL icono de la imagen.

Esperamos que este tutorial te haya ayudado a aprender cómo añadir iconos para tipos de contenido personalizados en WordPress. Puede que también quieras aprender cómo mantener tu sitio web seguro, o comprobar nuestra lista de errores comunes de WordPress y cómo corregirlos.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.