Cómo crear correctamente una página de inicio de sesión personalizada en WordPress (paso a paso)

¿Alguna vez te has preguntado si podrías crear una página de inicio de sesión personalizada en WordPress?

Crear una página de inicio de sesión personalizada te ayuda a mostrar una marca coherente a tus usuarios, lo que le da a tu sitio una apariencia más profesional.

En este artículo, te mostraremos cómo crear una página de inicio de sesión personalizada en WordPress.

Creación de una página de inicio de sesión personalizada en WordPress – Tabla de contenido

• ¿Por qué crear una página de inicio de sesión personalizada?
• Elegir el plugin adecuado para crear una página de inicio de sesión personalizada
• Método 1: Usar SeedProd para crear una página de inicio de sesión
• Método 2: Usar WPForms para crear una página de inicio de sesión
• Método 3: Usar Theme My Login para crear una página de inicio de sesión
• Método 4: Personalizar la página de inicio de sesión de WordPress existente sin un plugin
• Método 5: Mostrar el formulario de inicio de sesión en cualquier lugar sin un plugin

¿Por qué crear una página de inicio de sesión personalizada?

Si tienes un sitio web impulsado por la comunidad, como un foro, un sitio de membresía, una red social de nicho o cualquier otro sitio web que requiera que los usuarios registren una cuenta e inicien sesión, entonces necesitarás crear una página de inicio de sesión personalizada.

La página de inicio de sesión predeterminada de WordPress se ve genérica y aburrida. Con una página de inicio de sesión personalizada, puedes personalizar todos los elementos de la página alrededor del formulario.

Si tienes una página de inicio de sesión personalizada, entonces puedes ocultar la página de inicio de sesión predeterminada si lo deseas. Puede reducir el spam de inicio de sesión y mantener tu sitio de WordPress seguro.

Elegir el plugin adecuado para crear una página de inicio de sesión personalizada

En el repositorio oficial de plugins de WordPress, puedes encontrar docenas de plugins diferentes que te ayudan a crear fácilmente una página de inicio de sesión personalizada. En este artículo, analizaremos 3 plugins diferentes: SeedProd, WPForms y Theme My Login.

Elige SeedProd si necesitas un constructor de páginas de destino fácil de usar para crear páginas de inicio de sesión personalizadas, páginas de ventas, páginas de suscripción, páginas de "próximamente", páginas en modo de mantenimiento y más.

Aquí tienes algunas características destacadas de SeedProd:

• Plantillas de página de inicio de sesión diseñadas profesionalmente para que empieces.
• Personaliza completamente tu página de inicio de sesión con elementos como perfiles sociales, video, testimonios, calificaciones de estrellas y más.
• Agrega un formulario de inicio de sesión a cualquier página de destino que crees con SeedProd.

Elige WPForms si necesitas un plugin de formularios de WordPress con todas las funciones que te ayuda a crear fácilmente todo tipo de formularios en línea, incluidos formularios de registro, formularios de pago, formularios de contacto, etc.

Algunos beneficios de WPForms son:

• Personaliza tu formulario de inicio de sesión como quieras sin restricciones.
• Publica tu formulario de inicio de sesión en cualquier publicación o página.
• Incrusta tu formulario de inicio de sesión en la barra lateral o incluso en el pie de página con widgets.

Elige Theme My Login si quieres crear una página de inicio de sesión simple con facilidad.

A continuación, se detallan algunas características de Theme My Login:

• No se requiere configuración para crear una página de inicio de sesión personalizada.
• Oculta automáticamente la página de inicio de sesión predeterminada y redirige a la página de inicio de sesión recién creada.
• Agrega un enlace a la página de inicio de sesión en tu barra lateral con un widget de inicio de sesión personalizado.

La desventaja es que, a diferencia de SeedProd y WPForms, Theme My Login no te permite incrustar tu formulario de inicio de sesión en ningún lugar de tu sitio, y solo aparecerá en tu página de inicio de sesión. Dado que no es un plugin de formularios con todas las funciones como los otros, la capacidad de personalizar tu formulario de inicio de sesión es limitada.

