Tema para WordPress

Introducción

Mybooking WordPress Theme tiene como propósito la construcción de sitios web basados en el motor de reservas de Mybooking y no es un tema multipropósito. Para la creación de sitios web altamente personalizados es posible usar Mybooking Child Theme junto con el presente tema.

Las sitios web con motor de reserva suelen tener una estructura similar:

  • Página de inicio.
  • Páginas del motor de reserva.
  • Página de términos y condiciones.
  • Página de contacto.
  • Páginas de avisos legales y cookies.

Mybooking WordPress Theme está diseñado para facilitar la construcción de este tipo de sitios web e incluye una serie de componentes pensado para ello.

Instalación

Para la instalación de Mybooking WordPress Theme se recomienda una instancia limpia de Wordpress. Para la instalación de WordPress seguiremos los pasos detallados en la documentación oficial.

  1. Descargamos Mybooking WordPress Theme desde el repositorio oficial
  2. Desde el dashboard de la instancia de WordPress subimos el tema y lo activamos

Dependencia

Mybooking WordPress Theme equiere la instalación de Mybooking WordPress Plugin.

Componentes

Mybooking WordPress Theme incluye una serie de componentes pensados para agilizar la creación de sitios web basados en el motor de reservas de Mybooking. Estos componentes se dividen en plantillas, módulos y custom post types.


form

(1) El topBar, que muestra los datos de contacto de la empresa y un menú con opciones destacadas
(2) La barra de navegación, donde se muestra el logo de la empresa y el menú principal
(3) La cabecera, que muestra una imagen, carrousel o vídeo, un mensaje de presentación y el formulario de búsqueda.
(4) El pie de página que pone a su disposición hasta 4 secciones para organizar el contenido.

Topbar

El topbar es un módulo que muestra una barra superior por encima de la navegación, con los datos de contacto de la empresa en la parte izquierda y un menú personalizable en la derecha.

Responsive

En dispositivos móviles el texto y el menú desaparecen, mostrando únicamente los iconos.

El proceso de configuración del topbar se detalla en el apartado Crear las páginas de reserva.

Barra de navegación

La barra de navegación es un módulo que muestra el logo del sitio web y el Menú Principal.

Responsive

En dispositivos móviles el menú principal se convierte en un botón y se despliega a página completa al pulsarlo.

Cabecera

La cabecera es un módulo complejo debido a que es lo primero que el usuario visualiza al aterrizar en la página de inicio. Incluye varios subcomponentes pensados para conseguir la máxima variedad de diseños posibles:

  • Imagen, carrusel o video de fondo
  • Dos zonas para widgets
  • Navegación superpuesta o solapada

Navegación

Aunque la navegación es un componente independiente, interactua con la cabecera y es necesario tenerlo en cuenta a la hora de escoger una u otra opción.

Imagen de fondo

En la configuración podemos elegir este tipo de fondo que consiste en una imagen estática sobre la que se puede situar contenido mediante widgets. Esta es la configuración más habitual y la más sencilla.

Carrousel de imágenes

Gracias al custom post type incluido en el tema, podemos configurar la cabecera para que muestre un carrusel de imagenes que permite mostrar banners de promoción debidamente formateados. Se recomienda no superponer ningún otro contenido si se escoge esta opción, aunque siempre dependerá del diseño a implementar.

Vídeo

También podemos incluir un video de fondo sobre el que situar widgets con diferentes contenidos. Al igual que la opción de imagen estática, podemos situar widgets sobre el video de fondo.

Layouts

La cabecera puede configurarse para mostrar contenido en una o dos columnas, segun el diseño deseado:

Cabecera con selector a una columna form

Cabecera con selector y texto a dos columnas form

Cabecera en vista de tablet form

Cabecera en vista de móvil
form

El proceso de configuración de la cabecera se detalla en el apartado Configurar la cabecera.

Pie de página

