Jak dodać ikony dla niestandardowych typów postów w WordPress

Domyślnie niestandardowe typy postów wyglądają tak samo, co może być mylące. Unikalne ikony mogą pomóc w szybkim identyfikowaniu różnych typów treści.

Ponadto, posiadanie odpowiednich ikon dla niestandardowych typów postów może mieć ogromne znaczenie w nawigacji po panelu administracyjnym WordPress. Po zalogowaniu zobaczysz wpisy dla postów, stron i niestandardowych typów postów w pasku bocznym.

W tym artykule przeprowadzimy Cię przez proces dodawania różnych ikon dla Twoich niestandardowych typów postów.

Dlaczego dodawać ikony dla niestandardowych typów postów w WordPress?

Zazwyczaj używasz posta lub strony podczas pracy z witryną WordPress. Możesz jednak tworzyć inne rodzaje treści za pomocą niestandardowych typów postów.

Na przykład WooCommerce używa niestandardowego typu posta o nazwie „Produkt” do zarządzania Twoim sklepem.

Niestandardowe typy postów są wymienione w obszarze administracyjnym WordPress obok postów i stron w menu po lewej stronie. Każdy element menu w WordPress ma obok siebie ikonę, która pochodzi z czcionki ikon o nazwie Dashicons.

Problem polega na tym, że wszystkie niestandardowe typy postów będą używać tej samej ikony co posty. Więc jeśli masz kilka niestandardowych typów postów, łatwiej będzie znaleźć właściwy, jeśli wszystkie będą miały różne ikony.

Mając to na uwadze, pokażemy Ci, jak dodać ikony dla niestandardowych typów postów w WordPress. Oto, co omówimy w tym samouczku:

• Dodawanie ikon dla niestandardowych typów postów za pomocą wtyczki
• Dodawanie ikon dla niestandardowych typów postów ręcznie

Gotowi? Zacznijmy.

Dodawanie ikon dla niestandardowych typów postów za pomocą wtyczki

Jeśli dopiero zaczynasz rejestrować niestandardowe typy postów lub nie znasz kodu, zalecamy użycie wtyczki Custom Post Type UI do tworzenia typów postów oraz taksonomii.

Tworzenie niestandardowego typu wpisu za pomocą wtyczki

Najpierw musisz utworzyć niestandardowy typ posta. Jeśli już to zrobiłeś, możesz przejść do sekcji „Dodawanie ikony do niestandardowego typu posta za pomocą wtyczki” poniżej.

Po zainstalowaniu i aktywowaniu wtyczki przejdź do CPT UI » Dodaj/Edytuj typy postów , aby utworzyć nowy niestandardowy typ postu. Następnie upewnij się, że jesteś na karcie „Dodaj nowy typ postu”.

Następnie będziesz musiał podać slug dla swojego niestandardowego typu wpisu, na przykład „filmy”. Poniżej wpisujesz nazwy w liczbie mnogiej i pojedynczej, na przykład „książki” i „książka”.

Następnie kliknij link „Wypełnij dodatkowe etykiety na podstawie wybranych etykiet”. Spowoduje to automatyczne wypełnienie poniższych dodatkowych pól etykiet i zazwyczaj oszczędza czas.

Alternatywnie możesz ręcznie dodać etykiety do sekcji „Dodatkowe etykiety”.

Następnie przewiń w dół do sekcji „Ustawienia” i skonfiguruj różne atrybuty dla swojego typu posta. Każda opcja ma krótki opis wyjaśniający jej funkcję.

Na przykład możesz wybrać sposób sortowania typu wpisu i czy ma być hierarchiczny.

Poniżej ogólnych ustawień zobaczysz opcje wyboru funkcji edycyjnych, które ten typ posta będzie obsługiwał. Po prostu zaznacz opcje, które chcesz uwzględnić.

Na koniec kliknij przycisk „Dodaj typ postu”, aby zapisać i utworzyć niestandardowy typ postu.

Aby uzyskać bardziej szczegółowe instrukcje dotyczące tworzenia niestandardowego typu posta za pomocą Custom Post Type UI, możesz zapoznać się z pierwszą metodą w naszym przewodniku jak utworzyć niestandardowy typ posta w WordPress.

