Come creare modelli personalizzati a post singolo in WordPress

Hai mai visto una pagina dei dettagli di un post con un layout completamente diverso da altri post sullo stesso sito? Probabilmente è perché utilizza un modello personalizzato. Puoi assegnare un modello personalizzato a singoli post, offrendoti una maggiore flessibilità sull'aspetto del tuo sito.

Interessato a imparare come creare un modello di post singolo personalizzato? In questo post, ti mostrerò come creare facilmente il tuo!

Il vantaggio dei modelli personalizzati

Prima di iniziare a crearne uno, esploriamo perché potresti aver bisogno di un modello personalizzato e cosa fa.

Se desideri che un particolare post o tipo di post si distingua dal resto dei tuoi contenuti, potresti prendere in considerazione la creazione di un modello di post singolo personalizzato. Questo modello verrà applicato solo ai post a cui lo assegni, il che significa che può avere un layout completamente diverso rispetto ai tuoi post standard. Un design e un layout unici possono quindi aumentare il coinvolgimento degli utenti per quel particolare post.

Pronto a sviluppare il tuo? La creazione e l'utilizzo di un modello di post personalizzato è simile a un modello di pagina personalizzato.

Come creare un modello di post personalizzato

Userò il tema Twenty Seventeen per il mio esempio, ma il processo sarà lo stesso per qualsiasi tema.

Prima di creare un modello di post personalizzato, creerò prima un tema figlio. Puoi lavorare nel tema principale, ma dal momento che stai creando un modello personalizzato, se aggiorni il tema principale perderai il tuo modello. Per questo motivo, è buona norma mantenere i propri modelli personalizzati separati dal tema principale.

Per un template personalizzato, devi definire un Template Name (il nome del template) e un Template Post Type (dove verrà utilizzato questo template). Sembra così:

 [php]
<?php
/* Nome modello: Post a larghezza intera * Tipo di messaggio modello: post*/ /*Il modello per la visualizzazione di singoli post a tutta larghezza. */
get_header( );
?>
[/php]

Quando salvi il file, mantieni il nome del file relativo al nome del modello, come full-width-post.php . Se visualizzi un post dal pannello di amministrazione, mostrerà il nuovo modello in un menu a discesa della sezione Attributi post.

Il nostro modello personalizzato è pronto, ma non è ancora utile. Rendiamolo un po' più vantaggioso!

Nota: lavoreremo su più file, quindi tieni traccia dei nomi dei file e delle cartelle.

Ecco il layout attuale delle pagine dei post del blog nel tema Twenty Seventeen. Sono contento di questo, quindi lo lasceremo stare.

Ora, supponiamo che tu voglia un layout a larghezza intera per alcuni post. Metteremo il titolo del post sopra i metadati. I metadati dovrebbero avere un bordo in alto e in basso e sia il titolo che i metadati dovrebbero essere allineati al centro. Ecco il wireframe:

Per creare questo layout, devi trovare quale file è responsabile della visualizzazione delle pagine dei dettagli del post. Nella maggior parte dei temi, single.php è il file, a meno che non ci siano determinati modelli predefiniti. La struttura del codice varia da tema a tema, quindi potrebbe essere necessario un po' di apprendimento per capire come funziona il tuo particolare tema.

Una volta trovato il file che visualizza le pagine dei dettagli del post, dovresti scoprire se viene utilizzata una funzione per chiamare un altro file o se il modello viene creato direttamente. In questo esempio con il tema Twenty Seventeen, è la funzione get_template_part.

Il percorso get_template_part è la parte più importante da seguire qui.

 [php]

<div class="wrap">

<div id="primary" class="area-contenuto">
        	<main id="principale" class="sito-principale" role="principale">
              	<?php /* Inizia il ciclo */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // Se i commenti sono aperti o abbiamo almeno un commento, carica il modello di commento. if ( comments_open() || get_comments_number() ) : comments_template(); finisci se; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Post precedente', 'ventisettedici' ). Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . ventiseventeen_get_svg( array( 'icon' => 'freccia-sinistra' ) ) . '</ span>%title</span>',
                          	'next_text' => '<span class="screen-reader-text">' . __( 'Post successivo', 'ventisettedici' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Avanti', 'ventisettedici' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . Twentyseventeen_get_svg( array( 'icon' => 'freccia-destra' ) ) . '</span></span>',
                    	));
              	finementre; // Fine del ciclo.
              	?>
[/php]

Come puoi vedere, si riferisce a un percorso:

 [php]
