Har du nogensinde stødt på et websted, der offentliggør sine artikler forskelligt på bloggen?
Nogle websteder har fremhævet artikler med en brugerdefineret baggrund, mens andre kan have hver kategoriindlæg med et unikt udseende. Hvis du altid har ønsket at lære at tilpasse hvert WordPress-indlæg, er du kommet til det rette sted.
I denne tutorial vil vi vise dig, hvordan du forme hver WordPress-artikel forskelligt.
Men hvis du aldrig har installeret WordPress, skal du opdage Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog
Så tilbage til, hvorfor vi er her.
Remarque: Denne tutorial kræver, at du tilføjer tilpasset CSS på WordPress. Du skal også bruge inspiceringsværktøjet. Der kræves en vis CSS- og HTML-viden.
Giv individuel stil på WordPress-artikler
WordPress tilføjer standard CSS-klasser til forskellige elementer på dit websted. EN WordPress tema standardkompatibel skal have kode, der kræves af WordPress for at tilføje CSS-klasser til brødtekst, indlæg, sider, widgets, menuer og mere.
Oplev også vores guide til Permalinks: Sådan tilpasse dine blog links
En hovedfunktion af WordPress kaldet " post_class () Bruges af temaer til at fortælle WordPress, hvor man skal tilføje disse standard CSS-klasser til artikler.
Hvis du besøger dit websted og bruger inspiceringsværktøjet i din browser, vil du kunne se disse klasser tilføjet for hvert indlæg.
Her er CSS-klasser tilføjet som standard baseret på den side, der vises af en bruger.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .category id
- .category-navn
- .tag-navn
- .format- {formatnavn}
- {.type- post-typen-navn}
- .has post-thumbnail
- .post-adgangskode-påkrævet
- .protected-ved-en-adgangskode
Et eksempel på display ser sådan ud:
Du kan tilpasse hver WordPress-publikation forskelligt ved hjælp af de respektive CSS-klasser.
Læs også: Sådan forbedres din WordPress blog i weekenden
Hvis du f.eks. Vil redigere en individuel publikation, kan du bruge post-id-klassen i din brugerdefinerede CSS.
.post-412 {baggrundsfarve: #FF0303; farve: #FFFFFF; }
Husk at ændre post-id'et, så det matcher dit post-id.
Lad os se på et andet eksempel.
Denne gang dækker vi alle artikler, der er lagt ud i en bestemt kategori kaldet "nyheder".
Oplev vores guide om Sådan føjes tilpasset CSS til din WordPress-blog
Vi kan gøre dette ved at tilføje følgende brugerdefinerede CSS til vores tema.
.kategori-aktualiteter {font-size: 18px; skrifttypestil: kursiv }
Denne CSS påvirker alle poster i kategorien " aktualitet '.
Funktionen post_class ()
Temaudviklere bruger funktionen post_class () at fortælle WordPress, hvor postklasserne skal tilføjes. Normalt er det i "artikel" -tagget.
Funktionen af post_class () ikke kun indlæser CSS-klasser genereret af WordPress som standard, men giver dig også mulighed for at tilføje dine egne klasser.
Oplev Sådan beskytter din blog indhold skrabere
Ifølge din WordPress tema, finder du post_class()-funktionen i din single.php-fil eller i skabelonfilerne. Normalt vil koden se sådan ud:
" >
Du kan tilføje din egen tilpassede CSS-klasse med en attribut som denne:
" >
Klassen post_class udskriver de respektive standard CSS klasser med din brugerdefinerede CSS klasse.
Hvis du vil tilføje flere CSS-klasser, kan du definere dem som en matrix og bruge dem i funktionen postklasse ().
" >
Vis artikler med en anden stil ifølge forfatterne
Standard CSS-klasser genereret af posts_class-funktionen inkluderer ikke forfatterens navn som en CSS-klasse.
Hvis du vil tilpasse stilen for hvert indlæg baseret på forfatteren, skal du først tilføje forfatterens navn som en CSS-klasse.
Læs også: Hvordan at tilføje CSS animationer WordPress
Du kan gøre dette ved hjælp af følgende uddrag:
" >
Denne kode tilføjer brugernavnet som en CSS-klasse. Brugernavn er et navn, der er kompatibelt med den URL, der bruges af WordPress. Det har ingen mellemrum, og alle tegn er små bogstaver, hvilket gør det perfekt til brug som en CSS-klasse.
Se også vores vejledning om Sådan føjes tilpasset CSS til din WordPress-blog
Ovenstående kode vises sandsynligvis sådan:
Nu kan du bruge ".peter" i din brugerdefinerede CSS til at ændre alle indlæg fra den pågældende forfatter, så de ser anderledes ud.
.peter {baggrundsfarve: #EEE; grænse: 1px solid #CCC; }
Tilpas udstationering af artikler baseret på kommentarer
Du har måske set websteder med widgets med populære artikler, som undertiden rangeres baseret på kommentarer. I dette eksempel viser vi dig, hvordan du opretter en anden stil ved hjælp af antallet af kommentarer.
Opdag vores 10 premium WordPress-plugins til at administrere dine kommentarer
Først skal vi få antallet af kommentarer og knytte en klasse.
For at få kommentarantallet skal du tilføje følgende kode i dine filer WordPress tema. Denne kode går ind i WordPress-løkken, du kan tilføje den lige før tagget .
godkendt; 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 = 'populær'; }?>
Denne kode kontrollerer antallet af kommentarer til den udgivne publikation og tildeler dem en værdi baseret på kontoen. For eksempel får meddelelser med mindre end 10 kommentarer en klasse kaldet " ny Mindre end 20 kaldes smergel ", Og alt hvad der vedrører mere end 20 kommentarer er" populær '.
Derefter skal du tilføje CSS-klassen til funktionen post_class.
" >
Dette tilføjer de nye, nye og populære CSS-klasser til alle artikler baseret på antallet af kommentarer i hvert indlæg.
Vi inviterer dig også til at læse vores artikel om 6 WordPress-plugins til underskrivelse af dokumenter online
Du kan også tilføje tilpasset CSS til stilpublikationer baseret på popularitet:
.Ny {border: solid 1px #FFFF00;} .emerging {kant: stiplet 1px #FF9933;} .popular {kant: stiplet 1px #CC0000;}
Vi tilføjer bare grænser, men du kan tilføje de CSS-regler, du ønsker.
Oplev også nogle premium WordPress-plugins
Du kan bruge andet WordPress plugins for at give et moderne udseende og for at optimere forbindelsen til din blog eller hjemmeside.
Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.
1. Ultimate Membership Pro
Ultimate Membership Pro er en fantastisk WordPress plugin abonnementspræmie og indholdsbegrænsning. Det giver brugerne mulighed for at blive administreret i henhold til deres pakke (gratis eller betalt) ved at oprette eksklusive adgangsniveauer.
Det vil derfor være muligt beskyt alt indholdet på dit webstedeller bare en del af det. Det vil for eksempel være et kursus, en lektion, en side, et produkt, en kategori, et billede osv ...
Læs også vores artikel om 4 premium WordPress plugins til at oprette miniaturebilleder
Dets vigtigste funktioner inkluderer: indholdsbeskyttelse, flere adgangsniveauer, support til flere betalingsgateways - PayPal, Authorize.net, Stribe, 2CheckOut, bankoverførsel-, delvis beskyttelse af indhold, Og meget mere…
Downloade | demo | Web-hosting
2. Hvordan skyderen til Facebook
Hvordan skyderen til Facebook er et WordPress plugin premium, der giver besøgende mulighed for at skrive kommentarer på din hjemmeside. Med dette moderne og ikke-påtrængende kommentarfelt, dette WordPress plugin giver Like Box og Fan Page Wall-funktion, som vil udvide din hjemmeside integration med Facebook sociale netværk.
Plugin giver også forskellige funktioner til at udvide kapaciteten på dit websted: Det har f.eks et lignende afsnit ("Like Box") eller en side dedikeret til fans ("Fan Page Wall).
Opdag også Sådan gradvist indlæses kommentarer fra Facebook og Disqus
Du behøver ikke at integrere knapperne "Synes godt om" og "Del" på indlæg eller sider, fordi skyderen til Facebook-kommentarer allerede har dem, og de kan vises på ethvert indlæg eller side. Besøgende finder knappen "Synes godt om", knappen "Del" og kommentarfeltet til Facebook-skyderen. De vil naturligvis bruge deres Facebook-konti.
Desuden kan du tænde, slukke og indstille tidspunktet for rysteffekten.
Downloade | demo | Web-hosting
3. Log ind Ninja
Dette premium WordPress-plugin giver dig mulighed for at tilpasse din login-side. Det er mere end bare at tilpasse din login formular. Du kan tilpasse hele siden ved at ændre farven på siden, tilføje et baggrundsbillede, tilføje et logo og mere.
Dets andre funktioner er: beskyttelse af login- og registreringsformularer med captcha, automatisk og manuel forbud mod IP'er, der angriber dig med brutal kraft, en detaljeret logbog over alle forbindelsesrelaterede aktiviteter, brugeromdirigering baseret på roller og brugernavne, modtagelse af e-mail-meddelelser til alle forbindelsesbegivenheder, en brugervenlig grafisk interface, detaljeret dokumentation og mere.
Downloade | demo | Web-hosting
Anbefalede ressourcer
Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.
- 9 WordPress-plugins til at administrere PayPal-betalinger på hans blog
- 10 vigtige WordPress-plugins til installation på din blog
- 10 WordPress-plugins, der skal bruges til at administrere reklame
- 10 WordPress plugins til at oprette attributter til dine variable produkter
Konklusion
Her er ! Det er alt sammen til denne tutorial, jeg håber, at det giver dig mulighed for at tilpasse visningen af artikler på din WordPress-blog. Hvis du har nogen bekymringer eller forslag på dette område, så lad os finde os i kommentarfeltet til at diskutere.
Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
