Il singolo post è stato progettato per offrire un’introduzione audace, un’immagine in evidenza di grandi dimensioni e un contenuto pulito e facile da leggere. Inizia con un’intestazione hero personalizzata e termina con una sezione di post correlati. Dovrebbe fornire tutto ciò di cui hai bisogno per creare contenuti categorizzati per il tuo negozio. Tutte le funzioni personalizzate sono dinamiche al 100% e devi semplicemente..:
- Scrivi il tuo post
- Aggiungi un estratto del manuale
- Seleziona la tua immagine in evidenza
- Dagli una categoria
Una nota sulle categorie: la navigazione dei post personalizzati e la sezione dei post correlati visualizzano i contenuti in base alla categoria del post corrente. Utilizza la prima categoria assegnata al post. Quindi, se scegli di assegnare un post a più categorie, verrà interrogata solo la prima categoria.
L’intestazione dell’eroe
L’intestazione di un singolo post è piuttosto complicata. Utilizza quattro elementi GeneratePress separati. Tra cui due ganci, un’immagine in evidenza e un elemento di layout. Non c’è nulla che l’utente debba fare per visualizzarla o aggiornarla dinamicamente.
Le basi
Prima di immergerti nei dettagli, se non conosci il modulo Elementi e i suoi elementi Gancio, Intestazione e Layout, inizia a leggere qui:
I quattro elementi
#1 Gancio: Intestazione personalizzata di un singolo post
Questo elemento di aggancio contiene PHP personalizzato. Fornisce la categoria, il titolo del post e l’estratto del post. La modifica di questa impostazione richiede la conoscenza di PHP. È quindi consigliabile lasciarlo in pace.
Se non vuoi l’intestazione personalizzata del post, puoi rimuovere l’elemento Gancio per l’intestazione personalizzata del post singolo . Inoltre, non avrai bisogno dei seguenti elementi di aggancio e di layout.
#2 Hook: Dissolvenza dell’elemento di intestazione durante lo scorrimento verso l’alto
Questo hook contiene del semplice javascript vanilla. Fornisce una leggera dissolvenza dell’elemento di intestazione personalizzato durante lo scorrimento. Non è necessario alcun CSS. Ecco il JS se ti interessa.
<script>
window.onscroll = function () {
var target = document.getElementById("custom-post-entry-header");
var height = window.innerHeight;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
// Change this if you want it to fade faster
height = height / 3;
var fader = (height - scrollTop) / height;
if (fader > 0) {
target.style.opacity = fader;
}
};
</script>#3 Layout: Rimuovere il titolo di un singolo post
Poiché abbiamo l’intestazione personalizzata del post singolo e l’ elemento di navigazione del post, non abbiamo bisogno del titolo del post nel nostro contenuto. Quindi questo elemento lo rimuove semplicemente.
#4 Intestazione: Immagine in primo piano dell’intestazione di un singolo post
Un elemento di intestazione standard che utilizza l’immagine in evidenza del post come sfondo. È stato impostato su una dimensione predefinita utilizzando il Padding e utilizza l’effetto di scorrimento parallasse.
Una nota sull’utilizzo di Elements
Duplicazione di elementi
Gli elementi sono come un intelligente tipo di post personalizzato. A volte potresti voler creare più varianti di questi elementi. Invece di crearli da zero, puoi utilizzare il plugin Duplicate Post. Assicurati di selezionare l’opzione Elementi nelle impostazioni del plugin e di utilizzare l’opzione Nuova bozza che offre per qualsiasi elemento.
Il contenuto
Il singolo post utilizza una larghezza del contenuto più ridotta per facilitare la lettura. Con l’elemento di layout aggiornato di GP Premiums 1.8 questo è molto semplice da fare. Basta andare su Aspetto > Elementi > Layout Post Singolo -> Scheda Contenuto > Larghezza Contenuto.
Da notare che puoi combinare questa impostazione con l’elemento Rimuovi layout del post singolo di cui sopra. Ho tenuto separati i due elementi per chiarezza e nel caso in cui tu voglia rimuoverne uno ma non l’altro.
L’elemento di intestazione personalizzato richiede un po’ di CSS per ottenere lo stesso effetto. Per modificare questa larghezza è necessario modificare alcuni CSS. Tieni presente che questo CSS è stato progettato appositamente per l’intestazione personalizzata. Se la si allarga, potrebbe entrare in conflitto con la navigazione dei post.
#post-nav .post-nav-entry-header {
max-width: 680px;
margin-left: auto;
margin-right: auto
}Contenuti ristretti Pre GP Premium 1.8
Se non stai utilizzando GP Premium 1.8, la larghezza del post non sarà ridotta. Puoi aggiornare alla versione 1.8 oppure trovare il CSS di cui sopra nel Customizer > CSS aggiuntivi e modificarlo in:
#post-nav .post-nav-entry-header, .single-post #content {
max-width: 680px;
margin-left: auto;
margin-right: auto
}Post singolo - Data e riga centrale
La maggior parte dei meta dati del post singolo è stata spostata nell’intestazione del post personalizzato. I meta rimanenti, la data e la riga di by sono centrati.
.single-post .entry-header {
text-align: center;
}Post singolo - aumento degli spazi bianchi
Per una più chiara definizione della struttura del contenuto dei post ho aumentato lo spazio tra i paragrafi e i titoli H2. In questo modo si identifica chiaramente al lettore che sta iniziando una nuova sezione. Questo CSS crea uno spazio bianco maggiore sopra il blocco H2 rispetto a qualsiasi altro tipo di blocco.
.single-post .entry-content *+h2 {
margin-top: 64px;
}Aggiunta di contenuti
Questo sito è stato costruito utilizzando l’editor di WP 5.0 Block (Gutenberg). Per la scrittura dei post è uno strumento eccellente. Naturalmente puoi installare e utilizzare l’editor classico per la scrittura. Allo stesso modo puoi aggiungere il tuo page builder preferito, anche se personalmente non lo userei mai per scrivere i post.
Messaggi correlati
I post correlati vengono visualizzati sotto ogni post. Questo è fornito dall’eccellente WP Show Posts. Anche in questo caso è dinamico al 100% e mostra i post della stessa categoria del post corrente.
Come ho realizzato i post correlati
#1 Un elenco di WP Show Posts
Nella Dashboard > WP Show Posts vedrai un elenco di post chiamato Related. Il titolo di questo elenco è molto importante perché viene utilizzato nel passaggio successivo. Se il nome dell’elenco viene cambiato, dovrai aggiornare il codice che segue. La configurazione dell’elenco è piuttosto semplice. Selezioniamo il contenuto e il numero di colonne da visualizzare. NON selezioniamo una tassonomia. Questo verrà fatto dal nostro codice.
#2 Hook: Messaggi correlati
Utilizziamo il gancio che si trova inAspetto > Elementi > Messaggi correlati. Abbiamo selezionato il gancio before_footer e spuntato Esegui PHP. Le regole di visualizzazione sono impostate su Tutti i post. Per il contenuto utilizziamo il PHP invece del solito shortcode di WP Show Posts. In questo modo visualizzeremo dinamicamente i nostri contenuti.
<div class="wpsp-related-posts grid-container">
<h2>Related Posts</h2>
<?php
if ( is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
} else {
$cat = get_category( get_query_var( 'cat' ) );
}
$cat_slug = $cat->slug;
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>In questa riga vedrai il nome dell’elenco related:
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );Come indicato al punto #1, il nome dell’Elenco deve corrispondere a questa etichetta.
#3 Stilizzazione del blocco dei post correlati
Nel nostro PHP / HTML vedrai due classi aggiunte al DIV padre. Sono wpsp-related-posts e grid-container.
grid-container è una classe di GeneratePress e imposta semplicemente la larghezza del contenitore su quella del Customizer. È dinamico, il che è positivo.
wpsp-related-posts è una classe personalizzata e imposta il padding, i margini e i colori di sfondo. Cercala nel Personalizzatore >:
.wpsp-related-posts {
background-color: #f2f3f4;
padding: 64px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpsp-related-posts h2 {
margin-bottom: 64px;
}La modifica dei colori o degli stili di sfondo può essere effettuata modificando il CSS
