Cum să adăugați pictograme pentru tipurile de postări personalizate în WordPress

Implicit, tipurile de postări personalizate arată toate la fel, ceea ce poate fi confuz. Pictogramele unice vă pot ajuta să identificați rapid diferite tipuri de conținut.

În plus, obținerea pictogramelor potrivite pentru tipurile tale de postări personalizate poate face o diferență uriașă în navigarea în panoul de administrare WordPress. Când te conectezi, vei vedea în bara laterală intrări pentru postări, pagini și tipuri de postări personalizate.

În acest articol, vă vom ghida cum să adăugați pictograme diferite pentru tipurile dvs. de postări personalizate.

De ce să adăugăm pictograme pentru tipurile de postări personalizate în WordPress?

De obicei, folosești o postare sau o pagină atunci când lucrezi cu site-ul tău WordPress. Cu toate acestea, poți crea alte tipuri de conținut folosind tipuri de postări personalizate.

De exemplu, WooCommerce folosește un tip de postare personalizat numit „Produs” pentru a vă stoca magazinul.

Tipurile de postări personalizate sunt listate în zona de administrare WordPress alături de postări și pagini în meniul din stânga. Fiecare element de meniu din WordPress are o pictogramă lângă el, care provine dintr-un font de pictograme numit Dashicons.

Problema este că toate tipurile de postări personalizate vor folosi aceeași pictogramă ca postările. Deci, dacă aveți mai multe tipuri de postări personalizate, va fi mai ușor să găsiți cea potrivită dacă toate au pictograme diferite.

Având în vedere acest lucru, vă vom arăta cum să adăugați pictograme pentru tipurile de postări personalizate în WordPress. Iată ce vom acoperi în acest tutorial:

• Adăugarea de pictograme pentru tipurile de postări personalizate cu un plugin
• Adăugarea manuală a pictogramelor pentru tipurile de postări personalizate

Gata? Să începem.

Adăugarea de pictograme pentru tipurile de postări personalizate cu un plugin

Dacă sunteți nou în înregistrarea tipurilor de postări personalizate sau nu sunteți familiarizat cu codul, atunci vă recomandăm să utilizați pluginul Custom Post Type UI pentru a crea tipuri de postări și taxonomii.

Crearea unui tip de postare personalizat cu un plugin

Mai întâi, va trebui să creați un tip de postare personalizat. Dacă ați făcut deja acest lucru, puteți sări la secțiunea „Adăugarea unei pictograme la un tip de postare personalizat cu un plugin” de mai jos.

Odată ce instalați și activați pluginul, navigați la CPT UI » Add/Edit Post Types pentru a crea un nou tip de postare personalizat. Apoi, asigurați-vă că sunteți pe fila „Add New Post Type”.

Apoi va trebui să furnizați un slug pentru tipul dvs. de postare personalizat, cum ar fi „filme”. Sub aceasta, introduceți nume la plural și singular, cum ar fi „cărți” și „carte”.

După aceea, veți dori să faceți clic pe linkul care spune „Populați etichetele suplimentare pe baza etichetelor alese”. Acest lucru va completa automat câmpurile de etichete suplimentare de mai jos și, de obicei, vă va economisi timp.

Alternativ, puteți adăuga manual etichetele în secțiunea „Etichete suplimentare”.

Apoi, să derulăm în jos la secțiunea „Setări” și să configurăm diferite atribute pentru tipul dvs. de postare. Fiecare opțiune are o scurtă descriere care explică funcția sa.

De exemplu, puteți alege cum să sortați tipul de postare și dacă să îl faceți ierarhic.

Sub setările generale, veți vedea opțiuni pentru a selecta ce caracteristici de editare ar suporta acest tip de postare. Pur și simplu bifați opțiunile pe care doriți să le includeți.

În cele din urmă, continuați și faceți clic pe butonul „Adăugare tip postare” pentru a salva și crea tipul de postare personalizat.

Pentru instrucțiuni mai detaliate despre crearea unui tip de postare personalizat folosind Custom Post Type UI, s-ar putea să doriți să consultați prima metodă din ghidul nostru despre cum să creezi un tip de postare personalizat în WordPress.

Adăugarea unei pictograme la un tip de postare personalizat cu un plugin

