• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Formulario de login sin plugins en WordPress

Formulario de login sin plugins en WordPress

Formulario de login sin plugins en WordPress

[ 28 noviembre 2018 ] [ Actualizado: 12 abril 2021 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Si tienes usuarios registrados en tu sitio WordPress habrás podido comprobar que para acceder al sitio el sistema de login por defecto es a través del backend. En este artículo veremos como construir de manera simple un formulario de login sin usar plugins.

 

Resultado Final

Al final obtendremos un formulario similar a lo que se muestra en la siguiente imagen

Widget HTML login front-end

 

En un artículo posterior llamado Formulario de login mejorado sin plugins en WordPress , hacemos algo similar pero usando una función nativa de WordPress para crear el formulario, lo cual reducirá la cantidad de código.

 

Generalidades

En un artículo anterior vimos cómo personalizar el formulario de login de WordPress, sin embargo ¿no sería mejor tener el formulario de acceso directamente en el front-end del sitio?, pues bien, existen muchos plugins para esto, sin embargo en este artículo vamos a ver cómo realizar un formulario simple sin plugins y que sea usado para el acceso de usuarios que ya están registrados.

 

Creación del formulario con código HTML

El formulario es simplemente código HTML el cual puedes adaptar a tus necesidades, este código puedes insertarlo en algún widget HTML en alguna posición de tu theme.

El código anterior:

  • El código tiene un contenedor llamado login-code-container
  • El código tiene dos partes una la del formulario y otra la del enlace de desconectar
  • En el formulario se crea los controles de usuario, clave y botón
  • En el formulario también hay un campo oculto para redirección
  • El enlace final de desconexión también tiene un parámetro de redirección

El formulario y el enlace se deberán mostrar/ocultar de acuerdo a si el usuario esta o no conectado, esto lo haremos por CSS

 

Mostrar y Ocultar formulario con CSS

Para mostrar y ocultar el formulario, usaremos código CSS, nos basaremos en las clases que genera por defecto WordPress para saber si un usuario esta conectado o no.


body:not(.logged-in) #login-code-container a,
body.logged-in #login-code-container form{
	display: none;
}

/* Estilos opcionales */ 
#login-code-container{
	background-color:#eee;
	border:1px solid #ccc;
	padding:20px 20px 10px;
}

Puedes agregar este código al final de tu archivo style.css de tu child-theme

 

Conclusión

Como hemos visto, puedes añadir un formulario de login simple sólo usando HTML y CSS y evitar el uso de un plugin adicional en tu sitio WordPress.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Formulario de login mejorado sin plugins en WordPressFormulario de login mejorado sin plugins en WordPress
  • Personalizar el formulario de login de WordPressPersonalizar el formulario de login de WordPress
  • Shortcode para mostrar la fecha en WordPressShortcode para mostrar la fecha en WordPress
  • Deshabilita XML-RPC en WordPress y mejora tu seguridadDeshabilita XML-RPC en WordPress y mejora tu seguridad
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Adaptar un theme WordPress a Gutenberg

Páginas en ancho completo en el tema Storefront

Configura el Tema Twenty Nineteen WordPress

Mostrar datos desde una tabla personalizada de la base de datos de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados