Tras el magnífico trabajo realizado por Marta Armada y Javier Usobiaga que ya contaron en sus artículos precedentes, me llegó el turno: había que integrar el nuevo diseño y la nueva estructura en WordPress, el CMS que ya usaba Mosaic y con el que se quería continuar manteniendo la revista en esta nueva etapa.
Había tres objetivos importantes a conseguir: por un lado ofrecer a los editores de Mosaic una forma fácil, independiente y clara de introducir los contenidos; por otro, garantizar el marcado correcto de ese contenido según el nuevo diseño y, por último, migrar toda la información de los artículos, autores, categorías y etiquetas de los 13 años de historia de Mosaic a la nueva estructura y diseño. Era un reto complejo y a la vez muy estimulante.

Reestructuración

Empecé estudiando la nueva organización de los contenidos y las necesidades del nuevo diseño. En el planteamiento anterior los números de la revista y los autores eran categorías directas de los artículos, al igual que las categorías principales (Artículos, Entrevistas, Experiencias y Recursos) y las categorías de Agenda y Notícias. Es decir, se mezclaban conceptos distintos en una misma taxonomía.

Para adaptarse a la nueva organización así como para facilitar el trabajo de los editores había que separar cada concepto en su propia taxonomía. Por ello se creó una taxonomía nueva para los números de la revista y otra para los autores. De este modo la taxonomía por defecto se destinaría a las Noticias y a la nueva estructuración por categorías (Diseño, Interacción, Tecnologías, Medios, Redes) y subcategorías; mientras que la organización histórica (Artículos, Experiencias, Entrevistas, Recursos) se convertiría en etiquetas.

Autores

Para la gestión de los autores, decidí usar el plugin Co-Authors Plus, puesto que ofrecía todo lo que el core de WP no facilita por defecto . WordPress permite tener sólo un autor por artículo y éste debe estar registrado en el sistema como un usuario. Esta funcionalidad es perfecta para blogs o sites donde cada artículo lo escribe un solo autor y es el mismo autor quien inserta el contenido en el sistema. Pero en el caso de Mosaic la mayoría de las veces los autores de los artículos son externos, por lo que escriben los artículos en su editor de textos de escritorio y luego los envían al equipo editorial de la revista, que se ocupará de introducirlos en el CMS.
El plugin Co-Authors Plus permite crear autores invitados (guest authors) desde el back-end y permite gestionarlos como autores del propio sistema, pero sin la necesidad de que se registren y tengan una cuenta en el mismo. Una vez creados, se pueden asignar diversos autores a cada artículo y los autores aparecen tanto en las páginas de archivo por autor como en los feeds del sitio. Además, el plugin añade algunos campos extra para poner la información biográfica de cada autor y una imagen para su perfil, algo que también necesitábamos.

Entrevistados

Muchos de los artículos de Mosaic son entrevistas a una o varias personas relevantes en el ámbito del entorno multimedia. En la versión anterior de Mosaic la información sobre el entrevistado se había introducido en campos personalizados pero no siempre en los mismos (unas veces el nombre del entrevistado estaba en el campo “autor” y otras en el campo “entrevistado”)
Para el nuevo Mosaic decidí utilizar también campos personalizados para la información de los entrevistados, pero creando una interficie más amigable para el editor. Añadí un campo para poder introducir la imagen del entrevistado así como un botón que mediante jQuery permite mostrar u ocultar los campos del entrevistado/a y ordené todo el conjunto para que fuera más intuitivo.

Contenido del artículo

Además de facilitar la introducción del contenido al editor, otra de las tareas importantes era garantizar el marcado correcto mediante HTML5 y las clases necesarias para que la presentación del contenido en el front-end fuera tal y como habían ideado Marta y Javier, minimizando la posibilidad de error por parte del editor.
Para ello, se crearon shortcodes (funciones en php), se crearon filtros y se añadieron algunos campos en la pantalla de edición del artículo. Vamos a ver algunos de ellos.

