Documentación de teo.casa

Para acceder a algunos link es necesario tener una cuenta en GitHub.com y pedir al administrador del repositorio teo-casa accesos de lectura o desarrollo.

¿Cómo instalar este tema en WordPress?

Consejos de mantenimiento y edición del tema

La página

Tema de Wordpress

• Layout
  • Header
    • Para editar el Header
  • Contenido
  • Footer
    • Para editar el Footer
• Páginas
  • Nosotros
  • El Espacio
  • Talleres
  • Reservas
  • Tienda
    • Producto
    • Carrito de compra
• Plugins
  • Smart Slider 3
  • WP Shopify
  • Contact Form 7
  • TranslatePress - Multilingual

La Página

La página de Casa Teo, está alojada en el dominio teo.casa. Está construida a partir del sistema de wordpress administrado por cpanel. El diseño fue elaborado por grupoolvera y la construcción del tema fue creado por el estudio jungla.cc.

Tema de Wordpress

El sitio teo.casa, está utilizando el tema teo.casa by jungla creado específicamente para la página. Está basado en el tema de wordpress Twenty Twenty-One con el objetivo de mantener las buenas prácticas del sistema y poder seguir el esquema de actualizaciones de este tema.

Layout

El layout de la página está construido por elementos minimalistas. Al crear una nueva página dentro de administrador de contenidos (Wordpress), existen dos elementos constantes en el diseño: *Header *Footer

Mientras que el resto del contenido varía entre:

​ *Galería de imágenes que abarca el ancho de la página ​ *Párrafos de texto simple ​ *Formularios de reserva y contacto ​ *Tienda

Elementos de diseño de layout

Paleta de color

Fuentes tipográficas

Header

El código del header está compuesto por dos partes para lograr una animación fluida.

Parte 1:

• Logo: creado dentro de Site Identity, con la opción Display Site Title & Tagline deshabilitada :
  • Display Site Title & Tagline
• Switch de idioma: creado como un menú secundario bajo el nombre topMenu en la subsección de menú dentro de la sección de apariencia en WordPress.

Parte 2:

• Listado de páginas: creadas com un menú primario bajo el nombre MenuScroll en la subsección de menú dentro de la sección de apariencia en WordPress. El último elemento de esta lista debe ser el carrito de compras

Presenta un efecto que se activa al hacer scroll al contenido, éste efecto es generado por un archivo de javascript integrado al tema de WordPress, ubicado en la siguiente dirección teo.casa/assets/js/junglaJs/header.js (sólo visible con permisos de acceso).

Puedes editar las páginas y los idiomas en el administrador de contenidos (wordpress), sin embargo de no romper algún estilo.

Header en posición inicial

Header después de hacer scroll

Para editar el Header

Para empezar, ten cuidado ;).

Si no tienes acceso al archivo .css que controla los estilos gráficos del menú secundario bajo el nombre topMenu evita editar o borrar este elemento.

Puedes agregar links al menú primario bajo el nombre MenuScroll, siempre y cuando mantengas el carrito de compras al final de la lista para no romper los estilos.

Contenido

El contenido de cada página es flexible, aunque el color de los textos y la tipografía están determinados por los estilos creados para este tema.

Al crear una página usando wordpress, se asignan automáticamente los elementos Header y Footer.

Footer

El footer es un elemento que se despliega en la página a partir de un widget de texto de wordpress. Dentro de este widget, existe un código html muy simple:

<div class="footer-container">
  <ul class="socialMedia">
    <li>
      <a href="https://www.facebook.com/casateomx/" target="_blank" 	 rel="noopener">Facebook</a>
    </li>
    <li>
      <a href="https://www.instagram.com/casateomx/" target="_blank" rel="noopener">Instagram</a>
    </li>
    <li>
      <a href="https://www.airbnb.es/rooms/47470922?preview_for_ml=true&amp;source_impression_id=p3_1610390457_qihtwLhK8g1lCXi8&amp;guests=1&amp;adults=1" rel="noopener">Airbnb</a>
    </li>
  </ul>
    <div class="tiny-logo"><img class="alignnone size-full wp-image-190" src="https://teo.casa/wp-content/uploads/2021/05/CasaTeo_IconoGris-fav-01.png" alt="" width="228" height="228" />
    </div>
   	<div class="direction">
      <div>Francisco Petrarca 254 Col. Polanco 11560,
      Miguel Hidalgo, Ciudad de México</div>
      <div>www.teo.casa</div>
      <div>By Enrique Olvera</div>
      <div>
    </div>
  </div>
</div>

Para editar el Footer

Es posible editar este código con el editor de texto que ofrece WordPress, pero es ideal hacerlo a través del código html para evitar romper el código.

Páginas

Las páginas son secciones visibles del sitio teo.casa. Están creadas en el apartado pages o Páginas del administrador de contenidos Wordpress.

Nosotros

Es la página principal del sitio, está configurada dentro de la sección de appearance/customize/Homepage Settings.

Elementos que la componen

Todos las páginas tiene como elemento por defecto el header y el footer

• Galería de imágenes nombrado Nosotros creada con Smart Slider 3
• Texto descriptivo

El Espacio

Elementos que la componen

Todos las páginas tiene como elemento por defecto el header y el footer

• Galería de imágenes nombrado Espacio creada con Smart Slider 3
• Texto descriptivo

Talleres

Elementos que la componen

Todos las páginas tiene como elemento por defecto el header y el footer

• Galería de imágenes nombrado Talleres creada con Smart Slider 3
• Texto descriptivo

Reservas

