Plugin de login para WordPress y WooCommerce con acceso Google

Drunel Login – Formularios modernos de acceso para WordPress

El plugin Drunel Login te permite crear una experiencia de inicio de sesión elegante, fluida y totalmente personalizable. A continuación, te explicamos cómo usar todas sus funciones:

1. Mostrar el formulario en una página

Para insertar el formulario en cualquier página de tu sitio:

• Crea una nueva página desde Páginas → Añadir nueva
• Asigna un título (por ejemplo, «Acceso», «Mi cuenta» o similar)
• Pega el siguiente shortcode dentro del contenido:

drunel_login_form
[   ]

Importante: Debes unir el texto central con los corchetes para que funcione correctamente.
No se muestran juntos aquí porque si se colocan completos en esta pestaña se renderiza el formulario en lugar del shortcode.

Este shortcode mostrará el formulario con pestañas para Login, Registro y Restablecer contraseña.

2. Activar el formulario como ventana emergente (popup)

Drunel Login también puede mostrarse como un popup modal, ideal para usarse desde botones o enlaces en cualquier parte del sitio. Para hacerlo:

• Usa cualquier botón, enlace o elemento que soporte clases CSS
• Añade la clase: drunel-login-trigger

Ejemplo de uso en HTML:

<a href="#" class="drunel-login-trigger">Ingresar</a>

Tip útil para menús:

1. Ve a Apariencia → Menús
2. Haz clic en Opciones de pantalla (parte superior derecha) y activa la casilla Clases CSS
3. En el ítem de menú deseado, agrega la clase: drunel-login-trigger

3. Páginas para restablecer contraseña

El plugin permite crear un flujo completo de recuperación de contraseña con páginas separadas. Deberás crear dos páginas específicas:

Página 1 – Envío de enlace al correo:

drunel_reset_form
[   ]

Página 2 – Nueva contraseña:

drunel_new_password_form
[   ]

Recuerda: Debes unir cada texto con los corchetes manualmente al copiarlo.

Una vez creadas, ve al panel de configuración del plugin (Drunel → Drunel Login) y selecciona estas dos páginas en los campos correspondientes.

4. Uso con Elementor u otros constructores

Drunel Login es totalmente compatible con constructores como Elementor, Gutenberg, Bricks, entre otros.

Puedes integrarlo de dos maneras:

• Insertando el shortcode completo (uniendo texto + corchetes).
• Usando un botón con la clase drunel-login-trigger para lanzar el popup desde cualquier elemento personalizado.

Esto te da total libertad para colocar el formulario en cualquier sección de tu sitio, con diseño consistente.

Configuración de Google Login

Para que el login y registro con Google funcionen debes poner el Google Client ID en la pestaña de Google y reCaptcha.
Si no has puesto el Google Client ID, el botón de Google no aparecerá en el formulario.

Cómo crear tu Google Client ID

1. Crear un Proyecto

1. Ve a Google Cloud Console.
2. Si es la primera vez que entras, acepta los términos.
3. Haz clic en el desplegable de proyectos y selecciona «Proyecto nuevo».
4. Dale un nombre (ej. «Login Web WordPress») y haz clic en Crear.

2. Configurar la Pantalla de Consentimiento

1. Ve a API y servicios → Pantalla de consentimiento de OAuth.
2. Selecciona «Externo» y haz clic en Crear.
3. Rellena los campos obligatorios con los datos de tu web.
4. Haz clic en Guardar y continuar.

3. Crear las Credenciales

1. Ve a Credenciales.
2. Haz clic en + Crear credenciales → ID de cliente de OAuth.
3. Elige Aplicación web.
4. En Orígenes de JavaScript autorizados coloca tu dominio.
5. En URI de redireccionamiento autorizados coloca la URL exacta que el plugin indica en su configuración.
6. Haz clic en Crear.

4. Copiar el ID

Copia el ID de cliente (termina en .apps.googleusercontent.com) y pégalo en la configuración del plugin en la pestaña Google y reCaptcha.

Con eso el login y registro con Google quedarán habilitados.