Tipi di post di WordPress: la guida completa

Pubblicato: 2021-02-16

Se sei il tipo di sviluppatore di WordPress che si preoccupa molto del design e dell'organizzazione, è tempo di comprendere appieno i tipi di post di WordPress.

Come ben saprai, non tutti i siti WordPress sono semplici blog. Spesso, gli sviluppatori richiedono più delle semplici pagine e post standard. Devono essere in grado di aggiungere tipi di contenuto completamente nuovi.

Ma qual è il modo migliore per infrangere il soffitto di vetro della progettazione e dello sviluppo di WordPress, pur offrendo all'utente un'ottima esperienza utente?

La risposta si trova nei tipi di post di WordPress e nei tipi di post personalizzati di WordPress.

Imparando, comprendendo e implementando il pieno potenziale dei tipi di post di WordPress, trasformerai la tua area di amministrazione in un luogo emozionante, organizzato e personalizzato tutto tuo.

I tipi di post di WordPress consentono ai designer di organizzare facilmente i contenuti consentendo la creazione di nuovi bucket per inserire i tuoi tipi di contenuto unici.

Ma cosa significa esattamente e da dove inizi?

Cosa può fare l'uso dei tipi di post personalizzati di WordPress per la UX complessiva del tuo sito?

Scopriamolo.

Cosa sono i tipi di post di WordPress?

Nella scala più elementare, un tipo di post WordPress funziona come i post e le pagine familiari nella tua area di amministrazione.

Per impostazione predefinita, il core di WordPress ospita diversi tipi di contenuto suddivisi in tipi di post. Uno di questi tipi di contenuto è chiamato post. Tuttavia, questo è solo uno dei tanti tipi di post standard in WordPress.

Quando usi il core di WordPress, verrà automaticamente fornito con i seguenti tipi di post, ognuno dei quali è archiviato nella tabella wp_posts del tuo database WordPress:

  • Pagine
  • Post
  • Revisioni
  • Allegati
  • CSS personalizzato
  • Menu di navigazione
  • Modifiche

Ciascuno di questi tipi di post ha un editor e campi del titolo, proprio come sei abituato con le normali pagine e post.

E quando crei un tipo di post personalizzato, che ti mostreremo in questa guida, apparirà nel menu di amministrazione di WordPress proprio come i tipi di post standard di WordPress.

Una volta implementato un tipo di post personalizzato di WordPress, sarai in grado di aggiungere contenuti proprio come fai quando aggiungi un nuovo contenuto del blog alla sezione dei tuoi post.

Tuttavia, con i tipi di post di WordPress, puoi fare in modo che questi tipi di post facciano molto di più dei post e delle pagine standard. Puoi anche personalizzare il modo in cui il front-end del tuo sito mostra il contenuto del tipo di post agli utenti del sito.

Un nuovo tipo di post può essere qualsiasi cosa tu voglia che sia. A seconda dell'argomento del tuo sito, potrebbero essere cose come:

  • Le case
  • Recensioni
  • Casi studio
  • Film
  • Citazioni Ispiratrici
  • Eccetera.

La funzionalità del tipo di post di WordPress rende possibile qualsiasi nuovo tipo di contenuto.

Ovviamente ci sono plugin che ti aiutano a creare tipi di post WordPress. Ma potresti non voler necessariamente che un plug-in abbia così tanto controllo sul design e sulla funzionalità del tuo sito.

Se desideri il controllo completo sul tuo design e UX, l'opzione migliore è codificare i tuoi tipi di post personalizzati.

Suggeriremo un plugin più avanti in questa guida per quelli di voi che preferiscono quell'opzione per creare tipi di post personalizzati di WordPress.

Ma il modo migliore per registrarti, aggiungere o creare un tipo di post WordPress è codificarlo direttamente nel tema del tuo sito. Questo viene fatto utilizzando la funzione di registro post-tipo di WordPress.

Utilizzando questa funzione, puoi aggiungere immediatamente contenuto al tuo nuovo bucket di tipo di post e visualizzarlo sul tuo sito.

Ancora meglio, richiederà solo l'aggiunta di cinque righe di codice per iniziare.

Uno sguardo ai tipi di post personalizzati di WordPress

Ora che hai una conoscenza di base dei tipi di post di WordPress e dei tipi di post personalizzati, è il momento di sporcarti un po' le mani.

