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

¿Alguna vez se ha preguntado si podría 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 da a tu sitio un aspecto más profesional.

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

Cómo crear una página de inicio de sesión personalizada en WordPress – Tabla de Contenidos

• ¿Por qué crear una página de inicio de sesión personalizada?
• Eligiendo el Plugin Correcto para Crear una Página de Inicio de Sesión Personalizada
• Método 1: Usando 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 una 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 está ejecutando 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á crear una página de inicio de sesión personalizada.

La página de inicio de sesión predeterminada de WordPress tiene un aspecto genérico y aburrido. Con una página de inicio de sesión personalizada, puede personalizar todos los elementos de la página en torno al formulario.

Si tiene una página de inicio de sesión personalizada, puede ocultar la página de inicio de sesión predeterminada si lo desea. Puede reducir el spam de inicio de sesión y mantener su 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, puede encontrar docenas de plugins diferentes que le ayudarán a crear fácilmente una página de inicio de sesión personalizada. En este artículo, veremos 3 plugins diferentes: SeedProd, WPForms y Theme My Login.

Elija SeedProd si necesita un constructor de páginas de aterrizaje fácil de usar para crear páginas de inicio de sesión personalizadas, páginas de ventas, páginas optin, páginas coming soon, páginas de modo de mantenimiento y más.

Aquí están algunas características destacadas de SeedProd:

• Plantillas de páginas de inicio de sesión diseñadas profesionalmente para empezar.
• Personalice completamente su página de inicio de sesión con elementos como perfiles sociales, video, testimonios, calificaciones de estrellas y más.
• Añade un formulario de inicio de sesión a cualquier página de destino que crees con SeedProd.

Elija WPForms si necesita un plugin de formularios para WordPress con todas las funciones que le ayude a crear cualquier tipo de formulario en línea con facilidad, incluyendo formularios de registro, formularios de pago, formularios de contacto, etc.

Algunos beneficios de WPForms son:

• Personalice su formulario de inicio de sesión de la forma que desee sin ninguna restricción.
• Publique su formulario de acceso en cualquier post o página.
• Incrustar el formulario de inicio de sesión en la barra lateral o incluso en el pie widgetized.

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

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

• No 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.
• Añade 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 le permite incrustar su formulario de inicio de sesión en cualquier lugar de su sitio, y se mostrará exclusivamente en su página de inicio de sesión. Debido a que no es un plugin de formulario con todas las funciones como los otros, la capacidad de personalizar su formulario de inicio de sesión es limitada.

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

En primer lugar, vamos a ver cómo crear una página de inicio de sesión personalizada con SeedProd, paso a paso.

Paso 1: Instale SeedProd en su sitio

Para comenzar, necesita descargar el plugin SeedProd. Luego, cargue y active el plugin en su sitio WordPress.

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

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

A continuación, accederá al panel de control de SeedProd. Aquí puede ver los diferentes tipos de páginas de destino que puede crear. Haga clic en Configurar una página de inicio de sesión para empezar.

Paso 2: Elija una plantilla de página de inicio de sesión

En este paso, se le pedirá que elija una plantilla de página de inicio de sesión. SeedProd ofrece un montón de plantillas de diseño profesional que puede elegir.

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

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

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

Paso 3: Personalizar la página de inicio de sesión

La mejor parte de SeedProd es que usted puede personalizar fácilmente su página de inicio de sesión utilizando el constructor visual de arrastrar y soltar. En primer lugar, puede personalizar cualquier elemento existente en la plantilla haciendo clic en él.

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

Para añadir nuevo contenido a su página de inicio de sesión, puede utilizar los bloques de página de destino listos de SeedProd.

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

Simplemente arrastre el bloque que desee y suéltelo en su página de inicio de sesión. De nuevo, puedes hacer clic en el bloque para personalizar el estilo, tamaño, alineación, etc.

SeedProd también ofrece secciones pre-construidas como Características, FAQ, Pie de página, y otros, que puede agregar a su página de inicio de sesión.

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

También puede dirigirse a la Configuración Global de SeedProd en la esquina inferior para cambiar la imagen de fondo, la fuente y los colores de toda su página de inicio de sesión, en lugar de cambiar cada elemento individualmente.

Por ejemplo, si desea cambiar el esquema de color de su página de inicio de sesión, SeedProd ofrece más de 20 paletas de colores que puede utilizar para crear un aspecto coherente.

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

Paso 4: Configure los ajustes de su página de inicio de sesión

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

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

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

Los ajustes de esta página incluyen:

• General – Cambia el nombre y la URL de tu página de inicio de sesión, muestra un enlace de afiliado de SeedProd, etc.
• SEO – Configure el título SEO de su página, meta descripción, etc. Si está utilizando un plugin SEO como All in One SEO, puede utilizar esto como un acceso directo a su configuración.
• Analítica – Realiza un seguimiento del rendimiento de tu página de inicio de sesión utilizando un plugin de analítica como MonsterInsights.
• Scripts – Utiliza scripts de seguimiento y retargeting como cookies o píxeles de seguimiento de Facebook.

No olvide hacer clic en el botón Guardar para guardar la configuración.

Paso 5: Publique su página de inicio de sesión

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

Verás un mensaje de éxito que te informará de que la página de inicio de sesión ya está activa.

