Tipi di post personalizzati di WordPress: andare oltre

Nella nostra serie sui tipi di post personalizzati di WordPress abbiamo finora esaminato la creazione di un tipo di post personalizzato utilizzando un plug-in e come creare manualmente un tipo di post personalizzato scrivendo i propri frammenti di codice personalizzati. Abbiamo anche esaminato come applicare alcune configurazioni di base ai tipi di post in modo da poterli gestire più facilmente dall'amministratore di WordPress. Se non hai controllato questi articoli, assicurati di dare un'occhiata!

In questo articolo faremo un ulteriore passo avanti costruendo sui nostri tipi di post personalizzati creati in precedenza per estenderne la funzionalità e l'usabilità sul nostro sito Web. Se vuoi seguire, dovrai creare i tipi di post personalizzati che abbiamo creato nel nostro articolo "Creare manualmente tipi di post personalizzati WordPress", quindi assicurati di averlo fatto prima in modo che le seguenti informazioni abbiano senso.

Iniziamo!

Visualizzazione di tipi di post personalizzati ovunque

Come avrai visto, in precedenza abbiamo creato un tipo di post personalizzato per visualizzare le ricette sul nostro sito Web. Questo è un perfetto esempio di una situazione in cui i tipi di post personalizzati sono un modo incredibilmente utile per estendere le funzionalità del nostro sito web.

Nel nostro esempio siamo stati in grado di visualizzare i nostri post sulle ricette aggiungendoli al menu principale del nostro sito Web. Abbiamo anche impostato una vista archivio che elencava tutti i nostri post relativi alla ricetta. Queste sono ottime opzioni per visualizzare i nostri nuovi tipi di post personalizzati, ma cosa succede quando vogliamo visualizzare questo contenuto altrove sul nostro sito Web?

Utilizzo della funzione WP_Query per visualizzare i tipi di post personalizzati

Per visualizzare i nostri nuovi post sulle ricette in posizioni di nostra scelta sul nostro sito Web, utilizzeremo la funzione WP_Query . Nei suoi argomenti possiamo trovare post_types che verrà utilizzato in questa istanza poiché definisce quali tipi di post vogliamo interrogare. Insieme ad esso utilizzeremo i parametri publish e orderby poiché vogliamo mostrare i post di Ricette che hanno uno stato pubblicato e ordinarli per data decrescente per visualizzare prima il più recente.

Immaginiamo di voler visualizzare un elenco dei nostri post sulle ricette nel piè di pagina del nostro sito Web sopra le informazioni sul copyright. Per fare ciò utilizzeremo uno snippet di codice che, nel nostro caso, deve essere inserito nel file singular.php sotto l'inizio dell'elemento <footer> .

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

In questo esempio stiamo usando l'attuale tema WordPress Twenty Twenty predefinito. Se utilizzi un tema diverso da Twenty Twenty, dovresti modificare il file che contiene il contenuto del piè di pagina per il tuo tema.

Con il codice aggiunto, possiamo aprire il nostro sito Web e dovremmo vedere i nostri post sulle ricette elencati nel nostro footer.

Il layout e l'aspetto di questi post nel tuo piè di pagina possono essere stilizzati per avere l'aspetto che desideri utilizzando i CSS. Il posto migliore per aggiungere qualsiasi CSS è nel file style.css che si trova nella cartella principale del tuo tema. Abbiamo alcuni possibili CSS che potresti voler usare di seguito.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

Una volta che questo CSS è stato salvato e la pagina aggiornata, dovresti vedere il layout dei tuoi post di Ricetta nella modifica del piè di pagina per assomigliare a questo:

L'importanza di ripristinare il ciclo

Potresti aver notato che dopo aver definito gli argomenti necessari nel codice, un ciclo di post inizia e finisce con la funzione wp_reset_postdata() . L'uso di questa funzione è molto importante ed ecco perché.

Quando WordPress crea un layout di pagina, utilizza una variabile $post globale che funziona bene se c'è solo un ciclo nella pagina. Ora che abbiamo aggiunto il nostro ciclo personalizzato, fondamentalmente sovrascriviamo la variabile $post globale e, a meno che non diciamo a WordPress che il ciclo si ripristina, riprenderà da lì utilizzando il tipo di post personalizzato che abbiamo definito nel nostro ciclo.

Diamo un'occhiata a come funziona in pratica facendo eco al titolo del post sotto il codice sopra in questo modo:

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

