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.

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:

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">
<div id="logo"><a href="#"> <img src="#" /> </a></div>
<div id="header-image"><img src="#" /></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-berichten blijven ook niet buiten beschouwing. Ze hebben ook hun eigen unieke ID die wordt toegevoegd aan het element <body>. Het kan als volgt worden gebruikt. In dit voorbeeld is de ID van de betreffende post 1288.

Voorbeeld:

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


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.