Odată ce ați creat tipul de postare personalizat, este timpul să alegeți o pictogramă. Acest pas este ușor, deoarece pluginul Custom Post Type UI suportă Dashicons în mod implicit.

Mai întâi, va trebui să accesați CPT UI » Add/Edit Post Types și să faceți clic pe fila „Edit Post Types” din partea de sus a paginii. De aici, asigurați-vă că tipul de postare corect este selectat din meniul derulant.

Odată ce ați făcut acest lucru, derulați pur și simplu în jos la Setări, aproape de partea de jos a aceleiași pagini, și apoi localizați secțiunea „Pictogramă meniu”.

Ar trebui să vezi acum două opțiuni pentru adăugarea unei pictograme la tipul de postare personalizat.

Butonul „Alegeți dashicon” vă permite să selectați orice Dashicon, iar „Alegeți pictograma imagine” vă permite să încărcați sau să alegeți o pictogramă imagine din biblioteca dvs. media.

Pentru acest tutorial, vom face clic pe butonul „Alegeți dashicon”.

Acum poți răsfoi sute de pictograme folosind săgețile din partea de sus a ferestrei pop-up. În plus, poți căuta un Dashicon.

Pentru acest tutorial, vom căuta „book”.

Apoi, am găsit 4 pictograme potrivite, 2 pictograme „Facebook” și 2 pictograme „carte”. Puteți pur și simplu să faceți clic pe cea pe care doriți să o utilizați.

Clasa CSS a pictogramei selectate va fi introdusă automat în câmpul „Pictogramă meniu”.

Apoi, asigurați-vă că derulați în jos și faceți clic pe butonul „Salvați tipul de postare” pentru a vă stoca setările.

De aici, puteți reveni la tabloul de bord de administrare și puteți localiza tipul de postare personalizat în bara laterală din stânga.

Ar trebui să vedeți noua pictogramă lângă tipurile de postări din meniu.

Adăugarea manuală a pictogramelor pentru tipurile de postări personalizate

Dacă ați creat tipurile de postări personalizate manual cu cod, atunci va trebui să adăugați și pictogramele manual.

Mai întâi, să vizităm site-ul Dashicons pentru a găsi pictograma pe care doriți să o utilizați pentru tipul dvs. de postare.

Pentru acest tutorial, vom derula în jos la secțiunea „Diverse” și vom face clic pe pictograma „carte”.

Veți ajunge apoi pe o pagină cu mai multe informații despre pictogramă, cum ar fi numele categoriei și clasa CSS a pictogramei.

De exemplu, în următorul ecran, categoria este 'Diverse', iar clasa CSS este 'dashicons-book'.

Să copiem clasa CSS în clipboard.

Acum, va trebui să adăugați un cod în locul unde ați creat tipul de postare personalizat. Acesta ar putea fi fișierul functions.php al temei dvs., sau ați putea fi folosit un plugin de fragmente de cod cum ar fi WPCode.

Pentru a vedea acest lucru în acțiune, fragmentul de cod de mai jos creează un tip de postare personalizat numit „Cărți” și adaugă, de asemenea, o pictogramă de meniu prin adăugarea unei clase CSS Dashicons la linia 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 );

Pentru a personaliza pictograma la înregistrarea unui tip de postare personalizat folosind codul de mai sus, pur și simplu adaugă unul dintre următoarele fragmente la Linia 45.

'menu_icon'           => 'dashicons-book',

Alternativ, poți adăuga o pictogramă imagine în „Biblioteca media” și poți folosi URL-ul pictogramei în loc de clasa CSS:

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

Spațiile suplimentare din aceste fragmente sunt intenționate și vor asigura că codul se aliniază frumos atunci când îl copiați în blocul de cod mai mare de mai sus.

Amintiți-vă că atunci când utilizați acest cod, trebuie să îl schimbați cu propria clasă CSS Dashicon sau cu URL-ul pictogramei de imagine.

Poftim!

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați pictograme pentru tipurile de postări personalizate în WordPress. În continuare, ați putea dori, de asemenea, să consultați ghidurile noastre despre cum să includeți tipurile de postări personalizate în rezultatele căutării WordPress și cum să comutați/convertiți tipurile de postări personalizate în WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.