WordPress Clase 101: Consejos y trucos para diseñadores de temas

A través de nuestra experiencia en el uso de WordPress, hemos encontrado que a menudo los diseñadores temáticos 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 poco de CSS simple. WordPress por defecto genera muchas clases CSS. (Hoja de trucos de WordPress CSS). Una de estas clases de CSS se centra en los estilos de las clases de cuerpo. En este artículo, explicaremos la clase de cuerpo de WordPress 101 junto con algunos consejos y trucos útiles para los diseñadores de temas principiantes.

¿Qué es la clase corporal de WordPress?

Body Class (body_class) es una función de WordPress que le da al elemento de cuerpo diferentes clases, por lo que los autores de los temas pueden diseñar sus sitios de forma efectiva con CSS. El tag HTML body 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 corporal de esta manera:

1>

Al añadir este pequeño elemento, usted se da la flexibilidad de modificar fácilmente el aspecto de cada página utilizando CSS. Dependiendo del tipo de página que se esté cargando, WordPress añade 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 decide usarlo. Lo hace para casi todas las páginas. Aquí hay algunos ejemplos de clases comunes que WordPress podría añadir:

12345678910111213141415161717181920212223242526272829303132.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-page-child parent-pageid-(id) {}.página-plantilla página-plantillas-(nombre de archivo de plantilla) {}.search-results {}.search-no-results {}.log-in {}.paged-(número de página) {}.single-paged-(número de página) {}.page-paged-(número de página) {}.category-paged-(número de página) {}.tag-paged-(número de página) {}.date-paged-(número de página) {}.author-paged-(número de página) {}.search-paged-(número de página) {}.

Como puedes ver, al tener un recurso tan poderoso a mano, puedes personalizar completamente tu página de WordPress usando sólo CSS. Puede personalizar páginas de perfil de autor específicas, archivos basados en fechas, etc. Entonces, ¿cómo y cuándo usarías 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 nos incluye a nosotros también. Hace aproximadamente un año, necesitábamos estilizar un elemento del menú de WordPress que estaba sólo en una página específica. Decidimos cavar profundo para encontrar un filtro que agregara una clase especial de navegación a los elementos del menú que serían agregados usando una sentencia condicional. Por ejemplo, si se trata de una sola página, añada la clase "Blog" a los elementos del menú. Después de pasar todo el tiempo averiguando todo eso y escribiendo un post sobre ello, uno de nuestros usuarios señaló que podríamos haberlo hecho fácilmente con la clase de carrocería existente:

1.single #navigation .leftmenublog div{display: inline-block!}importante

Nota: cómo utiliza la clase.single body que se añade en todas las páginas de un solo mensaje.

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 cavar más profundo.

Por ponerte otro ejemplo. Una vez que un usuario se acercó a nosotros pidiendo una forma de cambiar la imagen del logotipo en su sitio web basado en la página de la categoría. La mayoría de los diseños temáticos, incluyendo el suyo, fueron cargando el logo usando un CSS (#header.logo). Le sugerimos que usara la clase de carrocería .category-slug para cambiar su logo de esta manera:

12.category-consejo #encabezado.logo{fondo: url(imágenes/logo-consejo.png) no-repetición!importante;}.category-salud #encabezado.logo{fondo: url(imágenes/logo-salud.png) no-repetición;}importante

Este nuevo diseñador de temas tuvo el mismo momento que nosotros. Esperemos que ahora te estés acostumbrando a cómo puedes utilizar la clase de cuerpo en tus diseños temáticos. Pero espera, esto se vuelve aún más poderoso porque hay una manera de añadir 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 puedes utilizar para añadir clases personalizadas de cuerpo cuando sea necesario. Le mostraremos cómo añadir una clase de cuerpo utilizando 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 de un tema, necesitaría escribir una función personalizada en su archivo functions.php de esta manera:

123456789functionmy_class_names($classes) { // añadir 'class-name' a la matriz $classes $classes[] = 'test-class-name'; // devolver la matriz $classes return$classes;} //Ahora agregue la clase de prueba al filtroadd_filter('body_class','my_class_names');

El código anterior añadirá una clase "test-clase-name" a la etiqueta de cuerpo en cada página de su sitio web. No está tan mal, ¿verdad? La potencia real de esta función está en las etiquetas condicionales. Puede decir que agregue clase XYZ sólo en páginas individuales, etc. Tomemos este ejemplo y apliquémoslo al escenario de uso real.

Agregar Categoría a Páginas de Mensajes Individuales

Supongamos que desea personalizar las páginas de cada categoría. Dependiendo del tipo de personalización, puede utilizar clases de cuerpo para ello. Para mantener las cosas simples, digamos que quieres cambiar el color de fondo de la página basado en la categoría de mensajes individuales. Puede hacerlo añadiendo clases de categoría a sus vistas de página de mensajes individuales. Pegue la siguiente función en el archivo functions.php de su tema:

123456789// añadir nombres de categoría en el cuerpo classfunctioncategory_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 de arriba agregará la clase de categoría en su clase corporal para páginas de correo individuales. Luego puedes usar clases css para darle el estilo que desees.

Añadir Page Slug en la clase de cuerpo de sus temas de WordPress

Pegue el siguiente código en el archivo functions.php de su tema:

123456789//Page Slug Body Classfunctionadd_slug_body_class( $classes) {global$post;if( isset( $post) ) {$clases[] = $post->tipo_post. '-'. post->nombre_del_post;}retorno$clases;}add_filter('body_class', 'add_slug_body_class');

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

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 (SUGERENCIA: Internet Explorer). Bueno Nathan Rice sugirió una solución muy buena que añade clases específicas de navegador a la clase de cuerpo basada en el navegador desde el que el usuario está visitando el sitio.

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

123456789101112131415161718

A continuación, puede utilizar clases como:

1.ie.navigation {algún elemento va aquí}

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

Más Casos de Uso:

Probablemente podamos listar muchos más casos de uso, pero no lo haremos de otra manera, ya que de lo contrario este artículo se saldrá de control. El objetivo era ayudar a los nuevos desarrolladores de temas a entender los conceptos básicos de la clase de cuerpo de WordPress y sus ventajas. Los casos de uso se limitan a su imaginación. Hemos visto que los desarrolladores de temas comerciales (Genesis) utilizan clases de cuerpo para ofrecer varias opciones de diseño. Por ejemplo, diseño de página completa, contenido de Sidebar, contenido de Sidebar, etc. Al hacerlo, el usuario puede cambiar fácilmente el diseño de su página sin preocuparse por los problemas de apariencia, ya que ya se ha solucionado con CSS.0

.

Hemos visto a algunos desarrolladores añadiendo peticiones 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 tener 3 hojas de estilo cargadas cuando se puede hacer el trabajo. Sólo usa la clase de cuerpo para eso.

Esperamos que este artículo le haya sido útil. Estaremos encantados de escuchar sus opiniones sobre la clase de cuerpo, y cómo la ha utilizado en el pasado o cómo planea hacerlo en el futuro.