Jeste li ikad naišli na web stranicu koja svoje članke drugačije objavljuje na blogu?

Na nekim web lokacijama nalaze se članci istaknuti prilagođenom pozadinom, dok drugi mogu imati postove svake kategorije s jedinstvenim izgledom. Ako ste oduvijek željeli naučiti kako prilagoditi svaki WordPress post, došli ste na pravo mjesto.Kako dati jedinstveni stil svakom članku na wordpressu

U ovom tutorialu ćemo vam pokazati kako različito oblikovati svaki WordPress članak.

Ali, ako nikada niste instalirali WordPress, otkrijte Kako instalirati WordPress blog u koracima 7 et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu 

Onda se vratimo na pitanje zašto smo ovde.

primjedba: Ovaj vodič zahtijeva da dodate prilagođeni CSS na WordPress. Također ćete trebati koristiti alat Inspect. Potrebno je određeno CSS i HTML znanje.

Dajte pojedinačni stil na WordPress članke

WordPress dodaje zadane CSS klase raznim elementima vaše web stranice. A WordPress tema standardno kompatibilan mora imati kod koji zahtijeva WordPress za dodavanje CSS klasa za tijelo, postove, stranice, widgete, menije i još mnogo toga.

Otkrijte i naš vodič o Permalink: Kako prilagoditi svoje blogove

Glavna funkcija WordPressa naziva " post_class () Teme se koriste da bi WordPressu rekao gdje dodati ove zadane CSS klase u članke.

Ako posjetite svoje web mjesto i u svom pregledniku koristite alat Inspect, moći ćete vidjeti ove klase dodane za svaki post.

Časovi css wordpress nadzorne ploče

Ovdje su CSS klase dodane prema zadanim postavkama na temelju stranice koju je prikazao korisnik.

  • .post-id
  • .poster
  • .attachement
  • .gluant
  • .hentry
  • .category ID
  • .category-name
  • .tag-name
  • .format- {format-ime}
  • {.type--tip-name post}
  • .has post-thumbnail
  • .post-password-potrebno
  • .protected-by-a-lozinku

Primjer prikaza mogao bi izgledati ovako:

Svaku WordPress publikaciju možete drugačije prilagoditi koristeći odgovarajuće CSS klase.

Pročitajte takođe: Kako poboljšati svoj WordPress blog ovog vikenda

Na primjer, ako želite urediti pojedinačnu publikaciju, možete koristiti klasu post-id u svom prilagođenom CSS-u.

.post-412 {background-color: #FF0303; boja: #FFFFFF; }

Ne zaboravite promijeniti ID pošte kako bi odgovarao vašem ID-u pošte.

Prilagodite izgled članka na wordpressu

Pogledajmo još jedan primjer.

Ovaj put ćemo pokriti sve članke objavljene u određenoj kategoriji pod nazivom "vijesti".

Otkrijte naš vodič o Kako dodati prilagođeni CSS na svoj WordPress blog

To možemo učiniti dodavanjem sljedećeg prilagođenog CSS-a našoj temi.

.category-aktualnosti {font-size: 18px; font-style: italic; }

Ovaj CSS će utjecati na sve stavke u kategoriji " aktuelnost ".

Post_class () funkcija

Programeri tema koriste funkciju post_class () da kažete WordPressu gdje dodati klase postova. Obično je u oznaci "article".

Funkcija post_class () ne samo da učitava CSS klase koje je zadao WordPress, već vam omogućava i dodavanje vlastitih klasa.

Discover also Kako zaštititi svoj blog od skraćenica sadržaja

Prema vašem WordPress tema, naći ćete funkciju post_class() u vašem single.php datoteci ili u datotekama šablona. Obično će kod izgledati ovako:

" >

Možete dodati svoju vlastitu prilagođenu CSS klasu sa ovako atributom:

" >

Klasa post_class ispisat će odgovarajuće zadane CSS klase s vašom prilagođenom CSS klasom.

Ako želite dodati više CSS klasa, možete ih definirati kao niz i koristiti ih u funkciji post-class ().

" >

Prikazajte članke različitog stila prema autorima

Zadane CSS klase generirane funkcijom posts_class ne uključuju ime autora kao CSS klasu.

Ako želite prilagoditi stil svake objave prema autoru, prvo morate dodati ime autora kao CSS klasu.

Pročitajte takođe: Kako dodati CSS animacije WordPress

To možete učiniti pomoću sljedećeg isječka:

" >

Ovaj kôd će dodati korisničko ime kao CSS klasu. Korisničko ime je ime kompatibilno s URL-om koji koristi WordPress. Nema razmaka, a svi znakovi su mala, što ga čini savršenim za upotrebu kao CSS klasa.

Pogledajte i naš vodič o Kako dodati prilagođeni CSS na svoj WordPress blog

Gornji kod će se vjerovatno prikazati ovako:

Sada možete koristiti ".peter" u svom prilagođenom CSS-u da biste modificirali sve postove tog određenog autora tako da se pojavljuju drugačije.

.peter {background-color: #EEE; granica: 1px solid #CCC; }

Prilagodite objavljivanje članaka na osnovu komentara

Možda ste vidjeli web stranice sa dodacima s popularnim člancima koji se ponekad rangiraju na temelju komentara. U ovom primjeru pokazat ćemo vam kako stvoriti drugačiji stil koristeći broj komentara.

Discover our 10 premium WordPress dodataka za upravljanje komentarima

Prvo, moramo dobiti broj komentara i pridružiti klasu.

Da biste dobili broj komentara, morate dodati sljedeći kod u svoje datoteke WordPress tema. Ovaj kod ulazi u WordPress petlju, možete ga dodati neposredno prije oznake .

odobren; if ($ my_comment_count <10) {$ my_comment_count = 'novo'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popularno'; }?>

Ovaj kôd provjerava broj komentara za objavljenu publikaciju i dodjeljuje im vrijednost na temelju računa. Na primjer, poruke s manje od 10 komentara dobivaju klasu pod nazivom " novi Manje od 20 poziva šmirgl ", A sve što se tiče više od 20 komentara je" popularan ".

Zatim morate dodati CSS klasu u funkciju post_class.

" >

To će dodati nove, nove i popularne klase CSS u sve članke na osnovu broja komentara u svakom postu.

Također vas pozivamo da pročitate naš članak o 6 WordPress dodatci za potpisivanje dokumenata na mreži

Možete dodati i prilagođene CSS publikacijama u stilu na osnovu popularnosti:

.New {granica: solid 1px #FFFF00;} .emerging {granice: isprekidane 1px #FF9933;} .popular {granice: isprekidane 1px #CC0000;}

Mi samo dodamo granice, ali možete dodati bilo koja CSS pravila koja želite.

Otkrijte i neke premium WordPress dodatke  

Možete koristiti druge WordPress plugins da date moderan izgled i da optimizujete vezu sa vašim blogom ili web sajtom.

Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.

1. Ultimate Membership Pro

Ultimate Membership Pro je odličan WordPress dodatak premium pretplate i ograničenje sadržaja. Omogućava korisnicima da se upravljaju prema njihovom paketu (besplatnom ili plaćenom) kreiranjem ekskluzivnih nivoa pristupa.

Ultimate članstvo za wordpress članstvo wordpress dodatak

Stoga će to biti moguće zaštitite sav sadržaj vaše web stranice, ili samo njegov dio. To će biti na primjer kurs, lekcija, stranica, proizvod, kategorija, slika itd ...

Pročitajte i naš članak 4 premium WordPress plugins za kreiranje sličica

Njegove glavne funkcije su između ostalog: zaštita sadržaja, više nivoa pristupa, podrška za višestruke mrežne prolaze - PayPal, Autorize.net, pruga, 2CheckOut, bankovni prenos-, djelomična zaštita sadržaja, I mnogo više…

download | Demo | web hosting 

2. Kako Slider for Facebook

Kako klizač za Facebook je WordPress dodatak premium koji posjetiteljima nudi mogućnost ostavljanja komentara na vašoj web stranici. Sa ovim modernim i nenametljivim okvirom za komentare, ovo WordPress dodatak pruža Like Box i Fan Page Wall funkciju koja će proširiti integraciju vaše web stranice sa Facebook društvenom mrežom.Kako klizati za facebook wordpress socijalni dodatak wordpress

Dodatak također pruža različite funkcionalnosti za proširivanje kapaciteta vaše web stranice: Primjerice odjeljak Like („Like Box“) ili stranica posvećena obožavateljima („Wall Page Wall“).

Otkrijte i vi Kako postepeno učitavati Facebook i Disqus komentare

Ne trebate ugrađivati ​​gumbe "Sviđa mi se" i "Dijeli" u postove ili stranice, jer ih Facebook Slider Slider već ima i mogu se pojaviti na bilo kojem postu ili stranici. Posjetitelji će pronaći dugme "Sviđa mi se", dugme "Podijeli" i Facebook klizač okvir za komentare. Oni će očigledno koristiti svoje Facebook naloge.

Osim toga, možete uključiti, isključiti i podesiti vrijeme efekta tresenja.

download | Demo | web hosting

3. Prijavi se Ninja

Ovaj premium WordPress dodatak omogućava vam prilagodbu stranice za prijavu. To je više od samog prilagođavanja vaš obrazac za prijavu. Možete prilagoditi cijelu stranicu tako što ćete promijeniti boju stranice, dodati pozadinsku sliku, dodati logotip i još mnogo toga.Ninja login wordpress dodatak

Ostale karakteristike su: zaštita obrazaca za prijavu i registraciju captcha-om, automatsko i ručno zabranjivanje IP-ova koji vas napadaju silom, detaljan dnevnik svih aktivnosti vezanih za vezu, preusmjeravanje korisnika na osnovu uloga i korisničkih imena, primanje obavijesti putem e-pošte za sve događaje povezivanja, grafičko sučelje koje se lako koristi, detaljna dokumentacija i još mnogo toga.

download | Demo | web hosting

Preporučeni resursi

Saznajte više o drugim preporučenim resursima koji će vam pomoći da izgradite i upravljate svojom web stranicom.

zaključak

Ovdje je ! To je sve za ovaj tutorial, nadam se da će vam omogućiti da prilagodite prikaz članaka na svom WordPress blogu. Ako imate bilo kakvih nedoumica ili prijedloga u ovom području, hajde da se nađemo odjeljak komentara za raspravu.

Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...