Hoe pagina slug in body class van uw WordPress-thema's toevoegen

Als je regelmatig aan WordPress-thema's werkt, is het waarschijnlijk het beste om jezelf vertrouwd te maken met deze standaard door WordPress gegenereerde CSS-spiekbrief. Onlangs hebben we tijdens het werken aan een aangepast themaproject een behoefte gevonden om bepaalde items aan te passen op basis van verschillende pagina's. WordPress heeft deze dingen body classes genoemd, die de klassenpagina, paginasjabloon- bestandsnaam en pagina-id- nummer uitvoeren. We kunnen pagina-id- nummer niet gebruiken omdat pagina-ID's veranderen van ontwikkeling tot implementatie. We wilden ook geen aangepaste paginasjabloon met repetitieve code maken. We wisten dat we één ding hetzelfde konden houden op al deze pagina's die pagina-slakken waren, dus we besloten om paginaslakken in de body class toe te voegen, waardoor we zonder enige complicaties alle gewenste aanpassingen konden doen. In dit artikel laten we u zien hoe u paginaslug toevoegt in de body class van uw WordPress-thema's.

Omdat dit een thema-specifieke code is, raden we u aan deze in uw thema's te plaatsen functions.php het dossier.

 // Pagina Slug Body Class-functie add_slug_body_class ($ classes) global $ post; if (isset ($ post)) $ classes [] = $ post-> post_type. '-'. $ Post-> POST_NAME;  retourneer $ klassen;  add_filter ('body_class', 'add_slug_body_class'); 

Nu zul je beginnen met het zien van een nieuwe body class die als volgt wordt uitgevoerd: page- slug. Gebruik die klasse om uw standaardstijlen te overschrijven en elementen voor specifieke pagina's aan te passen.

Bijvoorbeeld als u probeert een div te wijzigen met widgetsklasse. Je kunt je CSS als volgt hebben:

 #sidebar .widgets background: #fff; kleur: # 000; .page-education #sidebar .widgets background: # 000; kleur: #fff; 

Ik hoop dat je deze tutorial nuttig zult vinden.