Hur man lÀgger till ikoner för anpassade inlÀggstyper i WordPress

Hur man lÀgger till ikoner för anpassade inlÀggstyper i WordPress

Har du nÄgonsin undrat hur du kan lÀgga till anpassade ikoner för dina anpassade inlÀggstyper i WordPress? I sÄ fall Àr du pÄ rÀtt plats. I den hÀr artikeln visar vi dig hur du lÀgger till ikoner för anpassade inlÀggstyper i WordPress.

WordPress började anvÀnda ett ikonfontyp som heter Dashicons sedan WordPress 3.8. Dessa teckensnittsikoner ser bra ut pÄ alla enheter eller skÀrmstorlekar. Du kan anvÀnda dessa ikoner för att tilldela anpassade ikoner till dina inlÀggstyper.

Videohandledning

Prenumerera pÄ WPBeginner

Om du inte gillar videon eller behöver fler instruktioner, fortsÀtt lÀsa.

LÀgga till anpassade ikoner för posttyp med ett plugin

Det första du behöver göra Ă€r att installera och aktivera CPT Custom Icon plugin. Vid aktivering, gĂ„ helt enkelt till InstĂ€llningar »InstĂ€llningar för anpassad CPT-ikon dĂ€r du ser dina anpassade inlĂ€ggstyper listade. Klicka sedan pĂ„ knappen “VĂ€lj ikon” bredvid en anpassad inlĂ€ggstyp och vĂ€lj sedan ett teckensnitt frĂ„n menyn.

LĂ€gga till ikoner med anpassad posttyp UI-plugin

Om du inte har börjat registrera en anpassad posttyp rekommenderar vi att du anvÀnder plugin-programmet UI för anpassad posttyp för att skapa och hantera anpassade posttyper och taxonomier.

Att lÀgga till en ikon till en anpassad inlÀggstyp som skapats med CPT UI-plugin Àr vÀldigt enkelt. Den stöder Dashicons som standard, sÄ först mÄste du besöka Dashicons webbplats och vÀlja ikonen du vill anvÀnda för din inlÀggstyp.

Kopiera en ikonklass frÄn Dashicons webbplats

Genom att klicka pÄ en ikon i listan visas en större version av ikonen överst. Bredvid den ser du ikonens CSS-klass. Det kommer att vara nÄgot som dashicons-grupper, dashicons-kalender, dashicons-cart, etc. Du mÄste kopiera CSS-klassen och redigera den anpassade posttypen du vill redigera i CPT UI. Allt du behöver göra Àr att klicka pÄ lÀnken och blÀddra ner till avsnittet Menyikon, sedan klistra in CSS-klassen och spara dina Àndringar.

LÀgger till teckensnittsikon i anpassad UI-plugin för inlÀggstyp

Du kan ocksÄ skapa en bildikon sjÀlv och ladda upp den genom att klicka Media »LÀgg till nytt. Efter uppladdningen klickar du pÄ lÀnken Redigera och kopierar bildfilens URL. Klistra nu helt enkelt in denna URL i menyikonfÀltet i CPT UI-instÀllningar.

Manuellt lÀgga till ikon till en anpassad posttyp

Om du skapade en anpassad inlĂ€ggstyp genom att placera en kod i ditt platsspecifika plugin-program eller functions.php-fil kan du lĂ€gga till menyikoner manuellt. Återigen besöker du bara Dashicons webbplats för att vĂ€lja en ikon och kopiera CSS-klassen. Efter detta lĂ€gg till den i din anpassade posttypskod sĂ„ hĂ€r:


'menu_icon'           => 'dashicons-cart',

Du kan ocksÄ lÀgga till hela webbadressen för en bildfil som du vill visa som ikon, sÄ hÀr:


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

HÀr Àr ett fullstÀndigt kodavsnitt som skapar en anpassad posttyp som kallas produkter med en menyikon:


// 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 );

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till ikoner för dina anpassade inlÀggstyper i WordPress. Du kanske ocksÄ vill kolla hur du anvÀnder ikonsteckensnitt i WordPress-postredigeraren.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du kan ocksÄ hitta oss pÄ Twitter och Google+.