16 comprobaciones vitales antes de lanzar un tema WordPress

Publicar un tema WordPress en un marketplace, como ThemeForest, en el que el público es tan amplio y diverso, supone algunos retos. No puedes comprobar una solución directamente con el cliente. Debes planificar por adelantado todos las posibles situaciones, y asegurarte al mismo tiempo de que tu tema es tan personalizable como sea posible. Por desgracia, si no tienes mucha experiencia, es posible que se te pasen por alto algunas cosas. Afortunadamente para tí, en este artículo hacemos un resumen con todo lo aprendido a lo largo del tiempo para ayudarte a evitar los errores que nosotros mismos cometimos.

1: No muestres comentarios en las entradas protegidas

WordPress nos ofrece la opción de proteger una entrada mediante contraseña: los usuarios podrán acceder a este tipo de contenido sólo si introducen previamente su contraseña. No tienes que hacer nada especial en lo que respecta a la entrada, pero si te olvidas de comprobar que se trata de una entrada privada antes de aprobar los comentarios, estos serán visibles para cualquier usuario, algo que contradice nuestro propósito principal para las entradas protegidas. Puedes evitarlo de una forma muy sencilla, comprueba el archivo comments.php:

2: Muestra los adjuntos correctamente

Existe un archivo de plantilla especial, attachment.php, que se usa cuando un usuario hace clic sobre cualquier adjunto. Los archivos adjuntos pueden ser imágenes, vídeos, o audios… cualquier cosa que se inserte mediante el botón «Añadir objeto» del editor:

Crear una plantilla attachment.php no es obligatorio: si no existe, el navegador sencillamente mostrará el archivo, usando un plugin adecuado si fuese necesario. En mi opinión, la mayor ventaja de contar con un archivo attachment.php es que cuando el visitante decida ver, por ejemplo, una imagen a tamaño completo, el menú de navegación de nuestro sitio seguirá estando disponible para el usuario. También te permite mostrar alguna información sobre el adjunto de forma personalizada. El tema TwentyTen cuenta con una plantilla attachement.php interesante que muestra los tamaños de las imágenes.

3: Introduce compatibilidad para la lectura de derecha a izquierda (RTL)

Seguramente habrás oído hablar sobre la compatibilidad con idiomas que se leen y escriben de derecha a izquierda o RTL (right to left), pero a menos que tú seas un experto en ellos, podrías pensar que es algo complicado.

Pero lo cierto es que introducir en tus temas la compatibilidad para los idiomas escritos de derecha a izquierda, como el árabe o el hebreo, es bastante fácil. Los estilos incluidos en la hoja de estilos rtl.csssobreescribirán a sus homólogos en style.css si indicamos uno de estos idiomas para la variable WP_LANG en settings.php, por ejemplo árabe.

Tu archivo rtl.css debe incluir en primer lugar esta declaración:

La primera propiedad se explica por sí sóla. La segunda ‘abre un nuevo nivel de inclusión relacionado con el algoritmo bidireccional (W3C).

El archivo rtl.css no necesita duplicar cada estilo presente en style.css, sólo aquello que debe cambiar su sentido de lectura. Concíbelo como si estuvieses viendo el sitio web reflejado en un espejo: los elementos con ‘floats’ cambian su dirección (float: left se transforma en float: right, y al contrario) y los márgenes y paddings se invierten (margin-right: 18px se convierte en margin-left: 18px; margin right: 0). Piensa también en las amplias secciones de tu web: ¿en qué dirección flotará su cabecera y su logotipo? No te olvides de todos estos pequeños detalles, por ejemplo, invertir la indentación de tus listas y citas. Para hacerte una idea, puedes intentar cambiar el idioma a árabe o hebreo en plataformas como Facebook o la Wikipedia, o visitar sitios web internacionales como Al Jazeera.

Lo creas o no, eso es todo lo que debes saber.

Referencias

• Compatibilidad RTL en el Codex de WordPress

4: Proporciona un editor de estilo

