Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
En este tutorial, te enseñaré una forma verdaderamente rápida de crear temas de WordPress.
Si desarrollas temas de WordPress con regularidad, sabrás que el uso de un framework para comenzar en cada ocasión es una enorme ventaja. Hacerlo te proporcionará una pizarra limpia para cada tema y, al mismo tiempo, evitará que tengas que iniciar desde cero y repetir el trabajo fundacional para cada uno.
Runway es simplemente ese tipo de framework. Es 100% gratuito, de código abierto y está repleto de funciones muy buenas. ¡Entremos de lleno!
Cómo usar Runway
Dirígete al sitio web de Runway, presiona el prominente botón download (descargar), y recibirás un archivo zip para descomprimir.
Para usar el framework necesitarás una instalación funcional de WordPress (preferiblemente local o en un servidor de desarrollo). Para este tutorial voy a suponer que comprendes los pasos necesarios para configurar WordPress, pero prueba con este curso gratuito si necesitas ayuda:
Toma la carpeta runway-framework que acabas de descomprimir, y colócala en tu instalación de WordPress dentro de wp-content > themes (wp-content > temas). Ahora Runway es esencialmente un tema que necesitas activar yendo a Admin > Appearance > Themes (Administrador > Apariencia > Temas).
Tema hijo
Tras su activación, Runway te preguntará si deseas usar el tema hijo predeterminado (deseas usarlo), así que presiona Activate (Activar) en la ventana emergente. Si visitas el front-end, este te mostrará cómo se ve el tema en esta etapa:
El tema hijo se llama "Liftoff" y, si te fijas, verás que su carpeta ha sido añadida a la carpeta del tema de WordPress.
Dentro de la carpeta Liftoff encontrarás todos los archivos familiares necesarios para un tema de WordPress funcional, desde index.php, functions.php y, por supuesto, style.css.
Cómo proceder
Entonces, a partir de aquí esencialmente tienes dos opciones. Puedes usar este tema hijo "Liftoff" y personalizarlo a tu gusto, o puedes crear un tema hijo completamente nuevo basado en el framework Runway.
El Option Builder (Generador de opciones) de Runway
Uno de los mejores aspectos de Runway es su funcionalidad adicional, específicamente la manera en la que te ayuda a crear opciones para los temas. En el administrador de WordPress, dentro de Liftoff > Design Settings (Liftoff > Configuraciones de diseño), encontrarás la siguiente página:
Esta es una página de opciones que estará disponible para los usuarios de tu tema, permitiéndoles editar el título del sitio web, la imagen para el logotipo y otras partes que se pueden editar y que están contenidas en los archivos de la plantilla. También puedes ver Liftoff > Other Content (Liftoff > Otro contenido), otra página de opciones que quizá quieras incluir.
Para editar estas páginas y las opciones que se muestran en cada una, ve a Runway > Options Builder (Runway > Generador de opciones). En la captura de pantalla mostrada a continuación, verás la estructura usada para construir lo que ves arriba:
- Una pestaña General
- con un contenedor para un Logo (Logotipo)
- con cuatro campos diferentes para opciones (title (título), tagline (lema), image (imagen), URL).
Generar estas estructuras es cuestión de arrastrar y soltar, y puedes elegir si deseas incluir los contenedores o no en los personalizadores del tema (lo cual es una gran ventaja).
Cada uno de los campos te proporciona el fragmento de código PHP que necesitarás para mostrar el contenido de dicho campo en los archivos del tema. Por ejemplo, el título del logotipo podría guardarse en una variable en el tema en donde lo usas:
1 |
$logotitle = get_options_data('design-settings', 'logo-title'); |
Temas múltiples
Quizá quieras trabajar en más de un tema con el framework Runway en tu instalación actual de WordPress. Para hacerlo, ve a Runway > Themes (Runway > Temas), haz clic en New Theme (Nuevo tema) y rellena los detalles del tema.
Se agregará un nuevo tema hijo a tu carpeta de temas, que contendrá los archivos mínimos requeridos (functions.php, style.css, screenshot.png y una subcarpeta data). Luego tendrás que crear los archivos adicionales que necesitas, tal vez utilizando aquellos que se encuentran en el tema hijo de ejemplo como punto de partida.
Nuevamente, las páginas de opciones para este tema nuevo pueden ser creadas y generadas yendo a Runway > Options Builder (Runway > Generador de opciones).
Extensiones
Runway viene con una serie de extensiones, las cuales puedes elegir para usar con tu tema, o no hacerlo. Por ejemplo, hay estilos de temas que pueden ayudarte a iniciar, además de un instalador de complementos para garantizar que tus usuarios instalen los complementos correctos para comenzar. Hay un administrador de diseño, una extensión de tipos de contenido que te ayudará a generar estructuras personalizadas para ciertos tipos de entradas, y editores para menús de administración también. ¡Hay mucho para elegir! Algunas extensiones son gratuitas, otras requieren que compres una licencia.
Exportando tu tema
Runway es esencialmente una herramienta de construcción. Una vez que hayas terminado de construir tu tema, querrás poder empaquetarlo y distribuirlo. Aquí tienes dos opciones:
- Exportar un tema independiente
- Exportar un tema hijo
Para que tus usuarios puedan usar un tema hijo, necesitarán tener el framework Runway instalado en primer lugar. Es posible que quieras precisar de esta dependencia, o que no desees hacerlo.
Sin embargo, la exportación independiente permitirá que tus usuarios puedan simplemente instalar y usar tu paquete sin siquiera pensar en el framework.
Presiona el botón download (descargar) en la miniatura de tu tema, y serás dirigido a la página de descarga en donde puedes elegir qué tipo de paquete te gustaría usar.
Conclusión
Runway es un framework realmente magnífico para construir temas, especialmente para principiantes, ya que ofrece una base sólida y es muy fácil de usar. ¿Has utilizado Runway o algún framework similar? ¡Comparte tus pensamientos con nosotros!
Enlaces útiles
By
