La Guía Para Principiantes para Desarrollar un Tema de WordPress

Si quieres que algo se haga de cierta manera, es posible que lo debas hacer tú mismo. Mientras que hay increíbles temas de WordPress disponibles, encontrar el que se ajusta a tus requerimientos específicos puede ser difícil.  De hecho, puedes estar tentado a crear tu propio tema. Sin embargo, comenzar con el desarrollo de temas puede parecer abrumador — especialmente para los principiantes. 

Afortunadamente, crear un tema personalizado para WordPress es un proceso relativamente simple. No requiere mucho conocimiento técnico o experiencia con desarrollo web. Además, construir tu propio tema puede valer la pena, ya que puedes hacer que tu sitio se vea exactamente como deseas. 

Una Introducción al Desarrollo de Temas WordPress

Quieres que tu sitio se vea genial y tenga todas las funcionalidades que necesitas, entonces revisas el Directorio de Temas de WordPress:

Desafortunadamente, nada de lo que ves se ajusta a tus requerimientos y no quieres comprometer tu visión. Tal vez quieres algo único que hará que tu sitio resalte, pero no quieres gastar dinero en un tema premium. 

En este punto, puedes estar considerando crear tu propio tema. Afortunadamente, desarrollar un tema para WordPress no es tan complicado como piensas. Gracias a la interfaz amigable para los usuarios de la plataforma y las numerosas herramientas disponibles, casi cualquiera puede hacer un tema personalizado. 

Te llevaremos a través del proceso de crear tu primer tema. Para comenzar, necesitarás 2 cosas: 

• Tu propio sitio WordPress
• Un plan de alojamiento de calidad

También te beneficiarás al tener experiencia con ambientes staging locales, ya que estarás utilizando uno para crear tu tema. Tener algo de entendimiento sobre CSS y PHP también será útil (si no necesario). 

Finalmente, hay una herramienta importante que querrás tener, y que hará el proceso mucho más fácil: un tema inicial. 

Qué es un Tema inicial (Y Por Qué Debes Utilizar Uno)

Un tema inicial es un tema de WordPress que solo tiene lo básico y puedes usar como la base para crear el tuyo. Esto te permite construir un framework sólido sin tener que preocuparte por las complejidades involucradas en codificar un tema desde cero. También ayudará a entender cómo funciona WordPress al mostrarte la estructura básica de un tema y cómo funcionan sus partes. 

Hay muchos temas iniciales que son excelentes allí afuera, incluyendo  Underscores, UnderStrap, y Bones (para firmar algunos).

Estaremos utilizando Underscores para nuestro tutorial. Es una elección sólida para los principiantes, ya que solo contienen lo básico. Además, este tema inicial está desarrollado por Automattic (el equipo detrás de WordPress.com), lo que significa que hay más posibilidades de que sea seguro, compatible y soportado a largo plazo. 

Cómo Desarrollar Tu Primer Tema WordPress (En 5 Pasos)

Con los pasos de preparación listos, finalmente estás listo para comenzar a crear tu primer tema. Como mencionamos anteriormente, usaremos un tema inicial para este paso a paso. 

Sin embargo, si deseas intentar crear todo por ti mismo sin una plantilla, siéntete libre de hacerlo. Ten en cuenta que este enfoque requerirá mucha más experiencia de programación. 

Paso 1: Configura un Ambiente Local

Lo primero que debes hacer es crear un ambiente local de desarrollo. Esto es efectivamente un servidor que debes instalar en tu computador, el cual debes utilizar para desarrollar y administrar sitios WordPress localmente. Un sitio local es una manera segura de desarrollar un tema sin impactar tu sitio en vivo de ninguna manera. 

Hay muchas maneras en las que puedes crear un ambiente local, pero usaremos en este caso: Local. Esta es una manera rápida y sencilla de instalar una versión local de WordPress gratuitamente y, además, es compatible con Mac y Windows. 

Para comenzar, selecciona la versión gratuita de Local, elige tu plataforma, añade tus detalles y descarga el instalador. Cuando la instalación haya terminado, puedes abrir el programa en tu computador. 

Aquí, se te pedirá configurar tu nuevo ambiente local: 

Este es un proceso sencillo, y tendrás tu sitio WordPress local listo en 5 minutos. Una vez que ha sido configurado, tu nuevo sitio se verá y funcionará exactamente como un sitio WordPress en vivo. 

