Har du någonsin stött på en webbplats som publicerar sina artiklar annorlunda på bloggen?
Vissa webbplatser har presenterat artiklar markerade med en anpassad bakgrund medan andra kan ha varje kategori inlägg med ett unikt utseende. Om du alltid har velat lära dig att anpassa varje WordPress-inlägg har du kommit till rätt ställe.
I den här tutorialen visar vi dig hur du formar varje WordPress-artikel annorlunda.
Men om du aldrig har installerat WordPress, upptäck Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg
Tillbaka till varför vi är här.
Remarque: Denna handledning kräver att du lägger till anpassad CSS på WordPress. Du måste också använda verktyget Inspektera. Vissa CSS- och HTML-kunskaper krävs.
Ge individuella stil på Wordpress objekt
WordPress lägger till standard CSS-klasser till olika delar av din webbplats. A Wordpress tema standardkompatibel måste ha kod som krävs av WordPress för att lägga till CSS-klasser för text, inlägg, sidor, widgets, menyer och mer.
Upptäck också vår guide om Permalänkar: Så här anpassar din blogg länkar
En huvudfunktion av WordPress kallas " post_class () Används av teman för att berätta för WordPress var de ska lägga till dessa standard CSS-klasser på artiklar.
Om du besöker din webbplats och använder verktyget Inspektera i din webbläsare kan du se dessa klasser läggas till för varje inlägg.
Här läggs CSS-klasser till som standard baserat på sidan som visas av en användare.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category-namn
- .tag-namn
- .format- {formatnamn}
- {.type- post-typ-name}
- .has post-thumbnail
- .post-lösenord-required
- .protected-för-en-lösenord
Ett exempel på visning skulle se ut så här:
Du kan anpassa varje WordPress-publikation på olika sätt genom att använda respektive CSS-klasser.
Läs också: Hur man kan förbättra din Wordpress blogg i helgen
Om du till exempel vill redigera en enskild publikation kan du använda klassen post-id i din anpassade CSS.
.post-412 {background-color: #FF0303; färg: #FFFFFF; }
Kom ihåg att ändra post-ID så att det matchar ditt post-ID.
Låt oss ta en titt på ett annat exempel.
Den här gången kommer vi att täcka alla artiklar som publiceras i en specifik kategori som kallas "nyheter".
Upptäck vår guide om Så lägger du till anpassad CSS till din WordPress-blogg
Vi kan göra detta genom att lägga till följande anpassade CSS till vårt tema.
.category-nyheter {font-size: 18px; font-style: italic; }
Denna CSS påverkar alla objekt i kategorin " aktualitet ".
Den post_class funktion ()
Temautvecklare använder funktionen post_class () att berätta för WordPress var du ska lägga till inläggsklasserna. Vanligtvis finns det i "artikel" -taggen.
funktionen post_class () laddar inte bara CSS-klasser som genereras av WordPress som standard, utan låter dig också lägga till dina egna klasser.
Upptäck Så skyddar din blogg innehåll skrapor
Enligt din Wordpress tema, hittar du post_class()-funktionen i din single.php-fil eller i mallfilerna. Normalt ser koden ut så här:
" >
Du kan lägga till din egen anpassade CSS-klass med ett attribut som detta:
" >
Klassen post_class skriver ut respektive standard CSS-klasser med din anpassade CSS-klass.
Om du vill lägga till flera CSS-klasser kan du definiera dem som en matris och använda dem i funktionen efter klass ().
" >
Visa artiklar med en annan stil enligt författarna
Standard CSS-klasser som genereras av posts_class-funktionen inkluderar inte författarens namn som en CSS-klass.
Om du vill anpassa stilen för varje inlägg baserat på författaren måste du först lägga till författarens namn som en CSS-klass.
Läs också: Hur man lägger CSS animationer Wordpress
Du kan göra detta med följande utdrag:
" >
Den här koden lägger till användarnamnet som en CSS-klass. Användarnamn är ett namn som är kompatibelt med webbadressen som används av WordPress. Det har inga mellanslag och alla tecken är små bokstäver, vilket gör det perfekt för användning som en CSS-klass.
Se även vår guide om Så lägger du till anpassad CSS till din WordPress-blogg
Ovanstående kod kommer troligen att visas så här:
Nu kan du använda ".peter" i din anpassade CSS för att ändra alla inlägg av den aktuella författaren så att de ser annorlunda ut.
.peter {bakgrundsfärg: #EEE; kant: fast 1px #CCC; }
Anpassa publicering av artiklar baserat på kommentarer
Du kanske har sett webbplatser med widgetar med populära artiklar som ibland rankas baserat på kommentarer. I det här exemplet visar vi dig hur du skapar en annan stil med antalet kommentarer.
Upptäck vårt 10 premium WordPress-plugins för att hantera dina kommentarer
Först måste vi få antalet kommentarer och associera en klass.
För att få antalet kommentarer måste du lägga till följande kod i dina filer Wordpress tema. Denna kod går in i WordPress-loopen, du kan lägga till den precis före taggen .
godkänd; 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'; }?>
Denna kod kontrollerar antalet kommentarer för den publicerade publikationen och tilldelar dem ett värde baserat på kontot. Till exempel får meddelanden med mindre än 10 kommentarer en klass som heter " ny Mindre än 20 kallas smärgel ", Och allt som gäller mer än 20 kommentarer är" populär ".
Sedan måste du lägga till CSS-klassen i post_class-funktionen.
" >
Detta kommer att lägga till de nya, nya och populära CSS-klasserna till alla artiklar baserat på antalet kommentarer i varje inlägg.
Vi inbjuder dig också att läsa vår artikel om 6 WordPress plugins för signering av dokument online
Du kan också lägga till anpassade CSS till stilpublikationer baserade på popularitet:
.Nya {kant: fast 1px #FFFF00;} .emerging {kant: streckad 1px #FF9933;} .popular {kant: streckad 1px #CC0000;}
Vi lägger bara till gränser, men du kan lägga till alla CSS-regler du vill ha.
Upptäck också några premium WordPress-plugins
Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera kopplingen till din blogg eller hemsida.
Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.
1. Ultimate Membership Pro
Ultimate Membership Pro är en stor Wordpress plugin prenumerationspremium och innehållsbegränsning. Det tillåter användare att hanteras enligt deras paket (gratis eller betalda) genom att skapa exklusiva åtkomstnivåer.
Det kommer därför att vara möjligt skydda allt innehåll på din webbplats, eller bara en del av det. Det kommer till exempel att vara en kurs, en lektion, en sida, en produkt, en kategori, en bild, etc ...
Läs också vår artikel om 4 premium WordPress plugins för att skapa miniatyrbilder
Dess huvudfunktioner är bland annat: innehållsskydd, flera åtkomstnivåer, stöd för flera betalningsportaler - PayPal, Authorize.net, Rand, 2CheckOut, Banköverföring-, partiellt skydd av innehåll, Och mycket mer…
Ladda ner | demo | webbhotell
2. Hur skjutreglage för Facebook
Hur skjutreglage för Facebook är en Wordpress plugin premium som ger besökarna möjlighet att lämna kommentarer på din webbplats. Med denna moderna och icke-påträngande kommentarsruta, detta Wordpress plugin ger Like Box och Fan Page Wall-funktion som utökar din webbplatsintegrering med Facebooks sociala nätverk.
Plugin ger också olika funktioner för att utöka kapaciteten på din webbplats: Den har till exempel ett Like-avsnitt (“Like Box”) eller en sida som är avsedd för fans (“Fan Page Wall).
Upptäck också Hur du gradvis laddar Facebook- och Disqus-kommentarer
Du behöver inte bädda in "Gilla" - och "Dela" -knapparna på inlägg eller sidor, eftersom Facebook-kommentarreglaget redan har dem och de kan visas på alla inlägg eller sidor. Besökare hittar knappen "Gilla", knappen "Dela" och kommentarrutan för Facebook-skjutreglaget. De kommer uppenbarligen att använda sina Facebook-konton.
Dessutom kan du slå på, stänga av och ställa in tiden för skakeffekten.
Ladda ner | demo | webbhotell
3. Logga in Ninja
Detta premium WordPress-plugin låter dig anpassa din inloggningssida. Det är mer än bara att anpassa ditt inloggningsformulär. Du kan anpassa hela sidan genom att ändra sidans färg, lägga till en bakgrundsbild, lägga till en logotyp och mer.
Dess andra funktioner är: skydd av inloggnings- och registreringsformulär med captcha, automatisk och manuell förbudning av IP-adresser som attackerar dig med brute force, en detaljerad logg över alla anslutningsaktiviteter, omdirigering av användare baserat på roller och användarnamn, ta emot e-postmeddelanden för alla anslutningshändelser, ett lättanvänt grafiskt gränssnitt, detaljerad dokumentation och mer.
Ladda ner | demo | webbhotell
Rekommenderade resurser
Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.
- 9 WordPress-plugins för att hantera PayPal-betalningar på hans blogg
- 10 viktiga WordPress-plugins att installera på din blogg
- 10 WordPress-plugins som kan användas för att hantera reklam
- 10 WordPress plugins för att skapa attribut för dina variabla produkter
Slutsats
Här är ! Det är allt för denna självstudie, jag hoppas att det kommer att göra det möjligt för dig att anpassa visningen av artiklar på din WordPress-blogg. Om du har några problem eller förslag på detta område, låt oss hitta oss i kommentaravsnittet att diskutera.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
