Hinzufügen von Symbolen für benutzerdefinierte Beitragstypen in WordPress

Möchten Sie neue Icons für benutzerdefinierte Beitragstypen in Ihrem Admin-Dashboard auswählen?

Wenn Sie sich bei Ihrer WordPress-Website anmelden, sehen Sie in der Seitenleiste Einträge für Beiträge, Seiten und alle benutzerdefinierten Beitragstypen. Standardmäßig wird für benutzerdefinierte Beitragstypen dasselbe Symbol wie für Beiträge verwendet, und das kann schwierig sein, schnell zu sortieren.

In diesem Artikel zeigen wir Ihnen, wie Sie verschiedene Icons für benutzerdefinierte Beitragstypen in WordPress hinzufügen können.

Warum Icons für benutzerdefinierte Beitragstypen in WordPress hinzufügen?

In den meisten Fällen verwenden Sie einen Beitrag oder eine Seite, wenn Sie mit Ihrer WordPress-Website arbeiten. Sie können jedoch benutzerdefinierte Beitragstypen verwenden, um andere Arten von Inhalten zu erstellen. WooCommerce verwendet zum Beispiel einen benutzerdefinierten Beitragstyp namens „Produkt“, um Ihren Shop zu bestücken.

Benutzerdefinierte Beitragstypen werden im WordPress-Verwaltungsbereich neben Beiträgen und Seiten im linken Menü aufgeführt. Jedes Menüelement in WordPress ist mit einem Symbol versehen, das aus einer Symbolschrift namens Dashicons stammt.

Das Problem ist, dass alle benutzerdefinierten Beitragstypen das gleiche Symbol wie Beiträge verwenden. Wenn Sie also mehrere benutzerdefinierte Beitragstypen haben, ist es einfacher, den richtigen zu finden, wenn sie alle unterschiedliche Symbole haben.

Schauen wir uns also an, wie man Symbole für benutzerdefinierte Beitragstypen in WordPress hinzufügt. Das werden wir in diesem Tutorial behandeln:

• Hinzufügen von Symbolen für benutzerdefinierte Beitragstypen mit einem Plugin
• Manuelles Hinzufügen von Icons für benutzerdefinierte Beitragstypen

Hinzufügen von Symbolen für benutzerdefinierte Beitragstypen mit einem Plugin

Wenn Sie neu in der Registrierung von benutzerdefinierten Beitragstypen sind oder sich mit dem Code nicht auskennen, empfehlen wir Ihnen, das Plugin Custom Post Type UI zu verwenden, um Beitragstypen und Taxonomien zu erstellen.

Erstellen eines benutzerdefinierten Beitragstyps mit einem Plugin

Zunächst müssen Sie einen benutzerdefinierten Beitragstyp erstellen. Wenn Sie dies bereits getan haben, können Sie zum Abschnitt „Hinzufügen eines Symbols zu einem benutzerdefinierten Beitragstyp mit einem Plugin“ weiter unten springen.

Sobald Sie das Plugin installiert und aktiviert haben, müssen Sie zu CPT UI “ Add/Edit Post Types gehen, um einen neuen benutzerdefinierten Beitragstyp zu erstellen. Stellen Sie sicher, dass Sie sich auf der Registerkarte „Neuen Beitragstyp hinzufügen“ befinden.

Sie müssen einen Slug für Ihren benutzerdefinierten Beitragstyp angeben, z. B. „Filme“. Darunter geben Sie Plural- und Singularnamen ein, z. B. „Bücher“ und „Buch“.

Klicken Sie dann auf den Link „Zusätzliche Etiketten auf der Grundlage der gewählten Etiketten ausfüllen“. Dadurch werden die zusätzlichen Etikettenfelder unten automatisch ausgefüllt, was Ihnen in der Regel Zeit spart.

Alternativ können Sie die Beschriftungen auch manuell im Abschnitt „Zusätzliche Beschriftungen“ hinzufügen.

Als Nächstes können Sie zum Abschnitt Einstellungen scrollen und verschiedene Attribute für Ihren Beitragstyp einrichten. Zu jeder Option gibt es eine kurze Beschreibung, die erklärt, was sie bewirkt.

Sie können z. B. wählen, wie der Beitragstyp sortiert werden soll und ob er hierarchisch sein soll.

Unter den allgemeinen Einstellungen finden Sie die Option, auszuwählen, welche Bearbeitungsfunktionen dieser Beitragstyp unterstützen soll. Markieren Sie einfach die Optionen, die Sie einbeziehen möchten.

Klicken Sie abschließend auf die Schaltfläche „Beitragstyp hinzufügen“, um Ihren benutzerdefinierten Beitragstyp zu speichern und zu erstellen.

Ausführlichere Anweisungen zum Erstellen eines benutzerdefinierten Beitragstyps mit Custom Post Type UI finden Sie in der ersten Methode in unserer Anleitung zum Erstellen eines benutzerdefinierten Beitragstyps in WordPress.

