WordPress Body Class 101 Tips en trucs voor thema-ontwerpers

Door onze ervaring met het gebruik van WordPress hebben we ontdekt dat thema-ontwerpers vaak een bepaalde functionaliteit bedenken. Ze zijn op zoek naar gekke WordPress-filters en -haken om een ​​taak te volbrengen wanneer ze slechts enkele eenvoudige CSS nodig hebben. WordPress genereert standaard veel CSS-klassen. (WordPress CSS Cheat Sheet). Een van deze CSS-klassen is onder meer de bodyclass-stijlen. In dit artikel zullen we de WordPress body class 101 uitleggen en enkele handige tips en trucs delen voor beginnende thema-ontwerpers.

Wat is WordPress Body Class?

Body Class (body_class) is een WordPress-functie die het body-element verschillende klassen geeft, dus thema-auteurs kunnen hun sites effectief inrichten met CSS. HTML-body-tag is aanwezig in meestal uw header.php-bestand dat op elke pagina wordt geladen. Wanneer u een thema codeert, kunt u de body_class-functie als volgt aan uw lichaamselement koppelen:

Door dit kleine element toe te voegen, geeft u uzelf de flexibiliteit om het uiterlijk van elke pagina eenvoudig aan te passen door CSS te gebruiken. Afhankelijk van het type pagina dat wordt geladen, voegt WordPress automatisch de juiste klasse toe. Als u zich bijvoorbeeld op een archiefpagina bevindt, voegt WordPress automatisch archiefklasse toe aan het hoofdelement als u ervoor kiest om het te gebruiken. Het doet dat voor zowat elke pagina. Hier zijn enkele voorbeelden van algemene klassen die WordPress zou kunnen toevoegen:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid- (id)  .attachment- (mime-type)  .author  .author- (user_nicename)  .category  .category- (slug)  .tag  .tag- (slug)  .pagina -ouder  .pagina-child parent-pageid- (id)  ​​.page-template paginasjabloon- (template bestandsnaam)  .zoek-resultaten  .search-no-results  .logged-in  .paged- (paginanummer)  .single-paged- (paginanummer)  .pagina-paged- (paginanummer)  .category-paged- (paginanummer)  .tag-paged- ( paginanummer)  .date-paged- (paginanummer)  .author-paged- (paginanummer)  .search-paged- (paginanummer) . 

Zoals u kunt zien, kunt u door een dergelijk krachtig hulpmiddel bij de hand te hebben, uw WordPress-pagina volledig aanpassen door alleen CSS te gebruiken. U kunt specifieke pagina's van het auteursprofiel, op datum gebaseerde archieven, enz. Aanpassen. Dus hoe en wanneer zou u dit gebruiken?

Hoe WordPress Body Class te gebruiken

In de meeste gevallen is de lichaamsclassificatie van WordPress de eenvoudige oplossing die thema-ontwerpers vaak negeren. Ja, dit omvat ons ook. Ongeveer een jaar geleden moesten we een WordPress-menu-item stijlen dat alleen op een specifieke pagina stond. We besloten om diep te graven om een ​​filter te vinden om een ​​speciale navigatieklasse toe te voegen aan de menu-items die met een voorwaardelijke verklaring zouden worden toegevoegd. Als het bijvoorbeeld een enkele pagina is, voegt u de klasse 'Blog' toe aan de menu-items. Nadat we alle tijd hadden besteed aan het uitzoeken van dit alles en er een bericht over hadden geschreven, wees een van onze gebruikers erop dat we dat eenvoudig hadden kunnen doen met de bestaande body class, zoals:

.single #navigation .leftmenublog div display: inline-block! important;

Merk op: hoe het de .single body class gebruikt die is toegevoegd aan alle single post-pagina's.

Jongen vonden we niet stom daarna. Sindsdien hebben we een notitie gemaakt om te zien of dingen eerst met de lichaamsklasse gedaan kunnen worden voordat we dieper gaan graven.