Dodawanie ikony do niestandardowego typu postu za pomocą wtyczki

Po utworzeniu niestandardowego typu posta, czas wybrać ikonę. Ten krok jest łatwy, ponieważ wtyczka Custom Post Type UI domyślnie obsługuje Dashicons.

Najpierw przejdź do CPT UI » Dodaj/Edytuj typy postów i kliknij kartę „Edytuj typy postów” na górze strony. Stąd upewnij się, że wybrany jest właściwy typ postu z menu rozwijanego.

Po wykonaniu tej czynności po prostu przewiń w dół do Ustawień u dołu tej samej strony, a następnie zlokalizuj sekcję „Ikona menu”.

Powinieneś teraz zobaczyć dwie opcje dodawania ikony do niestandardowego typu postu.

Przycisk „Wybierz dashicon” pozwala wybrać dowolny Dashicon, a „Wybierz ikonę obrazu” pozwala przesłać lub wybrać ikonę obrazu z biblioteki multimediów.

W tym samouczku klikniemy przycisk „Wybierz ikonę pulpitu”.

Teraz możesz przeglądać setki ikon za pomocą strzałek na górze okna. Dodatkowo możesz wyszukać Dashicon.

W tym samouczku wyszukamy „book”.

Następnie znaleźliśmy 4 pasujące ikony, 2 ikony „Facebook” i 2 ikony „książka”. Możesz po prostu kliknąć tę, której chcesz użyć.

Klasa CSS wybranej ikony zostanie automatycznie wprowadzona w polu „Ikona menu”.

Następnie upewnij się, że przewinąłeś w dół i kliknąłeś przycisk „Zapisz typ posta”, aby zapisać swoje ustawienia.

Stąd możesz wrócić do swojego panelu administracyjnego i zlokalizować niestandardowy typ posta w bocznym pasku po lewej stronie.

Powinieneś zobaczyć nową ikonę obok typów postów w menu.

Dodawanie ikon dla niestandardowych typów postów ręcznie

Jeśli ręcznie utworzyłeś niestandardowe typy postów za pomocą kodu, będziesz musiał również ręcznie dodać ikony.

Najpierw odwiedźmy stronę Dashicons , aby znaleźć ikonę, której chcesz użyć dla swojego typu postu.

W tym samouczku przewiniemy w dół do sekcji „Różne” i klikniemy ikonę „książki”.

Następnie przejdziesz do strony z dodatkowymi informacjami o ikonie, takimi jak nazwa kategorii i klasa CSS ikony.

Na przykład, na poniższym zrzucie ekranu kategoria to „Różne”, a klasa CSS to „dashicons-book”.

Skopiujmy klasę CSS do schowka.

Teraz musisz dodać trochę kodu do miejsca, w którym utworzyłeś niestandardowy typ wpisu. Może to być plik functions.php twojego motywu, lub mogłeś użyć wtyczki do fragmentów kodu, takiej jak WPCode.

Aby zobaczyć to w akcji, poniższy fragment kodu tworzy niestandardowy typ posta o nazwie „Książki”, a także dodaje ikonę menu, dodając klasę CSS Dashicons w linii 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 );

Aby dostosować ikonę podczas rejestrowania niestandardowego typu postu za pomocą powyższego kodu, po prostu dodaj jeden z poniższych fragmentów do Linii 45.

'menu_icon'           => 'dashicons-book',

Alternatywnie, możesz dodać ikonę obrazu do swojej ‘Biblioteki mediów’ i użyć adresu URL ikony zamiast klasy CSS:

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

Dodatkowe spacje w tych fragmentach kodu są celowe i zapewnią, że kod będzie ładnie wyrównany po wklejeniu go do większego bloku kodu powyżej.

Pamiętaj, że używając tego kodu, musisz zmienić go na własną klasę CSS Dashicon lub adres URL ikony graficznej.

I oto jest!

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodawać ikony dla niestandardowych typów postów w WordPress. Następnie możesz również zapoznać się z naszymi poradnikami na temat jak uwzględnić niestandardowe typy postów w wynikach wyszukiwania WordPress oraz jak przełączać/konwertować niestandardowe typy postów w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.