SÄ hÀr lÀgger du till sidor i kroppsklass för dina WordPress-teman

SÄ hÀr lÀgger du till sidor i kroppsklass för dina WordPress-teman

Om du arbetar med WordPress-teman regelbundet Àr det förmodligen bÀst att bekanta dig med dessa standard WordPress-genererade CSS-fuskark. Nyligen under arbetet med ett anpassat temaprojekt fann vi ett behov av att anpassa vissa objekt baserat pÄ olika sidor. WordPress har dessa saker som kallas kroppsklasser som matar ut klass-sidan, sidmall- {filnamn} och sid-id- {nummer}. Vi kunde inte anvÀnda page-id- {number} eftersom sid-ID Àndras frÄn utveckling till distribution. Vi ville inte heller skapa en anpassad sidmall med repetitiv kod. Vi visste att vi kan hÄlla en sak desamma pÄ alla dessa sidor som var sid-sniglar, sÄ vi bestÀmde oss för att lÀgga till sid-sniglar i kroppsklass som gjorde det möjligt för oss att göra alla de anpassningar vi ville utan nÄgra komplikationer. I den hÀr artikeln kommer vi att visa dig hur du lÀgger till en sidugn i kroppsklass för dina WordPress-teman.

Eftersom detta Àr en temaspecifik kod rekommenderar vi att du lÀgger den i ditt temas 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' );

Nu börjar du se att en ny kroppsklass skickas ut sÄ hÀr: sida- {slug}. AnvÀnd den klassen för att ÄsidosÀtta dina standardstilar och anpassa element för specifika sidor.

Till exempel om du försökte Àndra en div med widgets-klass. Du kan fÄ din css sÄ hÀr:


#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Hoppas att du kommer att hitta den hÀr handledningen till hjÀlp.