Skip to content
Tags

,

CSS Selector gebaseerd op pagina of post titel

Bij het stijlen van je WordPress website door middel van CSS heb je soms de behoefte aan het stijlen van een bepaalde pagina of blog artikel. Een pagina die je net anders wil weergeven dan de anderen. Misschien omdat je een bepaalde headerafbeelding per pagina of post wil hebben, of omdat je een bepaalde post een een ander lettertype of kleur wil toewijzen. Het kan zijn dat  pagina “Over ons” een groene footer (=voeter) moet hebben en een andere een gele. Met de standaard opzet van WordPress is dit in het geval van pagina’s vrij lastig aangezien je dit alleen kan doen op basis van pagina ID nummer.

Body_class

Op basis van de body_class () functie wordt de pagina of post ID al automatisch toegevoegd aan de body tag. Maar aangezien dat ID nummer op de test server – lees andere server met andere WordPress installatie –  vaak net weer anders is dan dat op de live server ben je dan weer genoodzaakt de CSS in style.css van WordPress thema aan te passen. Daarnaast werken mensen vaak beter met namen dan nummers. Kortom met een naam als class of id heb je geen last van verschillende ID nummers en kun je werken met namen die stukken makkelijker te onthouden zijn.

Toevoegen CSS selector aan body tag

Met een simpel stukje code in je functions.php van je thema kun je deze paginanaam of postnaam class automatisch generen in de body tag:
// Add Page or Post name to body class
add_filter( 'body_class', 'dnet_post_name_in_body_class' );
function dnet_post_name_in_body_class( $classes )
{
if( is_singular() )
{
global $post;
array_push( $classes, "{$post->post_type}-{$post->post_name}" );
}
return $classes;
}

Dit stukje code zal automatisch de naam van de pagina of post aan de body tag toevoegen zolang deze functie in je thema is verwekt. De meeste huidige thema’s maken hier gebruik van. Mocht dit niet zo zijn dan kun je dit door de handleiding hier op WordPress te volgen. Maar we gaan er vanuit dat dit zo is. En in dat geval zul je in de broncode van een pagina zoiets dergelijks kunnen zien:

<body class="page page-id-6 page-template page-template-default logged-in header-image content-sidebar page-pagename">

 

En met deze selector class page-pagename, of welke classnaam dan ook, zul je eenvoudig de desbetreffende pagina of post kunnen stijlen met CSS. En deze CSS selector zul je niet hoeven aan te passen bij overgang naar een ander database met ander pagina of post IDs.

Bronnen

http://www.wprecipes.com/wordpress-hack-automatically-add-post-name-to-the-body-class

http://wpprogrammer.com/snippets/add-post-page-name-to-body-class/

Gepubliceerd door Doede op woensdag 29 september 2010

Van → Wordpress

Nog geen reacties

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*