Ați întâlnit vreodată un site web care își publică diferit articolele pe blog?
Unele site-uri web au prezentat articole evidențiate cu un fundal personalizat, în timp ce altele pot avea fiecare postare de categorie cu un aspect unic. Dacă ați dorit întotdeauna să învățați cum să personalizați fiecare postare WordPress, ați ajuns în locul potrivit.
În acest tutorial, vă vom arăta cum să modelați fiecare articol WordPress diferit.
Dar, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs.
Apoi înapoi la motivul pentru care suntem aici.
Notă: Acest tutorial necesită să adăugați CSS personalizat pe WordPress. De asemenea, va trebui să utilizați instrumentul Inspectare. Unele cunoștințe CSS și HTML sunt necesare.
Oferiți un stil individual la articolele WordPress
WordPress adaugă clase CSS implicite la diferite elemente ale site-ului dvs. A WordPress temă compatibil standard trebuie să aibă codul cerut de WordPress pentru a adăuga clase CSS pentru corp, postări, pagini, widget-uri, meniuri și multe altele.
Descoperiți și ghidul nostru pe Permalinks: Cum să vă personalizați link-uri pe blog
O funcție principală a WordPress numită „ post_class () Este folosit de teme pentru a spune WordPress unde să adăugați aceste clase CSS implicite la articole.
Dacă vă vizitați site-ul web și utilizați instrumentul Inspectare din browser, veți putea vedea aceste clase adăugate pentru fiecare postare.
Iată clasele CSS adăugate în mod implicit pe baza paginii afișate de un utilizator.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- ID .category
- .category nume-
- .tag nume-
- .format- {format-nume}
- {.Type- post-tip name}
- .has post-miniatură
- .post-parolă necesară
- .protected-de-a-parolă
Un exemplu de afișare ar arăta astfel:
Puteți personaliza fiecare publicație WordPress diferit folosind clasele CSS respective.
Citiți și: Cum să vă îmbunătățiți blogul WordPress în acest weekend
De exemplu, dacă doriți să editați o publicație individuală, puteți utiliza clasa post-id în CSS-ul dvs. personalizat.
.post-412 {culoare-fundal: #FF0303; Culoare: #FFFFFF; }
Nu uitați să schimbați ID-ul postării pentru a se potrivi cu ID-ul postării dvs.
Să aruncăm o privire la un alt exemplu.
De această dată, vom acoperi toate articolele postate într-o anumită categorie numită „știri”.
Descoperiți ghidul nostru pe Cum să adăugați CSS personalizate pe blogul dvs. WordPress
Putem face acest lucru adăugând următoarea CSS personalizată la tema noastră.
.category-actualities {font-size: 18px; font-style: italic; }
Acest CSS va afecta toate articolele din categorie " actualitate ".
Funcția post_class ()
Dezvoltatorii temei folosesc funcția post_class () pentru a spune WordPress unde să adauge cursurile de postare. De obicei, se află în eticheta „articol”.
Funcția de post_class () nu numai că încarcă clasele CSS generate în mod implicit de WordPress, dar vă permite, de asemenea, să adăugați propriile clase.
Descoperiți, de asemenea Cum de a proteja raclete de conținut blog
Potrivit dvs. WordPress temă, veți găsi funcția post_class() în fișierul dvs. single.php sau în fișierele șablon. În mod normal, codul va arăta astfel:
" >
Puteți adăuga propria clasă CSS personalizată cu un atribut ca acesta:
" >
Clasa post_class va tipări clasele CSS implicite cu clasa CSS personalizată.
Dacă doriți să adăugați mai multe clase CSS, le puteți defini ca tablou și le puteți utiliza în funcția post-clasă ().
" >
Afișează articole cu un stil diferit în funcție de autori
Clasele CSS implicite generate de funcția posts_class nu includ numele autorului ca clasă CSS.
Dacă doriți să personalizați stilul fiecărei postări pe baza autorului, trebuie mai întâi să adăugați numele autorului ca o clasă CSS.
Pentru a citi, de asemenea: Cum se adaugă animații CSS în WordPress
Puteți face acest lucru folosind următorul fragment:
" >
Acest cod va adăuga numele de utilizator ca o clasă CSS. Numele de utilizator este un nume compatibil cu adresa URL utilizată de WordPress. Nu are spații și toate caracterele sunt minuscule, ceea ce îl face perfect pentru a fi folosit ca clasă CSS.
Consultați, de asemenea, ghidul nostru Cum să adăugați CSS personalizate pe blogul dvs. WordPress
Codul de mai sus va apărea probabil astfel:
Acum puteți utiliza „.peter” în CSS personalizat pentru a modifica toate postările autorului respectiv, astfel încât acestea să apară diferit.
.peter {culoare-fundal: #EEE; frontieră: 1px solid #CCC; }
Personalizați postarea articolelor pe baza comentariilor
Este posibil să fi văzut site-uri web cu widget-uri cu articole populare, care sunt uneori clasificate pe baza comentariilor. În acest exemplu, vă vom arăta cum să creați un stil diferit folosind numărul de comentarii.
Descoperiți-ne 10 plugin-uri premium WordPress pentru a-ți gestiona comentariile
În primul rând, trebuie să obținem numărul de comentarii și să asociem o clasă.
Pentru a obține numărul de comentarii, trebuie să adăugați următorul cod în fișierele dvs WordPress temă. Acest cod intră în bucla WordPress, îl puteți adăuga chiar înainte de etichetă .
aprobat; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popular'; }?>
Acest cod verifică numărul de comentarii pentru publicația postată și le atribuie o valoare pe baza contului. De exemplu, mesajele cu mai puțin de 10 comentarii primesc o clasă numită " nou Mai puțin de 20 sunt numite șmirghel ", Și tot ceea ce privește mai mult decât comentariile 20 este" popular ".
Apoi, trebuie să adăugați clasa CSS la funcția post_class.
" >
Acest lucru va adăuga noile clase emergente și populare CSS la toate articolele în funcție de numărul de comentarii din fiecare postare.
De asemenea, vă invităm să citiți articolul nostru pe Pluginurile 6 WordPress pentru semnarea online a documentelor
Puteți adăuga, de asemenea, CSS personalizat la publicațiile de stil pe baza popularității:
.new {frontieră: solid 1px #FFFF00;} .emerging {frontieră: punctată 1px #FF9933;} .popular {frontieră: punctată 1px #CC0000;}
Adăugăm doar granițe, dar puteți adăuga orice reguli CSS doriți.
Descoperiți și câteva plugin-uri premium WordPress
Puteți folosi altele WordPress plugin-uri pentru a da un aspect modern și pentru a optimiza conexiunea cu blogul sau site-ul tău.
Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.
1. Ultimate Membership Pro
Ultimate Membership Pro este grozav WordPress plug-in abonament premium și restricție de conținut. Acesta permite utilizatorilor să fie gestionați în funcție de pachetul lor (gratuit sau cu plată) prin crearea unor niveluri de acces exclusive.
Prin urmare, va fi posibil protejați întregul conținut al site-ului dvs. web, sau doar o parte din el. Va fi de exemplu un curs, o lecție, o pagină, un produs, o categorie, o imagine etc.
Citiți și articolul nostru pe 4 pluginurile WordPress premium pentru a crea miniaturi
Funcțiile sale principale sunt printre altele: protecția conținutului, niveluri multiple de acces, suport pentru mai multe gateway-uri de plată - PayPal, Autorizați.net, Stripe, 2CheckOut, Transfer bancar-, protecție parțială a conținutului, Și mult mai mult…
Descarca | Demo | web hosting
2. Cât de slider pentru Facebook
Cât de slider pentru Facebook este o WordPress plug-in premium care oferă vizitatorilor opțiunea de a lăsa comentarii pe site-ul dvs. Cu această casetă de comentarii modernă și non-intruzivă, aceasta WordPress plug-in oferă funcția Like Box și Fan Page Wall, care va extinde integrarea site-ului dvs. cu rețeaua socială Facebook.
Pluginul oferă, de asemenea, diferite funcționalități pentru a extinde capacitățile site-ului dvs. web: are de exemplu o secțiune Like („Like Box”) sau o pagină dedicată fanilor („Fan Page Wall).
Descoperă și tu Cum să încărcați treptat comentariile Facebook și Disqus
Nu este nevoie să încorporați butoanele „Apreciați” și „Distribuiți” pe postări sau pagini, deoarece Facebook Comment Slider le are deja și pot apărea pe orice postare sau pagină. Vizitatorii vor găsi butonul „Apreciază”, butonul „Distribuiți” și caseta de comentarii cu glisorul Facebook. Ei își vor folosi evident conturile de Facebook.
În plus, puteți activa, dezactiva și seta timpul efectului shake.
Descarca | Demo | web hosting
3. Intra in Ninja
Acest plugin premium WordPress vă permite să vă personalizați pagina de autentificare. Este mai mult decât simpla personalizare formularul de autentificare. Puteți personaliza întreaga pagină, schimbând culoarea paginii, adăugând o imagine de fundal, adăugând un logo și multe altele.
Celelalte caracteristici ale acestuia sunt: protecția formularelor de autentificare și înregistrare cu captcha, interzicerea automată și manuală a IP-urilor care vă atacă prin forță brută, un jurnal detaliat al tuturor activităților de conectare, redirecționarea utilizatorului bazată pe roluri și nume de utilizatori, primirea notificărilor prin e-mail pentru toate evenimentele de conectare, o interfață grafică ușor de utilizat, documentație detaliată și multe altele.
Descarca | Demo | web hosting
Resurse recomandate
Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.
- 9 pluginurile WordPress pentru a gestiona plățile PayPal pe blogul său
- 10 pluginuri WordPress esențiale de instalat pe blogul dvs.
- 10 plugin-uri WordPress pe care să le folosești pentru a gestiona publicitatea
- Pluginurile 10 WordPress pentru a crea atribute pentru produsele dvs. variabile
Concluzie
Aici este ! Asta este totul pentru acest tutorial, sper că vă va permite să personalizați afișarea articolelor pe blogul dvs. WordPress. Dacă aveți nelămuriri sau sugestii în acest domeniu, să ne regăsim secțiunea de comentarii pentru a discuta.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
