WordPress Body Class 101: Tips och tricks för temadesigners

WordPress Body Class 101: Tips och tricks för temadesigners

Genom vÄr erfarenhet av att anvÀnda WordPress har vi funnit att temat designers ofta tÀnker över en viss funktionalitet. De letar efter galna WordPress-filter och krokar för att utföra en uppgift nÀr allt de behöver Àr en enkel CSS. WordPress genererar som standard mÄnga CSS-klasser. (WordPress CSS Cheat Sheet). En av dessa CSS-klasser Àr bl.a. kroppsklassstilar. I den hÀr artikeln kommer vi att förklara WordPress-kroppsklass 101 tillsammans med att dela nÄgra anvÀndbara tips och tricks för nybörjade temadesigners.

Vad Àr WordPress Body Class?

Body Class (body_class) Àr en WordPress-funktion som ger kroppselementet olika klasser, sÄ temaförfattare kan utforma sina webbplatser effektivt med CSS. HTML body-tagg finns i frÀmst din header.php-fil som laddas pÄ varje sida. NÀr du kodar ett tema kan du bifoga body_class-funktionen till ditt kroppselement sÄ:

<body <?php body_class($class); ?>>

Genom att lÀgga till detta lilla element ger du dig sjÀlv flexibiliteten att enkelt Àndra utseendet pÄ varje sida med hjÀlp av CSS. Beroende pÄ vilken sida som laddas lÀgger WordPress automatiskt till lÀmplig klass. Om du till exempel Àr pÄ en arkivsida lÀgger WordPress automatiskt till arkivklass i kroppselementet om du vÀljer att anvÀnda den. Det gör det för nÀstan varje sida. HÀr Àr nÄgra exempel pÄ vanliga klasser som WordPress kan lÀgga till:


.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) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Som du kan se, genom att ha en sÄ kraftfull resurs till hands, kan du helt anpassa din WordPress-sida genom att bara anvÀnda CSS. Du kan anpassa specifika författarprofilsidor, datumbaserade arkiv etc. SÄ hur och nÀr skulle du anvÀnda det hÀr?

Hur man anvÀnder WordPress Body Class

I de flesta fall Ă€r WordPress body class den enkla lösningen som temadesigners ofta ignorerar. Ja, detta inkluderar oss ocksĂ„. För ungefĂ€r ett Ă„r sedan behövde vi utforma ett WordPress-menyalternativ som bara fanns pĂ„ en viss sida. Vi bestĂ€mde oss för att grĂ€va djupt för att hitta ett filter för att lĂ€gga till en speciell navigeringsklass i menyalternativen som skulle lĂ€ggas till med villkorligt uttalande. Till exempel, om det Ă€r en enda sida, lĂ€gg sedan till klassen “Blogg” i menyalternativen. Efter att ha spenderat hela tiden pĂ„ att rĂ€kna ut allt detta och skriva ett inlĂ€gg om det, pĂ„pekade en av vĂ„ra anvĂ€ndare att vi lĂ€tt kunde ha gjort det med befintlig kroppsklass sĂ„:

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

Obs: hur den anvÀnder .single body class som lÀggs till pÄ alla enskilda inlÀggssidor.

Pojke kĂ€nde vi oss inte dumma efter det. Ända sedan dess har vi noterat för att se om saker kan göras med kroppsklassen först innan vi grĂ€ver djupare.

För att ge dig ett annat exempel. NÀr en anvÀndare nÀrmade sig oss bad vi om ett sÀtt att Àndra logotypbilden pÄ sin webbplats baserat pÄ kategorisidan. De flesta temadesigner inklusive hans laddade logotypen med CSS (#header .logo). Vi föreslog hur med att anvÀnda .category-slug body class för att Àndra sin logotyp sÄ:


.category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}
.category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}

Den hÀr nya temadesignern hade samma ah-hah-ögonblick som vi hade. Förhoppningsvis fÄr du nu en titt pÄ hur du kan anvÀnda kroppsklass i dina temadesigner. Men vÀnta, det hÀr blir Ànnu kraftfullare eftersom det finns ett sÀtt för dig att lÀgga till anpassade kroppsklasser med ett filter. LÄt oss ta en titt pÄ hur man gör det.

Hur man lÀgger till anpassade kroppsklasser

