Implementación de temas WordPress con Sage

Si diseñas temas en WordPress sabes lo mucho que tardan. Por ello, varios desarrolladores construyen algunos de estos con una estructura básica, sin mayor diseño, pero con código para generar contenido. Tal es el caso de Sage: tema que usamos en Swapps, creado por Roots y en HTML5 repetitivo.

A la hora de elegir un tema de inicio lo ideal es conocer su documentación, soporte, características técnicas y mantenimiento. Así sabremos si  se ajusta a los objetivos del proyecto, es compatible con los navegadores que usamos y se actualiza constantemente a WordPress. 

En este blog presentaré cómo podemos trabajar con Sage.

Características de Sage

Sage incorpora características que ayudan a crear nuevos temas de una manera fácil y limpia, como Bower, Gulp, Browsersync y Bootstrap. 

En caso de que no sepas para que sirvan, te lo cuento: 

Trago

Esta herramienta se encarga de tareas comunes de Frontend como minificación y concatenación de archivos CSS y Javascript, compilación de preprocesadores CSS, optimización de imágenes y revisión automática de código.

Cenador

Esta función maneja los paquetes usados ​​en Frontend. 

Oreja

Framework CSS muy usado. Al ser creado por ingenieros de Twitter permite crear sitios agradables visualmente y adaptables a sitios móviles con clases predefinidas en corto tiempo.

Sincronización del navegador

Sincroniza cambios de archivos en múltiples navegadores y dispositivos. 

La versión de Sage 9 usa Webpack y npm, en vez de Gulp y Bower para manejar dependencias.

 

¿Cómo instalar Sage?

Primero comprueba tener instalados PHP 5, Compositor, Nodo.js, Git.

En segundo lugar, instala Gulp y Bower con Node.js y usando npm.

Escríbelo de esta manera en la consola: 

npm install -g gulp bower

Luego, vamos a nuestra carpeta de temas de WordPress para instalar Sage de dos maneras.

La primera es clonando el repositorio:

git clone https://github.com/roots/sage.git theme-name

Y la segunda, es a través de Composer:


composer create-project roots/sage theme-name 8.5.

En cualquier caso, recuerde cambiar el nombre del tema por el que quieres para el nuevo tema. También puedes descargar el repositorio de Git como un .zip y extraerlo manualmente en nuestra carpeta de temas. 

2. Estructura de archivo

Podemos ver los archivos comunes de WordPress (index.php, functions.php, single.php, page.php, etc) en la raíz de la carpeta. También tenemos la carpeta Lib, donde se encuentra la configuración específica de Sage. En la carpeta Assets  podemos poner nuestras imágenes, estilos, scripts y fuentes.

Por otro lado, en la carpeta Templates se encuentran archivos para todas las plantillas que se ven comúnmente en un tema de WordPress, aunque la diferencia es que están basadas en HTML5 y usan roles ARIA para mejorar la accesibilidad.

Por su parte, en la carpeta Distrito  se encuentran los recursos procesados ​​a usar en nuestro sitio. Estos son el resultado del flujo de trabajo automatizado y no se editan manualmente.

Por último, Sage tiene soporte para múltiples idiomas, por eso tenemos la carpeta Lang con el archivo sage.pot , en caso de que necesitemos hacer traducciones.

3. Personalización

Podemos configurar nuestra instalación de Sage, modificando los archivos incluidos dentro del directorio Lib .

Cada archivo tiene una función:

• assets.php:  incluye nuestros estilos y scripts.
• extras.php: contiene funciones para añadir clases y  un enlace para seguir leyendo al final del resumen de nuestras entradas de blog.
• setup.php: habilitar o deshabilitar el soporte del tema para ciertas características de WordPress como registrar barras laterales y menús de navegación, al igual que elegir en qué páginas queremos (o no) mostrar la barra lateral.
• titles.php: controla el formato de salida de los títulos de página.
• wrapper.php: contiene la funcionalidad para el Theme Wrapper.

A continuación, fragmentos de códigos claves:  

// lib/instalación.php 
add_theme_support('etiqueta-título'); // Habilitar la modificación del título del sitio web. 