Método 1: Usar SeedProd para Crear una Página de Inicio de Sesión

Primero, veamos cómo crear una página de inicio de sesión personalizada con SeedProd, paso a paso.

Paso 1: Instala SeedProd en tu sitio

Para comenzar, necesitas descargar el plugin SeedProd. Luego, carga y activa el plugin en tu sitio de WordPress.

Para obtener instrucciones detalladas, sigue este tutorial sobre cómo instalar un plugin de WordPress.

Después de activar el plugin, verás una pantalla de bienvenida donde deberás ingresar tu clave de licencia. Puedes encontrar tu clave de licencia en tu cuenta en el sitio web de SeedProd.

Once your license key is verified, scroll down the page further and click on the Create Your First Page button.

A continuación, serás llevado al panel de SeedProd. Aquí puedes ver los diferentes tipos de páginas de destino que puedes crear. Haz clic en Configurar una página de inicio de sesión para comenzar.

Paso 2: Elige una plantilla para la página de inicio de sesión

En este paso, se te pedirá que elijas una plantilla para la página de inicio de sesión. SeedProd ofrece una gran cantidad de plantillas diseñadas profesionalmente entre las que puedes elegir.

También hay una plantilla en blanco que puedes usar si deseas comenzar tu diseño desde cero.

Para elegir una plantilla de página de inicio de sesión, simplemente pasa el cursor sobre ella y haz clic en el ícono de marca de verificación.

A continuación, es hora de personalizar la plantilla.

Paso 3: Personaliza tu página de inicio de sesión

La mejor parte de SeedProd es que puedes personalizar fácilmente tu página de inicio de sesión usando el constructor visual de arrastrar y soltar. Primero, puedes personalizar cualquier elemento existente en la plantilla haciendo clic en él.

Por ejemplo, puedes hacer clic en el encabezado “Iniciar sesión” para cambiar el texto, el tamaño, la alineación, la tipografía y más.

Para agregar nuevo contenido a tu página de inicio de sesión, puedes usar los bloques de página de destino listos para usar de SeedProd.

En el lado izquierdo del constructor visual, hay bloques de página de destino como imagen, video, botón, perfiles sociales, temporizador de cuenta regresiva, barra de progreso y más.

Simplemente arrastra el bloque que deseas y suéltalo en tu página de inicio de sesión. De nuevo, puedes hacer clic en el bloque para personalizar el estilo, el tamaño, la alineación, etc.

SeedProd también ofrece secciones preconstruidas como Características, Preguntas Frecuentes, Pie de página y otras, que puedes agregar a tu página de inicio de sesión.

Simplemente haz clic en una sección y SeedProd la agregará automáticamente a tu página.

También puedes ir a la configuración global de SeedProd en la esquina inferior para cambiar la imagen de fondo, la fuente y los colores de toda tu página de inicio de sesión, en lugar de cambiar cada elemento individualmente.

Por ejemplo, si deseas cambiar el esquema de colores de tu página de inicio de sesión, SeedProd ofrece más de 20 paletas de colores que puedes usar para crear un aspecto cohesivo.

Una vez que estés satisfecho con el aspecto de tu página de inicio de sesión, haz clic en Guardar en la esquina superior derecha.

Paso 4: Configura los ajustes de tu página de inicio de sesión

Si agregas un formulario de suscripción por correo electrónico a tu página de inicio de sesión, puedes conectarlo con tu servicio de marketing por correo electrónico en la pestaña Conectar.

Simplemente haz clic en tu proveedor de marketing por correo electrónico preferido y sigue las instrucciones para conectar tu cuenta. Ahora, cada vez que alguien proporcione su dirección de correo electrónico a través del formulario de suscripción, se agregará automáticamente a tu lista de correo electrónico.

También puedes ir a la pestaña Configuración de página para configurar otros ajustes.

La configuración en esta página incluye:

• General – Cambia el nombre y la URL de tu página de inicio de sesión, muestra un enlace de afiliado de SeedProd, y más.
• SEO – Establece el título SEO de tu página, la meta descripción, etc. Si estás usando un plugin de SEO como All in One SEO, puedes usar esto como un acceso directo a su configuración.
• Analíticas – Rastrea el rendimiento de tu página de inicio de sesión usando un plugin de analíticas como MonsterInsights.
• Scripts – Usa scripts de seguimiento y retargeting como cookies o píxeles de seguimiento de Facebook.

No olvides hacer clic en el botón Guardar para guardar tu configuración.

Paso 5: Publica tu página de inicio de sesión

Ahora es el momento de publicar tu página de inicio de sesión personalizada en tu sitio. Para hacerlo, haz clic en la flecha desplegable junto al botón verde Guardar y presiona el botón Publicar.

Luego verás un mensaje de éxito indicándote que la página de inicio de sesión ya está activa.

Haz clic en Ver página en vivo para ver tu nueva página de inicio de sesión personalizada.

El último paso es habilitar el modo de página de inicio de sesión en tu área de administración de WordPress. Esto puede sonar difícil, pero SeedProd lo hace muy fácil.

Simplemente sal del constructor visual de páginas de destino y regresa al panel principal de SeedProd. En la sección Página de inicio de sesión, cambia el botón de Inactivo a Activo.

¡Eso es todo! Ahora tu página de inicio de sesión de WordPress tiene un diseño personalizado. Si alguna vez quieres deshabilitar la página de inicio de sesión, simplemente necesitas volver al mismo botón y desactivarlo.

Método 2: Usar WPForms para crear una página de inicio de sesión

Veamos cómo crear una página de inicio de sesión con WPForms.

Paso 1: Instala WPForms en tu sitio

Lo primero que necesitas hacer es instalar y activar el plugin WPForms. Asegúrate de verificar tu clave de licencia navegando a WPForms » Ajustes. Puedes obtener la clave de licencia desde tu cuenta en el sitio web de WPForms.

Para poder crear una página de inicio de sesión personalizada con WPForms, deberás instalar el complemento de Registro de Usuarios yendo a WPForms » Complementos. Haz clic en Instalar Complemento junto a Complemento de Registro de Usuarios y luego haz clic en Activar.

Una vez que el complemento esté activado, puedes proceder a crear un formulario de inicio de sesión de usuario con WPForms.

Paso 2: Crear un formulario de inicio de sesión personalizado

Con el potente constructor de arrastrar y soltar de WPForms, puedes crear un formulario de inicio de sesión en solo unos minutos, no horas, sin escribir una sola línea de código.

Para crear un formulario de inicio de sesión, visita WPForms » Añadir Nuevo. En la página de configuración del formulario, deberás elegir la plantilla Formulario de Inicio de Sesión de Usuario para crear un formulario de inicio de sesión.

Ahora verás el constructor de formularios donde puedes añadir, personalizar y eliminar campos del formulario de inicio de sesión. Por defecto, la plantilla del formulario de inicio de sesión añade los siguientes campos: Nombre de Usuario y Contraseña.

Puedes personalizar cualquier campo haciendo clic en él en el constructor de páginas. Luego, puedes realizar las personalizaciones deseadas en el panel izquierdo.

Paso 3: Configuración del formulario

Para configurar los ajustes generales, puedes ir a Ajustes » Generales. En esta página, puedes personalizar el nombre del formulario, la descripción, el texto del botón de envío, etc.

No tienes que hacer nada en la pestaña Notificaciones para tu formulario de inicio de sesión personalizado. Por defecto, las notificaciones están desactivadas, por lo que no recibirás un correo electrónico cada vez que alguien inicie sesión en tu sitio.

Cuando un usuario inicia sesión a través de tu formulario de inicio de sesión personalizado, aterrizará en la página de inicio de tu sitio web. Puedes cambiar la URL de redireccionamiento, si lo deseas, en el campo URL de redireccionamiento de confirmación.

Paso 4: Publica tu formulario de WordPress