Per iniziare, segui questi passaggi per creare un nuovo tipo di post:

  1. Accedi alla tua area amministrativa.
  2. Apri il tuo editor di codice e il file functions.php del tuo tema.
  3. Aggiungi le cinque righe di codice mostrate di seguito nella parte superiore del file functions.php.
  4. Aggiorna il browser.
  5. Controlla il menu di amministrazione di WordPress in Commenti per la nuova voce di menu del tipo di post.
  6. Svuota i tuoi permalink.

Ecco il codice da aggiungere: 

<?php 
  add_action( 'init', function() {
    $label = 'Books';
    $type = 'book';
    register_post_type( $type, [ 'public' => true, 'label' => $label ] );
  });

Ora dovresti avere un nuovo tipo di post.

Ma cosa puoi fare effettivamente con il nuovo tipo di post?

Il potere dei tipi di post di WordPress e dei tipi di post personalizzati di WordPress

Per approfondire i tipi di post, lavoriamo con un esempio specifico di creazione di un nuovo sito Web di portfolio che deve presentare un elenco di casi di studio.

Per questo, registreremo un nuovo tipo di post per gestire ciascuno dei casi di studio.

Utilizzando il tema predefinito Twenty Twenty WordPress, inizieremo aggiungendo il nostro tipo di post di studio nel tema.

Per prima cosa, apri il file functions.php del tema Twenty Twenty nel tuo editor di codice. Qui è dove scriverai il codice del tipo di post.

Il nuovo tipo di post deve essere registrato nella parte superiore del file functions.php. Questo viene fatto con un hook init WordPress usando add_action(). Quando usi la funzione register_post_type per aggiungere il tipo di post, non funzionerà correttamente senza l'hook init.

Quindi, inizia con tre argomenti per register_post_type:

  1. Pubblico: significa impostare il tipo di post in modo che tutti possano accedervi.
  2. Descrizione: non è molto usato ma è comunque bello averlo.
  3. Etichetta – Questo è un argomento che approfondiremo un po' più avanti. 
<?php 
  add_action( 'init', function() {
    $type = 'study';
    $label = 'Studies';
    $arguments = [
        'public' => true, // Allow access to post type
        'description' => 'Case studies for portfolio.', // Add a description
        'label' => $label // Set the primary label
    ];
    register_post_type( $type, $arguments);
  });

Assicurati di svuotare i tuoi permalink ogni volta che completi una modifica.

Personalizzazione delle etichette tipo post

WordPress, per impostazione predefinita, etichetterà il nuovo tipo di post come Post nell'area di amministrazione del tuo sito. Ma potresti voler contrassegnare le etichette come il nuovo tipo di post chiamato Studio, non Post.

Per sovrascrivere le etichette predefinite del tipo di post, dovrai richiamarle manualmente.

Per impostare correttamente le etichette, crea una nuova funzione che compila le etichette senza ingombrare il codice di registrazione del tipo di post.

Aggiungi semplicemente la seguente funzione al tuo tema in modo che possa essere utilizzata nel processo di registrazione del tipo di post: 

<?php 
  function xcompile_post_type_labels($singular = 'Post', $plural = 'Posts') {
    $p_lower = strtolower($plural);
    $s_lower = strtolower($singular);

    return [
      'name' => $plural,
      'singular_name' => $singular,
      'add_new_item' => "New $singular",
      'edit_item' => "Edit $singular",
      'view_item' => "View $singular",
      'view_items' => "View $plural",
      'search_items' => "Search $plural",
      'not_found' => "No $p_lower found",
      'not_found_in_trash' => "No $p_lower found in trash",
      'parent_item_colon' => "Parent $singular",
      'all_items' => "All $plural",
      'archives' => "$singular Archives",
      'attributes' => "$singular Attributes",
      'insert_into_item' => "Insert into $s_lower",
      'uploaded_to_this_item' => "Uploaded to this $s_lower",
    ];
  }

Quindi, nel codice di registrazione, dovrai chiamare la funzione che abbiamo appena creato, xcompile_post_type_labels(). Usalo per le tue etichette, quindi controlla la tua area di amministrazione. 

<?php 
  add_action( 'init', function() {
    $type = 'study';

    // Call the function and save it to $labels
    $labels = xcompile_post_type_labels('Study', 'Studies');

    $arguments = [
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'labels' => $labels // Changed to labels
    ];
    register_post_type( $type, $arguments);
  });

Come sembra tutto finora?

Icona e posizione del menu per i tipi di post personalizzati di WordPress

Da quando sono stati introdotti WP Dashicons, è diventato molto facile aggiungere icone di menu ai tipi di post.

