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

Som standard ser anpassade inläggstyper alla likadana ut, vilket kan vara förvirrande. Unika ikoner kan hjälpa dig att snabbt identifiera olika typer av innehåll.

Dessutom kan det att skaffa rätt ikoner för dina anpassade inläggstyper göra en enorm skillnad för navigeringen i din WordPress-adminpanel. När du loggar in ser du poster för inlägg, sidor och anpassade inläggstyper i sidofältet.

I den här artikeln guidar vi dig genom hur du lägger till olika ikoner för dina anpassade inläggstyper.

Varför lägga till ikoner för anpassade inläggstyper i WordPress?

Du använder vanligtvis ett inlägg eller en sida när du arbetar med din WordPress-webbplats. Du kan dock skapa andra typer av innehåll med anpassade inläggstyper.

Till exempel använder WooCommerce en anpassad inläggstyp som kallas 'Produkt' för att lagra din butik.

Anpassade inläggstyper listas i WordPress adminområde tillsammans med inlägg och sidor i menyn till vänster. Varje menyalternativ i WordPress har en ikon bredvid sig, som kommer från ett ikon-typsnitt som heter Dashicons.

Problemet är att alla anpassade inläggstyper kommer att använda samma ikon som inlägg. Så, om du har flera anpassade inläggstyper, blir det lättare att hitta rätt om de alla har olika ikoner.

Med det i åtanke visar vi dig hur du lägger till ikoner för anpassade inläggstyper i WordPress. Här är vad vi kommer att täcka i den här handledningen:

• Lägga till ikoner för egna inläggstyper med ett plugin
• Lägga till ikoner för egna inläggstyper manuellt

Redo? Låt oss börja.

Lägga till ikoner för egna inläggstyper med ett plugin

Om du är ny på att registrera egna inläggstyper eller är ovan vid kod, rekommenderar vi att du använder Custom Post Type UI-pluginet för att skapa inläggstyper och taxonomier.

Skapa en anpassad inläggstyp med ett plugin

Först måste du skapa en anpassad inläggstyp. Om du redan har gjort detta kan du hoppa till avsnittet ‘Lägga till en ikon för en anpassad inläggstyp med ett plugin’ nedan.

När du har installerat och aktiverat pluginet, navigera till CPT UI » Lägg till/redigera inläggstyper för att skapa en ny anpassad inläggstyp. Se sedan till att du är på fliken ‘Lägg till ny inläggstyp’.

Du behöver sedan ange en slag för din anpassade inläggstyp, till exempel ‘filmer’. Nedanför anger du plural- och singularnamn, till exempel ‘böcker’ och ‘bok’.

Efter det vill du klicka på länken som säger, 'Fyll i ytterligare etiketter baserat på valda etiketter.' Detta kommer automatiskt att fylla i de ytterligare etikettfälten nedan och vanligtvis spara dig tid.

Alternativt kan du manuellt lägga till etiketterna i avsnittet ‘Additional Labels’.

Låt oss sedan bläddra ner till avsnittet 'Inställningar' och ställa in olika attribut för din inläggstyp. Varje alternativ har en kort beskrivning som förklarar dess funktion.

Du kan till exempel välja hur inläggstypen ska sorteras och om den ska vara hierarkisk.

Nedanför de allmänna inställningarna ser du alternativ för att välja vilka redigeringsfunktioner denna inläggstyp ska stödja. Markera helt enkelt de alternativ du vill inkludera.

Slutligen, klicka på knappen 'Lägg till inläggstyp' för att spara och skapa din anpassade inläggstyp.

För mer detaljerade instruktioner om hur du skapar en anpassad inläggstyp med Custom Post Type UI, kanske du vill se den första metoden i vår guide om hur man skapar en anpassad inläggstyp i WordPress.

Lägga till en ikon till en anpassad inläggstyp med ett plugin

När du har skapat din anpassade inläggstyp är det dags att välja en ikon. Detta steg är enkelt eftersom pluginet Custom Post Type UI stöder Dashicons som standard.

Först vill du gå till CPT UI » Lägg till/redigera inläggstyper och klicka på fliken ‘Redigera inläggstyper’ högst upp på sidan. Se här till att rätt inläggstyp är vald i rullgardinsmenyn.

När du har gjort det, scrolla helt enkelt ner till Inställningar nära botten av samma sida och leta sedan upp sektionen 'Menyikon'.

Du bör nu se två alternativ för att lägga till en ikon för den anpassade inläggstypen.

Knappen ‘Choose dashicon’ låter dig välja vilken Dashicon som helst, och ‘Choose image icon’ låter dig ladda upp eller välja en bildikon från ditt mediebibliotek.

För den här handledningen klickar vi på knappen ‘Välj dashicon’.

Du kan nu bläddra igenom hundratals ikoner med hjälp av pilarna högst upp i popup-fönstret. Dessutom kan du söka efter en Dashicon.

För den här handledningen söker vi efter 'bok'.

Sedan hittade vi 4 matchande ikoner, 2 'Facebook'-ikoner och 2 'bok'-ikoner. Du kan helt enkelt klicka på den du vill använda.

CSS-klassen för den valda ikonen kommer automatiskt att anges i fältet 'Menyikon'.

Låt oss sedan se till att du skrollar ner och klickar på knappen ‘Save Post Type’ för att spara dina inställningar.

Härifrån kan du gå tillbaka till din administratörspanel och lokalisera den anpassade inläggstypen i sidofältet till vänster.

Du bör se den nya ikonen bredvid inläggstyperna i menyn.

Lägga till ikoner för egna inläggstyper manuellt

Om du skapade dina anpassade inläggstyper manuellt med kod, då måste du också lägga till ikonerna manuellt.

Först, låt oss besöka Dashicons webbplats för att hitta ikonen du vill använda för din inläggstyp.

För den här handledningen kommer vi att scrolla ner till avsnittet 'Diverse' och klicka på 'bok'-ikonen.

Du kommer då att landa på en sida med mer information om ikonen, såsom kategorinamnet och ikonens CSS-klass.

Till exempel, i följande skärmdump är kategorin ‘Diverse’ och CSS-klassen är ‘dashicons-book.’

Låt oss kopiera CSS-klassen till urklippet.

Nu behöver du lägga till lite kod på den plats där du skapade den anpassade inläggstypen. Det kan vara ditt temas functions.php-fil, eller så kanske du har använt ett kodavsnitt-plugin som WPCode.

För att se detta i praktiken skapar kodavsnittet nedan en anpassad inläggstyp som heter 'Böcker' och lägger också till en menyikon genom att lägga till en Dashicons CSS-klass på rad 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 );

För att anpassa ikonen när du registrerar en anpassad inläggstyp med koden ovan, lägg helt enkelt till ett av följande kodavsnitt på rad 45.

'menu_icon'           => 'dashicons-book',

Alternativt kan du lägga till en bildikon i ditt ‘Mediebibliotek’ och använda ikonens URL istället för CSS-klassen:

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

De extra mellanslagen i dessa kodsnuttar är avsiktliga och säkerställer att koden radas upp snyggt när du klistrar in den i det större kodblocket ovan.

Kom ihåg att när du använder den här koden måste du ändra den till din egen Dashicon CSS-klass eller bildikonens URL.

Där har du det!

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till ikoner för anpassade inläggstyper i WordPress. Därefter kanske du också vill kolla in våra guider om hur du inkluderar anpassade inläggstyper i WordPress-sökresultat och hur du byter/konverterar anpassade inläggstyper i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.