Ottenere il massimo dai formati di post progettazione di parti di contenuto

Finora in questa serie ho introdotto i formati dei post e come utilizzare modelli diversi per i diversi formati di post nel ciclo. In questo post ti mostrerò come impostare applicare diversi css a parti del contenuto di un post in base al formato del post.

Gli esempi che ti mostrerò sono abbastanza semplici, cambiano solo il colore di sfondo, ma una volta compresi questi concetti di base potrai usarli per applicare diversi disegni a diversi formati di post e davvero rendere il tuo tema eccezionale per come gestisce media e altri contenuti specializzati.

Usando Post Post Post Classes

I temi conformi agli standard utilizzano la funzione post_class () per impostare le classi per il contenitore che circonda il contenuto del post. Questa funzione aggiunge una classe in base al formato del post. Quindi, per esempio, se un post ha il formato 'immagine' il post avrà una 'immagine di formato' di classe. In questo modo è molto facile indirizzare i contenitori all'interno del post tramite CSS senza dover modificare alcun modello di pagina o scrivere funzioni specifiche.

Per cambiare il colore di sfondo del contenuto del post in tutti i post immagine, puoi semplicemente aggiungere questo css allo style.css del tuo tema:

.format-image .entry-content background-color: red; 

A volte non è possibile ottenere ciò che si desidera senza aggiungere classi aggiuntive o modificare completamente il layout. La seconda opzione è il motivo per cui utilizziamo parti di contenuto diverse. Ho illustrato come utilizzare diverse parti di contenuto per formato post nel mio ultimo post in questa serie.

Una volta che hai una parte di contenuto diversa puoi apportare le modifiche che desideri, ad esempio, magari nei post di immagine che vuoi rendere l'immagine in primo piano un contenitore a larghezza intera invece di un piccolo elemento fluttuante.

Fare distinti post formati nell'indice dei blog

Se vuoi semplicemente cambiare il modo in cui un formato post appare nell'indice del blog, per farlo risaltare meglio, puoi aggiungere un filtro per aggiungere classi aggiuntive a post_class () in situazioni specifiche. Possiamo utilizzare il filtro post_class per aggiungere classi specifiche al post in situazioni specifiche, ad esempio se ha l'immagine del formato e non è la visualizzazione di un singolo post.

function slug_preview_image_class ($ classes) global $ post; if (has_post_format ('image', $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'preview-image-post'; restituire $ classi;  add_filter ('post_class', 'slug_preview_image_class');

Questo filtro ti consente di indirizzare i post delle immagini nell'indice o nell'archivio del blog, senza influire sul loro aspetto come post singoli, scegliendo come target la classe "anteprima-immagine-post".

Potresti anche voler semplicemente aggiungere una classe di anteprima a qualsiasi post con un formato di post diverso dal formato standard. Il filtro che ho appena mostrato può essere modificato per fare ciò aggiungendo manualmente tutti i formati di post a cui il tema supporta un array has_post_format ().

Naturalmente, potresti non sapere quali formati dei post supportano il tema, se ad esempio aggiungi questa funzione in un plug-in, invece che in un tema. Se è così sarebbe meglio ottenere l'elenco dei formati post attualmente registrati usando get_theme_support ('post-formati') come puoi vedere in questa funzione di filtro modificata.

function slug_post_format_preview_class ($ classes) global $ post; $ post_formats = get_theme_support ('post-formati'); if (has_post_format ($ post_formats [0], $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'anteprima formato'; restituire $ classi;  add_filter ('post_class', 'slug_post_format_preview_class');

Con questo filtro in posizione puoi ancora indirizzare i singoli formati di post separatamente o tutti insieme. Questo CSS, insieme al filtro che assalta il filtro 'anteprima-formato' cambia lo sfondo del contenuto del post per ogni formato del post in blu, a meno che non sia un post dell'immagine, nel qual caso il colore dello sfondo sarà rosso.

.anteprima-formato .entry-content background-color: # 00F;  .preview-format.format-image .entry-content background-color: # F00; 

C'è più formattazione da fare

Questo articolo ti ha dato un assaggio di come puoi formattare i tuoi diversi formati di post per farli risaltare nel ciclo, o anche per personalizzare il loro aspetto nella visualizzazione di singoli post. Come sempre, ti invito a sperimentare con il codice di esempio e i temi di riferimento che supportano i formati dei post, come ad esempio il tema Socially Awkward from Theme Ibrido.

Se il motivo per cui non utilizzi i formati dei post è solo perché hai così tanti post senza un formato di post, assicurati di vedere il prossimo post di questa serie. Mi occuperò della maggior parte dell'aggiornamento del formato dei post.