Paso 2: Descarga e Instala Tu Tema Inicial

Como con la mayoría de temas iniciales, es muy fácil comenzar con Underscores. De hecho, todo lo que necesitas hacer es ir al sitio web y darle un nombre a tu tema.  

Si lo deseas, puedes hacer clic en ‘Advanced Options’ para personalizar el tema base aún más. 

Aquí puedes llenar más información, tal como el nombre del autor y proporcionar una descripción del tema.

También está la opción ‘_sassify!’, la cual añade archivos Syntactically Awesome StyleSheets u Hojas de Estilo Sintácticamente Asombrosas (SASS) a tu tema. SASS es un lenguaje preprocesado para CSS, el cual permite utilizar variables, operadores de matemáticas y más. 

Cuando has realizado tus elecciones, puedes hacer clic en ‘Generate’, lo cual descargará un archivo .zip conteniendo tu tema inicial. Este es el archivo principal alrededor del cual desarrollarás tu propio tema, entonces tendrás que instalarlo en tu sitio local. 

Una vez que has instalado tu tema, puedes previsualizar tu sitio para ver cómo se ve. Debe verse bastante simple ahora, pero no será el caso por mucho tiempo. 

Paso 3: Aprende sobre los diferentes componentes de un tema WordPress

Antes de que puedas personalizar tu tema, tendrás que entender el propósito de sus componentes y cómo encajan juntos. 

Primero, hablemos sobre los archivos de plantilla, que son los bloques principales de construcción de un tema WordPress. Estos archivos determinan el diseño del contenido en tu sitio. 

Por ejemplo, ‘header.php’ es empleado para crear un encabezado, mientras que ‘comments.php’ te permite mostrar comentarios. 

WordPress determina qué archivos de plantilla debe usar en cada página al verificar la jerarquía de plantillas. Este es el orden en el cual WordPress buscará los archivos de plantilla correspondientes cada vez que se cargue una página en su sitio.

Por ejemplo, si visitas la URL http://ejemplo.com/publicacion/esta-publicacion, WordPress buscará los siguientes archivos de plantilla en este orden: 

1. Archivos que coincidan con el slug, tal como ‘esta-publicacion’
2. Archivos que coincidan con el ID de la publicación
3. Un archivo único de publicación, tal como single.php
4. Un archivo, tal como archive.php
5. El archivo index.php

Ya que el archivo index.php es requerido por todos los temas, es la opción predeterminada si no se puede encontrar otro archivo. Underscores contiene los archivos más comunes de plantillas y funcionarán desde el principio. Sin embargo, puedes experimentar editándolos si deseas ver cómo funcionan juntos. 

Otro elemento importante que necesitas entender es The Loop. WordPress emplea este código para mostrar contenido, entonces en muchas maneras, es el corazón de tu sitio. Aparece en todos los archivos de plantilla que muestran el contenido de publicación, tal como index.php o sidebar.php.

The Loop es un tema complejo que recomendamos que leas un poco más si deseas entender cómo WordPress muestra el contenido de una publicación. Afortunadamente, the Loop ya estará integrado con tu tema gracias a Underscores, entonces no tienes que preocuparte por él en este momento.  

Paso 4: Configura Tu Tema

Es fácil pensar que los temas son completamente para propósitos cosméticos, pero de hecho tienen un amplio impacto en la funcionalidad de tu sitio. Veamos cómo puedes realizar algunas personalizaciones básicas. 

Añade Funcionalidad con ‘Hooks’

Los Hooks o ‘Ganchos’ son fragmentos de código insertados en archivos de plantilla, que te permiten ejecutar acciones PHP en diferentes áreas de un sitio, insertar estilos, y mostrar otra información. La mayoría de los ganchos, son implementados directamente en el software principal de WordPress, pero algunos también son útiles para los desarrolladores de temas. 

Veamos algunos de los ganchos más comunes y para qué pueden ser utilizados: 

• wp_head() — Añadido al elemento <head> en header.php. Habilita estilos, scripts y otra información que se ejecuta tan pronto como carga el sitio.
• wp_footer() — Añadido a footer.php justo antes de la etiqueta </body>. Esto a menudo es utilizado para insertar código de Google Analytics.
• wp_meta() — Usualmente aparece en sidebar.php para incluir scripts adicionales (tales como una nube de etiquetas).
• comment_form() — Añadido directamente a comments.php antes de la etiqueta de cierre  </div> para mostrar información de comentarios.

