Info extra Wordpress | Repositori d'elements Putput

Home

Links d'interés

Principals documents que nodreixen aquest document.

PPT Putput Manual Framework Fira Barcelona

Informació per crear i per treballar al Git:

GIT: fira salons master GIT: build themes a src themes Version Control in VS Code Git y Visual Studio Code

Guia elementor putput:

Guia Ejemplos Glosario Style Guide Test Components

Exemples components WordPress:

Slider Revolution Mega Menú

Base Salons:

Base saló Style base

Report bugs KEC by Putput:

Bugs

Dubtes

Se le va a dar importáncia a la semántica web? > SÍ!!
Hay una lista de elementos no traducibles de Elementor Pack?
Para gestionar los menús se usa en la página el KEC Theme Settings o el menú general de wordpress? > el menú general de wordpress
Qué se puede y qué no se puede tocar en Elementor “Layout”, “Style” y “Advanced”, "Versión mobile"
- Molt important, NO S'HAN d'assignar estils des de la barra de components de l’elementor. Per tal motiu, és essencial Previ al disseny, s'hauran de valorar els components disponibles en Elementor per a abordar la creativitat per part del dissenyador encarregat del projecte, perquè durant el muntatge, es podran incorporar les classes del css estàndard o base, per a avançar el procés d'integració. Si s'assignen estils en la barra com paddings, margins, background colors, aniran directament com inline.

IMPORTANTE!

ANTES DE EMPEZAR: Es muy importante incluir los idiomas antes de comenzar a crear páginas y utilizar plantillas de Elementor.
Traducció de plantilles: Les templates es tradueixen de la mateixa manera que les planes però des de la secció Templates d’Elementor.
Per traduir una plana web, PRIMER TRADUÏM LA PLANTILLA i desprès la plana que la conté.
Si no es fa així, la plana traduida elimina la template i s’ha de tornar a insertar.
Configuración de Elementor: Elementor > Settings > Advanced > “CSS Print Method” la opción “Internal Embedding”.
Cunado se empieza un salón en la caja js de KEC hay que añadir este código cambiando "construmat-2021" por el salón correspondiente:

(function(){
  var head = document.getElementsByTagName('HEAD')[0];
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = '//firacdn.putput.cat/base-salo-wp/css/styles.css'+'?v='+Math.floor((Math.random() * 1000) + 1);
  head.appendChild(link);
  link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = '//firacdn.putput.cat/construmat-2021/css/styles.css'+'?v='+Math.floor((Math.random() * 1000) + 1);
  head.appendChild(link);
})();

NOTA: Una vez acabado el salón, hay que pasar la css a fira para que la suban.

Tips

Responsive

Otra posibilidad para acabar de depurar la versión responsive es una opción que nos permite invertir el orden de algunos contenidos así como mostrar u ocultar bloques de de información (Advanced > Responsive).

Header

Crear Header diferente para algunas planas:
“Templates”>”Theme Builder” y clicar en “Add new”.
Se mostrará un pop up donde debe escogerse donde queremos utilizar la plantilla, "header" en este caso, y su nombre.
Se abrirá una página de Elementor donde se podrá crear la estructura y, tras guardar, deberemos indicar si queremos que se muestre en todo el site o en una página concreta. Para ellos haciendo clic en “Save options” elegiremos la opción “Display Conditions”.

Activar GTM:

Kec/Smart > Advanced Options > Features > Enable Google Tag Manager Loader > Enable Google Analaytics Loader

*Desde KingEclient, recomendamos habilitar la opción de Google Tag Manager para hacer el tracking del site (integrado con Google Analytics)

Instrucciones de acceso a los WordPress KEC

Instala la app Google Authenticator en tu móvil.
Ábrela, pasa las pantallas de bienvenida y dale a "Escanear código" (no a Intro manual). Cuando entres al WordPress del sitio por primera vez, tendrás que escanear el QR que aparece.
Busca el email de invitación que se te envió y haz clic en el segundo enlace (Aceptar la invitación) para llegar a la pantalla de inicio de sesión.
Allí, haz clic en “¿Has olvidado tu contraseña?”, pon tu email de Putput y reestablece tu contraseña.
Inicia sesión con tu usuario y contraseña, dejando vacío el campo de Google Authenticator. Escanea el QR e introduce en el campo de abajo la primera clave que te indique la app tras reconocer el sitio (se renuevan cada 30 segundos). Si no te da tiempo, vuelve a escanear el QR y a poner la primera clave que aparezca.
Ya puedes cerrar la app y navegar con alegría. Si se te cierra la sesión, para volver a entrar necesitarás introducir el código que Google Authenticator te indique en ese momento.

Nomenclatura:

