Crear un child theme basado en Mybooking Theme
Nuestro tema para WordPress ofrece unas funcionalidades y estilos predeterminados que pueden personalizarse y ajustarse para negocios que necesitan una web básica, pero en ocasiones surgen proyectos donde el cliente requiere una personalización avanzada o solicita nuevas funcionalidades. La manera correcta de implementar esos requisitos es mediante un child theme.
Un child theme es un tema que hereda de otro para su funcionalidad y diseño y es un mecanismo seguro a la hora de aplicar cambios en el código de un tema que no deseamos perder en una actualización. Este mecanismo lo puso en marcha WordPress para evitar instalaciones desatendidas con temas «fuera de versión» por los problemas de seguridad que esto generaba.
Puedes crear tu propio child theme basado en cualquier tema existente, sea comercial o gratuito, siguiendo las instrucciones que encontrarás en el Codex de WordPress, pero si está personalizando una instalación basada en Mybooking Theme, hemos preparado una plantilla que te servirá de punto de partida.
Preparación del entorno de desarrollo
Para poder crear un tema hijo de Mybooking Theme primero debes preparar tu entorno:
- Un servidor web local y un servidor de base de datos. Te recomendamos Local by Flywheel pero también puedes montar un entorno LAMP, MAMP o WAMP
- Una instalación limpia con la última versión de WordPress
- Git como control de versiones
- Un editor de código como Sublime, Atom o VS Code
Una vez tienes una instancia de WordPress levantada debes instalar los siguientes componentes:
- El plugin Mybooking Reservation Engine
- El tema Mybooking
Con estos componentes instalados y activados, ahora es el momento de configurarlos para crear una estructura básica.
Si necesitas instrucciones más detalladas, puedes consultar los tutoriales de creación web para distintos tipos de negocio en nuestro Centro de Ayuda:
Descargar e instalar Mybooking Child
El código de la plantilla para crear child themes se encuentra alojado en GitHub, puedes descargarlo en como zip y descomprimirlo o clonarlo con git para más tarde crear tu propio repositorio donde guardar las diferentes versiones que generes:
Para clonar el repositorio, accede a wp-content/themes en tu instalación de WordPress y en una terminal de comandos ejecuta:
git clone https://github.com/mybooking-es/mybooking-child
Una vez instalado el tema, debes cambiar el nombre de la carpeta de instalación mybooking-child-master por otro que te ayude a identificarlo, generalmente el nombre del cliente, antes de activarlo.
Preparar Mybooking Child
Como hemos explicado, esta plantilla hereda las funcionalidades y estilos del tema base y sirve de punto de partida para añadir tu propio código de forma segura sin que este se vea comprometido por futuras actualizaciones.
Una vez descargado, instalado y activado encontraremos una nueva carpeta en la carpeta themes de nuestra instalación de WordPress con la siguiente estructura de ficheros y carpetas:
| /css | Contiene la hoja de estilos del editor visual |
| /images | Contiene los iconos e imágenes que usa el tema |
| /js | Contiene un archivo vacio donde añadir tu código javascript o jQuery |
| /languages | Aquí puedes añadir los ficheros de traducción |
| /mybooking-templates | Copia aquí los templates que quieras modificar |
| .gitignore | Si no vas a crear un nuevo repositorio puedes eliminar este archivo |
| README.md | Si no vas a crear un nuevo repositorio también puedes eliminar este archivo |
| functions.php | Contiene las funciones para encolar los estilos y scripts del child theme |
| screenshots.png | Sustituye esta imagen para identificar tu child theme |
| styles.css | Aquí puedes configurar tu child y añadir tus estilos para el frontend |
Ahora debes personalizar tu child theme configurando el archivo styles.css para que tenga un identificador y un namespace únicos. Abre el fichero en un editor de código y modifica los datos de la cabecera sustituyendo los bloques entre corchetes por la información adecuada:
/* Theme Name: [theme_name] Theme URI: [client_url] Template: mybooking Author: [author_name] Author URI: [author_url] Description: Tema basado en Mybooking Theme para [client_name] Tags: e-commerce,blog Version: 1.0.0 Requires at least: 5.2 Tested up to: 5.6.1 Requires PHP: 7.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: [text_domain] Domain Path: /languages */
El siguiente paso es sustituir la imagen screenshot.png por una personalizada que identifique el tema una vez instalado. La imagen final debe conservar el nombre de archivo y las dimensiones.
Ahora ya tienes tu child theme listo para trabajar.
Añadir CSS personalizado
El CSS en Mybooking Child puede escribirse sin necesidad de usar ningún pre-procesador. Si necesitas usar SASS deberás instalar los módulos correspondientes mediante Node. Consulta la documentación de Node JS para añadir SASS a tu desarrollo.
Mybooking Theme está escrito siguiendo el framework Bootstrap por lo que tu código puede incluir las clases propias de dicho framework, ademas de las clases personalizadas que puedas necesitar si tienes pensado añadir módulo o funcionalidades propias.
Añadir templates personalizados
Una de las razones principales para crear un child theme basado en Mybooking Theme es la necesidad de personalizar los templates del proceso de reservas.
Aunque dichos templates son gestionados por el plugin Mybooking Reservation Engine, el tema base Mybooking Theme carga sus propias versiones basadas en Bootstrap. Ten esto en cuenta a la hora de crear tus propios templates para evitar inconsistencias o código duplicado.
El procedimiento para crear tus templates personalizados es el siguiente:
- Escoge el template que deseas personalizar y cópialo desde la carpeta wp-content/themes/mybooking/mybooking-templates
- Ubica el duplicado en la carpeta /mybooking-templates de tu child theme
- Mantén el nombre del template o el plugin no será capaz de detectarlo
Más información:
Modificar los templates de Mybooking ->
Añadir funciones personalizadas
Mybooking Child hereda las funciones del tema base, pero puede ser necesario añadir funciones extra (crear un filtro para el catálogo, añadir áreas de widgets, etc.) para nuestro child.
Puedes añadir tus nuevas funciones en el archivo functions.php o crear carpetas en tu child y luego cargarlas desde dicho archivo con las llamadas correspondientes.