Descargar e instalar mybooking-child

Cuando instalar Mybooking child en tu web de Wordpress:

1 - La web no tiene un tema propio y se desea crear el sistema de reservas rápidamente utilizando el Theme de Mybooking y el plugin.

2 - El Theme de Mybooking no se adapta totalmente al diseño por lo que:

• Se van a realizar cambios sustanciales en los estilos y estos deben conservarse al actualizar a las sucesivas versiones del Theme de Mybooking.
• Se va a añadir Javascript personalizado.
• Se va a cambiar parte de las plantillas HTML que utiliza el sistema de reserva modificandose la estructura de estas.

Pasos a seguir desde cero:

1. Descargar e instalar Mybooking Theme. (no es necesario activarlo puesto que será el padre)
2. Descargar, instalar y activar el Plugin de Mybooking.
3. Descargar, instalar y activar Mybooking child.
4. Editar los estilos CSS desde el child theme.
5. Añadir código Javascript personalizado desde el child theme.
6. Sobrescribir las plantillas HTML desde el child theme.

Mybooking child

Para instalar Mybooking child lo primero que hay que hacer es descargar la ultima versión estable desde el repositorio: https://github.com/mybooking-es/mybooking-child

Una vez descargado el zip se debe instalar en el entorno de Wordpress desde Apariencia > Temas > Subir tema

Y una vez instalado se tiene que Activar.

Llegados a este punto ya lo puedes personalizar.

Puedes insertar tu CSS en el apartado CSS adicional o puedes hacerlo de manera más profesional editando un fichero CSS externo dentro de el child theme (lo aconsejable es seguir esta última opción)

Editar los estilos CSS desde el child theme.

Para realizar este paso es necesario que accedas a tu entorno de trabajo de Wordpress de manera local o de manera remota para llegar a las carpetas instaladas dentro de app > public > wp-content > mybooking-child-master (que es el child theme apenas instalado)

Una vez abierto en tu editor encontraras esta estructura:

Puedes personalizar el CSS editando el fichero style.css en la root principal.

El cambio se verá inmediatamente reflejado en el tema activo (el child theme)

Añadir código Javascript personalizado desde el child theme

Si además necesitas añadir código personalizado al child theme para interactuar con la UI lo puedes hacer añadiendolo dentro del fichero js > custom-scripts.js

Como puedes ver funciona!

Sobrescribir las plantillas HTML desde el child theme.

Además de poder personalizar el tema con tus propios estilos CSS y con tus scripts JS puedes modificar partes del proceso de reserva personalizando el HTTML.

Para hacerlo debes añadir el fichero que deseas sobrescribir dentro de la carpeta mybooking-templates dentro del child theme. Puedes crear un fichero nuevo o copiar el mismo fichero desde el plugin y después modificarlo.

En el ejemplo hemos copiado el widget del formulario de contacto. Para verlo hemos creado una pagina con el shortcode del formulario entre las páginas de Wordpress, también lo puedes añadir como cualquier Widget de Wordpress directamente a la página de destino.

Para hacer la prueba modificamos el label añadiendo el texto (obligatorio) en lugar del asterisco. El HTML del formulario de contacto del plugin es sustituido por el que hemos modificado y muestra esta variación como se puede ver en el ejemplo.