Ben je ooit een website tegengekomen die zijn artikelen anders op de blog publiceert?
Sommige websites bevatten artikelen die zijn gemarkeerd met een aangepaste achtergrond, terwijl andere elke categorie een uniek uiterlijk geven. Als je altijd al hebt willen leren hoe je elk WordPress-bericht kunt aanpassen, ben je hier aan het juiste adres.
In deze tutorial laten we u zien hoe u elk WordPress-artikel anders kunt vormgeven.
Maar als je WordPress nog nooit hebt geïnstalleerd, ontdek het dan Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
Ga dan terug naar waarom we hier zijn.
Opmerking: Voor deze tutorial moet je aangepaste CSS op WordPress toevoegen. U moet ook de inspectietool gebruiken. Enige kennis van CSS en HTML is vereist.
Geef individuele stijl op WordPress-artikelen
WordPress voegt standaard CSS-klassen toe aan verschillende elementen van uw website. EEN WordPress theme standaard compatibel moet code hebben die door WordPress wordt vereist om CSS-klassen toe te voegen voor hoofdtekst, berichten, pagina's, widgets, menu's en meer.
Ontdek ook onze gids over Permalinks: Hoe kunt u uw blog banden aan te passen
Een hoofdfunctie van WordPress genaamd " post_class () Wordt gebruikt door thema's om WordPress te vertellen waar deze standaard CSS-klassen op artikelen moeten worden toegevoegd.
Als je je website bezoekt en de Inspect-tool in je browser gebruikt, kun je zien dat deze klassen voor elk bericht zijn toegevoegd.
Hier zijn standaard CSS-klassen toegevoegd op basis van de pagina die door een gebruiker wordt weergegeven.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category-naam
- .tag-naam
- .format- {format-name}
- {.type- post-type name}
- .has post-thumbnail
- -.post-wachtwoord vereist
- .protected-by-a-wachtwoord
Een voorbeeld van weergave zou er als volgt uitzien:
U kunt elke WordPress-publicatie anders aanpassen met behulp van de respectieve CSS-klassen.
Lees ook: Hoe het verbeteren van uw WordPress blog dit weekend
Als u bijvoorbeeld een afzonderlijke publicatie wilt bewerken, kunt u de post-id-klasse in uw aangepaste CSS gebruiken.
.post-412 {achtergrondkleur: #FF0303; color: #FFFFFF; }
Vergeet niet om het bericht-ID te wijzigen zodat het overeenkomt met uw bericht-ID.
Laten we een ander voorbeeld bekijken.
Deze keer behandelen we alle artikelen die zijn geplaatst in een specifieke categorie met de naam "nieuws".
Ontdek onze gids op Aangepaste CSS toevoegen aan uw WordPress-blog
We kunnen dit doen door de volgende aangepaste CSS aan ons thema toe te voegen.
.categorie-actualiteiten {font-size: 18px; lettertype: cursief; }
Deze CSS is van invloed op alle items in de categorie ' actualiteit .
De functie post_class ()
Thema-ontwikkelaars gebruiken de functie post_class () om WordPress te vertellen waar de postklassen moeten worden toegevoegd. Meestal staat het in de tag "article".
De functie van post_class () laadt niet alleen standaard CSS-klassen die door WordPress worden gegenereerd, maar stelt u ook in staat om uw eigen klassen toe te voegen.
Ontdek ook Hoe kunt u uw blog inhoud schrapers beschermen
Volgens jouw WordPress theme, vindt u de functie post_class() in uw single.php-bestand of in de sjabloonbestanden. Normaal gesproken ziet de code er als volgt uit:
" >
U kunt uw eigen aangepaste CSS-klasse toevoegen met een kenmerk als dit:
" >
De klasse post_class drukt de respectieve standaard CSS-klassen af met uw aangepaste CSS-klasse.
Als u meerdere CSS-klassen wilt toevoegen, kunt u deze definiëren als een array en ze gebruiken in de functie post-class ().
" >
Toon artikelen met een andere stijl volgens de auteurs
Standaard CSS-klassen die worden gegenereerd door de functie posts_class, bevatten niet de naam van de auteur als CSS-klasse.
Als je de stijl van elk bericht wilt aanpassen op basis van de auteur, moet je eerst de naam van de auteur als CSS-klasse toevoegen.
Om ook te lezen: Hoe voeg je CSS Animaties toe aan WordPress
U kunt dit doen met behulp van het volgende fragment:
" >
Deze code voegt de gebruikersnaam toe als een CSS-klasse. Gebruikersnaam is een naam die compatibel is met de URL die wordt gebruikt door WordPress. Het heeft geen spaties en alle tekens zijn kleine letters, wat het perfect maakt voor gebruik als CSS-klasse.
Zie ook onze gids over Aangepaste CSS toevoegen aan uw WordPress-blog
De bovenstaande code wordt waarschijnlijk als volgt weergegeven:
Nu kunt u ".peter" in uw aangepaste CSS gebruiken om alle berichten van die specifieke auteur aan te passen, zodat ze er anders uitzien.
.peter {achtergrondkleur: #EEE; grens: 1px solid #CCC; }
Aanpassen van artikelen op basis van opmerkingen
Mogelijk hebt u websites met widgets met populaire artikelen gezien die soms worden gerangschikt op basis van opmerkingen. In dit voorbeeld laten we u zien hoe u een andere stijl kunt maken met behulp van het aantal opmerkingen.
Ontdek onze 10 premium WordPress-plug-ins om uw opmerkingen te beheren
Eerst moeten we het aantal opmerkingen krijgen en een klas koppelen.
Om het aantal reacties te krijgen, moet u de volgende code aan uw bestanden toevoegen WordPress theme. Deze code gaat in de WordPress-lus, je kunt deze vlak voor de tag toevoegen .
goedgekeurd; if ($ my_comment_count <10) {$ my_comment_count = 'nieuw'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'populair'; }?>
Deze code controleert het aantal reacties op de gepubliceerde publicatie en kent deze een waarde toe op basis van het account. Berichten met minder dan 10 opmerkingen krijgen bijvoorbeeld de klasse ' nieuwe Minder dan 20 worden genoemd opkomende ", En het enige dat meer dan 20 reacties betreft, is" Populair .
Vervolgens moet u de CSS-klasse toevoegen aan de functie post_class.
" >
Hiermee worden de nieuwe, opkomende en populaire CSS-klassen aan alle artikelen toegevoegd op basis van het aantal opmerkingen in elk bericht.
We nodigen u ook uit om ons artikel over te lezen 6 WordPress-plug-ins voor online ondertekenen van documenten
U kunt ook aangepaste CSS toevoegen om publicaties te stijlen op basis van populariteit:
.new {border: solid 1px #FFFF00;} .emerging {border: gestippelde 1px #FF9933;} .popular {border: gestippelde 1px #CC0000;}
We voegen alleen randen toe, maar u kunt alle gewenste CSS-regels toevoegen.
Ontdek ook enkele premium WordPress-plug-ins
U kunt andere gebruiken WordPress plugins om een moderne uitstraling te geven en de aansluiting op je blog of website te optimaliseren.
We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.
1. Ultieme Lidmaatschap Pro
Ultimate Membership Pro is geweldig WordPress Plugin abonnementspremie en inhoudsbeperking. Hiermee kunnen gebruikers worden beheerd volgens hun pakket (gratis of betaald) door exclusieve toegangsniveaus te creëren.
Het zal daarom mogelijk zijn om bescherm alle inhoud van uw website, of slechts een deel ervan. Het wordt bijvoorbeeld een cursus, een les, een pagina, een product, een categorie, een afbeelding, enz ...
Lees ook ons artikel op 4 premium WordPress-plug-ins om miniaturen te maken
De belangrijkste functies zijn onder meer: inhoudsbescherming, meerdere toegangsniveaus, ondersteuning voor meerdere betalingsgateways - PayPal, Authorize.net, Stripe, 2CheckOut, Bankoverschrijving-, gedeeltelijke bescherming van inhoud, En nog veel meer…
Downloaden | demonstratie | web hosting
2. Hoe schuifregelaar voor Facebook
Hoe schuifregelaar voor Facebook een WordPress Plugin premium die bezoekers de mogelijkheid biedt om reacties achter te laten op uw website. Met dit moderne en niet-opdringerige opmerkingenveld is dit WordPress Plugin biedt Like Box en Fan Page Wall-functie die uw website-integratie met het sociale netwerk van Facebook zal uitbreiden.
De plug-in biedt ook verschillende functionaliteiten om de capaciteiten van uw website uit te breiden: het heeft bijvoorbeeld een Like-sectie ("Like Box") of een pagina gewijd aan fans ("Fan Page Wall).
Ontdek ook Hoe geleidelijk Facebook- en Disqus-reacties te laden
U hoeft de knoppen "Vind ik leuk" en "Delen" niet in berichten of pagina's in te sluiten, omdat Facebook Comment Slider ze al heeft en ze op elke post of pagina kunnen verschijnen. Bezoekers vinden de 'Vind ik leuk'-knop, de "Delen" knop en het opmerkingenvak van de Facebook-schuifregelaar. Ze zullen uiteraard hun Facebook-accounts gebruiken.
Bovendien kunt u de tijd van het shake-effect in- en uitschakelen en instellen.
Downloaden | demonstratie | web hosting
3. Inloggen Ninja
Met deze premium WordPress-plug-in kunt u uw inlogpagina aanpassen. Het is meer dan alleen maatwerk uw aanmeldingsformulier. U kunt de hele pagina aanpassen door de kleur van de pagina te wijzigen, een achtergrondafbeelding toe te voegen, een logo toe te voegen en meer.
De andere functies zijn: bescherming van login- en registratieformulieren met captcha, automatisch en handmatig verbieden van IP's die u met brute kracht aanvallen, een gedetailleerd logboek van alle verbindingsactiviteiten, gebruikersomleiding op basis van rollen en gebruikersnamen, e-mailmeldingen ontvangen voor alle verbindingsgebeurtenissen, een eenvoudig te gebruiken grafische interface, gedetailleerde documentatie en meer.
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- 9 WordPress plug-ins om PayPal-betalingen te beheren op zijn blog
- 10 essentiële WordPress-plug-ins om op uw blog te installeren
- 10 WordPress-plug-ins om advertenties te beheren
- 10 WordPress plug-ins om kenmerken voor uw variabele producten te maken
Conclusie
Alstublieft ! Dat is alles voor deze tutorial, ik hoop dat je hiermee de weergave van artikelen op je WordPress-blog kunt aanpassen. Als u zich zorgen maakt of suggesties op dit gebied, laten we ons binnen het commentaargedeelte om te bespreken.
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