Om je een ander voorbeeld te geven. Zodra een gebruiker ons benaderde met het verzoek om een ​​manier om de afbeelding van het logo op hun website te wijzigen op basis van de categoriepagina. De meeste thema-ontwerpen, inclusief de zijne, laden het logo met behulp van een CSS (#header .logo). We hebben voorgesteld hoe je de .category-slug body class kunt gebruiken om zijn logo te veranderen zoals:

 .category-advies #header .logo background: url (images / logo-advice.png) no-repeat! important; .category-health #header .logo background: url (images / logo-health.png) nee- herhaal! belangrijk; 

Deze nieuwe themaontwerper had hetzelfde ah-hah moment dat we hadden. Hopelijk begrijp je nu hoe je lichaamscategorie kunt gebruiken in je themaontwerpen. Maar wacht, dit wordt nog krachtiger omdat er een manier is waarop u aangepaste bodyklassen kunt toevoegen met behulp van een filter. Laten we eens kijken hoe dat te doen.

Aangepaste lichaamsklassen toevoegen

WordPress heeft een filter dat u kunt gebruiken om aangepaste lichaamsklassen toe te voegen wanneer dat nodig is. We laten u zien hoe u een body class toevoegt met behulp van het filter voordat u het specifieke use case scenario toont, zodat iedereen op dezelfde pagina kan zijn.

Omdat body classes themaspecifiek zijn, zou je een aangepaste functie moeten schrijven in je functions.php-bestand, zoals:

 function my_class_names ($ classes) // voeg 'class-name' toe aan de $ classes array $ classes [] = 'test-class-name'; // retourneer de array $ return $ classes;  // Voeg nu testklasse toe aan het filter add_filter ('body_class', 'my_class_names'); 

De bovenstaande code voegt een klasse "test-class-naam" toe aan de body-tag op elke pagina op uw website. Dat is niet zo erg toch? De echte kracht van deze functie zit in de voorwaardelijke tags. Je kunt de XYZ-klasse alleen op afzonderlijke pagina's toevoegen, enzovoort. Laten we dit voorbeeld nemen en toepassen op echte use-case-scenario's.

Voeg categorieklasse toe aan enkele berichtpagina's

Stel dat u de afzonderlijke berichtpagina's van elke categorie wilt aanpassen. Afhankelijk van het type aanpassing, kunt u er klassenklassen voor gebruiken. Om de zaken eenvoudig te houden, kun je zeggen dat je de achtergrondkleur van de pagina wilt wijzigen op basis van de categorie losse berichten. U kunt dit doen door categorieklassen aan uw afzonderlijke paginaweergaven toe te voegen. Plak de volgende functie in het functie.php-bestand van uw thema:

 // voeg categorie nicenames toe in de body class functie category_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) als $ categorie) $ classes [] = $ category-> category_nicename; return $ klassen;  add_filter ('body_class', 'category_id_class'); 

De bovenstaande code voegt de categorie klasse toe aan uw lichaamsklasse voor enkelvoudige berichtpagina's. Je kunt dan CSS-klassen gebruiken om het naar eigen inzicht in te richten.

Voeg pagina Slug in Body Class van uw WordPress-thema's toe

Plak de volgende code in het bestand functions.php van uw thema:

 // 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'); 

Lees ons artikel op pagina slug in body class dat uitlegt waarom we dit nodig hadden.

Browser detectie en browser specifieke lichaamsklassen

Soms moet u speciale CSS-stijlen hebben zodat alles in bepaalde browsers werkt (HINT: Internet Explorer). Nathan Rice heeft een zeer coole oplossing voorgesteld die browserspecifieke klassen toevoegt aan de lichaamscategorie op basis van de browser van waaruit de gebruiker de site bezoekt.

Het enige wat je hoeft te doen is de volgende code in je functions.php bestand te plakken:

Je kunt dan lessen gebruiken zoals:

.dat wil zeggen .navigatie een item komt hier

Als het om een ​​kleine opvulling of een marginprobleem gaat, is dit een tamelijk snelle manier om het te verhelpen.

Meer gebruikskoffers:

We kunnen waarschijnlijk nog veel meer gebruiksgevallen opnoemen, maar we zullen niet anders dit artikel uit de hand laten lopen. Het ging erom nieuwe ontwikkelaars van nieuwe thema's de basisprincipes van de WordPress-bodyclass en de voordelen ervan te helpen begrijpen. De use-cases zijn beperkt tot uw verbeelding. We hebben gezien dat commerciële thema-ontwikkelaars (Genesis) lichaamsklassen gebruiken om verschillende lay-outopties aan te bieden. Bijvoorbeeld Full Page Layout, Sidebar Content, Content Sidebar etc. Door dit te doen, kan de gebruiker gemakkelijk de lay-out van zijn pagina veranderen zonder zich zorgen te maken over de problemen met het uiterlijk omdat er al voor gezorgd is met CSS.0

We hebben gezien dat sommige ontwikkelaars HTTP-verzoeken toevoegen om CSS-bestanden te laden voor verschillende kleurenschema's die ze aanbieden. In veel gevallen zijn de wijzigingen ook zeer gering. Het heeft geen zin om 3 stylesheets te laden wanneer men de klus kan klaren. Gebruik gewoon lichaamsklasse daarvoor.

Hopelijk vond je dit artikel nuttig. We horen graag uw mening over Body Class en hoe u deze in het verleden hebt gebruikt of bent van plan om dit in de toekomst te doen.