CSS aanpassen voor specifieke pagina's of berichten in WordPress

Je kan het CSS aanpassen voor specifieke pagina's of berichten in WordPress. Deze CSS aanpassingen in je CSS-bestand in je thema gelden dan alleen voor bepaalde pagina's.

Ben je ooit een site tegengekomen waar de stijl van de blogberichten verschilt? Sommige sites hebben bepaalde webpagina's gemarkeerd met een aangepaste achtergrond, terwijl anderen elke categorie vormgegeven hebben met een unieke look.

Als je wilt leren hoe je elke WordPress post anders kunt stylen, dan ben je hier op de juiste plaats. In dit artikel zal ik je laten zien hoe je elke WordPress post anders kunt ontwerpen. Dit is meer een handleiding met CSS voor gevorderden.

CSS aanpassen in WordPress

Je moet eerst wat basisprincipes weten van CSS.

• Wat is de CSS code die ik nodig heb?
• Hoe achterhaal ik de CSS code?
• Kan ik zelf CSS code maken?
• Waar zit ik deze code neer?

De basis van CSS aanpassen in WordPress leer je hier:
CSS aanpassen en toevoegen voor beginners of volg onze CSS training op maat.

CSS alleen van 1 of meerdere pagina's aanpassen in WordPress

WordPress is een intelligent gebouwd content management systeem (CMS). De ontwikkelaars wisten dat WordPress-gebruikers misschien behoefte hebben aan het aanpassen van specifieke pagina's, onafhankelijk van hun andere pagina's of berichten. Om dit mogelijk te maken, biedt WordPress een intuïtieve CSS-klasse en ID-structuur waar je gebruik van kunt maken.

Het HTML-gedeeltevan elke pagina bevat een unieke klasse waarmee je je op de specifieke pagina of post kunt richten. Lees hieronder verder voor meer informatie.

CSS van de homepage aanpassen in WordPress

Om de CSS op de homepage specifiek aan te passen, kun je de klasse .home gebruiken. Deze klasse wordt automatisch toegepast op devan de startpagina/homepage van alle WordPress-thema's.

Voorbeeld CSS aanpassen:

Stel dat je een afbeelding hebt die wordt weergegeven in de koptekst van elke pagina van je WordPress website. Voor het ontwerp wil je dat dit niet boven aan de homepage wordt weergegeven, maar wel wordt weergegeven binnen de koptekst van elke andere pagina en elk bericht.

Huidige HTML binnen de koptekst:

<div id='header'>
<figure><img src='#'></figure><div id='logo'><a href='#'>  </a></div>
<figure><img src='#'></figure><div id='header-image'></div>
</div>

De CSS-regel die nodig is om te voorkomen dat een element wordt weergegeven, is:

display: none;

Alleen gericht op de CSS van de startpagina:
Als je deze regel echter rechtstreeks op de # header-image ID toepast, wordt de afbeelding nergens op de website weergegeven. Om de startpagina specifiek aan te spreken, moet je de bovenliggende class .home opnemen.

.home # header-image {display: none; }

Deze CSS-regel is alleen van toepassing op het # header-image-element als het een element is van het .home-element. En aangezien de .home-class alleen aan het body-element op de startpagina wordt toegevoegd, wordt deze alleen op de startpagina toegepast.

CSS van een specifieke pagina aanpassen in WordPress

Aan elke pagina in WordPress is een specifieke class toegevoegd aan het elementdie overeenkomt met de interne ID van die specifieke pagina. Deze class, die de pagina-ID bevat, kan worden gebruikt als referentiepunt voor het targeten van een specifieke pagina. Hoe kun je de ID van een pagina vinden? Bekijk de onderstaande handleiding:
Handleiding WordPress pagina-ID bericht-ID categorie ID vinden

CSS pagina aanpassen | Voorbeeld 1:

Als je verder gaat met het voorbeeld hierboven, wat als je de koptekstafbeelding wilde verwijderen van weergave op een pagina van je website? Je moet eerst de unieke ID van die pagina bepalen en deze op deze manier toepassen. In dit voorbeeld is de ID van de pagina 662.

.page-id-224 # header-image {display: none;}

CSS pagina aanpassen | Voorbeeld 2:

Stel je wilt de achtergrondkleur veranderen van een aantal pagina's. Vaak heet de class ‘wrapper'. Dit hangt echter van je thema af. In het onderstaande voorbeeld is de achtergrondkleur van 5 pagina's aangepast.

.page-id-109 .wrapper,  /*pagina A*/
.page-id-111 .wrapper,  /*pagina B*/
.page-id-113 .wrapper,  /*pagina C*/
.page-id-137 .wrapper,  /*pagina D*/
.page-id-233 .wrapper,  /*pagina E*/ {
background: #f2f2f2;
}

CSS van een bericht aanpassen in WordPress

WordPress voegt standaard CSS klassen toe aan verschillende elementen op uw website. Een standaard WordPress thema moet de code hebben die WordPress nodig heeft om CSS klassen toe te voegen voor body, posts, pagina's, widgets, menu's, en meer.
Een core WordPress functie genaamd post_class() wordt door thema's gebruikt om WordPress te vertellen waar deze standaard CSS klassen voor berichten moeten worden toegevoegd. Als u uw website bezoekt en de Inspectie tool in uw browser gebruikt, dan kunt u zien dat deze klassen voor elke post zijn toegevoegd.

Standaard CSS classes (stijlen) voor WordPress berichten

Hieronder vindt u de CSS klassen die standaard worden toegevoegd op basis van de pagina die een gebruiker bekijkt.

• .post-id
• .post
• .attachment
• .sticky
• .hentry (hAtom microformat pages)
• .category-ID
• .category-name
• .tag-name
• .format-{format-name}
• .type-{post-type-name}
• .has-post-thumbnail
• .post-password-required
• .post-password-protected

Voorbeeld:
.postid-1288 # header-image {display: none;}

CSS van een berichten in een categorie aanpassen in WordPress

Alle berichten vormgegeven die onder een specifieke categorie vallen, kan ook. Bijvoorbeeld de categorie genaamd nieuws.
We kunnen dit doen door de volgende aangepaste CSS aan je WordPress thema toe te voegen:

.category-nieuws {font-size: 18px;background-color:#dd0000;}

Deze CSS heeft alleen effect op alle berichten die onder de nieuws categorie vallen.
Je kan ook een zelf gemaakte stijl op een bericht in een categorie vormgeven. Doe dan dit:

.category-nieuws .inleiding {font-size: 200%;color:#90aa09;}

In dit geval is inleiding de css class

CSS aanpassen voor meerdere specifieke pagina's of berichten

Stel dat je de koptekstafbeelding op alle hierboven genoemde voorbeeldpagina's wilt verbergen.
Je kunt ze combineren tot een enkele regel zoals deze:

.home # header-image, .page-id-224 # header-image, .postid-1288 # header-image {display: none; }

Als je het voorbeeld hierboven gebruikt, kun je in de toekomst, als je extra pagina's of berichten identificeert waarop je het # header-image-element wilt verbergen, eenvoudig een andere komma aan het einde van de lijst met selectors toevoegen en de nieuwe selector opnemen.

Meer handleidingen over WordPress

• Zelf simpel HTML en CSS maken leren in WordPress voor beginners
• Typografie stijlen | css, class, span opmaakstijlen maken WordPress website
• CSS Element inspecteren WordPress aanpassen browser
• Verloop gradient achtergrondkleur overlay maken met CSS en page builder