add_theme_support('post-miniaturas'); // Habilitar las principales imágenes de WordPress. 

// Añadir navegaciones, por defecto se registra una navegación principal. 
registrarse_menús_navegación([ 
'primary_navigation' => __('Navegación Primaria', 'sabio') 
]); 

// Tipos de correos habilitados por defecto. Modifique esto según lo necesite. 
add_theme_support('post-formatos', ['aparte', 'galería', 'enlace', 'imagen', 'cita', 'video', 'audio']);

add_theme_support('html5', ['título', 'formulario de comentarios', 'lista de comentarios', 'galería', 'formulario de búsqueda']); 

// Especificar la ruta de la hoja de estilos usados ​​​​para personalizar el editor TinyMCE usado por WordPress. 
add_editor_style(Assets\asset_path('styles/editor-style.css')); 

// Aquí podemos añadir barras laterales en nuestro tema. Por defecto Sage añade una barra lateral principal y una en el pie de página. 
función widgets_init() { 
registrarse_barra lateral([ 
'nombre' => __('Principal', 'sabio'), 
'id' => 'sidebar-principal', 
'antes_widget' => '
'después_widget' => '</sección> 

', 
'antes_del_título' => ' 
<h3>', 
'after_title' => '</h3> 

' 
]); 

registrarse_barra lateral([ 
'nombre' => __('Pie de página', 'salvia'), 
'id' => 'pie de página de la barra lateral', 
'before_widget' => ' 
<clase de sección="widget %1$s %2$s">', 
'after_widget' => '</sección> 

', 
'before_title' => ' 
<h3>', 
'after_title' => '</h3> 

' 
]); 
}
add_action('widgets_init', __NAMESPACE__ . '\\widgets_init');

 

Activos del directorio

Aquí se encuentran dos archivos a los que debemos ponerles atención. El primero es estilos/main.scss, donde se genera el archivo CSS principal que se guarda en dist/styles. Aquí  importamos todos nuestros estilos personalizados, así como todas las dependencias Sass provenientes de los paquetes instalados por Bower. 

El otro archivo que merece nuestra atención es scripts/main.js. Este se comporta igual que el anterior, pero aquí se cargarán guiones de nuestros paquetes de Bower. Con base a este archivo se generará el archivo JS principal almacenado en dist/scripts .

Este archivo permite escribir el código general, cargado en todas las páginas y el código específico cargado en la principal. Ten esto en cuenta para crear en el Frontend.

4. Envoltorio de tema sabio

El Theme Wrapper (una traducción posible es contenedor de tema ) es una característica clave de Sage, y es una de las razones de por qué es diferente de otros starter themes debido a que sigue el principio DRY (Don’t Repeat Yourself, No te repitas ).

Tal vez haya notado un archivo en la raíz del directorio de su tema llamado base.php . E ste es el esqueleto de todas las páginas en nuestro sitio. Contiene la estructura principal de un documento HTML y se encarga de cargar secciones usadas frecuentemente como el encabezado, el pie de página y la barra lateral.

Esta opción hace de este archivo el punto de partida para la jerarquía de plantillas de WordPress. Así el código y la estructura que pongamos aquí cargará en todas las páginas.

Por lo anterior, podemos enfocarnos directamente en la estructura y lógica para mostrar el contenido de un archivo y no en repetir los mismos fragmentos. 

Conclusión

Los temas iniciales son una grandiosa forma de empezar a desarrollar un tema nuevo, con ellos podemos acelerar el proceso y tener un flujo de trabajo para codificar eficientemente.

Sage se destaca del resto, porque sigue el fundamento DRY, al igual que automatiza procesos y dependencias. 

Cabe mencionar que  Sage posee una sólida documentación y un foro donde la comunidad, incluso sus mismos desarrolladores, resuelven inquietudes o problemas presentados. También incluyen un archivo README dentro del proyecto. 

Además , el equipo de Sage está siempre pendiente de las nuevas tendencias y tecnologías en el desarrollo web (un ejemplo de esto es el uso de Webpack en su nueva versión).