Consejos y trucos para diseñadores de temas

A través de nuestra experiencia con WordPress, hemos descubierto que los diseñadores de temas a menudo piensan demasiado en una característica determinada. Están buscando filtros y ganchos locos de WordPress para ejecutar una tarea cuando todo lo que necesitan es CSS simple. WordPress genera de forma predeterminada muchas clases de CSS. (Hoja de trucos CSS de WordPress). Una de estas clases de CSS se incluye en los estilos de clases de cuerpo. En este artículo, explicaremos la clase de WordPress body 101 junto con algunos consejos y trucos útiles para los diseñadores de temas novatos.

¿Qué es WordPress Body Class?

Body Class (body_class) es una función de WordPress que proporciona diferentes clases al elemento body, de modo que los autores de temas pueden diseñar sus sitios de manera efectiva con CSS. La etiqueta del cuerpo HTML está presente principalmente en el archivo header.php que se carga en cada página. Al codificar un tema, puede vincular la función body_class a su elemento de cuerpo así:

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

Al agregar este pequeño elemento, te das la flexibilidad de cambiar fácilmente el aspecto de cada página usando CSS. Dependiendo del tipo de página cargada, WordPress agrega automáticamente la clase apropiada. 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. Hace esto 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 un recurso tan poderoso a su alcance, puede personalizar completamente su página de WordPress usando solo CSS. Puede personalizar páginas de perfil de autor específicas, archivos basados ​​en fechas, etc. Entonces, ¿cómo y cuándo lo usarías?

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í, eso también nos incluye a nosotros. Hace aproximadamente un año, tuvimos que modelar un elemento de menú de WordPress que estaba solo 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 usando la declaración condicional. Por ejemplo, si es una sola página, agregue la clase “Blog” a los elementos del menú. Después de pasar todo el tiempo entendiendo todo esto y escribiendo una publicación al respecto, uno de nuestros usuarios señaló que fácilmente podríamos haberlo hecho con la clase de cuerpo existente así:

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

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

Chico, ¿no nos sentimos estúpidos después? Desde entonces, hemos estado tomando notas para ver si se pueden hacer cosas con la clase corporal antes de profundizar.

Para darte otro ejemplo. Una vez que un usuario se ha puesto en contacto con nosotros para pedirnos una forma de cambiar la imagen del logotipo en su sitio web según la página de categoría. La mayoría de los proyectos temáticos, incluido el de ella, cargaban el logo usando un CSS (#header .logo). Sugerimos qué tal usar la clase body .category-slug para cambiar su logotipo así:

.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 que nosotros. Con suerte, ahora está aprendiendo a usar 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 hacerlo.

Cómo agregar clases de cuerpo personalizadas

WordPress tiene un filtro que puede usar 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.

Dado que las clases de cuerpo son específicas del tema, debe escribir una función personalizada en su archivo functions.php así:

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. No es tan malo, ¿verdad? El verdadero poder de esta función está en etiquetas condicionales. Puede decir agregar la clase XYZ solo en páginas individuales, etc. Tomemos este ejemplo y apliquemos el escenario de un caso de uso real.

Agregar clase de categoría a páginas de publicaciones únicas

Supongamos que desea personalizar las páginas de publicaciones individuales de cada categoría. Dependiendo del tipo de personalización, puede usar clases de cuerpo para esto. Para simplificar las cosas, digamos que desea cambiar el color de fondo de la página según la categoría de las publicaciones individuales. Puede hacer esto agregando clases de categorías a vistas de páginas de publicaciones individuales. 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 la clase de cuerpo para las páginas de una sola publicación. Luego puede usar las clases de CSS para diseñarlo como desee.

Agregue la barra de página en la clase Body 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 de la clase slug in body que explicará por qué lo necesitamos.

Detección de navegador y clases de cuerpo específicas del navegador

A veces puede ser necesario tener estilos CSS especiales para que todo funcione correctamente en ciertos navegadores (CONSEJO: Internet Explorer). Bien Nathan Rice sugirió una solución muy interesante que agrega clases específicas del navegador a la clase del cuerpo según el navegador desde el que está visitando el usuario.

Todo lo que necesita hacer es pegar el siguiente código en su archivo 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;
}
?>

Luego puede usar clases como:

.ie .navigation {some item goes here}

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

Otros casos de uso:

Probablemente podamos enumerar muchos más casos de uso, pero de lo contrario este artículo se saldrá de control. El objetivo era ayudar a los desarrolladores de nuevos temas a comprender los conceptos básicos de la clase corporal de WordPress y sus beneficios. Los casos de uso se limitan a su imaginación. Hemos visto a los desarrolladores de temas comerciales (Genesis) usar clases corporales para ofrecer varias opciones de diseño. Por ejemplo, diseño de página completo, contenido de la barra lateral, barra lateral de contenido, etc. De esta manera, el usuario puede cambiar fácilmente el diseño de su página sin preocuparse por problemas de apariencia porque ya se maneja con CSS.

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 puede hacer el trabajo. Solo usa la lección corporal para eso.

Con suerte, este artículo le resultó útil. Estaremos encantados de escuchar sus opiniones sobre Body Class y cómo la ha utilizado en el pasado o planea hacerlo en el futuro.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

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