Per fare ciò, imposta prima l'argomento menu_icon su un nome Dashicon. Per questo esempio, utilizzeremo l'icona della scrivania del computer utilizzando il valore dashicons-desktop. 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    $arguments = [
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop', // Set icon
      'labels' => $labels
    ];
    register_post_type( $type, $arguments);
  });

Ora, se desideri cambiare la posizione della voce di menu, usa l'argomento menu_position. Questo argomento prenderà un valore che inizia con 0 e finisce con 100. Il valore scelto elencherà una voce di menu più in alto o più in basso nella base del menu, con un valore 0 in alto e 100 in basso.

Ora, dovremmo aggiungere un'immagine in primo piano al nuovo tipo di post.

Come abilitare e disabilitare l'immagine in primo piano, il titolo e l'editor

Per aggiungere o modificare i campi del modulo di amministrazione predefinito per il tuo tipo di post, come i campi Immagine in primo piano, Titolo e Editor, usa un argomento set support.

Ci sono molte opzioni che puoi attivare e disattivare usando l'argomento support type. Loro sono:

  • Campo del titolo
  • Editor
  • Casella dell'autore
  • Miniatura (immagine in primo piano)
  • Estratto
  • Trackback
  • Campi personalizzati
  • Commenti
  • Revisioni
  • Attributi di pagina
  • Post-formati

Per il tuo nuovo tipo di post di studio, puoi sovrascrivere le opzioni predefinite di WordPress e aggiungere la tua immagine in primo piano applicando l'opzione miniatura.

Prima di farlo, assicurati di aver abilitato il supporto dei temi per le post-miniature. Questo viene fatto usando la funzione add-theme-support.

Richiede solo poche righe di codice aggiuntive per utilizzare la funzione di supporto e abiliterà l'immagine in primo piano. 

<?php 
  // Add theme support for featured image / thumbnails
  add_theme_support('post-thumbnails');

  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'supports' => $supports, // Apply supports
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Non molti designer o sviluppatori di WordPress lo rendono così profondo nei tipi di post personalizzati di WordPress. Ora è un buon momento per darti una piccola pacca sulla spalla.

La gerarchia dei tipi di post personalizzati di WordPress

Mentre i post di WordPress non possono avere post figlio, le pagine possono. Un figlio di una Pagina è considerato una sottopagina.

Se lo desideri, puoi fare in modo che i tipi di post personalizzati di WordPress utilizzino una gerarchia come Pages utilizzando l'argomento gerarchico.

Per il nostro esempio di post di studi, non ne avremmo necessariamente bisogno. Ma se lo richiedi per il tuo progetto specifico, questo è il codice da utilizzare: 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'hierarchical' => false, // Do not use hierarchy
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Come abilitare l'API REST per un nuovo tipo di post

L'API REST ha cambiato WordPress per sempre. Pertanto, vorrai che il tuo nuovo tipo di post sia in grado di accedere a tutte le funzionalità più recenti di WordPress, come Gutenberg.

Abilitare l'API REST per i nuovi tipi di post personalizzati di WordPress è semplice come impostare l'argomento show_in_rest su true.

Quando l'API REST è abilitata, il tuo nuovo tipo di post inizierà a utilizzare Gutenberg (se supporta anche l'editor). 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'show_in_rest' => true, // Enable the REST API
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Quando abiliti l'API REST in WordPress, sarai anche in grado di accedere al nuovo tipo di post come oggetto JSON tramite specifici endpoint di WordPress.

Per visualizzare l'endpoint per il tipo di post REST, usa questo /wp-json/wp/v2/study.

Per modificare il nome di base del tipo di post nell'URL in studi anziché in studio, utilizza l'argomento rest_base. 

<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'rest_base' => 'studies', // Change the REST base
      'show_in_rest' => true,
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

E proprio così, l'API è impostata e Gutenberg è abilitato sul tipo di post.

Come aggiungere Gutenberg ai tipi di post personalizzati di WordPress

Ricorda, Gutenberg non può essere abilitato per i tipi di post personalizzati a meno che non supporti l'editor e non abbia l'API REST abilitata.

Una volta abilitato, per aggiungere Gutenberg al tuo tipo di post, dobbiamo dimenticare per un secondo il nostro tipo di post di studio e creare un nuovo tipo di post che chiameremo Articolo.

Useremo il tipo di post Article per abilitare Gutenberg. 

