Cómo agregar una página slug en la clase Body de sus temas de WordPress

Si trabaja en temas de WordPress con regularidad, probablemente sea mejor familiarizarse con estas hojas de trucos CSS preconstruidas y generadas por WordPress. Recientemente, mientras trabajábamos en un proyecto temático personalizado, nos encontramos con la necesidad de personalizar algunos elementos basados ​​en diferentes páginas. WordPress tiene estas cosas llamadas lecciones corporales que devuelve la página de la clase, la plantilla de página- {nombre de archivo} y la identificación de página- {número}. Page-id- {number} no se pudo utilizar porque los ID de página cambian de desarrollo a distribución. Tampoco queríamos crear una plantilla de página personalizada con código repetitivo. Sabíamos que podíamos mantener lo mismo en todas estas páginas que eran páginas slugs, por lo que decidimos agregar las páginas slugs en la clase body, lo que nos permitió hacer todas las personalizaciones que queríamos sin complicaciones. En este artículo, le mostraremos cómo agregar la barra de página en la clase de cuerpo de sus temas de WordPress.

Dado que este es un código específico del tema, recomendamos colocarlo en el archivo functions.php de su tema.

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

Ahora comenzará a ver una nueva clase de cuerpo producida así: página- {slug}. Use esa clase para anular los estilos predeterminados y personalizar elementos para páginas específicas.

Por ejemplo, si intenta modificar un div con la clase de widget. Puedes tener tu CSS así:

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

Espero que este tutorial le resulte útil.

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *