Toevoegen aan de Body Class in WordPress

In deze korte tutorial bekijken we de body-klasse van WordPress en hoe we deze kunnen manipuleren met behulp van core API-aanroepen.

In het bijzonder hebben we betrekking op het toevoegen van lichaamsklassen, het verwijderen van lichaamsklassen, het conditioneel toevoegen van lichaamsklassen en enkele gebruikscasussen.

De Body Class: waar kan het voor worden gebruikt??

De lichaam class in WordPress is een klasse of een reeks klassen die wordt toegepast op het HTML-body-element. Dit is handig voor het toepassen van unieke stijlen op verschillende delen van een WordPress-site lichaam klassen kunnen voorwaardelijk worden toegevoegd. 

WordPress bevat een aantal standaardlichaamsklassen die in dit artikel worden behandeld. 

Toevoegen aan de Body Class

Er zijn een paar methoden beschikbaar voor het toevoegen van nieuwe lichaamsklassen in WordPress. Deze tutorial gaat over het toevoegen van de body class binnen een thema (meestal gedefinieerd in header.php) de ... gebruiken body_class functie en klassen toevoegen met behulp van een filter.

Het thema bewerken: een bodyclasswaarde doorgeven

Dit is een heel eenvoudige manier om lichaamsklassen toe te voegen en is vooral handig als u een thema maakt. De body class wordt normaal gesproken opgenomen in een thema met behulp van de volgende code:

>

Om hier je eigen klasse aan toe te voegen, kun je een argument aan de functie doorgeven, zoals:

>

Dit zou een body class van toevoegen mijn klas op elke pagina van uw WordPress-site.

Meerdere lichaamsklassen toevoegen

Er kunnen momenten zijn dat u meer dan één lichaamsklasse wilt toevoegen. Dit kan worden bereikt met behulp van een eenvoudige array:

> 

Dit neemt alle klassen in de array en geeft ze door aan de body_class functie.

Conditioneel toevoegen van een Body Class

Je kunt ook een body class conditioneel toevoegen. Dit is eenvoudig met een paar eenvoudige PHP. In dit voorbeeld wordt de voorwaardelijke methode WooCommerce van gebruikt is_shop () :

Opmerking: WooCommerce voegt al een klasse op basis hiervan toe, dus merk op dat dit slechts een voorbeeld is.

Wat de bovenstaande code aan het doen is, is controleren of de eerste functie waar is, als het waar is, dan heeft de lichaamsklasse dat wel is-woocommerce-shop eraan toegevoegd; anders, als het niet waar is, wordt alleen de standaard bodyclass weergegeven.

Een Body Class per filter toevoegen

Het is mogelijk om een ​​WordPress-filter te gebruiken om ook een bodyklasse toe te voegen. Deze methode zorgt ervoor dat de themacode schoner blijft en is vooral handig als u een bodyklasse wilt toevoegen vanuit een plug-in. Deze code kan gaan in je thema's functions.php of in je plug-in.

add_filter ('body_class', 'my_body_classes'); function my_body_classes ($ classes) $ classes [] = 'class-name'; return $ klassen; 

Hiermee voegt u een klasse (of klassen, afhankelijk van uw implementatie) toe aan de array en retourneert deze.

Meerdere lichaamsklassen toevoegen per filter

Als u meer klassen aan het filter wilt toevoegen, voegt u gewoon een andere regel toe waarmee een andere waarde aan de array wordt toegevoegd:

add_filter ('body_class', 'my_body_classes'); function my_body_classes ($ classes) $ classes [] = 'class-name'; $ classes [] = 'class-name-two'; return $ klassen; 

Voorwaardelijk een Body Class per filter toevoegen

Condities kunnen ook in een filter worden gebruikt. Met hetzelfde voorbeeld dat we eerder hebben gebruikt, kunnen we hetzelfde effect bereiken:

add_filter ('body_class', 'my_body_classes'); function my_body_classes ($ classes) if (is_shop ()) $ classes [] = 'class-name'; $ classes [] = 'class-name-two';  retourneer $ klassen; 

Een Body Class toevoegen op basis van de paginasjabloon

WordPress voegt standaard een bodyklasse toe voor uw paginasjabloon, maar als u een front-end ontwikkelaar bent en naamgevingsconventies hebt voor uw CSS, wilt u dit misschien wijzigen. 

Als voorbeeld, een paginasjabloon met de naam "halfhalf" zou een body class van hebben pagina-template-page-halfhalf-php - niet goed.

Dus laten we een nieuwe klasse toevoegen, met behulp van een filter en een voorwaardelijke tag van WordPress:

add_filter ('body_class', 'halfhalf_body_class'); function halfhalf_body_class ($ classes) if (is_page_template ('page-halfhalf.php')) $ classes [] = 'half-helft-pagina';  retourneer $ klassen; 

Hiermee wordt de lichaamsklasse toegevoegd halfhalf-pagina als de paginasjabloon is page-halfhalf.php.

Een lichaamsklasse verwijderen

Het is onwaarschijnlijk dat u een body class wilt verwijderen, omdat u niet gedwongen bent om ze te gebruiken en zij voegen zeer weinig toe aan uw markup. Dat gezegd hebbende, is het mogelijk om dit met hetzelfde te doen body_class filter.

add_filter ('body_class', 'adjust_body_class'); function adjust_body_class ($ classes) foreach ($ classes as $ key => $ value) if ($ value == 'woocommerce-page') unset ($ classes [$ key]);  retourneer $ klassen; 

Krediet: deze code is aangepast van dit artikel.

In dit voorbeeld doorlopen we de reeks klassenamen, waardoor de klassenaam wordt uitgeschakeld woocommerce-pagina als het bestaat, en dan de klassen retourneert, minus die zijn verwijderd.

Dat is alles Mensen!

In deze kleine zelfstudie hebben we twee methoden behandeld om aan de body-klasse van WordPress toe te voegen:

1. Door de body_class functie binnen een thema,
2. En door een filter te gebruiken. 

We hebben ook behandeld voor het conditioneel toevoegen van lichaamsklassen en het verwijderen van lessen, mocht dit ooit nodig zijn in de toekomstige ontwikkeling.