<?php 
  add_action( 'init', function() {
    $type = 'article';
    $labels = xcompile_post_type_labels('Article', 'Articles');

    $arguments = [
      'rest_base' => 'articles',
      'show_in_rest' => true, // Required for Gutenberg
      'supports' => ['editor'], // Required for Gutenberg
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Noterai che i due argomenti che devi aggiungere Gutenberg sono: 

'show_in_rest' => true,
'supports' => ['editor'],

Come rimuovere Gutenberg dai tipi di post personalizzati di WordPress

Se vuoi rimuovere Gutenberg da uno dei tuoi tipi di post, aggiungi semplicemente l'hook di azione use_block_editor_for_post_type nel file functions.php del tuo tema.

Questo viene fatto con il seguente codice: 

<?php 
add_filter('use_block_editor_for_post_type', function($enabled, $post_type) {

  // List of post types to remove
  $remove_gutenberg_from = ['study'];

  if (in_array($post_type, $remove_gutenberg_from)) {
    return false;
  }

  return $enabled;
  }, 10, 2);

Questo disabilita forzatamente Gutenberg dal tipo di post.

Nota che non tutti i tipi di post personalizzati di WordPress dovrebbero essere abilitati con Gutenberg. Ci sono momenti in cui potresti voler utilizzare il classico editor di WordPress con i tipi di post.

La funzione disabilita Gutenberg è utile anche quando il tipo di post deve essere accessibile dall'API REST.

In questi casi, disabilitare Gutenberg è la direzione in cui vorrai andare.

Abilitazione degli archivi e configurazione del front-end

Siamo finalmente arrivati ​​al punto in cui è il momento di affrontare il nostro design front-end di post personalizzati di WordPress.

Ci sono tre cose che devi fare quando vuoi impostare l'elenco dei contenuti del tipo di post personalizzato di WordPress:

  1. Abilita l'argomento has_archive.
  2. Imposta lo slug delle regole di riscrittura su una forma plurale del nome del tipo di post. Nel caso dell'esempio di questa guida, dovrebbe essere cambiato in "studi".
  3. Svuota i tuoi permalink. 
<?php 
  add_action( 'init', function() {
    $type = 'study';
    $labels = xcompile_post_type_labels('Study', 'Studies');

    // Declare what the post type supports
    $supports = ['title', 'editor', 'revisions', 'page-attributes', 'thumbnail'];

    $arguments = [
      'rewrite' => [ 'slug' => 'studies' ] // Change the archive page URL
      'has_archive' => true, // Enable archive page
      'rest_base' => 'studies',
      'show_in_rest' => true,
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    ];
    register_post_type( $type, $arguments);
  });

Con tutto ciò a posto, è il momento di iniziare a tematizzare il contenuto del tuo tipo di post personalizzato. Per ora, utilizzeremo il tema predefinito Twenty Twenty. Ovviamente puoi usare qualsiasi tema tu voglia.

Modello di tipo di articolo personalizzato WordPress

Prima di modellare il nostro tipo di post personalizzato, diamo prima un'occhiata alla gerarchia dei modelli di WordPress.

Se non hai già familiarità con il modo in cui WordPress funziona con i modelli, consideralo simile al modo in cui CSS gestisce la specificità. Anche se non è molto importante impantanarsi nei dettagli, questa semplice analogia ti aiuterà ad avere una migliore comprensione della gerarchia dei modelli di WordPress.

Ci sono due file modello specifici a cui prestare attenzione all'interno della gerarchia dei modelli per il nostro nuovo tipo di post di studio.

Loro sono:

1. single-study.php – Questo è per la singola pagina quando un utente naviga su http://yourcoolsite.com/studies/your-cool-study-post per visualizzare un singolo studio.

2. archive-study.php – Questo è per la pagina di archivio quando un utente naviga su http://yourcoolsite.com/studies per visualizzare un elenco di tutti gli studi.

WordPress, per impostazione predefinita, utilizzerà i modelli single.php e archive.php del tuo tema per il design front-end dei tipi di post personalizzati. Tuttavia, quando esiste un modello specifico per i tipi di post personalizzati, single-study.php e archive-study.php sovrascriveranno le impostazioni predefinite in WordPress.

Pagina singola

Poiché in questa guida utilizziamo il tema predefinito di WordPress Twenty Twenty, dovremo prima creare il nome del file di single-study.php e lavorarci.

Nel file modello del tipo di post singolo, aggiungi questo ciclo di WordPress: 

<?php
	/**
	 * The template for displaying single posts and pages.
	 *
	 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
	 *
	 * @package WordPress
	 * @subpackage Twenty_Twenty
	 * @since 1.0.0
	 */
	
	get_header();
	?>
	
	<main id="site-content" role="main">
	
	        <?php
	
	        if ( have_posts() ) {
	
	                while ( have_posts() ) {
	                        the_post();
	
	                }
	        }
	
	        ?>
	
	</main><!-- #site-content -->
	
	<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
	
	<?php get_footer(); ?>

Pagina archivio

La pagina di archivio per il tipo di post utilizza lo stesso identico processo della pagina singola. L'unica differenza è che utilizzerai il modello archive-study.php anziché single-study.php.

Per la tua pagina di archivio, vorrai che si colleghi a ogni studio e mostri solo il titolo di "Studio".

Naturalmente, sentiti libero di divertirti con questo codice: 

<?php
  /*
  Template Name: Archive-Study
  */
  get_header(); ?>

  <div id="container">
  	<div id="content" role="main">

  		<?php the_post(); ?>
  		<h1 class="entry-title"><?php the_title(); ?></h1>
  		
  		<?php get_search_form(); ?>
  		
  		<h2>Archives by Month:</h2>
  		<ul>
  			<?php wp_get_archives('type=monthly'); ?>
  		</ul>
  		
  		<h2>Archives by Subject:</h2>
  		<ul>
  			 <?php wp_list_categories(); ?>
  		</ul>

  	</div><!-- #content -->
  </div><!-- #container -->


  <?php get_footer(); ?>

Ora che la tua pagina di archivio è perfettamente a posto, sembra che tu abbia finito. Ma cosa succede se hai cento o più casi studio?

Come modificare la query della pagina di archivio

Le pagine di archivio elencheranno solo il numero di elementi che l'amministratore specifica in Impostazioni > Lettura. Spesso non vorrai applicare lo stesso limite ai tipi di post personalizzati del tuo blog principale o del feed degli articoli.

Quando vuoi rimuovere il limite dalla tua pagina di archivio, modifica semplicemente la query principale usando l'hook pre_get_posts.

Dopo esserti agganciato a pre_get_posts, sarai in grado di accedere e modificare l'oggetto WP_Query principale.

Per elencare tutti gli studi nella pagina del tuo archivio, dovrai:

  1. Usa l'hook pre_get_posts.
  2. Rileva se il metodo is_main_query è ciò che esegue la query principale.
  3. Rileva se sei nella pagina dell'archivio dello studio utilizzando is_post_type_archive.
  4. Nella WP_Query principale, imposta posts_per_page su -1. Questo rimuove tutti i limiti numerici ed elenca tutto. 
<?php
  add_action('pre_get_posts', function( WP_Query $query ) {
    if($query->is_main_query() && $query->is_post_type_archive('study')) {
      $query->set('posts_per_page', -1);
    }
  });

Usando l'hook pre_get_posts, accedi direttamente alla query SQL che WordPress è già in esecuzione. La query ti dà accesso a post, pagine e tipi di post personalizzati senza scrivere alcun SQL.

È sempre un bonus.

Utilizzo di un plug-in per i tipi di post personalizzati di WordPress

Se non sei il tipo da scavare nel codice e preferisci creare e modificare i tuoi tipi di post personalizzati con un plug-in, l'interfaccia utente del tipo di post personalizzato fornisce un'interfaccia facile da usare per la registrazione e la gestione dei tipi di post personalizzati (e tassonomie).

Il plugin è molto apprezzato ed è configurato per funzionare con le versioni di WordPress 5.5 e successive.

È stato testato fino a 5.6.

Utilizzo di un generatore per i tipi di post personalizzati di WordPress

Vuoi un modo davvero semplice per ottenere il tuo codice per i tipi di post personalizzati (o tassonomie)? Dai un'occhiata a GeneraWP. Puoi utilizzare GenerateWP per creare un'ampia gamma di codice personalizzato. È anche abbastanza semplice. Basta compilare il modulo corretto e ottenere il codice da copiare/incollare.

Puoi persino vedere il webinar di formazione sui tipi di post personalizzati di alcuni anni fa che presentava GenerateWP. La buona notizia è che i tipi di post personalizzati sono in circolazione da così tanto tempo che la formazione è ancora rilevante.

I tipi di post di WordPress sono il tuo nuovo migliore amico

Sia che tu stia lavorando con i tipi di post di WordPress manualmente o con un plug-in, è estremamente importante che il tuo sito sia dotato del miglior plug-in di backup di WordPress disponibile.

La modifica del codice può sempre causare conflitti che potrebbero indirizzare il tuo sito in una direzione indesiderata.

In questi casi, BackupBuddy e iThemes Security, un potente plug-in di sicurezza per WordPress, verranno in soccorso e ti riporteranno al lavoro in sicurezza.