Para aplicar estilo al editor TinyMCE predeterminado de WordPress, sencillamente crea un archivo editor-style.css en el directorio de tu tema. Es muy fácil crearlo, únicamente tienes que hacer coincidir la tipografía con la especificada en la hoja de estilos principal, y no hace falta que te preocupes por la presentación de los bloques. Aunque TinyMCE tiene algunas peculiaridades. Puedes evitar que las líneas sean excesivamente largas indicando una propiedad max-width en la clase .mceContentBody.

Si estás añadiendo compatibilidad para los idiomas de derecha-a-izquierda a través de rtl.css, también deberías añadir un archivo denominado editor-style-rtl.css, ya que algunas propiedades, como las listas, los márgenes y los paddings, también tendrán que ser modificados en el propio editor.

5. Haz que funcionen las entradas paginadas

Las entradas paginadas (no confundir con las listas o las entradas paginadas) son separadas en distintas páginas por su autor mediante la etiqueta rápida <!–nextpage–>. Hay que admitir que no es una característica que se use en muchos sitios web, pero si te olvidas de configurarla, los usuarios no podrán ver más allá de la primer página. Para permitir la lectura de todo el contenido, debes usar la etiqueta wp_link_pages dentro del Loop.

Para una entrada compuesta por tres páginas, obtendremos lo siguiente:

Los usuarios podrán entonces pulsar sobre uno de los números para leer la entrada completa. Puedes encontrar toda la documentación para esta función en el Codex de WordPress.

6: Aplica estilo a los widgets predeterminados

Aunque podrías aplicar estilo a todos los widgets que existen bajo el sol, sería una buena idea que comprobases a conciencia aquellos que vienen por defecto con WordPress. Todos ellos pueden contener opcionalmente un título y distintas apariencias. Por ejemplo, el widget Categorías puede mostrar un menú desplegable y también distintos niveles anidados para las categorías o las etiquetas, así que asegúrate de proporcionar un estilo para las listas anidadas. Presta también atención especial al widget Calendario. Es una tabla, y lógicamente querrás que los días estén centrados en las celdas, de manera que se presenten alineados con los días de la semana del encabezado. En la primera imagen, los números aparecen un poco desubicados, mientras en la segunda están correctamente alineados.

Por último, sería de gran utilidad que crees estilos para la clase .widget, ya que afectará a todos los widgets, incluso a los incorporados por terceros. Ten cuidado especial con los diseños flexibles, asegúrate de que no se estrechan en exceso, ya que se verían muy extraños.

7: Haz que los comentarios sean usables

Los comentarios suponen un reto para el diseño. En ellos se muestran un montón de cosas (avatares, nombres de los comentaristas, las fechas de comentario, el texto del comentario, los botones de respuesta), por lo tanto debes reservarles algún espacio, y, al mismo tiempo, no deberían sobrecargar el contenido principal, y de alguna manera, deben ser visualmente distinguibles del resto del contenido. Los comentarios anidados implican todas estas dificultades, porque también tendrás que diferenciar las respuestas. Generalmente, esto se logra añadiendo un margen (indentación), pero como no sabes cuántos niveles respuestas habrán, siempre corres el riesgo de no dejar suficiente ancho o permitir demasiado.

Además, recuerda que el formulario de respuesta no aparecerá sólo al final de la página, sino también entre medio de los comentarios anidados cuando alguien responda a cualquiera de ellos. Así que los márgenes y lo ‘paddings’ deberán cubrir ambas situaciones. También existe un enlace ‘cancelar respuesta’ que debes posicionar y al que debes aplicar un estilo.

Por último, deberías asegurarte de que la paginación de los comentarios funciona correctamente, tanto cuando existan pocos comentarios como cuando existan un montón, y de que los comentarios anidados no desborden los límites del elemento que los contiene. Ten cuidado de solapar unos comentarios sobre otros, y no te olvides de comprobar su maquetación tanto cuando se muestran los avatares como cuando no lo hacen.