get_template_part( 'template-parts/post/content', get_post_format()
);
[/php] 

Quindi il file content.php viene chiamato all'interno single.ph per visualizzare la pagina dei dettagli del post.

Ora che sai come funziona il file single.php , copiamo il codice da esso e incolliamolo nel nostro file full-width-post.php precedentemente creato nel child theme. Poiché sarà un modello a larghezza intera, rimuoveremo la barra laterale.

Ora copia il file content.php dal percorso sopra indicato. Puoi incollarlo nella stessa directory in cui esiste il tuo file modello, ma suggerirei di seguire la stessa struttura di cartelle del tema principale.

Puoi mantenere il nome del file così com'è, ma se desideri modificare qualcosa nel modello predefinito causerà un conflitto. Per evitare problemi, suggerirei di rinominare il file e mantenerlo pertinente al nome del modello, ad esempio content-full-width.php .

I file sono a posto, quindi ora modifichiamo il codice per scambiare il titolo del post e i metadati del post.

 [php]

<header class="intestazione-voce">
        	<?php

        	if (è_singolo()) {
              	il titolo( '

<h1 class="titolo-voce">', '</h1>

');
        	} elseif ( is_front_page() && è_home() ) {
              	il titolo( '

<h3 class="titolo della voce"><a href="' . esc_url(get_permalink()). '" rel="segnalibro">', '</a></h3>

');
        	} altro {
              	il titolo( '

<h2 class="titolo della voce"><a href="' . esc_url(get_permalink()). '" rel="segnalibro">', '</a></h2>

');
        	}

        	if ( 'post' === get_post_type() ) {

              	eco '

<div class="entry-meta">';
                    	if (è_singolo()) {
                    	  	ventidiciassette_posted_on();
                    	} altro {
                          	echo ventidiciassette_tempo_link();
                          	ventidiciassette_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</header>

<!-- .entry-header -->
[/php]

Per utilizzare questo modello, modifica il post desiderato dall'amministratore di WordPress e assegna il modello dal menu a discesa.

Se controlli il post sul front-end, non è ancora a larghezza intera, ma il titolo e i metadati sono stati scambiati di posto, quindi sappiamo che il post utilizza il nostro modello personalizzato

Dobbiamo aggiungere alcuni CSS per renderlo a tutta larghezza. WordPress genera automaticamente una classe secondo il nome del modello nella sezione del corpo.

Usa quella classe per scegliere come target questo particolare modello. Puoi aggiungere il CSS al file style.css del tema child.

 [css]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
galleggiante: nessuno;
larghezza:auto;
}

.post-template-full-width-post .entry-header{
text-align:center;
margine inferiore: 1,3 em;
}

.post-template-full-width-post .entry-meta{
border-top:1px solido #ccc;
border-bottom:1px solido #ccc;
imbottitura: 15px 0;
}
[/css]

Ora abbiamo il layout come volevamo. Qualsiasi post che utilizza questo modello avrà esattamente lo stesso stile.

Puoi creare tutti i modelli personalizzati che desideri per soddisfare le tue esigenze. Puoi persino creare modelli basati su categorie di post.

Posso usare un plugin per questo?

Se non ti senti a tuo agio con i codici PHP, puoi utilizzare alcuni plug-in, ma devo ammettere che ci sono pochissimi plug-in disponibili per creare modelli di post personalizzati e la maggior parte di essi non è molto utile perché devi comunque creare manualmente il modello.

Ho trovato molto utile il plug-in Post Custom Templates Lite. È un plug-in gratuito che ti consente di creare modelli di post senza alcuna codifica in una bella interfaccia drag-and-drop. Ha molte opzioni di personalizzazione, quindi se vuoi personalizzare un modello di post, in generale questo plugin può aiutarti.

Nota: la versione gratuita consente solo di personalizzare i normali modelli di post. Devi utilizzare la versione pro per poter creare modelli di post personalizzati e ottenere alcune funzionalità aggiuntive.

Conclusione

Sia che tu lavori manualmente o utilizzi un plug-in per creare un modello di post singolo personalizzato, consente ai tuoi post più importanti di distinguersi dagli altri. Per ispirazione, controlla il sito di Brian Dean; utilizza un modello particolare per i suoi post guida definitivi per renderli unici rispetto al resto dei suoi post.

Quindi, provalo e crea il tuo modello di post singolo unico! Per ottenere i migliori risultati per ogni sito che crei, scegli la piattaforma di hosting gestito di WP Engine come unica fonte per l'hosting WordPress!