WordPress har ett filter som du kan anvÀnda för att lÀgga till anpassade kroppsklasser nÀr det behövs. Vi visar hur du lÀgger till en kroppsklass med hjÀlp av filtret innan du visar det specifika anvÀndningsfallsscenariot sÄ att alla kan vara pÄ samma sida.

Eftersom kroppsklasser Àr temaspecifika mÄste du skriva en anpassad funktion i din functions.php-fil sÄ:


function my_class_names($classes) {
	// add 'class-name' to the $classes array
	$classes[] = 'test-class-name';
	// return the $classes array
	return $classes;
}

//Now add test class to the filter
add_filter('body_class','my_class_names');

OvanstĂ„ende kod lĂ€gger till ett klass “test-klass-namn” i body-taggen pĂ„ varje sida pĂ„ din webbplats. Det Ă€r inte sĂ„ illa, eller hur? Den verkliga kraften i denna funktion ligger i de villkorliga taggarna. Du kan sĂ€ga att lĂ€gga till XYZ-klass bara pĂ„ enstaka sidor etc. LĂ„t oss ta detta exempel och tillĂ€mpa det pĂ„ verkligt anvĂ€ndningsfallsscenario.

LÀgg till kategoriklass till sidor med enstaka inlÀgg

LÄt oss sÀga att du vill anpassa de enskilda inlÀggssidorna i varje kategori. Beroende pÄ typ av anpassning kan du anvÀnda kroppsklasser för det. För att hÄlla sakerna enkla, lÄt oss sÀga att du vill Àndra sidfÀrgen pÄ sidan baserat pÄ kategorin för enskilda inlÀgg. Du kan göra det genom att lÀgga till kategoriklasser i sidvisningarna för ett enskilt inlÀgg. Klistra in följande funktion i temas funktioner.php-fil:


// add category nicenames in body class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
	return $classes;
}

add_filter('body_class', 'category_id_class');

Koden ovan lÀgger till kategoriklassen i din kroppsklass för sidor med enstaka inlÀgg. Du kan sedan anvÀnda css-klasser för att utforma det som du vill.

LÀgg till Page Slug i Body Class för dina WordPress-teman

Klistra in följande kod i temas funktioner.php-fil:


//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

LÀs vÄr artikel om sidor i kroppsklass som förklarar varför vi behövde detta.

WebblÀsaravkÀnning och webblÀsarspecifika kroppsklasser

Ibland kan du behöva ha speciella CSS-stilar för att allt ska fungera rÀtt i vissa webblÀsare (TIPS: Internet Explorer). Nathan Rice föreslog en vÀldigt cool lösning som lÀgger till webblÀsarspecifika klasser i kroppsklass baserat pÄ webblÀsaren som anvÀndaren besöker webbplatsen frÄn.

Allt du behöver göra Àr att klistra in följande kod i filen functions.php:


<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

Du kan sedan anvÀnda klasser som:

.ie .navigation {some item goes here}

Om det Àr en liten stoppning eller marginalproblem Àr detta ett ganska snabbt sÀtt att fixa det.

Fler anvÀndningsfall:

Vi kan antagligen lista mycket mer anvÀndningsfall, men annars kommer den hÀr artikeln inte att gÄ ur hand. Hela poÀngen med det var att hjÀlpa nya temautvecklare att förstÄ grunderna i WordPress body class och dess fördelar. AnvÀndningsfallet Àr begrÀnsat till din fantasi. Vi har sett kommersiella temautvecklare (Genesis) anvÀnda kroppsklasser för att erbjuda olika layoutalternativ. Till exempel helsideslayout, sidofÀltets innehÄll, sidofÀltet osv. Genom att göra det kan anvÀndaren enkelt byta layout pÄ sin sida utan att oroa sig för utseendeproblemen eftersom det redan har tagits hand om med CSS.0

Vi har sett nÄgra utvecklare lÀgga till HTTP-förfrÄgningar för att ladda CSS-filer för olika fÀrgscheman som de erbjuder. I mÄnga fall Àr förÀndringarna ocksÄ mycket smÄ. Det Àr ingen mening att ha 3 formatmallar laddade nÀr man kan göra jobbet. AnvÀnd bara kroppsklass för det.

Förhoppningsvis tyckte du att den hÀr artikeln var anvÀndbar. Vi skulle gÀrna höra dina tankar om Body Class och hur du har anvÀnt det tidigare eller planerar att göra det i framtiden.