El pie de página se muestra en la parte inferior de todas las páginas del sitio. Puede contener hasta 4 áreas de widgets, en las que pueden añadirse los datos corporativos, menús y los enlaces a las redes sociales.

Zona Descripción
Footer Uno Si no se coloca ningún elemento se muestra el logo y los datos de la empresa.
Footer Dos Zona de widgets
Mybooking Pages Zona de widgets
Mybooking Contact Página con datos de contacto, mapa y formulario.
Su propósito es la creación de la página de contacto.
Mybooking Product Loop Página que muestra el custom post type Productos.
Deprecated! Se mantiene por compatibilidad con algunos clientes. Se desaconseja su uso.

Áreas de Widgets

Carrusel de cabecera

Noticias

Testimonios

Productos

Plantillas de páginas

El tema incluye una serie de plantillas de páginas preparadas para la construcción de un motor de reservas.

Plantilla Descripción
Mybooking Home Es la plantilla para la página de inicio
Contiene los módulos cabecera, widgets, testimonios y noticias.
Mybooking Empty Página en blanco de ancho completo.
Se trata de un lienzo en blanco sobre el que podemos construir las páginas del sitio web. Recomendamos utilizar esta plantilla es las páginas del proceso de reserva.
Mybooking Pages Página con imagen de cabecera y sidebar.
Su proposito es la creación de landing pages con contenido enfocado a SEO.
Mybooking Contact Página con datos de contacto, mapa y formulario.
Su propósito es la creación de la página de contacto.
Mybooking Product Loop Página que muestra el custom post type Productos.
Deprecated! Se mantiene por compatibilidad con algunos clientes. Se desaconseja su uso.

Asignar una plantilla

Para asignar una plantilla a una página, se debe seleccionar la plantilla correspondiente en la sección Atributos de la página del editor de WordPress.

El proceso de creación de páginas se detalla en el apartado Crear páginas.

Plantillas de reserva

Para la gestión de las páginas del proceso de reserva, Mybooking WordPress Theme ofrece un amplio abanico de plantillas que renderizan cada uno de los pasos necesarios para completar el proceso, incluyendo la selección del producto, la introducción de datos del cliente, la selección de extras y el resumen de la reserva, entre otras.

A continuación se listan las plantillas más importantes, para un listado completo consultar la documentación de Mybooking WordPress Plugin.

Plantilla Descripción
Seleccionar Producto Muestra los productos en una lista o en una cuadrícula, incluyendo detalles del producto, imagen y botón de selección.
Completar Datos Proporciona los formularios para la recogida de datos y las opciones de pago.
Resumen Renderiza el mensaje de confirmación y los detalles de la reserva.
Reserva Genera automáticamente una página que muestra los detalles de la reserva y permite al cliente introducir datos extra y abonar pagos pendientes.

Para la visualización de estás plantillas y su contenido, primero se deben crear las páginas correspondientes e insertar el shortcode apropiado en cada una de ellas. Para el listado completo de shortcodes, consultar la documentación de Mybooking WordPress Plugin.

El proceso de creación de las páginas del proceso de reserva se detalla en el apartado Crear las páginas de reserva.

Crear páginas

Crear una página de inicio

La página de inicio presenta la empresa, muestra testimonios de clientes e incluye
el formulario para iniciar el proceso de reserva. También puede incluir noticias y promociones.

Este es el diseño de la página de inicio del tema.

form

En la página de inicio se destacan los siguientes elementos:

(1) El topBar, que muestra los datos de contacto de la empresa y un menú con opciones destacadas
(2) La barra de navegación, donde se muestra el logo de la empresa y el menú principal
(3) La cabecera, que muestra una imagen, carrousel o vídeo, un mensaje de presentación y el formulario de búsqueda.
(4) El pie de página que pone a su disposición hasta 4 secciones para organizar el contenido.

Crear una landing

Crear una página de contacto

Crear una página con Gutenberg