Uno de los principales beneficios de usar WPForms para crear un formulario de inicio de sesión es que te permite incrustar tu formulario en cualquier lugar de tu sitio, incluyendo publicaciones, páginas, widgets de barra lateral o áreas de pie de página con widgets.

Veamos cómo publicar tu formulario en publicaciones o páginas.

Crea una nueva publicación o página en WordPress y luego haz clic en el ícono + en el editor de bloques de Gutenberg. Puedes buscar el bloque WPForms y hacer clic en él.

A continuación, selecciona tu formulario de inicio de sesión en el bloque WPForms y se cargará automáticamente en tu publicación / página.

Después de agregar el formulario, puedes publicar tu publicación / página.

También puedes agregar el formulario de inicio de sesión a tu widget de barra lateral de la siguiente manera. Dirígete a Apariencia » Widgets y agrega el widget WPForms a tu barra lateral.

Selecciona tu formulario de inicio de sesión personalizado en la configuración del widget y haz clic en el botón Guardar para guardar los cambios.

Método 3: Usar Theme My Login para Crear una Página de Inicio de Sesión

El plugin Theme My Login facilita enormemente la publicación de un formulario de inicio de sesión personalizado en tu sitio de WordPress. Para crear una página de inicio de sesión simple, todo lo que tienes que hacer es instalar y activar el plugin Theme My Login.

El plugin funciona directamente sin ninguna configuración adicional.

Sin embargo, si necesitas personalizar la configuración del plugin, puedes hacer clic en el menú Theme My Login en tu panel de WordPress.

Luego puedes cambiar los tipos de inicio de sesión y registro. También puedes ajustar las URLs (slugs) para las páginas de inicio de sesión, cierre de sesión, registro, contraseña olvidada y restablecimiento de contraseña.

Método 4: Personalizar la Página de Inicio de Sesión Existente de WordPress Sin un Plugin

Si prefieres hacer cambios o agregar estilos personalizados a tu página de inicio de sesión existente en lugar de crear una completamente nueva, aquí te explicamos cómo hacerlo.

Simplemente agrega este código al archivo functions.php de tu tema o a un plugin específico del sitio:

//Custom login page
function clp_login_head() {
		
	echo '<style>'; //Begin custom styles
	echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
	echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
	echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
	echo '</style>'; //End custom styles
		
}
add_action('login_head', 'clp_login_head');

Puedes cambiar el CSS y la URL de la imagen en el código anterior para agregar tu estilo personalizado para la página de inicio de sesión de WordPress.

Método 5: Mostrar el formulario de inicio de sesión de WordPress en cualquier lugar sin un plugin

Si deseas mostrar el formulario de inicio de sesión de WordPress en cualquier página, barra lateral o área de pie de página, puedes agregar este código al archivo de plantilla de tu tema:

<?php
          wp_login_form();
?>

El código anterior solo mostrará la página de inicio de sesión general de WordPress en la ubicación donde agregues el código. En caso de que desees agregar una página de formulario de WordPress personalizada con campos y opciones adicionales, puedes usar este código:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Algunos fragmentos de código más que te resultarán útiles:

• Cambiar tu URL de inicio de sesión a través del archivo .htaccess
• Cambiar tu URL de inicio de sesión a través de functions.php
• Eliminar el efecto de temblor del inicio de sesión de WordPress cuando ocurre un error

¡Eso es todo! Si planeas agregar fragmentos de código a tu sitio con más frecuencia, consulta el plugin WPCode. Es la mejor solución para agregar fragmentos de código personalizados con facilidad.

Esperamos que esta guía te haya ayudado a crear una página de inicio de sesión personalizada en WordPress. Si te gustó este artículo, también te puede interesar aprender a crear una página protegida con contraseña en WordPress. Esta publicación te ayudará a restringir tu contenido con una contraseña para ganar dinero o recopilar direcciones de correo electrónico de los usuarios.

También puedes limitar los intentos de inicio de sesión en tu página de inicio de sesión para evitar que los hackers realicen ataques de fuerza bruta en tu sitio.

Lee nuestra guía completa de seguridad para WordPress para obtener más información al respecto.