Generar dinámicamente CSS: La guía definitiva

Existe una situación muy común cuando desarrollamos un Plugin o Tema: Tenemos una serie de opciones que el usuario puede tocar a su antojo para personalizar una serie de estilos, sean colores, márgenes, fuentes o cualquier otro elemento visual. Sabemos cómo agregar una hoja de estilos en WordPress usando la función wp_enqueue_style pero no podemos generar las reglas dinámicamente, esto es, con PHP dentro de la hoja CSS.

Imaginemos que tenemos unas opciones en nuestra Base de Datos tal que así:

$options = array(
	'background-color' => '#DDD',
	'font-size' => 23
);

¿No sería maravilloso si en nuestra hoja de estilos pudiéramos hacer algo así?

$options = get_option( 'my-options' );
.my-class {
	background-color:<?php echo $options['background-color']; ?>;
	font-size:<?php echo $options['font-size']; ?>px;
}

Obviamente se puede, veamos qué posibilidades tenemos:

La forma brusca: El hook wp_head

No hay en realidad ningún problema en utilizar este hook para añadir algunos estilos:

De esta forma, los estilos quedan encerrados entre nuestras etiquetas <head></head> de nuestra página.

No está mal: Las reglas se generan bien y queda en la cabecera. No obstante, si usamos muchas reglas (por ejemplo, la personalización de un Tema), la cabecera de nuestra página podría quedar demasiado larga, añadiendo carga adicional a nuestra página. Cuando una página HTML llega al usuario, el navegador lee el cuerpo del código HTML mientras carga en paralelo el resto de los elementos como hojas de estilo o ficheros Javascript (no funciona exactamente así pero eso daría para otro post). Lo que nos interesa es que la página cargue lo más rápido posible mientras en paralelo se descargan las hojas de estilo adicionales.

La forma elegante: Hojas de estilo “virtuales”

Con hoja de estilo “virtual” nos referimos a cargar un fichero CSS que no existe. ¿Cómo? Lo vamos a explicar, pero vayamos paso a paso. Primero tenemos que saber cómo va esto del protocolo HTTP (algo básico pero que tendemos a pasarlo por alto).

Cuando nuestro navegador solicita la descarga de una hoja de estilos, pide al servidor mediante un mensaje dicho fichero. El servidor devuelve una respuesta compuesta por una cabecera que contiene los datos identificativos del fichero: longitud en bytes del fichero, tipo de contenido y el tiempo de expiración de la caché entre otros campos. Bajo la cabecera se emite el cuerpo del fichero que contiene pues eso, el contenido del fichero.

Es fácil verlo en Chrome con las herramientas para desarrolladores

headers

En este caso, el fichero noticons.css se descarga de la URL https://s1.wp.com/i/noticons/noticons.css. Nos interesa especialmente la parte de Response Headers. Ésta es la cabecera que el servidor ha devuelto y lo que nos debería llamar más la atención es el campo llamado Content Type que nos dice qué tipo de contenido tiene el fichero, en este caso text/css.

¿Qué pistas nos da todo esto? Bien, si queremos generar dinámicamente nuestro CSS tenemos que tener en cuenta que cuando el navegador solicite nuestro archivo “virtual”, nuestro sitio tiene que devolver una respuesta con una cabecera cuyo campo Content Type sea text/css. Y no hay más. Si el navegador del usuario reconoce dicha URL como un fichero CSS, lo aplicará como tal.

Ahora, sigamos unos pasos básicos que nos lleve a la meta:

  • ¿Qué URL debería tener nuestra hoja de estilos “virtual”? Bueno, la que queramos en realidad. Pongamos un ejemplo: https://holadolly.wordpress.com?dolly-styles=true. Esa URL, que normalmente devolvería un fichero HTML vamos a “engañarla” para que devuelva un fichero CSS en su lugar. En WordPress podemos generar dicha URL fácilmente:
$css_url = add_query_arg( 'dolly-styles', 'true', home_url() );
  • Agregar dicha URL como si fuera un estilo normal usando la función wp_enqueue_style

  • Hasta aquí, más o menos todo bien pero la URL todavía no devuelve un CSS, de hecho devuelve la página HTML de la home de nuestro sitio. Ahora llega el momento del engaño. Cuando llamamos a esa URL, WordPress se carga de forma normal pero hay que saber que no necesitamos cargarlo al completo. La idea es comprobar que existe una variable $_GET llamada ‘dolly-styles’, que tiene valor ‘true’. Si esta condición se cumple le decimos al usuario que estamos cargando un CSS (mediante los campos de cabecera), generamos los estilos y paramos la ejecución. No necesitamos cargarlo todo, sólo la parte que nos interesa. Lo vamos a ver mejor con un ejemplo:

De este código podemos sacar alguna pregunta: ¿Por qué plugins_loaded y no otro? Funcionaría en init por ejemplo, ¿Por qué no init entonces? Bueno, hay que recordar que la idea es cargar lo mínimo del núcleo de WordPress, además debe hacerse antes de que WordPress envíe las cabeceras. Esto se produce justo después de la ejecución del action template_redirect. Es decir, que podríamos utilizar éste último y aún así funcionaría pero ¿Para qué? Lo mejor es hacerlo lo antes posible. Si estamos desarrollando un plugin, el idóneo es justo cuando nuestro plugin ha cargado su código, esto es plugins_loaded pero si lo estamos haciendo para un Tema, el hook apropiado sería after_theme_setup. Aquí podemos ver una lista de actions y el orden de ejecución.

  • ¿Cómo generar la cabecera CSS y generar los estilos? Es muy sencillo generar una cabecera para nuestro supuesto fichero. Se usa la función header de PHP

Los pasos son sencillos: Generamos la cabecera de tipo text/css, recogemos las opciones de nuestro Plugin/Tema de Base de Datos y generamos las reglas CSS con los valores de las opciones.

Ahora ya sólo queda comprobar que todo funciona bien. Para esto, simplemente ponemos en el navegador la URL de nuestro CSS “virtual”. Deberíamos ver un fichero CSS normal y corriente.

Making Community

The WordPress community is a complex thing. It has many features that make it unique, yet make it unappetizing. When the structure of something is sooo big, it’s very difficult to get into it and feel comfortable.

Local communities of WordPress from Barcelona and Sevilla have arranged together and have tried to solve the most common problems that a volunteer finds when he wants to work with WordPress, or ask for help, in the WordPress Community.

WordPress is en_US

Yes. WordPress is in English. WordPress Community, spreaded among the world, use English as a common language to understand each other. That, in Spain, is a problem for many.

For year we have been working to have WordPress entirely in Spanish, and we have also launched the official WordPress.org forums in Spanish. A volunteer job with many participants.

There is also a WordPress Slack for volunteers worldwide, and several P2 for work. But they are global, and that leads to the next problem:

Local communities do not have a place to meet.

And we see four main problems:

  • WordPress in Spanish, as a section or local community of WordPress, has no proper place beyond es.WordPress.org, which is just a site for translations and has no P2 or communication tool for users
  • There are several local WordPress communities in Spain making events (WordCamps and Meetups) that are not in contact with each other, losing the benefit that this contact would be
  • Translation teams do not have a space to meet and organize, and to ask for help or support when in doubt. Or to organize when a new version of WordPress is going to be released
  • The forums teams don’t have a place to solve doubts internally, or to decide what to do with bozo users, or how to answer specific questions. Such place exists for the general (en) WordPress.org forums.

People still do not know what the WordPress Community is

Although it has been discussed in several Wordcamps and Meetups all over Spain, many people still don’t know or have not interiorized the philosophy of the WordPress Community. A Community where:

  • Everyone is welcome, regardless of race, ethnicity, social position…
  • All events are organized entirely by volunteers
  • All events are nonprofit
  • All the world is invited to actively participate and benefit from the work of others

The problem that we find here is that all the documentation, as much of the WordPress documentation, is in English.

Spanish WordPress Community is growing, and we need a place to organize ourselves. That’s why we have created a series of tools for the local Community, where we can meet, talk, organize, and help among us.

The proposed solution

Internal Communication: Slack

slackSlack is a tool to create channels of discussion. You can use slack in all platforms (mobile, pc, mac…), and is very easy to use.

We have created a general Slack, where we all can gather, and we have created channels for each of the fields we are working in. There are specific channels for all volunteer teams and for general WordPress users, where we include:

  • Translators
  • Developers
  • Commits to WordPress core
  • WordPress Documentation
  • Forums
  • Events: Meetups and WordCamps
  • Designers and theme review
  • Accessibility
  • General Support

External communication: wp-es.es

We have also created a website to have an updated list of all events of our WordPress Community and a calendar to know when is happening what, and even organize to go the events together.

The event area is still in development. The provisional area is here, and you can add your event by dropping us a line.

Setting the scene: the WordPress Manifesto

WordPress Community, by definition, is open, honest, and transparent.

Honoring that, we are building the WordPress Manifesto. A manifesto setting out the existing rules and standards for volunteers, events, official Meetups and WordCamps, in Spanish. No more doubts about translations or where to find what.

The next step

The next step is you.

  • If you like WordPress
  • If you like what you do
  • If you think you have something to share
  • If you think you have much to learn
  • If you want to organize a WordPress event
  • If you want to find out what is happening in the ecosystem of WordPress Spain

just stop by our page and ask for your access to the Slack of WordPress España (it is implied that you accept the rules for general WordPress volunteers and WordPress events described here and here).

Haciendo Comunidad

