WordPress Body Class 101: consejos y trucos para dise√Īadores de temas

A lo largo de nuestra experiencia de uso de WordPress, hemos encontrado que a menudo los dise√Īadores de temas piensan demasiado en una cierta funcionalidad. Est√°n buscando filtros y ganchos locos de WordPress para realizar una tarea cuando todo lo que necesitan es un simple CSS. WordPress por defecto genera muchas clases de CSS. (Hoja de trucos CSS de WordPress). Una de estas clases de CSS son los estilos de clase de cuerpo. En este art√≠culo, explicaremos la clase de cuerpo 101 de WordPress y compartiremos algunos consejos y trucos √ļtiles para los dise√Īadores de temas principiantes.

¬ŅQu√© es WordPress Body Class?

Body Class (body_class) es una funci√≥n de WordPress que le da al elemento body diferentes clases, por lo que los autores de temas pueden dise√Īar sus sitios de manera efectiva con CSS. La etiqueta del cuerpo HTML est√° presente principalmente en su archivo header.php que se carga en cada p√°gina. Al codificar un tema, puede adjuntar la funci√≥n body_class a su elemento body de la siguiente manera:

>

Al agregar este peque√Īo elemento, tiene la flexibilidad de modificar f√°cilmente el aspecto de cada p√°gina mediante CSS. Dependiendo del tipo de p√°gina que se carga, WordPress agrega autom√°ticamente la clase adecuada. Por ejemplo, si est√° en una p√°gina de archivo, WordPress agregar√° autom√°ticamente la clase de archivo al elemento del cuerpo si elige usarlo. Lo hace para casi todas las p√°ginas. Aqu√≠ hay algunos ejemplos de clases comunes que WordPress podr√≠a agregar:

.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) {}

Como puede ver, al tener a mano un recurso tan poderoso, puede personalizar completamente su p√°gina de WordPress usando solo CSS. Puede personalizar p√°ginas espec√≠ficas de perfil de autor, archivos basados ‚Äč‚Äčen fechas, etc. Entonces, ¬Ņc√≥mo y cu√°ndo usar√≠a esto?

Cómo usar WordPress Body Class

En la mayor√≠a de los casos, la clase de cuerpo de WordPress es la soluci√≥n simple que los dise√Īadores de temas a menudo ignoran. S√≠, esto tambi√©n nos incluye a nosotros. Hace aproximadamente un a√Īo, necesit√°bamos dise√Īar un elemento de men√ļ de WordPress que solo estaba en una p√°gina espec√≠fica. Decidimos profundizar para encontrar un filtro para agregar una clase de navegaci√≥n especial a los elementos del men√ļ que se agregar√≠an mediante una declaraci√≥n condicional. Por ejemplo, si se trata de una sola p√°gina, agregue la clase “Blog” a los elementos del men√ļ. Despu√©s de pasar todo el tiempo descifrando todo eso y escribiendo una publicaci√≥n al respecto, uno de nuestros usuarios se√Īal√≥ que podr√≠amos haberlo hecho f√°cilmente con la clase corporal existente de esta manera:

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

Aviso: cómo usa la clase de cuerpo .single que se agrega en todas las páginas de publicaciones individuales.

Chico, ¬Ņno nos sentimos est√ļpidos despu√©s de eso? Desde entonces, hemos hecho una nota para ver si las cosas se pueden hacer primero con la clase de cuerpo antes de profundizar.

Para darte otro ejemplo. Una vez que un usuario se nos acerc√≥ pidiendo una forma de cambiar la imagen del logotipo en su sitio web en funci√≥n de la p√°gina de categor√≠a. La mayor√≠a de los dise√Īos de temas, incluido el suyo, cargaban el logotipo utilizando un CSS (#header .logo). Sugerimos c√≥mo usar la clase de cuerpo .category-slug para cambiar su logotipo de esta manera:

.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;}

Este nuevo dise√Īador de temas tuvo el mismo momento ah-hah que tuvimos. Con suerte, ahora est√° aprendiendo c√≥mo puede utilizar la clase corporal en sus dise√Īos de temas. Pero espere, esto se vuelve a√ļn m√°s poderoso porque hay una manera de agregar clases de cuerpo personalizadas usando un filtro. Echemos un vistazo a c√≥mo hacer eso.

