Har du noen gang kommet over et nettsted som publiserer artiklene sine annerledes på bloggen?
Noen nettsteder har artikler som er uthevet med tilpasset bakgrunn, mens andre kan ha hvert kategoriinnlegg med et unikt utseende. Hvis du alltid har ønsket å lære å tilpasse hvert WordPress-innlegg, har du kommet til rett sted.
I denne opplæringen vil vi vise deg hvordan du former hver WordPress-artikkel på en annen måte.
Men hvis du aldri har installert WordPress, kan du oppdage Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din
Så tilbake til hvorfor vi er her.
Note: Denne opplæringen krever at du legger til tilpasset CSS på WordPress. Du må også bruke inspiserverktøyet. Noe CSS- og HTML-kunnskap er påkrevd.
Gi individuelle stil på WordPress elementer
WordPress legger til standard CSS-klasser til ulike elementer på nettstedet ditt. EN WordPress tema standardkompatibel må ha kode som kreves av WordPress for å legge til CSS-klasser for brødtekst, innlegg, sider, widgets, menyer og mer.
Oppdag også vår guide om Permalinks: Slik tilpasser blogg lenker
En hovedfunksjon av WordPress kalt " post_class () Brukes av temaer for å fortelle WordPress hvor de skal legge til disse standard CSS-klassene på artikler.
Hvis du besøker nettstedet ditt og bruker inspiseringsverktøyet i nettleseren din, vil du kunne se disse klassene lagt til for hvert innlegg.
Her er CSS-klasser lagt til som standard basert på siden som vises av en bruker.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category-navn
- .tag-navn
- .format- {størrelse-navn}
- {.type- post-typenavn}
- .has post-thumbnail
- .post-passord nødvendig
- .protected-for-en-passord
Et eksempel på visning vil se slik ut:
Du kan tilpasse hver WordPress-publikasjon på en annen måte ved å bruke de respektive CSS-klassene.
Les også: Hvordan forbedre WordPress bloggen din i helgen
Hvis du for eksempel vil redigere en individuell publikasjon, kan du bruke post-ID-klassen i din tilpassede CSS.
.post-412 {bakgrunnsfarge: #FF0303; color: #FFFFFF; }
Husk å endre innleggs-ID-en slik at den samsvarer med innleggs-ID-en din.
La oss ta en titt på et annet eksempel.
Denne gangen vil vi dekke alle artiklene som er lagt ut i en bestemt kategori kalt "nyheter".
Oppdag guiden vår om Slik legger du til tilpasset CSS i WordPress-bloggen din
Vi kan gjøre dette ved å legge til følgende tilpassede CSS til vårt tema.
.category-nyheter {font-size: 18px; font-style: italic; }
Denne CSS vil påvirke alle elementene i kategorien " aktualitet '.
Den post_class funksjon ()
Temautviklere bruker funksjonen post_class () å fortelle WordPress hvor du skal legge til innleggsklassene. Vanligvis er det i "artikkelen" -koden.
funksjonen post_class () laster ikke bare CSS-klasser generert av WordPress som standard, men lar deg også legge til dine egne klasser.
Discover Hvordan du kan beskytte dine blogginnhold skrapere
I følge din WordPress tema, finner du post_class()-funksjonen i single.php-filen din eller i malfilene. Normalt vil koden se slik ut:
" >
Du kan legge til din egen tilpassede CSS-klasse med et attributt som dette:
" >
Post_class-klassen vil skrive ut de respektive standard CSS-klasser med din tilpassede CSS-klasse.
Hvis du vil legge til flere CSS-klasser, kan du definere dem som en matrise og bruke dem i funksjonen etter klassen ().
" >
Vis artikler med en annen stil i henhold til forfatterne
Standard CSS-klasser generert av posts_class-funksjonen inkluderer ikke forfatterens navn som en CSS-klasse.
Hvis du vil tilpasse stilen til hvert innlegg basert på forfatteren, må du først legge til forfatternavnet som en CSS-klasse.
Les også: Hvordan legge til CSS animasjoner WordPress
Du kan gjøre dette ved å bruke følgende tekstutdrag:
" >
Denne koden vil legge til brukernavnet som en CSS-klasse. Brukernavn er et navn som er kompatibelt med URL-en som brukes av WordPress. Det har ingen mellomrom, og alle tegn er små, noe som gjør det perfekt for bruk som CSS-klasse.
Se også vår guide om Slik legger du til tilpasset CSS i WordPress-bloggen din
Koden ovenfor vil sannsynligvis vises slik:
Nå kan du bruke ".peter" i din tilpassede CSS til å endre alle innleggene fra den aktuelle forfatteren slik at de ser annerledes ut.
.peter {bakgrunnsfarge: #EEE; kant: fast 1px #CCC; }
Tilpass innlegg av artikler basert på kommentarer
Du har kanskje sett nettsteder med widgeter med populære artikler som noen ganger er rangert basert på kommentarer. I dette eksemplet viser vi deg hvordan du oppretter en annen stil ved hjelp av antall kommentarer.
Oppdag vår 10 premium WordPress-plugins for å administrere kommentarene dine
Først må vi få antall kommentarer og knytte en klasse.
For å få kommentarantallet må du legge til følgende kode i filene dine WordPress tema. Denne koden går inn i WordPress-løkken, du kan legge den til rett før taggen .
godkjent; hvis ($ my_comment_count <10) {$ my_comment_count = 'ny'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popular'; }?>
Denne koden sjekker antall kommentarer for den publiserte publikasjonen og tildeler dem en verdi basert på kontoen. For eksempel får meldinger med mindre enn 10 kommentarer en klasse som heter " nytt Mindre enn 20 heter Emery ", Og alt som gjelder mer enn 20 kommentarer er" populær '.
Deretter må du legge CSS-klassen til funksjonen post_class.
" >
Dette vil legge til de nye, nye og populære CSS-klassene til alle artikler basert på antall kommentarer i hvert innlegg.
Vi inviterer deg også til å lese artikkelen vår om 6 WordPress-plugin for signering av dokumenter på nettet
Du kan også legge til tilpassede CSS til stilpublikasjoner basert på popularitet:
.new {kant: fast 1px #FFFF00;} .emerging {kant: stiplede 1px #FF9933;} .popular {kant: stiplede 1px #CC0000;}
Vi legger bare til grenser, men du kan legge til alle CSS-regler du ønsker.
Oppdag også noen premium WordPress-plugins
Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere forbindelsen til bloggen eller nettsiden din.
Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.
1. Ultimate Membership Pro
Ultimate Membership Pro er en flott WordPress Plugin abonnementspremie og innholdsbegrensning. Den lar brukere administreres i henhold til pakken deres (gratis eller betalt) ved å lage eksklusive tilgangsnivåer.
Det vil det derfor være mulig å gjøre beskytt alt innholdet på nettstedet ditt, eller bare en del av det. Det vil for eksempel være et kurs, en leksjon, en side, et produkt, en kategori, et bilde, etc ...
Les også vår artikkel på 4 premium WordPress plugins for å lage miniatyrbilder
Hovedfunksjonene er blant annet: innholdsbeskyttelse, flere tilgangsnivåer, støtte for flere betalingsportaler - PayPal, Authorize.net, Stripe, 2CheckOut, bankoverføring-, delvis beskyttelse av innhold, Og mye mer…
2. Hvordan glider for Facebook
Hvordan glider for Facebook er en WordPress Plugin premium som gir besøkende muligheten til å legge igjen kommentarer på nettstedet ditt. Med dette moderne og ikke-påtrengende kommentarfeltet, dette WordPress Plugin tilbyr Like Box og Fan Page Wall-funksjon som vil utvide nettstedets integrering med Facebook sosiale nettverk.
Plugin-en gir også forskjellige funksjoner for å utvide kapasitetene på nettstedet ditt: Det har f.eks en Like-seksjon ("Like Box") eller en side dedikert til fans ("Fan Page Wall).
Oppdag også Hvordan gradvis laste inn Facebook og Disqus kommentarer
Du trenger ikke å legge inn "Like" og "Share" -knappene på innlegg eller sider, fordi glidebryteren for Facebook-kommentarer allerede har dem, og de kan vises på alle innlegg eller sider. Besøkende finner "Like" -knappen, "Del" -knappen og kommentarboksen for Facebook-glidebryteren. De vil tydeligvis bruke Facebook-kontoene sine.
Dessuten kan du slå på, av og stille tidspunktet for risteeffekten.
3. Logg inn Ninja
Dette premium WordPress-pluginet lar deg tilpasse påloggingssiden din. Det er mer enn bare å tilpasse ditt påloggingsskjema. Du kan tilpasse hele siden ved å endre fargen på siden, legge til et bakgrunnsbilde, legge til en logo og mer.
De andre funksjonene er: beskyttelse av påloggings- og registreringsskjemaer med captcha, automatisk og manuell utestenging av IP-er som angriper deg med grov kraft, en detaljert logg over alle tilkoblingsrelaterte aktiviteter, brukeromdirigering basert på roller og brukernavn, mottar e-postvarsler for alle tilkoblingshendelser, et brukervennlig grafisk grensesnitt, detaljert dokumentasjon og mer.
Anbefalte ressurser
Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.
- 9 WordPress-plugins for å administrere PayPal-betalinger på hans blogg
- 10 viktige WordPress-plugins å installere på bloggen din
- 10 WordPress-plugins som kan brukes til å administrere annonsering
- 10 WordPress plugins for å lage attributter for dine variable produkter
konklusjonen
Her er ! Det er alt for denne opplæringen, jeg håper det vil tillate deg å tilpasse visningen av artikler på WordPress-bloggen din. Hvis du har noen bekymringer eller forslag på dette området, la oss finne oss i kommentarfeltet for å diskutere.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