Elementos que la componen

Todos las páginas tiene como elemento por defecto el header y el footer

• Formulario nombrado RESERVAS creada con Contact Form 7
• Formulario nombrado Contacto creada con Contact Form 7

Tienda

Esta sección está conectada con el servicio se shopify.

Link: casa-teo.myshopify.com

Constraseña: Solicita los accesos a la persona que administra la tienda.

Para editar alguna galería de imágenes creada por Smart Slider 3

haz click aquí

Elementos que la componen

Todos las páginas tiene como elemento por defecto el header y el footer

Para llamar los productos que componen la tienda es necesario usar un código creado por el plugin. Cada parte de este texto tiene una función importante para mostrar los datos.

¡Evita editar este código sin consultar la documentación!

[wps_products link_with_buy_button="true" link_to="wordpress" full_width="true" images_align="center"]

Producto

La página de producto es una sección creada automáticamente el plugin WP Shopify y Wordpress.

La configuración que hace posible es la siguiente:

¡Evita editar este código, si lo haces verifica que el diseño sea consistente con el resto de la página!

Para que esta configuración funcione es necesario que se cree una página vacía bajo el nombre de Productos.

Hasta ahora, ésta es la única forma de que el sistema cree una página de detalle de cada producto de manera automática y al mismo tiempo podamos mantener el botón para agregar al carrito en los elementos de la lista que se despliega en la tienda.

Carrito de compra

El carrito de compra es un elemento flotante creado automáticamente el plugin WP Shopify y Wordpress.

La configuración que hace posible es la siguiente:

¡Evita editar este código, si lo haces verifica que el diseño sea consistente con el resto de la página!

La configuración por defecto despliega la venta del carrito de compra con un transición horizontal. Pero para que armonice con el diseño de teo.casa, fue creado un archivo de javascript para controlar los estilos y el despliegue.

Plugins

Un plugin es un «pequeño programa» que puedes instalar en tu web para ampliar o extender las funcionalidades que WordPress trae por defecto.

Para el funcionamiento y visualización de la página como fué requerido grupoolvera, es indispensable que el sistema cuente con los siguientes cuatro plugins:

Smart Slider 3

Permite crear, editar y desplegar galerías de imágenes responsivas e intuitivas tanto para escritorio como para dispositivos móviles.

Para crear nuevas galerías

Duplica el template que se encuentra en el dashboard de Smart Slider 3. Este template ya está configurado con los requerimientos necesarios para que las galerías se muestran de la manera correcta y consistente con el diseño de la página.

Para editar galerías existentes

Los pasos son los siguientes:

1. Entra al dashboard de Smart Slider 3.

2. Selecciona la galería que quieres editar dando click en el botón Edit que aparece cuando pasas el cursor sobre la galería.

3. Para cambiar una imagen es mejor borrarla y subir una imagen nueva. El orden en que se muestran las imágenes en la galería depende del acomodo de las imágenes en el dashboard. para cambiarlas de lugar, arrastra tralas al lugar que desees.

4. Para agregar una nueva imagen da click en el botón de ADD SLIDE. Para borrar una imagen revisa a partir del paso 6.

5. Da click en el botón de Image, para agregar una nueva image

6. Para borrar una imagen, selecciona la imagen activando la casilla de la esquina superior derecha.

7. En el botón Bulk Actions ubicado en la esquina superior izquierda, selecciona la opción Delete.

WP Shopify

Hace posible la conexión y llamada de productos de la una tienda configurada en shopify. Este plugin permite la configuración y despliegue de productos; gracias a la conectividad que brinda junto con wordpress es posible editar los productos desde wordpress, pero es muy importante saber que esto puede afectar las listas de productos de manera negativa. Lo ideal es editar los productos usando la plataforma de Shopify.

Documentación del plugin

Contact Form 7

Permite crear, editar y desplegar mensajes de éxito, error o alerta al enviar una solicitud. La configuración de estos formularios facilita al sistema enviar correo al usuario y al cliente de forma simultánea para dar seguimiento a las solicitudes.

Para agregar o editar los formulario es necesario ingresar al dashboard ubicado en el menú lateral en la sección llamada Contact.

Cada formulario se configura en cuatro secciones:

Dentro de Form, se crean los elementos del formulario, a partir de un control sencillo aunque un poco rústico.

Dentro de Mail, se configuran las respuestas automáticas de confirmación y las que llegan al correo de la empresa.

Dentro de Messages, se configuran los mensajes de respuesta de error, alerta y éxito que se despliegan al enviar el formulario.

Dentro de Additional Setting, se agregan configuraciones extras, como alertas, puedes conocer mejor los detalles en la documentación del plugin.

TranslatePress - Multilingual

Permite generar textos en distintos idiomas y relacionarlos entre sí para hacer un cambio fluido.

Puedes acceder al control de edición de lenguaje de dos formas:

1. En la barra lateral izquierda en la sección de Settings selecciona la última opción.

2. En la barra superior selecciona la opción Translate Site.

Al ingresar a esta sección el sistema desplegará una pre-visualización de la página que te permitirá ver el texto real y editarlo uno por uno.

Para agregar el nombre de cada página es necesario seguir los siguientes pasos:

1. Seleccionar la página

2. Agrega el texto traducido en el campo

Para cambiar los textos del contenido sigue los siguientes pasos:

1. Da click en el botón que aparece junto a cada texto.

2. Una vez seleccionado el texto, se desplegará un control con el texto original y podrás agregar el texto traducido en el campo habilitado.

Para navegar a otra página, usa el menú del header

By jungla.cc