Come colorare i post del blog Divi per autore

Uno degli obiettivi principali di Divi è assicurarsi che ogni elemento del tuo sito Web abbia un bell'aspetto e i post del blog non fanno eccezione. Tuttavia, c'è sempre spazio per miglioramenti e la codifica a colori dei post del tuo blog per autore offre agli utenti un modo per navigare nei tuoi contenuti in modo più efficiente (oltre a identificare i loro scrittori preferiti!).

In questo articolo, parleremo di più del motivo per cui potresti voler codificare a colori i tuoi post sul blog Divi e come farlo in due semplici passaggi. È tempo di una nuova mano di vernice!

Perché dovresti considerare la codifica a colori dei tuoi post sul blog Divi

Prima di andare oltre, chiariamo cosa intendiamo per codifica a colori dei tuoi post sul blog Divi. Nella prossima sezione, ti insegneremo come assegnare a ciascuno dei tuoi autori un colore che apparirà come sfondo per i propri post. In questo esempio, ho assegnato ai miei post (come autore1) un azzurro molto accattivante :

L'effetto in sé è relativamente semplice, ma offre un modo efficace per differenziare gli scrittori. Gli utenti possono riconoscere facilmente i nuovi pezzi dei loro scrittori preferiti a colpo d'occhio. Naturalmente, rendere più prominente il nome dell'autore potrebbe avere lo stesso effetto, ma potrebbe non essere visivamente sorprendente.

La tua unica preoccupazione è la scelta dei colori. Prendi ad esempio lo screenshot all'inizio di questa sezione: il nostro indice del blog Divi utilizza uno sfondo bianco, quindi abbiamo deciso di utilizzare colori pastello chiari per i post dei nostri autori. Vediamo cosa succede se scegliamo una combinazione di colori diversa:

Certo, questo è un esempio estremo, ma ci aiuta a illustrare il nostro punto. Se vuoi colorare i tuoi post, dovrai considerare attentamente la tua tavolozza, usando uno strumento adatto per aiutarti se necessario. L'uso di colori contrastanti per evidenziare la differenza tra ogni post può aiutare gli utenti a identificare rapidamente gli autori, ma può anche rovinare lo stile del tuo blog e rendere difficile la lettura dei tuoi contenuti.

Come colorare i post del blog Divi in ​​base all'autore (in 2 passaggi)

Ora che abbiamo coperto la teoria, è ora di passare a come codificare a colori i post del blog Divi. L'abilitazione di questa funzione richiede solo due passaggi, ma ci sono alcune considerazioni da fare prima di iniziare.

Per cominciare, ti consigliamo di eseguire il backup del tuo sito WordPress, che è sempre una buona idea quando si apportano modifiche. In secondo luogo, ti consigliamo di creare un tema figlio Divi, quindi le tue modifiche rimarranno una volta aggiornato il tema.

Infine, dovrai utilizzare un client FTP per il passaggio numero uno. Useremo FileZilla, ma se c'è un altro strumento che preferisci, fallo.

Passaggio 1: aggiungi uno snippet di codice al file functions.php del tema del tuo bambino

Per fare ciò, dovrai aprire il tuo client FTP e accedere al server del tuo sito. Da lì, vai alla directory public_html / wp-content/themes/ , quindi trova la cartella del tema figlio. Tieni presente che la cartella public_html o root può essere denominata www o dopo il dominio del tuo sito, a seconda del tuo host:

Una volta individuata la cartella del tema figlio, aprila e cerca il file functions.php all'interno. Ora, fai clic con il pulsante destro del mouse su di esso e premi l'opzione che legge Visualizza / Modifica :

Questo ti chiederà di aprire il file con il tuo editor di testo predefinito. Dato che abbiamo a che fare con un tema figlio, il tuo file functions.php dovrebbe essere per lo più nudo a parte l'accodamento delle funzioni del genitore. Stiamo per aggiungere un frammento che crea automaticamente una nuova classe per ognuno dei vostri autori con l'auto- prefisso. Ad esempio, se hai un utente WordPress di nome John, puoi utilizzare la classe author-john . Questo ci consentirà di aggiungere del codice CSS in seguito.

Quindi, aggiungi il seguente frammento PHP dopo la riga // END ENQUEUE PARENT ACTION :

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

Ora salva le modifiche, chiudi l'editor e il gioco è fatto! Tieni presente che dovrai utilizzare caratteri minuscoli affinché la tua classe funzioni, indipendentemente dall'autore con cui hai a che fare. Sarà importante per il passaggio numero due.

Passaggio 2: specifica un colore per ogni autore utilizzando l'opzione CSS personalizzata di Divi

Ora la nostra nuova funzione è pronta, il prossimo passo è impostare un colore per ciascuno dei tuoi autori. Divi ti consente di farlo con la sua funzione CSS personalizzato , poiché qualsiasi codice aggiunto influirà sull'intero tema. Per trovarlo, vai alla dashboard di WordPress e vai alla scheda Divi > Opzioni del tema , quindi scorri verso il basso fino alla casella CSS personalizzato alla fine della pagina:

Dovrai aggiungere una nuova riga di CSS all'interno di questo campo per ciascuno dei tuoi autori. Ad esempio, se hai un autore con il nome utente autore1, ecco come impostare un colore particolare per loro:

.author-author1 {background-color: #C1F3FA !important;}

Tieni presente che devi aggiungere il prefisso dell'autore alla tua classe, indipendentemente dal tuo nome utente. Dopo aver indicato un colore di sfondo, devi anche assicurarti di dichiarare che il codice è !important . In poche parole, questo dà al codice più peso e sovrascrive eventuali conflitti che potrebbero sorgere - senza di esso, questa funzione non funzionerà.

Andiamo su un ultimo esempio. In questo, assegneremo colori diversi a due autori. Ecco il codice che abbiamo aggiunto al nostro campo CSS personalizzato Divi:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

Ora, ecco come appare dal front-end:

Mettendo da parte la scelta del colore, ci sono altre modifiche che puoi apportare ai tuoi post sul blog Divi. Ad esempio, puoi modificare la lunghezza degli estratti del tuo blog o modellare le "cartoline" dei tuoi post in diversi modi. Il tuo obiettivo principale dovrebbe essere quello di trovare lo stile perfetto per il tuo blog, quindi non aver paura di giocare con Divi e vedere cosa può fare!

Conclusione

La codifica a colori dei post del tuo blog da parte del loro autore è una semplice funzionalità che può aiutare l'utente a navigare nei tuoi contenuti molto più facilmente (in particolare se disponi di un ampio archivio). Inoltre, molti dei tuoi utenti probabilmente apprezzeranno la possibilità di riconoscere i post dei loro autori preferiti solo dal colore.

Prima di iniziare a modificare i file, ricordati di eseguire il backup del tuo sito e di impostare un tema figlio, in modo che le modifiche persistano in futuro. Una volta fatto, questi sono i due passaggi che devi seguire per codificare a colori i tuoi post del blog Divi per autore:

1. Modifica il file functions.php del tuo tema figlio.
2. Specifica un colore per ciascuno dei tuoi autori utilizzando l'opzione CSS personalizzata di Divi.

Hai domande su come codificare a colori i post del blog Divi per autore? Chiedi via nella sezione commenti qui sotto!

Immagine in miniatura dell'articolo di RaZZers / shutterstock.com.