Haz clic en Ver página activa 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 su área de administración de WordPress. Esto puede parecer difícil, pero SeedProd hace que sea muy fácil.

Simplemente salga del constructor visual de páginas de aterrizaje y vuelva al panel principal de SeedProd. En la sección Página de inicio de sesión, cambie el botón de Inactivo a Activo.

Ya está. Ahora su página de inicio de sesión de WordPress tiene un diseño personalizado. Si alguna vez desea desactivar la página de inicio de sesión, sólo tiene que volver al mismo botón de alternancia y desactivarlo.

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

Echemos un vistazo a cómo crear una página de inicio de sesión con WPForms.

Paso 1: Instale WPForms en su sitio

Lo primero que debe hacer es instalar y activar el plugin WPForms. Asegúrese de verificar su clave de licencia navegando a WPForms ” Configuración. Puede obtener la clave de licencia desde su cuenta en el sitio web de WPForms.

Para poder crear una página de inicio de sesión personalizada con WPForms, tendrá que instalar el addon Registro de Usuario yendo a WPForms ” Addons. Haga clic en Instalar Complemento junto a Complemento de Registro de Usuario y luego haga clic en Activar.

Una vez activado el complemento, puede crear un formulario de inicio de sesión de usuario con WPForms.

Paso 2: Crear un formulario de registro personalizado

Con el poderoso constructor de arrastrar y soltar de WPForms, puede construir un formulario de inicio de sesión en sólo unos minutos, no horas, sin escribir una sola línea de código.

Para crear un formulario de inicio de sesión, visite WPForms ” Agregar nuevo. En la página de configuración del formulario, deberá elegir la plantilla Formulario de inicio de sesión de usuario para crear un formulario de inicio de sesión.

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

Puede personalizar cualquier campo haciendo clic en él en el constructor de páginas. A continuación, puede realizar las personalizaciones deseadas en el panel de la izquierda.

Paso 3: Configuración del formulario

Para configurar los ajustes generales, puede ir a Configuración ” General. En esta página, puede 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 acceso 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 acceda a través de su formulario de acceso personalizado, aterrizará en la página de inicio de su sitio web. Si lo desea, puede cambiar la URL de redirección en el campo URL de redirección de confirmación.

Paso 4: Publique su formulario de WordPress

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

Veamos como publicar su formulario en entradas o páginas.

Crea un nuevo post o página en WordPress y luego haz clic en el icono + en el editor de bloques 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 post / página.

Después de añadir el formulario, puede publicar su post / página.

También puede agregar el formulario de inicio de sesión a su widget de la barra lateral de la siguiente manera. Diríjase a Apariencia ” Widgets y agregue el widget WPForms a su barra lateral.

Seleccione su formulario de inicio de sesión personalizado en la configuración del widget y haga 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 hace que sea super fácil publicar un formulario de inicio de sesión personalizado en su sitio 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 fuera de la caja sin ninguna configuración adicional.

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

A continuación, puede cambiar los tipos de inicio de sesión y registro. También puede ajustar los slugs de URL para las páginas de inicio de sesión, cierre de sesión, registro, pérdida de contraseña y restablecimiento de contraseña.

Método 4: Personalizar la página de inicio de sesión de WordPress existente sin un plugin

Si prefiere realizar cambios o añadir un estilo personalizado a su página de inicio de sesión existente en lugar de crear una nueva, aquí tiene cómo hacerlo.

Simplemente añada este código al archivo functions.php de su tema o en un plugin específico del sitio:

[alert style=”warning”]Si es la primera vez que añades fragmentos de código en WordPress, consulta nuestra guía sobre cómo añadir correctamente fragmentos de código en WordPress, para no romper accidentalmente tu sitio[/alert].

//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');

Puede cambiar el CSS y la URL de la imagen en el código anterior para añadir su 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 desea mostrar el formulario de inicio de sesión de WordPress en cualquier página, barra lateral o pie de página, puede añadir este código al archivo de plantilla de su tema:

[alert style=”warning”]Al igual que en el método anterior, si es la primera vez que añades fragmentos de código en WordPress, entonces consulta nuestra guía sobre cómo añadir correctamente fragmentos de código en WordPress, para no romper accidentalmente tu sitio.[/alert].

<?php
          wp_login_form();
?>

El código anterior sólo mostrará la página de inicio de sesión general de WordPress en la ubicación donde añada el código. En caso de que quieras añadir una página de formulario de WordPress personalizada con campos y opciones adicionales, entonces 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 serán útiles:

• Cambie su URL de inicio de sesión a través del archivo .htaccess
• Cambiar la URL de inicio de sesión a través de functions.php
• Eliminar el efecto de agitación de inicio de sesión de WordPress cuando se produce un error

Esto es todo. Si planeas añadir fragmentos de código a tu sitio más a menudo, echa un vistazo al plugin WPCode. Es la mejor solución para añadir 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 ha gustado este artículo, puede que también quieras aprender cómo crear una página protegida con contraseña en WordPress. Este post te ayudará a restringir tu contenido con una contraseña para ganar dinero o recopilar direcciones de correo electrónico de usuarios.

También es posible que desee limitar los intentos de inicio de sesión en su página de inicio de sesión para evitar que los hackers lleven a cabo ataques de fuerza bruta en su sitio.

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