Ora, se aggiorniamo la nostra pagina sul frontend del nostro sito Web, vediamo il titolo "Post 1" sotto le nostre ricette recenti.

Questo ha senso perché torniamo al ciclo originale con wp_reset_postdata(); funzione.

Ora, commenta wp_reset_postdata(); dal tuo codice Noterai che the_title(); il codice farà eco al titolo 'Ricetta 1' invece di 'Post 1'.

Tipi di post personalizzati – Ulteriore gestione

Per personalizzare ulteriormente il comportamento e l'aspetto dei nostri post personalizzati, esamineremo alcune opzioni che possono essere aggiunte come estensione al codice che abbiamo utilizzato nel nostro precedente articolo per registrare il nostro tipo di post "ricette".

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

Aggiungeremo altri argomenti per:

1. Modifica l'URL slug delle ricette Custom Post Type
2. Modifica la posizione del menu di amministrazione del tipo di post personalizzato
3. Cambia l'icona del menu

Modifica dello slug URL del tipo di post personalizzato

Se creiamo un post di ricetta e lo chiamiamo "Ricetta 1", l'URL predefinito del post "Ricetta 1" sarebbe qualcosa come https://mycompanyname.com/recipes/recipe-1/ a condizione che i permalink siano impostati su " Post name' nelle nostre Impostazioni Permalink.

Se vuoi cambiare il modo in cui il tipo di post personalizzato delle ricette appare nell'URL, puoi usare l'argomento di rewrite con la sua chiave slug .

Come abbiamo notato dall'URL, se questo argomento viene saltato, il valore predefinito sarebbe l'etichetta del tipo di post personalizzato "ricette". Se vogliamo cambiarlo in my-home-recipes ad esempio, dobbiamo sovrascriverlo modificando il nostro frammento di codice in modo che assomigli a questo:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

Ora, se salvi i permalink (svuota la cache dei permalink) e visualizzi di nuovo la tua ricetta, il tuo URL dovrebbe essere https://mycompanyname.com/my-home-recipes/recipe-1/

Nota che se cambi lo slug, dovrai cambiare anche l'URL dell'archivio da /recipes/ a /my-home-recipes/ nella pagina del menu principale.

Modifica del posizionamento del menu del tipo di post personalizzato

Se desideri spostare il menu Ricette in una posizione diversa, puoi utilizzare l'argomento menu_position questo modo:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

I valori che puoi usare per questo argomento sono:

0 : in cima
5: sotto Messaggi
10 : sotto Media
15 : sotto Link
20 : sotto Pagine
25 : sotto i commenti
60 : sotto la prima lacuna nel menu
65 : sotto Plugin
70 : di seguito Utenti
75 : sotto Strumenti
80 : sotto Impostazioni
100 : sotto la seconda lacuna nel menu

Lo screenshot seguente mostra la posizione del menu quando il valore 5 è stato aggiunto all'argomento menu_position .

Modifica dell'icona del menu del tipo di post personalizzato

Attualmente, il menu Ricette utilizza l'icona dei post di default. Sarebbe un bel tocco che avesse la sua icona unica. Per fare ciò possiamo usare l'argomento menu_icon .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

Per visualizzare la tua icona puoi inserire l'URL completo della posizione dell'icona del tuo menu (come mostrato nel codice sopra) o utilizzare la libreria WordPress Dashicons aggiungendo il nome della classe dell'icona. Puoi vedere le icone con le classi corrispondenti qui.

Se, ad esempio, scegli l'icona del cibo, la aggiungeresti al tuo codice come questo 'menu_icon' => 'dashicons-food' .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

Il risultato finale dovrebbe essere che l'icona che hai scelto appaia nel menu del tuo post personalizzato... contribuendo a rendere il tuo post personalizzato davvero personalizzato!

Ulteriori letture

Crea tipi di post personalizzati WordPress utilizzando un plug-in
Crea manualmente tipi di post personalizzati per WordPress
Crea tipi di post personalizzati per WordPress usando il tuo plugin!

Conclusione

Si spera che questi suggerimenti ti aiutino davvero nella tua ricerca per creare i tuoi tipi di post personalizzati e così facendo ti permettano di migliorare ulteriormente le funzioni e l'uso del tuo sito Web WordPress. Come per tutta la codifica, è meglio prendersi del tempo per giocare e vedere come il tuo nuovo codice influisce sul tuo sito web. Costruire su queste basi ti consentirà quindi di affrontare progetti ancora più complessi in cui è necessaria una forte personalizzazione.