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

Standardmäßig sehen individuelle Inhaltstypen alle gleich aus, was verwirrend sein kann. Mit eindeutigen Symbolen können Sie verschiedene Inhaltstypen schnell erkennen.

Außerdem können die richtigen Symbole für Ihre individuellen Inhaltstypen einen großen Unterschied bei der Navigation in Ihrem WordPress-Dashboard ausmachen. Wenn Sie sich anmelden, sehen Sie Einträge für Beiträge, Seiten und individuelle Inhaltstypen in der Seitenleiste.

In diesem Artikel zeigen wir Ihnen, wie Sie verschiedene Icons für Ihre Individuellen Inhaltstypen hinzufügen können.

Warum Icons für Individuelle Inhaltstypen in WordPress hinzufügen?

Normalerweise verwenden Sie einen Beitrag oder eine Seite, wenn Sie mit Ihrer WordPress-Website arbeiten. Sie können jedoch mit Individuellen Inhaltstypen auch andere Arten von Inhalten erstellen.

WooCommerce verwendet zum Beispiel einen individuellen Inhaltstyp namens „Produkt“, um Ihren Shop zu bestücken.

Individuelle Inhaltstypen werden im WordPress-Verwaltungsbereich neben Beiträgen und Seiten im linken Menü aufgeführt. Jeder Menüpunkt in WordPress ist mit einem Symbol versehen, das aus einer Schrift namens Dashicons stammt.

Das Problem ist, dass alle Individuellen Inhaltstypen das gleiche Symbol wie Beiträge verwenden. Wenn Sie also mehrere individuelle Inhaltstypen haben, ist es einfacher, den richtigen zu finden, wenn sie alle unterschiedliche Icons haben.

In diesem Sinne zeigen wir Ihnen, wie Sie Symbole für individuelle Inhaltstypen in WordPress hinzufügen können. Das werden wir in diesem Tutorial behandeln:

• Hinzufügen von Icons für Individuelle Inhaltstypen mit einem Plugin
• Manuelles Hinzufügen von Symbolen für Individuelle Inhaltstypen

Sind Sie bereit? Dann fangen wir an.

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

Wenn Sie individuelle Inhaltstypen noch nicht registriert haben oder mit dem Code nicht vertraut sind, empfehlen wir Ihnen, das Plugin Individuelle Inhaltstypen UI zu verwenden, um Inhaltstypen und Taxonomien zu erstellen.

Erstellen eines benutzerdefinierten Beitragstyps mit einem Plugin

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

Sobald Sie das Plugin installiert und aktiviert haben, navigieren Sie zu CPT UI “ Add/Edit Post Types, um einen neuen individuellen Inhaltstypen zu erstellen. Stellen Sie dann sicher, dass Sie sich auf dem Tab „Neuen Beitragstyp hinzufügen“ befinden.

Anschließend müssen Sie eine Titelform für Ihren individuellen Inhaltstyp 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 normalerweise Zeit spart.

Alternativ können Sie die Bezeichnungen auch manuell in den Abschnitt „Zusätzliche Bezeichnungen“ einfügen.

Gehen Sie nun zum Abschnitt „Einstellungen“ und legen Sie verschiedene Attribute für Ihren Beitragstyp fest. Zu jeder Option gibt es eine kurze Beschreibung, die ihre Funktion erläutert.

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 Optionen zur Auswahl der Funktionen, die dieser Beitragstyp unterstützen soll. Markieren Sie einfach die Optionen, die Sie einbeziehen möchten.

Klicken Sie abschließend auf den Button „Beitragstyp hinzufügen“, um Ihren individuellen Inhaltstyp zu speichern und zu erstellen.

Ausführlichere Anweisungen zum Erstellen eines individuellen Inhaltstyps mit Individueller Inhaltstyp UI finden Sie in der ersten Methode in unserer Anleitung zum Erstellen eines individuellen Inhaltstyps in WordPress.

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

Sobald Sie Ihren individuellen Inhaltstyp erstellt haben, ist es an der Zeit, ein Symbol auszuwählen. Dieser Schritt ist einfach, da das Plugin Individueller Inhaltstyp UI standardmäßig Dashicons unterstützt.

Gehen Sie zunächst zu CPT UI “ Beitragstypen hinzufügen/bearbeiten und klicken Sie auf den Tab „Beitragstypen bearbeiten“ oben auf der Seite. Vergewissern Sie sich hier, dass der richtige Inhaltstyp aus dem Dropdown-Menü ausgewählt ist.

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

Sie sollten nun zwei Optionen für das Hinzufügen eines Symbols zu dem individuellen Inhaltstyp sehen.

Mit dem Button „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 Hunderte von Icons durchsuchen. Außerdem können Sie nach einem Dashicon suchen.

In diesem Lernprogramm suchen wir nach „Buch“.

Dann haben wir 4 passende Symbole gefunden, 2 „Facebook“-Symbole und 2 „Buch“-Symbole. Sie können einfach auf das Symbol klicken, das Sie verwenden möchten.

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

Scrollen Sie dann nach unten und klicken Sie auf den Button „Beitragstyp speichern“, um Ihre Einstellungen zu speichern.

Von hier aus können Sie zurück zu Ihrem Admin-Dashboard gehen und den individuellen Inhaltstyp in der linken Seitenleiste suchen.

Sie sollten das neue Symbol neben den Inhaltstypen der Beiträge im Menü sehen.

Manuelles Hinzufügen von Symbolen für benutzerdefinierte Beitragstypen

Wenn Sie Ihre individuellen Inhaltstypen manuell mit Code erstellt haben, müssen Sie die Icons ebenfalls manuell hinzufügen.

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

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

Sie gelangen dann auf eine Seite mit weiteren Informationen über das Symbol, z. B. den Namen der Kategorie und die CSS-Klasse des Symbols.

Im folgenden Screenshot lautet die Kategorie beispielsweise „Sonstiges“ und die CSS-Klasse „dashicons-book“.

Kopieren wir die CSS-Klasse in die Zwischenablage.

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

Der folgende Codeausschnitt erstellt einen individuellen Inhaltstyp mit dem Namen „Bücher“ und fügt ein Menüsymbol hinzu, indem er in Zeile 45 die CSS-Klasse „Dashicons“ hinzufügt, um dies zu veranschaulichen.

/*
* 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 Individuellen Inhaltstyps mit dem obigen Code 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 ‚Mediathek‘ 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 diesen Code in Ihre eigene Dashicon-CSS-Klasse oder Bildsymbol-URL ändern müssen, wenn Sie ihn verwenden.

Da haben Sie es!

Wir hoffen, dass diese Anleitung Ihnen geholfen hat zu lernen, wie man Symbole für individuelle Inhaltstypen in WordPress hinzufügt. Als Nächstes möchten Sie vielleicht auch einen Blick auf unsere Anleitungen werfen, wie Sie individuelle Inhaltstypen in die WordPress-Suchergebnisse aufnehmen und wie Sie individuelle Inhaltstypen in WordPress umschalten/konvertieren können.

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.