[Element]_[Funcionalitat]_[Contingut/atribut]

Elements:

TS: Plantilla secció
TP: Plantilla pàgina
GW: Giny global
SR: SLider Revolution

Funcionalitat:

newsletter
form
segones
btn

Contingut/atribut:

bgimage
contact
noimage
ghost

Exemples:

TP_segones_noimage
TP_home | TP_home_maig
TP_segones_contacte | TP_segones_contacte_bgdark
TS_newsletter_bgimage
TS_form_contact
TS_form_contacte | TS_form_contacte_tellamamos
TS_slider_patrocinadors | TS_slider_patrocinadors_destacats
GW_btn_ghost

Tipus de plantilla de ginys (GW):

Tancada: Aquesta plantilla serà aquella que, encara que sigui editable, qualsevol canvi es replicarà en les altres plantilles una vegada que s'ha generat. És essencial per a això, que la plantilla sigui anomenada pel component “Template / Plantilla”. Heretarà totes les classes que contingui el contingut original fins al seu moment de creació.
Oberta: Aquesta serà la comunament denominada “plantilla trencada”, és a dir, qualsevol edició s'afectarà únicament en aquesta pàgina on sigui cridada. S'ha de fer directament amb els botons que permeten incorporar ginys.

Plantillas de página

Media, Image Gallery y Video
Press
Contact Page.
About Page.
Services Page.
Materials Page.
Privacy Page.
Agenda y Speakers.

Media, Image Gallery y Video

Para personalizar los enlaces de las páginas de Media: Menú laterla > "Fira Media"

El contenido debe subirse desde los puntos del menú lateral “Image Gallery” y “Video"

Formularios (Ninja Forms)

Extensiones:

Conditional Logic: Permite establecer condicionales a las acciones de los usuarios. Por ejemplo mostrar campos dependiendo de si otros han sido seleccionados. Define aquellos campos que deben aparecer o desaparecer según las opciones previamente elegidas.
Multi-Part Forms: Permite crear formularios divididos en distintas partes, en lugar de ser indivisible en un solo bloque. Permite seleccionar las opciones de los formularios en varias partes. Por ejemplo, que se muestre una barra de progreso.
Layout & Styles: Para poder editar los estilos sin conocimientos de programación. Permite concretar el estilo general del formulario. (no sé si es buena idea, habría que verlo)

Info:

Se llaman via shortcode [ninja_form id=159]
No se pueden traducir, se tiene que hacer uno por idioma y llamar el shortcode que corresponda.
Se pueden exportar-importar

Mega Menú

(pendiente investigar) - http://jetmenu.zemez.io/

Slider Revolution

Se llaman via shortcode rev_slider alias=159

Extra (no lo hacemos nosotros)

Clonar Site

Activar plugin MultiSite Clone Duplicator (una vez realizada la copia, volver a desactivar)
“My sites” > ”Network Admin” > ”Sites” en el menú superior de WordPress y clicar en la opción “Duplicate”.
En opciones avanzadas, descalificamos la opción de la clonación de usuarios, para que no se clonen los usuarios del site principal.

Expositores - Necesita el id del salón

Importar expositores (aquí también hay que eliminarlos para evitar duplicados como en la agenda?)

Agenda

Agenda básica (tipo Nautic) (Actividades/Agenda) - Necesita el id del salón

Para acceder a la pestaña de actividades, se ha de crear una página nueva y seleccionar el Template “Nautic Template”.

Para configurar la pestaña de agenda, tendremos que ir al apartado de plugins y activar el plugin “Fira Agenda (Basic)”

Una vez activado el plugin, se mostrará un nuevo apartado en el menú lateral izquierdo de WordPress con el apartado “Events”

Agenda compleja (tipo BizBarcelona) (Agenda/Ponentes) - Necesita el id del salón

Para crear la pestaña de agenda, es necesario crear una página nueva y seleccionar la plantilla de página “Agenda” y elegir la configuración correspondiente en el apartado “Agenda Settings”

Para crear la pestaña de ponentes, es necesario crear una página nueva y seleccionar la plantilla de página “Speakers” y elegir la configuración correspondiente en el apartado “Speakers Settings”

Implementar agenda:

Hay dos opciones: importarlos o incluirlos manualmente. Si se introducen datos manuales, al hacer una importación, estos datos quedarían machacados por la nueva información. Recomendamos que esta agenda, se utilice solamente con importación de datos.

En “Agenda” > ”Import activities” se podrá importar un archivo con las actividades.

IMPORTANTE:
Cada vez que se realice una nueva importación, es muy importante borrar los datos de todos los campos que forman la agenda en los tres idiomas, antes de realizar la importación, ya que de lo contrario, se duplicarían.