{"id":5609,"date":"2019-02-10T17:46:55","date_gmt":"2019-02-10T16:46:55","guid":{"rendered":"https:\/\/www.vla-bag.ch\/2019\/02\/10\/il-post-singolo\/"},"modified":"2025-08-17T18:09:31","modified_gmt":"2025-08-17T16:09:31","slug":"il-post-singolo","status":"publish","type":"post","link":"https:\/\/www.vla-bag.ch\/it\/2019\/02\/10\/il-post-singolo\/","title":{"rendered":"Il Post Singolo"},"content":{"rendered":"
\n
Il singolo post \u00e8 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\u00f2 di cui hai bisogno per creare contenuti categorizzati per il tuo negozio. Tutte le funzioni personalizzate sono dinamiche al 100% e devi semplicemente..: <\/p>
\n
\n
Scrivi il tuo post<\/li>
Aggiungi un estratto del manuale<\/li>
Seleziona la tua immagine in evidenza<\/li>
Dagli una categoria<\/li><\/ul>
\n
\n
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\u00f9 categorie, verr\u00e0 interrogata solo la prima categoria. <\/p>
\n
\n
L’intestazione dell’eroe<\/h2>
\n
\n
L’intestazione di un singolo post \u00e8 piuttosto complicata. Utilizza quattro elementi GeneratePress separati. Tra cui due ganci, un’immagine in evidenza e un elemento di layout. Non c’\u00e8 nulla che l’utente debba fare per visualizzarla o aggiornarla dinamicamente. <\/p>
\n
\n
Le basi<\/h3>
\n
\n
Prima di immergerti nei dettagli, se non conosci il modulo Elementi e i suoi elementi Gancio, Intestazione e Layout, inizia a leggere qui:<\/p>
\n
\n
#1 Gancio: Intestazione personalizzata di un singolo post<\/h4>
\n
\n
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. \u00c8 quindi consigliabile lasciarlo in pace. <\/p>
\n
\n
Se non vuoi l’intestazione personalizzata del post, puoi rimuovere l’elemento Gancio per l’intestazione personalizzata del post singolo <\/strong>. Inoltre, non avrai bisogno dei seguenti elementi di aggancio e di layout. <\/p>
\n
\n
#2 Hook: Dissolvenza dell’elemento di intestazione durante lo scorrimento verso l’alto<\/h4>
\n
\n
Questo hook contiene del semplice javascript vanilla. Fornisce una leggera dissolvenza dell’elemento di intestazione personalizzato durante lo scorrimento. Non \u00e8 necessario alcun CSS. Ecco il JS se ti interessa. <\/p>
\n\r\n
<script>\r\nwindow.onscroll = function () {\r\n var target = document.getElementById(\"custom-post-entry-header\");\r\n\r\n var height = window.innerHeight;\r\n\r\n var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;\r\n\r\n \/\/ Change this if you want it to fade faster\r\n height = height \/ 3;\r\n var fader = (height - scrollTop) \/ height;\r\n if (fader > 0) {\r\n target.style.opacity = fader;\r\n }\r\n\r\n};\r\n<\/script><\/code><\/pre>\r\n
\n
#3 Layout: Rimuovere il titolo di un singolo post<\/h4>
\n
\n
Poich\u00e9 abbiamo l’intestazione personalizzata del post singolo e l’<\/strong> elemento di navigazione del post<\/strong>, non abbiamo bisogno del titolo del post nel nostro contenuto. Quindi questo elemento lo rimuove semplicemente. <\/p>
\n
\n
#4 Intestazione: Immagine in primo piano dell’intestazione di un singolo post<\/h4>
\n
\n
Un elemento di intestazione standard che utilizza l’immagine in evidenza del post come sfondo. \u00c8 stato impostato su una dimensione predefinita utilizzando il Padding e utilizza l’effetto di scorrimento parallasse. <\/p>
\n
\n
Una nota sull’utilizzo di Elements<\/h3>
\n
\n
Duplicazione di elementi<\/h4>
\n
\n
Gli elementi sono come un intelligente tipo di post personalizzato. A volte potresti voler creare pi\u00f9 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. <\/p>
\n
\n
Il contenuto<\/h2>
\n
\n
Il singolo post utilizza una larghezza del contenuto pi\u00f9 ridotta per facilitare la lettura. Con l’elemento di layout aggiornato di GP Premiums 1.8 questo \u00e8 molto semplice da fare. Basta andare su Aspetto > Elementi > Layout Post Singolo -> Scheda Contenuto > Larghezza Contenuto<\/strong>. <\/p>
\n
\n
Da notare che puoi combinare questa impostazione con l’elemento Rimuovi<\/strong> layout del post singolo<\/strong> di cui sopra. Ho tenuto separati i due elementi per chiarezza e nel caso in cui tu voglia rimuoverne uno ma non l’altro. <\/p>
\n
\n
L’elemento di intestazione personalizzato richiede un po’ di CSS per ottenere lo stesso effetto. Per modificare questa larghezza \u00e8 necessario modificare alcuni CSS. Tieni presente che questo CSS \u00e8 stato progettato appositamente per l’intestazione personalizzata. Se la si allarga, potrebbe entrare in conflitto con la navigazione dei post. <\/p>
\n\r\n
Contenuti ristretti Pre GP Premium 1.8<\/h3>
\n
\n
Se non stai utilizzando GP Premium 1.8, la larghezza del post non sar\u00e0 ridotta. Puoi aggiornare alla versione 1.8 oppure trovare il CSS di cui sopra nel Customizer > CSS aggiuntivi e modificarlo in: <\/p>
\n\r\n
La maggior parte dei meta dati del post singolo \u00e8 stata spostata nell’intestazione del post personalizzato. I meta rimanenti, la data e la riga di by sono centrati. <\/p>
\n\r\n
Post singolo - aumento degli spazi bianchi<\/h3>
\n
\n
Per una pi\u00f9 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. <\/p>
\n\r\n
Questo sito \u00e8 stato costruito utilizzando l’editor di WP 5.0 Block (Gutenberg). Per la scrittura dei post \u00e8 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. <\/p>
\n
\n
Messaggi correlati<\/h2>
\n
\n
I post correlati vengono visualizzati sotto ogni post. Questo \u00e8 fornito dall’eccellente WP Show Posts. Anche in questo caso \u00e8 dinamico al 100% e mostra i post della stessa categoria del post corrente. <\/p>
\n
\n
Come ho realizzato i post correlati<\/h3>
\n
\n
#1 Un elenco di WP Show Posts<\/h4>
\n
\n
Nella Dashboard > WP Show Posts<\/strong> vedrai un elenco di post chiamato Related<\/strong>. Il titolo di questo elenco \u00e8 molto importante perch\u00e9 viene utilizzato nel passaggio successivo. Se il nome dell’elenco viene cambiato, dovrai aggiornare il codice che segue. La configurazione dell’elenco \u00e8 piuttosto semplice. Selezioniamo il contenuto e il numero di colonne da visualizzare. NON selezioniamo una tassonomia. Questo verr\u00e0 fatto dal nostro codice. <\/p>
\n
\n
#2 Hook: Messaggi correlati<\/h4>
\n
\n
Utilizziamo il gancio che si trova inAspetto > Elementi > Messaggi correlati.<\/strong> Abbiamo selezionato il gancio before_footer<\/code> 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. <\/p>
\n\r\n
Come indicato al punto #1, il nome dell’Elenco deve corrispondere a questa etichetta.<\/p>
\n
\n
#3 Stilizzazione del blocco dei post correlati<\/h4>
\n
\n
Nel nostro PHP \/ HTML vedrai due classi aggiunte al DIV padre. Sono wpsp-related-posts<\/strong> e grid-container<\/strong>. grid-container<\/strong> \u00e8 una classe di GeneratePress e imposta semplicemente la larghezza del contenitore su quella del Customizer. \u00c8 dinamico, il che \u00e8 positivo. wpsp-related-posts<\/strong> \u00e8 una classe personalizzata e imposta il padding, i margini e i colori di sfondo. Cercala nel Personalizzatore >:<\/strong> <\/p>
\n\r\n
La modifica dei colori o degli stili di sfondo pu\u00f2 essere effettuata modificando il CSS<\/p>
\n","protected":false},"excerpt":{"rendered":"
La suddivisione in categorie dei post per creare guide, istruzioni per l’uso e contenuti in evidenza \u00e8 un ottimo modo per incrementare la presenza del tuo negozio. L’intestazione del singolo post e il singolo post sono stati progettati proprio per questo. Con titolo eroe, estratto e navigazione del post personalizzati. Al 100% dinamico, non devi fare altro che aggiungere contenuti. <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[70],"tags":[],"class_list":["post-5609","post","type-post","status-publish","format-standard","hentry","category-merch-styling-it","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/comments?post=5609"}],"version-history":[{"count":1,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5609\/revisions"}],"predecessor-version":[{"id":5610,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/posts\/5609\/revisions\/5610"}],"wp:attachment":[{"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/media?parent=5609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/categories?post=5609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/it\/wp-json\/wp\/v2\/tags?post=5609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}