La comunidad de WordPress es una cosa compleja. Tiene muchas particularidades que la hacen única, y a la vez la hacen poco apetecible. Porque cuando la estructura de algo es taaan grande, es muy difícil entrar en ella y sentirse cómodo.

Las comunidades locales de WordPress de Barcelona y Sevilla nos hemos unido y hemos intentado dar solución a los problemas más comunes que uno encuentra cuando quiere entrar a colaborar, o a pedir ayuda, en la comunidad de WordPress.

WordPress es en_US

Sí. WordPress está en inglés. Su comunidad, por ser de todos los rincones del planeta, utiliza como lenguaje común para entenderse entre ellos el inglés. Eso, en España, echa ya a muchos para atrás.

Desde hace años hemos estado trabajando por que WordPress esté íntegramente en español, y hemos puesto en marcha también los foros oficiales de WordPress.org en español. Un trabajo voluntario en el que participa mucha gente.

También hay un slack de WordPress para los voluntarios de todo el mundo, y varios P2 de trabajo. Pero son globales, y eso nos lleva al siguiente problema:

Las comunidades locales no tienen un lugar donde reunirse.

En este apartado abrimos además cuatro líneas:

  • WordPress en español, como comunidad local de WordPress general, no tiene un sitio propio más allá de es.WordPress.org (que es sólo un sitio para las traducciones y no tiene ningún P2 o herramienta de comunicación entre usuarios asociada)
  • Existen varias comunidades locales de WordPress en España que montan sus eventos (WordCamps y Meetups) que no están en contacto entre ellas, con el beneficio que supondría
  • Los equipos de traducción no tienen un espacio donde reunirse y organizarse cuando tienen dudas, o cuando va a salir una nueva versión de WP
  • Los equipos de ayuda en foros no tienen un espacio donde solucionar dudas de forma interna, o de decidir qué hacer con usuarios o preguntas puntuales, como existe en el foro general

La gente sigue sin saber lo que es la Comunidad de WordPress

Aunque se ha contado en algunas WordCamps y meetups repartidas por la geografía española, mucha gente todavía no conoce, o no tiene interiorizada la filosofía de lo que es la Comunidad de WordPress. Una comunidad donde:

  • Todo el mundo es bienvenido, independientemente de su raza, etnia, posición social…
  • Todos los eventos son organizados íntegramente por los voluntarios
  • Todos los eventos son sin ánimo de lucro
  • Todos el mundo está invitado a participar activamente, y a beneficiarse del trabajo de otros

El problema de esta documentación, como de tanta otra acerca de WordPress, es que está en inglés.

Viendo que la Comunidad de WordPress en España sigue creciendo, y que necesitamos un espacio donde organizarnos, hemos avanzado en esa línea creando una serie de herramientas para la Comunidad, donde todos podamos encontrarnos, hablar, organizarnos, y ayudarnos.

La solución propuesta

Comunicación interna: Slack

slackSlack es una herramienta que permite crear canales de discusión. Está en todas las plataformas, y es muy sencillo de utilizar.

Hemos creado un Slack general, donde podamos estar todos, y en él hemos creado canales para cada uno de los campos que queremos tratar. Hay canales específicos para todos los equipos de voluntarios y usuarios de WordPress en general, donde incluimos:

  • Traductores
  • Desarrolladores
  • Commits al core de WordPress
  • Documentación de WordPress
  • Foros
  • Eventos: Meetups y WordCamps
  • Diseñadores y revisión de temas
  • Accesibilidad
  • Soporte general

Comunicación externa: wp-es.es

Hemos creado también una web donde podamos tener un listado actualizado de todos los eventos de la Comunidad de WordPress y un calendario para saber cuándo ocurrirá cada cosa, e incluso organizarnos para ir juntos.

La zona de eventos todavía está en desarrollo, seguimos trabajando en ella. La zona de eventos provisional está aquí. Si tu evento no está, no dudes en gritarnos.

Sentando las bases: el Manifiesto WordPress

La Comunidad de WordPress, por definición, es abierta, honesta, y transparente.

Haciendo honor a esas bases, estamos construyendo el Manifiesto WordPress. Un manifiesto que recoja las bases y normas ya existentes para voluntarios, eventos, Meetups oficiales y WordCamps, pero en español. Para que todos podamos hacer uso de ellas.

El siguiente paso

El siguiente paso eres tú.

  • Si te gusta WordPress
  • Si te gusta lo que haces
  • Si crees que tienes algo que compartir
  • Si crees que tienes mucho que aprender
  • Si quieres organizar algún evento WordPress
  • Si quieres enterarte de lo que pasa en el ecosistema WordPress España

sólo tienes que pasarte por nuestra página y pedir tu acceso al Slack de WordPress España (está implícito que aceptas las normas para voluntarios generales de WordPress y para eventos de WordPress, descritas aquí y aquí).