Crear una página con Elementor

Crear una página con el editor clásico

Configuración

Configurar WordPress

Configurar la página de inicio

Configurar el topbar

Configurar la navegación

Configurar la cabecera

Activar los testimonios

Activar las noticias de portada

Aspecto y personalización

Colores personalizados

Añadir logotipo y favicono

Datos de la empresa

Enlaces sociales

Personalizar el tema

Añadir widgets

Crear contenido

Crear un carrusel

Crear un testimonio

Crear una promoción

Crear una publicación

Mybooking plugin

Instalación

Configurar el proceso de reserva

Crear las páginas de reserva

Insertar el selector de fechas

Activar el wizard

Modificar los templates

Configurar sitio multidioma

Para la creación de sitios multidioma recomendamos la combinación de WordPress Multisite y el plugin Multisite Language Switcher.

WPML

Aunque es posible usar WPML por nuestra experiencia dicho plugin usado junto con Elementor y Gutenberg puede generar inconsistencias si se editan las páginas usando estos últimos y derivar en problemas al migrar los sitios web.

GTranslate

Cuando los requerimiento no permiten desplegar un multisite o el sitio web es de pequeñas dimensiones, es adecuado usar elplugin GTranslate

Desarrollo sobre Multisite

Para desarrollar un sitio multisite seguiremos los siguientes pasos:

  1. Instalamos WordPress en modo multisite
  2. Generamos la estructura del sitio principal (generelmente en castellano)
  3. Creamos los sitios extra para cada idioma
  4. Clonamos el sitio principal con toda su estructura y contenidos
  5. Configuramos el idioma de cada sitio y traducimos los contenidos
  6. Implementamos el plugin Multisite Language Switcher
  7. Enlazamos cada página de cada idioma con su correspondiente traducción

Consejo

Para facilitar la administración de los diferentes sitios dentro de una instancia multisite se recomienda nombrar cada sitio segun el esquema [nombre del sitio] [código de idioma]. Ej: Mybooking ES.

Multisite Language Switcher

Se recomineda este plugin debido a su ligereza y versatilidad ya que permite enlazar fácilmente cada una de las páginas del sitio web con su traducción en diferentes idiomas. Para su correcta implementación tendremos en cuenta algunos aspectos:

  • Tener el mismo usuario en todos los sitios para poder asignarlo a cada idioma
  • Configurar cada sitio a su idioma
  • Preparar previamente los iconos para cada lenguage

Configuración de Multisite Language Switcher

Instalamos el plugin desde el dasboard y lo activamos para la red, teniendo en cuenta que deberemos configurar cada sitio por separado. Una vez instalado encontraremos la configuración en Ajustes/Multisite Language Switcher.

  1. En Blog Language elegimos el idioma correspondiente al sitio
  2. En Aspecto escogemos entre las opciones, habitualmente Bandera y descripción
  3. En Descripción introducimos el texto que aparecerá junto a la bandera
  4. En Reference user escogemos el mismo usuario para todos los sitios

Para una configuración básica, el resto de opciones se pueden dejar por defecto.

A continuación, en cada una de las páginas de nuestro sitio web debemos asignar la correspondiente tradución en cada idioma.

Finalmente, desde la sección Apariencia/Widgets de nuestro WordPress colocaremos el widget Multisite Language Switcher en el sitio deseado.

También podemos hacer este ultimo paso tante desde Gutenberg como desde Elementor.

Personalización de Multisite Language Switcher

Para adaptar los estilos al sitio en desarrollo, podemos usar el siguiente código CSS donde Idioma corresponde al string que hemos configurado en el campo Descripción en la configuración de Multisite Language Switcher:

// Multisite
[title$="Idioma"] {
	display: block;
	font-size: 1.5em;
	padding: .5rem 0;
}

[title$="Idioma"] img {
	height: 20px;
	margin-right: 15px
}

Traducciones