Cum să colorați codurile postate pe blogul Divi după autor

Unul dintre obiectivele principale ale Divi este să vă asigurați că fiecare element de pe site-ul dvs. arată bine, iar postările de pe blog nu fac excepție. Cu toate acestea, există întotdeauna loc de îmbunătățire, iar codarea pe culori a postărilor de pe blog de către autor oferă utilizatorilor o modalitate de a naviga mai eficient în conținutul dvs. (precum și de a-și identifica scriitorii preferați!).

În acest articol, vom vorbi mai multe despre motivele pentru care ați putea dori să codificați postările de pe blogul dvs. Divi și cum să faceți acest lucru în doi pași simpli. Este timpul pentru un nou strat de vopsea!

De ce ar trebui să luați în considerare codarea în culori a postărilor dvs. de blog Divi

Înainte de a merge mai departe, să clarificăm ce înțelegem prin codarea culorilor postărilor dvs. de pe blogul Divi. În secțiunea următoare, vă vom învăța cum să atribuiți fiecărui scriitor o culoare care va apărea ca fundal pentru propriile postări. În acest exemplu, mi-am atribuit propriile postări (ca autor1) un albastru deschis foarte atrăgător :

Efectul în sine este relativ simplu, dar oferă un mod impactant de a diferenția scriitorii. Utilizatorii pot recunoaște cu ușurință piese noi de către scriitorii lor preferați dintr-o privire. Desigur, a face numele autorului mai proeminent poate avea același efect, dar poate să nu fie la fel de izbitor din punct de vedere vizual.

Singura dvs. preocupare în acest sens este alegerea culorilor. Luați, de exemplu, captura de ecran de la începutul acestei secțiuni - indexul blogului Divi utilizează un fundal alb, așa că am decis să rămânem cu culori pastelate deschise pentru postările autorilor noștri. Să vedem ce se întâmplă dacă alegem o altă schemă de culori:

Desigur, acesta este un exemplu extrem, dar ne ajută să ne ilustrăm ideea. Dacă doriți să colorați codurile postărilor dvs., va trebui să vă luați în considerare paleta cu atenție, folosind un instrument adecvat pentru a vă ajuta, dacă este necesar. Folosirea culorilor contrastante pentru a evidenția diferența dintre fiecare postare poate ajuta utilizatorii să identifice rapid autorii, dar poate, de asemenea, face ravagii cu stilul blogului dvs. și poate îngreuna citirea conținutului dvs.

Cum să colorați codurile postărilor de blog Divi după autor (în 2 pași)

Acum am abordat teoria, este timpul să trecem la modul de codare a postărilor de pe blogul Divi. Activarea acestei caracteristici durează doar doi pași, dar există unele considerații pentru a face înainte de a începe.

Pentru început, veți dori să faceți o copie de rezervă a site-ului dvs. WordPress, ceea ce este întotdeauna o idee bună atunci când faceți modificări. În al doilea rând, veți dori să creați o temă pentru copii Divi, astfel încât modificările dvs. vor rămâne odată cu actualizarea temei.

În cele din urmă, va trebui să utilizați un client FTP pentru pasul numărul unu. Vom folosi FileZilla, dar dacă există un alt instrument pe care îl preferați, mergeți la el.

Pasul 1: Adăugați un fragment de cod în fișierul functions.php al temei copilului dvs.

Pentru a face acest lucru, va trebui să vă deschideți clientul FTP și să vă conectați la serverul site-ului dvs. De acolo, mergeți la directorul public_html / wp-content / themes / , apoi găsiți folderul temei copilului. Rețineți că folderul public_html sau rădăcină poate fi denumit www sau după domeniul site-ului dvs., în funcție de gazda dvs.:

După ce ați localizat folderul temei copilului, deschideți-l și căutați fișierul functions.php . Acum, faceți clic dreapta pe el și apăsați opțiunea care citește Vizualizare / Editare :

Acest lucru vă va solicita să deschideți fișierul cu editorul de text implicit. Deoarece avem de-a face cu o temă copil, fișierul funcții.php ar trebui să fie în mare parte gol, în afară de stingerea funcțiilor părintelui său. Vom adăuga un fragment care creează automat o nouă clasă pentru fiecare dintre autorii dumneavoastră cu prefixul author-. De exemplu, dacă aveți un utilizator WordPress numit John, puteți utiliza clasa autor-john . Acest lucru ne va permite să adăugăm un cod CSS mai târziu.

Apoi, adăugați următorul fragment PHP după linia // 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' );

Acum salvați modificările, închideți editorul și ați terminat! Rețineți că va trebui să utilizați caractere mici pentru ca clasa dvs. să funcționeze, indiferent de autorul cu care aveți de-a face. Asta va fi important pentru pasul numărul doi.

Pasul 2: Specificați o culoare pentru fiecare autor folosind opțiunea CSS personalizată a lui Divi

Acum noua noastră funcție este gata, următorul pas este să setați o culoare pentru fiecare dintre autorii dvs. Divi vă permite să faceți acest lucru cu funcția CSS personalizată , deoarece orice cod pe care îl adăugați acolo vă va afecta întreaga temă. Pentru a-l găsi, accesați tabloul de bord WordPress și navigați la fila Divi> Opțiuni temă , apoi derulați în jos până la caseta CSS personalizată de la sfârșitul paginii:

Va trebui să adăugați o nouă linie de CSS în acest câmp pentru fiecare dintre autorii dvs. De exemplu, dacă aveți un autor cu numele de utilizator author1 iată cum ați seta o anumită culoare pentru ei:

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

Rețineți că trebuie să adăugați prefixul autorului la clasa dvs., indiferent de numele dvs. de utilizator. După ce ați indicat o culoare de fundal, trebuie să vă asigurați că declarați că codul este ! Important . Pur și simplu, acest lucru conferă codului mai multă greutate și anulează orice conflicte care ar putea apărea - fără acesta, această caracteristică nu va funcționa.

Să trecem peste un ultim exemplu. În acest sens, vom atribui culori diferite celor doi autori. Iată codul pe care l-am adăugat în câmpul CSS personalizat Divi:

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

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

Iată cum arată acest lucru din partea frontală:

Lăsând deoparte alegerea culorii, există și alte modificări pe care le puteți face la postările de pe blogul Divi. De exemplu, puteți modifica lungimea extraselor de pe blog sau puteți stiliza „cărțile” postate în mai multe moduri. Scopul tău principal ar trebui să fie să găsești stilul perfect pentru propriul blog, așa că nu te teme să te joci cu Divi și să vezi ce poate face!

Concluzie

Codarea colorată a postărilor de pe blog de către autorul lor este o caracteristică simplă care poate ajuta utilizatorul să navigheze mai ușor în conținutul dvs. (mai ales dacă aveți o arhivă extinsă). În plus, mulți dintre utilizatorii dvs. vor aprecia probabil că pot recunoaște postările autorului lor preferat numai după culoare.

Înainte de a începe modificarea fișierelor, nu uitați să faceți o copie de rezervă a site-ului și să configurați o temă secundară, astfel încât modificările dvs. să persiste în viitor. Odată ce ați terminat, aceștia sunt cei doi pași pe care trebuie să îi urmați pentru a codifica postările de pe blogul dvs. Divi după autor:

1. Modificați fișierul functions.php al temei copilului.
2. Specificați o culoare pentru fiecare dintre autorii dvs. utilizând opțiunea CSS personalizată a lui Divi.

Aveți întrebări despre cum să codificați postările de pe blogul Divi după autor? Întrebați în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului de către RaZZers / shutterstock.com.