Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

16 Comprobaciones Vitales Antes de Lanzar un Tema WordPress

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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:

Attachment buttons

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.css sobreescribirá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


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.

Editor is too wide
Editor has usable width

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.

Comment reply form

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.


8: No Olvides wp_footer() y wp_head()

Invoca wp_footer() justo tras el cierre de la etiqueta body, y wp_head() inmediatamente después de cerrar la etiqueta head. Ambas acciones son hooks de acción, y por lo tanto pueden ser usados por los desarrolladores de plugins y temas. Si olvidas incluirlos, es posible que algunas funcionalidades y plugins no funcionen, incluídos las cabeceras personalizadas.

Referencias


9: Añade Compatibilidad para las Miniaturas

Aunque muchos temas todavía se apoyan en el uso de plugins, como TimThumb, desde la versión 2.9, WordPress admite de forma nativa las miniaturas ('imágenes destacadas'). Para aprovechar esta funcionalidad, basta añadir algunas líneas en el archivo functions.php.

La primera línea le indica a WordPress que dé soporte a las miniaturas, mientras que la segunda fuerza a que estos tengan una dimensión de 70 x 70px, para evitar que las diferencias entre sus tamaños rompan el diseño. Además, puedes establecer una política para el cambio de tamaño. En el ejemplo anterior sólo cambia el tamaño de la imagen, mientras que

también la recortará para que se adecúe al ratio especificado. También puedes crear dimensiones adicionales para las miniaturas, que podrán ser utilizadas en distintas áreas del sitio web:

Ahora,

mostrará una miniatura de 70 x 70px y

mostrará una miniatura de 500 x 500px

Referencias

  • Puedes consultar una amplia explicación sobre este tema en el blog de Mark Jaquith.

10: Compatibilidad para los Menús Personalizados

WordPress 3.0 introdujo los tan esperados menús personalizados, así que ya es hora de que tus usuarios puedan beneficiarse de esta característica. Tras registrar la compatibilidad en el tema de la siguiente manera:

…podrás mostrar un menú personalizado con wp_nav_menu():

Ten cuidado, ya que al permitirte este sistema insertar elementos anidados, puedes obtener resultados inesperados si no lo planificas de antemano.

The border extends in a weird shape. Nested items have bullets and look jumbled.

Incluso aunque proporciones estilos para los menú desplegables o las barras de navegación, es complicado presentar de forma elegante múltiples niveles de navegación. Para proteger tu diseño, puedes, o bien determinar un nivel a partir del cual todos los elementos se presentarán de la misma forma, o deshabilitar los niveles inferiores. Por ejemplo, limitando la presentación a sólo dos niveles, usa lo siguiente:


11: Habilita el Empleo de los Fondos Personalizados

Esta es una característica que apareció en WordPress 3.0, y que además es muy fácil de implementar. Basta con añadir esta línea:

¡Eso es todo! Ahora los usuarios podrás elegir el fondo personalizado que más les guste:

Background selection interface.

12: Permite el Uso de Headers Personalizados

Dentro del mismo espíritu, pero con un poco más de esfuerzo, puedes permitir cambiar el fondo de la cabecera o 'header' del sitio web, y también del título del sitio. Esta característica no funcionará a menos que definas un conjunto de constantes.

Una vez tengas esto en su sitio, necesitas escribir la función que aplicará el fondo en tu cabecera. Como no existe un código estándar para el header del sitio, WordPress no puede saber cómo aplicar el CSS. Por ejemplo, par añadir un fondo personalizado al div con el id 'header', haz lo siguiente:

También tienes que crear una función, por ejemplo, mytheme_admin_preview_header(), para aplicar estilo al panel de previsualización en el área de administración. El área de previsualización tiene el id #headimg, mientras que el título y la descripción del sitio tienen los ids #name y #desc respectivamente. Experimenta con la previsualización hasta que te sientas satisfecho. Por último, para habilitar el panel Apariencia > Cabecera, invoca:

Referencias


13: Haz Que las Cadenas Visibles para el Usuario Sean Traducibles