Extractos
En el nuevo diseño el resumen o extracto de cada artículo aparecía en distintas zonas de la web (home, archivo por categorías, archivo por autores…) con formatos y longitudes distintas (primer artículo de la home, artículos relacionados, archivos…) Puesto que queríamos que el extracto de los nuevos artículos estuviera muy controlado, decidimos poner dos campos de extracto para cada artículo, uno corto y uno largo y determinamos las zonas en las que se debería usar cada uno.
Puesto que WordPress ya brinda un campo de resumen (excerpt) , decidí utilizar éste para el resumen corto y creé un nuevo campo para el resumen largo. Añadí en ambos un contador de caracteres para ayudar al editor a controlar la longitud del texto y evitar textos cortados.

Enlaces relacionados
En la versión anterior, los enlaces relacionados se ponían en un campo personalizado y debían marcarse con HTML directamente. Para ayudar al editor a introducir estos enlaces, instalé el plugin Related links, que permite de una forma fácil y clara, desde la misma página de edición de contenidos de un artículo, introducir enlaces a recursos externos o a artículos, páginas o ficheros multimedia del propio sitio web.

Shortcodes: pullquotes
Para insertar citas del propio contexto se creó un shortcode sin parámetros, simplemente hay que usar la etiqueta de abrir al inicio del texto y la de cerrar una vez terminado éste, como se ve en el ejemplo siguiente.

Shortcodes: citas con pie
Para las citas de un texto con autor y título de la obra, se creó un shortcode con tres parámetros (autor, fuente y url). El texto de la cita debe ponerse entre las etiquetas de apertura y cierre del shortcode. En la siguiente imagen se puede ver el shortcode, la función y el resultado final.

Shortcodes: videos con leyenda
Para los videos con leyenda se creó otro shortcode con la leyenda en un parámetro del mismo, de modo que también sea fácil para el editor de contenidos insertar videos con leyenda desde el editor visual de WordPress. En este caso, se utilizan dos shortcodes anidados.

Filtros: inserción de imágenes y limpiado de párrafos
Wordpress, como muchos otros CMS, manipula el ouput (la salida) del texto que se introduce en su editor visual y no siempre lo hace como más nos gustaría. Por ello, tuve que filtrar algunas funciones propias de WP para que mostraran en el front-end el código HTML5 deseado y con las clases adecuadas.
Fue el caso, por ejemplo, de las imágenes que insertamos en el contenido si queremos que se encuentren dentro de la etiqueta figure, para ello hay que filtrar en el momento de la inserción de la imagen en el editor. En este caso usé un pequeño snippet de código publicado en CSS-TRICKS en el 2012 y que todavía sigue vigente.
Otra pequeña función que se utiliza muy a menudo es la que elimina las engorrosas etiquetas de párrafo que WordPress pone antes y después de casi todo (shortcodes, imágenes, iframes…).

Opciones del tema

Para que los parámetros necesarios en el desarrollo pudieran ser configurados por el administrador o editor de Mosaic, se creó una página de opciones del tema en la que se pueden escoger y cambiar parámetros y textos fijos que aparecen en la cabecera o el pie. Es el caso de la dirección física de la UOC o de las urls de sus cuentas sociales.

En resumen

El trabajo de adaptación del código HTML a la estructura de ficheros de WordPress fue más fácil gracias a las facilidades que Marta y Javier me brindaron, puesto que siempre estuvieron dispuestos a cambiar su código para facilitar la integración y aceptaron la mayoría de mis peticiones al respecto.
A parte de las plantillas principales, sólo fue necesario crear plantillas específicas para el archivo y el detalle de las noticias (su formato era claramente diferenciado del resto) y para el archivo por números. Esta última fue la más delicada puesto que tuve que utilizar dos consultas específicas a la base de datos para recuperar el listado de los artículos agrupados por número de boletín y en orden descendente, asegurando a la vez una correcta paginación.
La migración de los más de 700 artículos acumulados en los 13 años de vida de Mosaic, fue una tarea especialmente compleja. Se pudo llevar a buen término en gran parte gracias a la paciencia y la determinación del equipo editorial de Mosaic, puesto que no se pudieron automatizar todos los traspasos y algunos datos se tuvieron que introducir o revisar manualmente.
Participar en este proyecto ha sido un placer a todos los niveles, tanto por los retos que planteaba y que me han permitido aprender cosa nuevas, como por la oportunidad de trabajar con un gran equipo de profesionales.

Cita recomendada: RAMONEDA, Núria. Rediseño responsive de Mosaic (parte III): integración en WordPress, desarrollo back-end. Mosaic [en línea], junio 2014, no. 119. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n119.1424.