Hinzufügen eines Symbols zu einem benutzerdefinierten Beitragstyp mit einem Plugin

Sobald Sie Ihren benutzerdefinierten Beitragstyp erstellt haben, können Sie ein Symbol auswählen. Das ist ganz einfach, denn das Custom Post Type UI Plugin unterstützt standardmäßig Dashicons.

Gehen Sie zunächst zu CPT UI “ Add/Edit Post Types und klicken Sie auf die Registerkarte „Edit Post Types“ oben auf der Seite. Vergewissern Sie sich, dass der richtige Beitragstyp aus dem Dropdown-Menü ausgewählt ist.

Wenn Sie das getan haben, scrollen Sie einfach nach unten zu den Einstellungen am unteren Rand der gleichen Seite und suchen Sie den Abschnitt „Menüsymbol“.

Sie sollten nun zwei Optionen zum Hinzufügen eines Symbols zum benutzerdefinierten Beitragstyp sehen. Mit der Schaltfläche „Dashicon auswählen“ können Sie ein beliebiges Dashicon auswählen, und mit „Bildsymbol auswählen“ können Sie ein Bildsymbol aus Ihrer Mediathek hochladen oder auswählen.

In diesem Tutorial klicken wir auf die Schaltfläche „Dashicon auswählen“.

Mit den Pfeilen am oberen Rand des Popups können Sie nun durch Hunderte von Symbolen blättern.

Sie können auch nach einem Dashicon suchen. In diesem Tutorial werden wir nach „Buch“ suchen.

Es werden vier passende Symbole angezeigt, zwei „Facebook“-Symbole und zwei „Buch“-Symbole. Klicken Sie einfach auf das Symbol, das Sie verwenden möchten.

Die CSS-Klasse des ausgewählten Symbols wird automatisch in das Feld „Menüsymbol“ eingetragen.

Vergewissern Sie sich, dass Sie nach unten scrollen und auf die Schaltfläche „Beitragstyp speichern“ klicken, um Ihre Einstellungen zu speichern.

Gehen Sie nun zurück zu Ihrem Admin-Dashboard und suchen Sie den benutzerdefinierten Beitragstyp in der linken Seitenleiste.

Sie sollten das neue Symbol neben den Beitragstypen im Menü sehen.

Manuelles Hinzufügen von Symbolen für benutzerdefinierte Beitragstypen

Wenn Sie Ihre benutzerdefinierten Beitragstypen manuell mit Code erstellt haben, müssen Sie die Symbole ebenfalls manuell hinzufügen.

Zunächst müssen Sie die Dashicons-Website besuchen, um das Symbol zu finden, das Sie für Ihren Beitragstyp verwenden möchten.

Für dieses Tutorial blättern Sie zum Abschnitt „Sonstiges“ und klicken Sie auf das Symbol „Buch“.

Sie werden zu einer Seite mit weiteren Informationen über das Symbol weitergeleitet, z. B. dem Kategorienamen und der CSS-Klasse des Symbols. Im folgenden Screenshot lautet die Kategorie beispielsweise „Verschiedenes“ und die CSS-Klasse „dashicons-book“.

Sie müssen die CSS-Klasse in die Zwischenablage kopieren.

Nun müssen Sie an derselben Stelle, an der Sie den benutzerdefinierten Beitragstyp erstellt haben, Code hinzufügen. Das kann die Datei functions.php Ihres Themes sein, oder Sie haben ein Code-Snippet-Plugin wie WPCode verwendet.

Um dies in Aktion zu sehen, erstellt das folgende Codeschnipsel einen benutzerdefinierten Beitragstyp namens „Bücher“ und fügt außerdem ein Menüsymbol hinzu, indem es in Zeile 45 eine Dashicons-CSS-Klasse hinzufügt.

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

Um das Symbol bei der Registrierung eines benutzerdefinierten Beitragstyps mithilfe des obigen Codes anzupassen, fügen Sie einfach einen der folgenden Schnipsel in Zeile 45 ein.

'menu_icon'           => 'dashicons-book',

Alternativ können Sie ein Bildsymbol zu Ihrer Medienbibliothek hinzufügen und die URL des Symbols anstelle der CSS-Klasse verwenden:

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

Die zusätzlichen Leerzeichen in diesen Schnipseln sind gewollt und sorgen dafür, dass der Code beim Einfügen in den größeren Codeblock oben sauber ausgerichtet ist.

Denken Sie daran, dass Sie bei der Verwendung dieses Codes Ihre eigene Dashicon-CSS-Klasse oder Bildsymbol-URL verwenden müssen.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie man Symbole für benutzerdefinierte Beitragstypen in WordPress hinzufügt. Vielleicht möchten Sie auch erfahren, wie Sie Ihre Website sicher halten können, oder sich unsere Liste der häufigsten WordPress-Fehler und deren Behebung ansehen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.