No todo el mundo quiere que su blog esté en inglés. Envuelve cada cadena que necesiten leer los usuarios con __() si quieres que se puedan traducir, o _e() si también quieres mostrarlas, de la siguiente forma: 

El segundo argumento debería ser un identificador único para tu tema, de manera que las distintas traducciones no entren en conflicto.

Después de que envolver cada cadena en una función de traducción, tendrás que usar el script makepot.php. Para obtener este script se recomienda usar Subersion, después ejecuta:

Obtendrás un directorio, llamado 'trunk' que contiene, entre otras cosas, el archivo makepot.php.
El script se ejecuta de la siguiente forma

mytheme es la ruta hacia el directorio de tu tema. Obtendrás un archivo llamado mytheme.pot, que podrás usar en un programa, como Poedit para crear un archivo .po que contenga una traducción.

Para terminar, debes indicarle a WordPress en qué lugar de tu directorio están ubicadas las traducciones, por ejemplo:

Aquí, 'mytheme' es un identificador único para tu tema; el segundo argumento indica dónde están los archivos de las traducciones. TEMPLATEPATH es una constante definida por WordPress que siempre apunta al directorio del actual tema.

Referencia


14: Gestionar los Campos Personalizados

Esto es en cierta manera opcional, puedes preferir que lo decidan los usuarios o los desarrolladores. Sabrás que WordPress admite la adición de campos personalizados en cada entrada. En muchos temas, normalmente estos campos no se muestran, a menos que se usen para algo especial. Algunos usuarios podrían sentirse confusos, ya que creen que pueden usar los campos personalizados para mostrar en el front-end cualquier información que deseen.

The custom fields interface

Existe una función,

que puedes invocar en el Loop para mostrar todos los campos personalizados de una entrada, como una lista sin numerar en forma de key:value. Admito que no es excesivamente útil, pero puede que sea mejor que dejar que la gente se pregunte por qué los campos personalizados no aparecen por ningún lado.

Referencias


15: Asegúrate de Que Todo Tiene un Aspecto Consistente

Una de las dificultades de crear un tema para un sistema dinámico, como el propio WordPress, es que existen muchas situaciones inesperadas que, aunque no se den con frecuencia, si lo hacen podrían arruinar es aspecto del sitio web. Piensa en las entradas con los comentarios cerrados, o cuando hay poco contenido. Asegúrate de que no se dé ninguna desafortunada distribución del espacio, o de que los elementos no coexisten bien juntos debido a que algo ha dejado de mostrarse. La sección para los comentarios no debería aparecer si estos están deshabilitados, o el campo para introducir una contraseña debería sustituir al contenido estándar cuando la entrada está protegida por contraseña.

Además, debes intentar que el estilo con el que se muestran los comentarios esté en línea con el del contenido principal. Este último punto requiere un cuidado especial ya que generalmente el espacio para los comentario está más limitado -- en especial cuando usamos comentarios anidados y cada respuesta aumenta su margen derecho (o el izquierdo, para RTL).


16: Usa la Herramienta de Comprobación Theme Unit Test de WordPress.org

WordPress.org proporciona un archivo con contenido de muestra que puedes importar en tu instalación de WordPress, y que contiene un surtido de entradas, páginas e imágenes de prueba.

Para importar este archivo en WordPress, primero tienes que instalar el plugin de importación de WordPress. Después, selecciona Herramientas > Importar > WordPress. Asegúrate de marcar la casilla 'Descargar e importar los archivos adjuntos'. De no hacerlo, no importarás las imágenes asociadas a ciertas entradas de muestra.

Cuando se haya completado la importación, puedes usar esta lista de comprobación para determinar si el contenido se muestra correctamente.


Conclusión

Hemos aprendido que las cosas debemos vigilar son muy variadas. Algunas son funcionalidades poco utilizadas, otras constituyen oportunidades de personalización, mientras otras están más relacionadas con problemas de diseño, que se darán en cualquier web que diseñes con WordPress. Nuestro listado no es ciertamente exhaustivo, por eso nos gustaría escuchar tus opiniones o sugerencias en los comentarios. ¿Cuáles crees que son las funcionalidades más frecuentemente olvidadas?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.