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

Under hela vår erfarenhet av att använda WordPress har vi sett att temadesigners ofta tänker för mycket på en viss funktionalitet. De letar efter galna WordPress-filter och krokar för att få jobbet gjort när allt de behöver är en enkel CSS. WordPress genererar som standard flera CSS-klasser. (CSS CSS cheat sheet). En av dessa CSS-klasser är kroppsklassstilarna. I den här artikeln kommer vi att förklara WordPress body class 101 och dela med oss ​​av några användbara tips och tricks för dem som börjar med temadesign.

Vad är WordPress kroppsklass?

Body Class (body_group) är en WordPress-funktion som ger kroppselement olika klasser, så att temaförfattare effektivt kan designa sina webbplatser med hjälp av CSS. HTML body-taggen visas huvudsakligen i din header.php-fil som laddas på varje sida. När du kodar ett tema kan du koppla body_group-funktionen till ditt kroppselement så här:

>

Genom att lägga till detta lilla element har du flexibiliteten att enkelt ändra utseendet och känslan på varje sida med CSS. Beroende på vilken typ av sida som laddas kommer WordPress automatiskt att lägga till lämplig klass. Om du till exempel är på en arkivsida kommer WordPress automatiskt att lägga till arkivklassen till body-elementet om du väljer att använda den. Det gör det för de flesta sidor. 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, med en så kraftfull resurs tillgänglig, kan du helt anpassa din WordPress-webbplats med bara CSS. Du kan anpassa specifika författarprofilsidor, filer baserat på datum etc. Så hur och när skulle du använda detta?

Hur man använder WordPress Body Class

I de flesta fall är WordPress body class den enkla lösningen som temadesigners ofta förbiser. Ja, detta inkluderar även oss. För ungefär ett år sedan behövde vi designa ett WordPress-menyalternativ som bara var tillgängligt på en specifik sida. Vi bestämde oss för att dyka in i filtersökning för att lägga till ett speciellt lager av navigering till menyalternativen som ska läggas till med hjälp av villkorliga uttalanden. Till exempel, om det är en enstaka sida, lägg till klassen “Blogg” till menyalternativen. Efter att ha tillbringat hela tiden med att avkoda allt det och skriva ett inlägg om det, påpekade en av våra användare att vi enkelt kan göra det med en befintlig kroppsklass så här:

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

Obs: hur du använder .single body-klassen läggs till på alla individuella inläggssidor.

Pojke, känner vi oss inte dumma efteråt? Sedan dess har vi gjort anteckningar för att se om något kan göras med kroppslagret innan vi gräver djupare.

För att ge dig ett annat exempel. När en användare kontaktade oss och frågade hur man ändrar logotypbilden på sin webbplats baserat på kategorisidan. De flesta temadesigner, inklusive din, har redan logotypen laddad med CSS (#header .logo). Vi föreslår att du använder kroppsklassen .category-slug för att ändra din logotyp så här:

.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 har haft samma tid ah-hah som vi har. Förhoppningsvis lär du dig nu hur du kan använda kroppsklassen i dina temadesigner. Men vänta, det här är ännu mer kraftfullt eftersom det finns ett sätt att lägga till anpassade kroppsklasser med hjälp av filter. Låt oss se 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 efter behov. Vi visar dig hur du lägger till en kroppsklass med ett filter innan vi visar dig ett specifikt användningsfall så att alla kan stanna på samma sida.

Eftersom kroppsklasser är ämnesspecifika måste du skriva en anpassad funktion i din .php-fil. Så här:

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

Koden ovan kommer att lägga till ett “testklassnamn” till body-taggen på varje sida på din webbplats. Det är väl inte så illa? Den verkliga kraften i denna funktion ligger i de villkorliga etiketterna. Du kan kräva att bara lägga till lager XYZ på enskilda sidor etc. Låt oss ta det här exemplet och tillämpa det på ett verkligt scenario.

Lägg till kategoriklasser i enskilda inlägg

Låt oss säga att du vill anpassa individuella inläggssidor för varje kategori. Beroende på den anpassade typen kan du använda kroppsklasser för det. För enkelhetens skull, låt oss säga att du vill ändra bakgrundsfärgen på sidan baserat på kategorin för varje inlägg. Du kan göra detta genom att lägga till kategoriklasser till din sidvy med enstaka inlägg. Klistra in följande funktion i ditt temas.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');

Ovanstående kod kommer att lägga till kategoriklass till din kroppsklass för enstaka inläggssidor. Sedan kan du använda css-klasser för att designa det som du vill.

Lägg till sidsniglar i kroppsklassen för dina WordPress-teman

Klistra in följande kod i ditt temas.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 slug in body class sida som kommer att förklara varför vi behöver detta.

Webbläsardetektering och webbläsarspecifika kroppsklasser

Ibland kan du behöva ha speciella CSS-stilar för att saker ska fungera korrekt i vissa webbläsare (Sugerencia: Internet Explorer). Nåväl, Nathan Rice föreslog en mycket intressant lösning som är att lägga till webbläsarspecifika klasser till kroppsklassen baserat på webbläsaren som användaren besöker webbplatsen med.

Allt du behöver göra är att klistra in följande kod i din .php-fil.

Sau đó, bạn có thể sử dụng các lớp như:
.ie .navigation {some item goes here}






	



	



	



	



Om det är ett mindre marginal- eller stoppningsproblem är detta en ganska snabb lösning.
Flera användningsfall:
Vi skulle kunna lista fler användningsfall, men det gör vi inte, annars skulle den här artikeln gå över styr.  Huvudmålet är att hjälpa utvecklare av nya teman att förstå de grundläggande koncepten för WordPress-kroppsklassen och dess fördelar.  Användningsfall är begränsade till din fantasi.  Vi har sett utvecklare av affärstema (Genesis) använda kroppsklasser för att tillhandahålla olika designalternativ.  Exempel: Helsideslayout, Content Sidebar, Content Sidebar, etc. På så sätt kan användare enkelt ändra designen på sin sida utan att oroa sig för utseendeproblem på grund av det. fixat med CSS.0
Vi har sett några utvecklare lägga till HTTP-förfrågningar för att ladda CSS-filer för de olika färgscheman de erbjuder.  I många fall är förändringarna också mycket små.  Det finns ingen snygg 3-arks laddningspunkt när jobbet kan göras.  Använd bara kroppsklass för det.






	



	



	



	



Hoppas den här artikeln har varit användbar för dig.  Vi skulle vara glada att höra dina tankar om Body Classes och hur du har använt det tidigare eller planerar att göra i framtiden.