Agregar iconos para tipos de publicaciones personalizadas en WordPress

¿Alguna vez se preguntó cómo agregar íconos personalizados para sus tipos de publicaciones personalizadas en WordPress? Si es así, ha venido al lugar correcto. En este artículo, le mostraremos cómo agregar íconos para tipos de publicaciones personalizadas en WordPress.

WordPress ha estado usando una fuente de símbolos llamada Dashicons desde WordPress 3.8. Estos símbolos de fuente se ven muy bien en cualquier dispositivo o tamaño de pantalla. Bueno, puedes usar estos íconos para asignar íconos personalizados a tus tipos de publicaciones.

Video tutorial

Si no le gusta el video o necesita más instrucciones, siga leyendo.

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

Lo primero que debe hacer es instalar y activar ese Símbolo CPT personalizado Enchufar. Después de la activación, vaya a Configuración »Configuración de símbolo CPT personalizado Sus tipos de publicaciones personalizadas se enumeran aquí. Luego haga clic en el botón «Elegir icono» junto a un tipo de publicación personalizada, luego elija una fuente del menú.

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

Agregar íconos 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 la use Interfaz de usuario personalizada para tipos de publicaciones Complemento para crear y administrar taxonomías y tipos de publicaciones personalizadas.

Agregar un ícono a un tipo de publicación personalizado creado con el complemento CPT UI es muy fácil. Admite íconos de tablero de forma predeterminada, por lo que debe visitarlos primero Sitio web de Dashicons y seleccione el icono que desea utilizar para su tipo de publicación.

Copie una clase de símbolo del sitio web de Dashicons

Cuando hace clic en un icono de la lista, aparece una versión más grande del icono en la parte superior. Junto a él, puede ver la clase CSS del símbolo. Son Grupos de Dashicons, Calendario de Dashicons, Carrito de Dashicons, 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 tienes que hacer es hacer clic en eso Opciones ampliadas Enlaza y desplázate hacia abajo hasta la sección del ícono del menú, luego pega la clase CSS y guarda los cambios.

Agregar un icono de fuente en el complemento de IU personalizado para tipos de publicaciones

También puede crear un símbolo de imagen usted mismo y hacer clic para cargarlo. Medios »Agregar nuevo. Una vez cargado, 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 ha creado un tipo de publicación personalizada pegando código en el complemento específico de su sitio o en el archivo functions.php, puede agregar íconos de menú manualmente. Simplemente visite el sitio web de Dashicons nuevamente para seleccionar un icono y copiar la clase CSS. Luego agréguelo a su código postal personalizado de la siguiente manera:

'menu_icon'           => 'dashicons-cart',

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

'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 llamada Productos con un ícono de menú:

// 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 íconos para tus tipos de publicaciones personalizadas en WordPress. Es posible que también desee saber cómo usar fuentes de iconos en el editor de publicaciones de WordPress.