Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
Cómo crear tus propios temas para WordPress

Creando un tema desde cero para WordPress parte 1: Consideraciones previas

 

A día de hoy WordPress es el CMS más utilizado para el desarrollo de páginas web, superando el 26% de cuota de mercado. En este blog he hablado en otras ocasiones sobre su popularidad, flexibilidad, versatilidad, etc…

Como sabrás WordPress funciona con temas (themes). Los hay para todos los gustos, gratis, de pago y freemium, enfocados a una temática concreta o multipropósito (multidespropósito como yo digo, pero esto quizá para otro post…) y en esta entrada inicio una serie de artículos para ver cómo crear tu propio tema de WordPress desde cero.

temas

 

Realizar un tema WordPress desde cero creo que es la mejor opción cuando tienes unas necesidades específicas y concretas, ya sea que quieres un diseño original, o ya sea una funcionalidad concreta. Es un traje a medida, y si lo haces bien tendrás una página personalizada, original, exclusiva y de un rendimiento óptimo.

Lo primero que hay que hacer es realizar un planteamiento de cómo vamos a desarrollar el tema desde cero, y qué elementos, librerías, imágenes, funcionalidades, etc… necesitaremos.

Éste paso es el más importante. Organizarse bien desde un principio repercutirá en tu productividad y tiempos de desarrollo. Siempre es mejor invertir, que no perder, unas horas en realizar un buen planteamiento, una buena base a la larga te hará obtener óptimos resultados.

temas wordpress

Básicamente un tema de WordPress es una carpeta que contendrá archivos .php, .js, .css, etc… En realidad, lo mínimo que necesitarías para crear un tema son dos archivos: una hoja de estilos llamada style.css y un archivo index.php, pero vamos a ver cómo organizar mejor un tema.

Lo ideal es crear una estructura de carpetas dentro de la carpeta “mi-tema” para organizar nuestros archivos, por ejemplo:

  • css: para las hojas de estilo
  • js: para los archivos js
  • img: para las imágenes
  • fonts: para incluir fuentes
  • languages: para los archivos .po y .mo en caso de que nuestro tema sea multi-idioma
  • inc: para archivos php auxiliares

 

A continuación debes plantear si vas a usar frameworks o librerías de terceros en tu tema. Por ejemplo bootstrap, Font Awesome, Isotope, Mansonry, etc…Si es así descárgalos e incluye los archivos .css en la carpeta css, los archivos .js en la carpeta js, etc…y en el siguiente artículo veremos cómo usarlos en nuestro tema. Muchas de estas librerías disponen de CDN propio por si quieres cargarlas desde ahí en lugar de incluirlas físicamente en tu tema.

Ten en cuenta que WordPress incluye scripts como Scriptaculous, Image Cropper, jQuery, jQuery UI, Color Picker, etc…la lista completa la puedes ver aquí.

Por último, debes pensar algo acerca de la optimización y rendimiento del sitio. Puedes usar Grunt o Gulp para realizar tareas como concatenar y minificar tus CSS y JS, optimizar imágenes, etc…

Una vez tengas el esqueleto del proyecto, el siguiente paso es construir el tema, sobre lo que hablo en el siguiente artículo.

Puede que también te interese

Reduce el HTML de tu WordPress para bajar el peso de la página
Reduce el HTML de tu WordPress para bajar el peso de la página
La parte pública de una web o expresado de otro modo, lo que el navegador pinta, no es más que un documento HTML, donde encontraremos…
Mejora la puntuación de Google PageSpeed Insights: Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página
Mejora la puntuación de Google PageSpeed Insights: Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Establecer la primera imagen de un post como destacada
Establecer la primera imagen de un post como destacada
Cuando escribimos una entrada o página en WordPress, por defecto nos deja establecer una imagen destacada o thumbnail: Esta imagen destacada suele usarse por ejemplo…
Oculta las notificaciones de plugins y temas en WordPress
Oculta las notificaciones de plugins y temas en WordPress
Es posible que te hayas encontrado alguna vez o tengas un sitio creado con WordPress que tenga multitud de plugins instalados, o algún cliente que…