Estos ganchos estarán incluidos en tu tema Underscores. Sin embargo, aún recomendamos visitar la base de datos de Hooks para ver todos los ganchos disponibles y aprender más sobre ellos.

Añade estilos con CSS

El Cascading Style Sheets (CSS) define la apariencia de todo el contenido de tu sitio. En WordPress, esto se logra usando un archivo style.css. Ya tienes este archivo incluido en tu tema, pero por el momento, sólo contiene el estilo básico predeterminado. 

Si quieres un ejemplo rápido sobre cómo funciona el CSS, puedes editar cualquiera de los estilos y guardar el archivo para ver los efectos. Por ejemplo, puedes encontrar el siguiente código (usualmente en la línea 485): 

a {
color: royalblue;
}

Este código controla el color de los hipervínculos que no han sido visitados, los cuales aparecen en ‘azul rey’ por defecto:

Veamos qué pasa si intentamos cambiar eso al reemplazarlo con el siguiente código:

a {
color: red;
}

Guarda el archivo y verifica tu sitio local. Como es de esperar, todos los enlaces ahora aparecerán en rojo brillante. 

Puedes notar que el enlace visitado en la parte superior no ha cambiado de color. Esto es porque de hecho está gobernado por la siguiente sección en la hoja de estilo: 

a:visited {
color: purple;
}

Este es un ejemplo bastante básico sobre cómo editar el archivo style.css afectará la apariencia de tu sitio. El CSS es un tema masivo que recomendamos que explores más allá si deseas aprender más sobre la creación de diseños web. Hay suficientes recursos en el tema para los principiantes.  

Paso 5: Exporta el Tema y Súbelo a Tu Sitio

Cuando hayas finalizado de editar tu tema, es momento de asegurarte de que funciona correctamente. Para hacer esto, puedes usar la información de Theme Unit Test.

Este es un conjunto de información ficticia que puedes subir a tu sitio. Contiene tantas variaciones diferentes de estilos y contenido, y te permitirá ver cómo se acopla tu tema con información impredecible. 

Cuando has probado minuciosamente tu tema y estás convencido de que se ajusta a los estándares requeridos, todo lo que falta ahora es exportarlo. 

Primero, tendrás que encontrar la ubicación de tu sitio web en tu máquina local. Probablemente, lo encontrarás en una carpeta llamada ‘Websites’, dentro de tu directorio predeterminado ‘Documents’. 

Abre la carpeta del sitio web y accede a /wp-content/themes/, donde encontrarás tu tema. 

Ahora puedes emplear una herramienta de compresión, tal como WinRAR, para crear un archivo .zip basado en la carpeta. Simplemente, haz clic derecho en la carpeta respectiva y selecciona la opción que te permite comprimirla, tal como ‘Compress “folder”’.

Cuando la carpeta haya sido comprimida, está lista para ser subida e instalada en cualquier sitio WordPress, justo como instalaste tu tema Underscores al comienzo. Si estás particularmente feliz con el resultado, incluso podrías enviar tu tema para ser evaluado por el Directorio de Temas de WordPress–

Crea Un Tema Personalizado de WordPress

Crear un tema de WordPress desde cero no es una tarea pequeña. Sin embargo, puede no ser tan difícil como piensas. 

Para resumir, así es cómo puedes desarrollar un tema WordPress en 5 pasos simples: 

1. Configura un ambiente local, utilizando Local.
2. Descarga e instala un tema inicial, como Underscores.
3. Aprende sobre los diferentes componentes de un tema WordPress.
4. Configura tu tema.
5. Exporta el tema y súbelo a tu sitio.

Al seguir las directrices del sitio de documentación del Codex, puedes desarrollar un tema que se ajuste a tus estándares de calidad. Incluso puedes considerar enviarlo al Directorio de Temas de WordPress. 

Haz Más Con DreamPress

¡Los usuarios de DreamPress Plus y Pro obtienen acceso a Jetpack Professional (y más de 200 temas prémium) sin costo adicional!

Adquiere Tu Plan Hoy