Se navighiamo nel Directory dei temi di WordPress, la maggior parte dei temi mostra immagini di copertina. È una caratteristica molto richiesta. La tendenza della copertina è vera anche nel blocco directory del tema anche gli screenshot.
Consideriamo il seguente esempio da Venti Venti (un tema classico) che include a modello di copertina che può essere utilizzato per visualizzare sia in un singolo post che in una pagina, dove l'immagine in primo piano del post viene visualizzata nella parte superiore che si estende sullo schermo del browser, con il titolo del post e altri metadati desiderati di seguito. I modelli di copertina consentono di creare contenuti che si distinguono dai tradizionali vincoli di visualizzazione dei contenuti.
La creazione di modelli di copertina attualmente richiede la scrittura di codice PHP come catturato qui in Modello di copertina del tema predefinito Twenty Twenty. Se guardiamo il template-parts/content-cover.php file, contiene il codice per visualizzare il contenuto quando il cover-template viene utilizzato.
Pertanto, non è possibile creare una copertina personalizzata se non si possiede una profonda conoscenza di PHP. Per molti utenti ordinari di WordPress, l'unica opzione è utilizzare un plug-in come Custom Post Type UI come descritto in questo breve video.
Coprire le sezioni in temi a blocchi
Dal WordPress 5.8, gli autori di temi potrebbero creare modelli personalizzati (come post singolo, autore, categoria e altri) utilizzando una sezione di eroe superiore editor di blocchi blocco di copertina e raggruppati nei loro temi con codice minimo o assente.
Prima di approfondire come vengono create le sezioni di copertina di grandi dimensioni nei modelli di temi a blocchi, diamo un'occhiata brevemente ai due temi a blocchi Ventidue ed Wabi di Rich Tabor (recensione completa qui).
Dietro le quinte, Twenty Twenty-Two implementa un grande colpo di testa di aggiungendo un'immagine nascosta memorizzata come modello nel header-dark-large parti. Considerando che, nel tema Wabi, viene implementato il grande colore di sfondo dell'intestazione in un singolo post accenti di colori di sfondo e un blocco distanziatore di 50px di altezza (righe: 5-9). I colori di accento sono gestiti dal assets/js/accent-colors.js file.
Molti altri hanno scelto di creare una sezione di copertina superiore utilizzando blocco di copertura, che ha consentito agli utenti di modificare il colore di sfondo e aggiungere un'immagine statica dalla Libreria multimediale o caricarla da dispositivi multimediali, senza scrivere alcun codice. Con questo approccio, le immagini del post blocco immagine in primo piano doveva essere aggiunto manualmente a ogni singolo post se volevi avere l'immagine in primo piano del post come immagine di sfondo nei singoli post.
Blocchi di copertina con immagine in evidenza di post dinamico
WordPress 6.0 ha reso disponibile un altro fantastico blocchi di copertina dell'immagine in primo piano funzione, che consente di utilizzare l'immagine in primo piano di qualsiasi post o pagina come immagine di sfondo nel blocco di copertina.
Nella seguente breve video, gli ingegneri di Automattic discutono dell'aggiunta di immagini in primo piano per coprire i blocchi con un esempio da Archeo tema:
Il blocco dell'immagine incluso il blocco dell'immagine in primo piano può essere ulteriormente personalizzato utilizzando duotone colore in theme.json come discusso in questo breve Collegare i punti Video di YouTube (Anne McCarthy di Automatic).
Esempi di casi d'uso (Wei, Modalità luminosa)
Se esaminiamo le immagini in miniatura nel file blocco directory del tema, vediamo che la maggior parte di essi include sezioni di intestazione di copertina di grandi dimensioni. Se scaviamo nei loro file modello, fanno uso di blocchi di copertina con sfondo dell'immagine statica.
Alcuni temi sviluppati di recente utilizzano blocchi di copertina con lo sfondo dinamico dell'immagine in primo piano (ad esempio, Archeo, Wei, Frost, Bright Mode, ecc.). Una breve panoramica della nuova funzionalità è disponibile in questo breve video su GitHub.
Combinazione di colori accentati dinamici caratteristiche di Wabi tema con blocchi di immagini di copertina e post in primo piano, Rich Tabor espande ulteriormente la sua creatività nel suo nuovo Wei tema (recensione completa disponibile qui) per visualizzare immagini di copertina dinamiche da un singolo post.
Nel suo post di annuncio Wei, Scrive il ricco Tabor: “Dietro le quinte, il single.html il modello utilizza un blocco copertina che sfrutta l'immagine in primo piano del post. Quindi la bicromia viene applicata dalla combinazione di colori assegnata al palo. In questo modo, qualsiasi immagine starà bene”.
Se desideri approfondire il blocco della copertina dell'intestazione del tema Wei e imparare a crearne uno personalizzato, ecco un breve video da Frank Klein (WP Development Courses) che spiega passo dopo passo come è stato creato.
Simile al tema Wei, Brian Gardner fa anche uso del blocco di copertina con il blocco di immagini in primo piano nel suo recente Modalità luminosa tema con cui visualizzare contenuti straordinari colori vibranti.
Brian ha detto a WPTavern: “Gli piace di più il tema è il modo in cui viene utilizzato il Cover Block singole pagine. Tira l'immagine in primo piano nel blocco Cover e offre anche stili di blocco personalizzati per le ombre e le opzioni a tutta altezza. […] Mi sento come se questo presentasse davvero ciò che è possibile fare con il moderno WordPress.”
Per maggiori dettagli, ecco il suo sito demo ed recensione completa del tema Modalità luminosa di Brian.
Progettazione di layout complessi con editor di blocchi
Di recente, WordPress ha lanciato un nuovo editor di blocchi progettato homepage di atterraggio e pagina di download. L'annuncio suscitato reazioni contrastanti dai suoi lettori, anche da Matt Mullenweg (Automatic) che ha commentato i 33 giorni necessari per progettare e lanciare una “pagina così semplice”. Potete trovare ulteriori discussioni dietro le quinte qui.
In risposta, ha creato Jamie Marsland di Pootlepress questo video di YouTube dove riproduce una homepage quasi identica in quasi 20 minuti.
Commentando il video di Marsland, Sarah Gooding di WP Travern scrive: “È quello che si potrebbe descrivere come un utente esperto con l'editor di blocchi. Può rimescolare rapidamente righe, colonne e gruppi, regolare il riempimento e i margini secondo necessità e assegnare a ciascuna sezione il colore corrispondente per il disegno. A questo punto, questo non è qualcosa che la maggior parte degli utenti WordPress medi potrebbe fare.
Sebbene l'editor di blocchi abbia fatto molta strada, ci sono ancora crescenti punti deboli per la maggior parte degli sviluppatori di temi e degli utenti ordinari per creare e progettare layout complessi con esso.
Aggiunta di miglioramenti ai blocchi TT2 Gopher
In questa sezione, ti illustrerò come ho aggiunto miglioramenti a Tema TT2 Gopher Blocks a cui ho fatto riferimento nel mio precedente articolo. Ispirato dai blocchi di copertina dei temi che ho descritto in precedenza, ho voluto aggiungere tre modelli di copertina (autore, categoria e copertina singola) al tema.
Durante la navigazione nei siti Web, notiamo due tipi di intestazioni di copertina. L'intestazione maggiormente osservata è la sezione di copertina unita all'intestazione del sito (titolo del sito e navigazione in alto) nel blocco di copertina (ad esempio, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, ecc.). Troviamo anche una sezione di copertina dell'intestazione che non è fusa con l'intestazione del sito e posizionata appena sotto, come questa BBC Future sito web. Per il tema dei blocchi TT2 Gopher, ho optato per quest'ultimo.
Creazione di modelli di intestazione di copertina
Innanzitutto, creiamo modelli di intestazione di copertina per i modelli autore, singolo e altri (categorie, tag) utilizzando i blocchi di copertina. Quindi li convertiremo in modelli (come descritto qui in precedenza) e richiamare i rispettivi modelli di copertina dell'intestazione nei modelli.
Se hai familiarità con l'editor di blocchi, progetta la sezione dell'intestazione utilizzando i blocchi di copertina nell'editor del sito e quindi converti il codice dell'intestazione di copertina in modelli. Tuttavia, se non hai familiarità con l'editor FSE, il modo più semplice è copiare i modelli dal file directory dei modelli in un post, apporta le modifiche necessarie e convertilo in un pattern.
Nel mio precedente articolo CSS-Tricks, ho discusso in dettaglio sulla creazione e l'utilizzo di schemi di blocco. Ecco una breve panoramica del flusso di lavoro che sto utilizzando per creare il modello di intestazione della copertina del post singolo:
Modello di intestazione di copertina a post singolo
Passo 1 : Usando l'interfaccia FSE, creiamo un nuovo file vuoto e iniziamo a costruire la struttura a blocchi come mostrato nel pannello di sinistra.
In alternativa, questo potrebbe essere fatto prima in un post o in una pagina, quindi copiare e incollare il markup in un file di pattern, in un secondo momento.
Passo 2 : Successivamente, per convertire il markup sopra in un pattern, prima dovremmo copiare il markup del codice e incollarlo in un nuovo /patterns/header-single-cover.php nel nostro editor di codice. Dovremmo anche aggiungere il markup dell'intestazione del file di pattern richiesto (ad es. titolo, slug, categorie, inseritore, ecc.).
Ecco l'intero codice del /patterns/header-single-cover.php file:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Passo 3 : Per questa demo, ho usato questa immagine dalla directory delle foto come immagine di sfondo di riempimento e applicato il file Mezzanotte colore a due tonalità. Per utilizzare l'immagine in primo piano in modo dinamico, dovremmo aggiungere "useFeaturedImage":true nel blocco di copertina sostituendo il link dell'immagine di riempimento sopra appena prima del "dimRatio":50 in modo tale che la riga 10 sia simile alla seguente:
In alternativa, l'immagine di riempimento può anche essere modificata facendo clic sostituire e selezionando Usa l'immagine in primo piano opzione:
Ora, i modelli di copertina dell'intestazione dovrebbero essere visibili nel pannello di inserimento dei modelli per l'uso ovunque nei modelli, nei post e nelle pagine.
Archivia le intestazioni di copertina
Ispirato da questo post di WP Tavern e una procedura dettagliata per creare un'intestazione del modello dell'autore, volevo creare un'intestazione di copertina simile e aggiungerla anche al tema TT2 Gopher.
Innanzitutto, creiamo il modello di intestazione della copertina dell'archivio per author.html anche il modello, seguendo il flusso di lavoro sopra. In questo caso, lo sto creando in una nuova pagina vuota, aggiungendo blocchi (come mostrato di seguito nella visualizzazione elenco):
Sullo sfondo della copertina, ho utilizzato la stessa immagine utilizzata nella copertina dell'intestazione del singolo post.
Poiché vorremmo visualizzare una breve biografia dell'autore nel blocco dell'autore, è necessario aggiungere anche una dichiarazione biografica alla pagina del profilo dell'utente, altrimenti verrà visualizzato uno spazio vuoto nel front-end.
Quello che segue è il codice di markup di header-author-cover, che useremo pattern, nel passaggio successivo:
Published by:
Per convertire il markup in a header-author-cover pattern, dovremmo aggiungere il markup dell'intestazione del file di pattern richiesto come descritto in precedenza. Modificando il header-author-cover.php modello, possiamo creare copertine di intestazione simili per tag, tassonomia e altri modelli personalizzati.
I header-category-cover.php modello per il mio category.html modello è disponibile su GitHub.
Creazione di modelli con blocchi di copertina dell'intestazione
WordPress 6.0 e il recente Gutenberg 13.7 funzionalità di creazione di modelli estesi nell'editor di blocchi, consentendo così a molti utenti di WordPress, senza una profonda conoscenza della codifica, di creare i propri modelli personalizzati.
Per informazioni più dettagliate e casi d'uso, ecco a nota di personalizzazione completa di Justin Tadlock.
Editor di blocchi consente di creare vari tipi di modelli, inclusi i modelli di copertina. Diamo una breve panoramica su come combinare blocco di copertura ed post blocco immagine in primo piano con la nuova interfaccia utente dei modelli, è facile creare vari tipi di modelli personalizzati di copertina anche con competenze di codifica insufficienti o nulle.
La creazione di modelli è stata resa molto più semplice con Gutenberg 13.7. Come creare modelli di blocco con codici ed nell'editor del sito è descritto in Manuale tematico e in mio precedente articolo.
Modello dell'autore con blocco di copertina
Markup superiore (sezione di intestazione) di author.html il modello è mostrato di seguito (riga 6):
...
...
...
... Ecco gli screenshot delle intestazioni di copertina per il author.html ed category.html modelli:
L'intera il codice per entrambi i modelli è disponibile su GitHub.
Colonna singola con blocco di copertura
Per visualizzare il blocco di copertina nel nostro singolo post, dobbiamo chiamare il header-cover-single pattern sotto la sezione dell'intestazione (riga 3):
....
....
....Ecco una schermata che mostra la vista front-end del singolo post con la sezione di copertina dell'intestazione:
L'intera single-cover.html modello è disponibile su GitHub.
È possibile trovare ulteriori esercitazioni dettagliate sulla creazione di un file sezione del post dell'intestazione dell'eroe ed utilizzando i blocchi di copertina dello sfondo dell'immagine in primo piano on Taverna WP ed Modifica del sito completo di LPI.
Ecco qua!
Risorse utili
Blocco di copertina dell'immagine in primo piano
Blog post
Anche se i temi dei blocchi, in generale, lo sono ricevere molti respingimenti dai membri della comunità di WordPress, secondo me, sono il futuro di WordPress, anche. Con i temi a blocchi, gli autori di temi amatoriali, senza le profonde capacità di codifica e la padronanza dei linguaggi PHP e JavaScript, possono ora creare temi con layout complessi con una sezione di copertina dell'eroe come descritto in questo articolo combinato con modelli ed variazioni di stile.
Come uno dei primi utenti di Gutenberg, non potrei essere più entusiasta dei nuovi strumenti per la creazione di temi come crea un tema di blocco plugin e altri che consentono agli autori di temi di ottenere quanto segue direttamente dall'interfaccia utente dell'editor di blocchi senza scrivere alcun codice:
- (I) creare
- (ii) sovrascrivere i file del tema ed esportarli
- (iii) generare un tema vuoto o figlio e
- (iv) modificare e salvare la variazione di stile del tema corrente
Inoltre, le recenti iterazioni del plugin Gutenberg consentono l'abilitazione tipografia fluida ed allineamenti di layout e altri controlli stilistici utilizzando solo theme.json file senza JavaScript e una riga di regole CSS.
Grazie per aver letto e condividere i tuoi commenti e pensieri qui sotto!