Cómo agregar clases de cuerpo personalizado

WordPress tiene un filtro que puede utilizar para agregar clases de cuerpo personalizadas cuando sea necesario. Le mostraremos cómo agregar una clase de cuerpo usando el filtro antes de mostrarle el escenario de caso de uso específico para que todos puedan estar en la misma página.

Debido a que las clases de cuerpo son específicas del tema, necesitaría escribir una función personalizada en su archivo functions.php de esta manera:

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

El c√≥digo anterior agregar√° una clase “test-class-name” a la etiqueta del cuerpo en cada p√°gina de su sitio web. Eso no es tan malo ¬Ņverdad? El poder real de esta funci√≥n est√° en las etiquetas condicionales. Puede decir que agregue la clase XYZ solo en p√°ginas individuales, etc. Tomemos este ejemplo y apl√≠quelo al escenario de caso de uso real.

Agregar clase de categoría a páginas de publicación individuales

Digamos que desea personalizar las p√°ginas de publicaci√≥n individuales de cada categor√≠a. Dependiendo del tipo de personalizaci√≥n, puede usar clases de cuerpo para ello. Para simplificar las cosas, supongamos que desea cambiar el color de fondo de la p√°gina en funci√≥n de la categor√≠a de publicaciones individuales. Puede hacerlo agregando clases de categor√≠a a sus vistas de p√°gina de publicaci√≥n √ļnica. Pegue la siguiente funci√≥n en el archivo functions.php de su tema:

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

El c√≥digo anterior agregar√° la clase de categor√≠a en su clase de cuerpo para p√°ginas de publicaci√≥n √ļnica. Luego puede usar las clases css para dise√Īarlo como desee.

Agregue babosa de p√°gina en la clase de cuerpo de sus temas de WordPress

Pegue el siguiente código 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' );

Lea nuestro artículo en la página babosa en clase corporal que explicará por qué necesitábamos esto.

Detección del navegador y clases corporales específicas del navegador

A veces es posible que necesite tener estilos CSS especiales para que todo funcione correctamente en ciertos navegadores (SUGERENCIA: Internet Explorer). Bueno, Nathan Rice sugirió una solución muy interesante que agrega clases específicas del navegador a la clase corporal en función del navegador desde el que el usuario visita el sitio.

Todo lo que tiene que hacer es pegar el siguiente código en su archivo functions.php:


Luego puede usar clases como:

.ie .navigation {some item goes here}

Si se trata de un peque√Īo problema de margen o relleno, esta es una forma bastante r√°pida de solucionarlo.

M√°s casos de uso:

Probablemente podamos enumerar muchos m√°s casos de uso, pero no lo haremos, de lo contrario este art√≠culo se saldr√° de control. El objetivo principal era ayudar a los desarrolladores de nuevos temas a comprender los conceptos b√°sicos de la clase corporal de WordPress y sus ventajas. Los casos de uso est√°n limitados a su imaginaci√≥n. Hemos visto a desarrolladores de temas comerciales (G√©nesis) usar clases corporales para ofrecer varias opciones de dise√Īo. Por ejemplo, Dise√Īo de p√°gina completa, Contenido de la barra lateral, Barra lateral de contenido, etc. Al hacerlo, el usuario puede cambiar f√°cilmente el dise√Īo de su p√°gina sin preocuparse por los problemas de aspecto porque ya se ha solucionado con CSS.0

Hemos visto a algunos desarrolladores agregar solicitudes HTTP para cargar archivos CSS para varios esquemas de color que ofrecen. En muchos casos, los cambios tambi√©n son muy peque√Īos. No tiene sentido cargar 3 hojas de estilo cuando se puede hacer el trabajo. Solo usa body class para eso.

Esperemos que este art√≠culo te haya resultado √ļtil. Estaremos encantados de escuchar sus pensamientos sobre Body Class y c√≥mo lo ha utilizado en el pasado o planea hacerlo en el futuro.