Cómo personalizar la página de inicio de WordPress: 4 métodos fáciles + Los mejores plugins para hacerlo

Al crear un sitio web WordPress con membresía, considera personalizar la página de inicio de sesión de los visitantes. Aunque la página por defecto sea suficiente, personalizarla puede beneficiar a tu sitio web. Recuerda que es la portada que verán antes de entrar.

Al tener esta página personalizada puedes mejorar la experiencia del usuario y reforzar la imagen de la marca. Además, puedes añadir funciones de seguridad adicionales para evitar que los ciberdelincuentes ataquen tu sitio web.

Este artículo cubrirá cuatro métodos sencillos para personalizar la página de inicio de WordPress y también compartiremos los mejores plugins para ello. Además, te explicaremos las formas más eficaces de mantener tu sitio web protegido.

Descarga la hoja de trucos de WordPress definitiva

Cómo crear una página de inicio de WordPress personalizada (4 métodos)

En esta sección repasaremos cuatro métodos para personalizar tu página de inicio de sesión. Puedes utilizar el método que mejor se adapte a tus necesidades.

Cómo personalizar la página de inicio de sesión con un plugin gratis

La forma más sencilla es utilizar un plugin. Instalar un plugin es fácil y te permite personalizar la página de inicio de sesión directamente a través del panel de WordPress.

Existen muchos plugins de WordPress para páginas de inicio de sesión personalizadas con distintas características y opciones de personalización. Además, tienen distintos precios y algunos son gratis.

Para este tutorial utilizaremos el plugin más popular: LoginPress. Te permite editar varias áreas de tu pantalla:

• Logo. Sustituye el logotipo predeterminado por el de tu propia marca. También puedes cambiar el tamaño, el relleno, la URL y la posición.
• Fondo. Añade un color personalizado o sustituye el fondo predeterminado por una imagen. También puedes insertar un video para activar un fondo animado y evitar una página estática.
• Mensajes de bienvenida y de error. Escribe un mensaje para mostrar cuando los usuarios entren en tu sitio web o se encuentren con un error. Puedes crear varios mensajes de error para diferentes escenarios.
• Formularios. Cambia la apariencia de tus formularios de olvido de contraseña e inicio de sesión. Puedes personalizar el color, el tamaño y el relleno de las etiquetas de los campos de nombre de usuario y contraseña.
• Pie de página. Incluye elementos como enlaces de navegación y de restablecimiento de contraseña en el pie de página.

Además de la personalización visual, este plugin tiene funciones que mejoran la seguridad, como reCAPTCHA.

Vamos a utilizar LoginPress para cambiar el logotipo en la página de inicio de sesión. Después de iniciar sesión en el panel de control de WordPress, sigue estos pasos:

1. Descarga e instala el plugin.
2. Navega hasta la barra lateral → LoginPress → Personalizador.

3. En la pantalla del personalizador haz clic en Logotipo → Selecciona una imagen.
4. En la pestaña Subir archivos, pulsa Seleccionar archivos.
5. Elige una nueva imagen y haz clic en Abrir.
6. Introduce la información necesaria, como la descripción y el texto alternativo, luego haz clic en Elige la imagen.

7. Haz clic en Publicar para aplicar los cambios.

Para la personalización no visual, ve a LoginPress → Configuración. Aquí puedes activar varias funciones, restablecer la configuración predeterminada del complemento y cambiar las credenciales de inicio de sesión necesarias.

Cómo personalizar la página de inicio de sesión de WordPress con WPForms

El plugin WPForms te permite crear cualquier formulario personalizado. Aunque el plugin en sí es gratuito, las funcionalidades de personalización solo están disponible con el complemento premium.

Para utilizar este complemento debes adquirir el plan Pro de 199,50 dólares al año. En sí, recomendamos este método para aquellos que ya tienen el plan premium de WPForms.

Además de la funcionalidad de inicio de sesión personalizado, WPForms también viene con otras plantillas de formularios y características. Aquí tienes algunas personalizaciones que puedes hacer:

• Campos personalizados. WPForms tiene diferentes tipos de campos para tu página de inicio de sesión, como un menú desplegable, múltiples opciones y casillas de verificación. También puedes cambiar la etiqueta, la descripción y el tamaño.
• Elementos de seguridad. El complemento de página de inicio de sesión WPForms incluye protección antispam y funciones reCAPTCHA. Ayudan a evitar que los bots logren su objetivo.
• Confirmaciones personalizadas. Aplica diferentes métodos de confirmación después de que un usuario inicie sesión. Por ejemplo, puedes mostrar un mensaje personalizado o redirigirlos a una URL específica.

Este plugin no ofrece funciones completas de personalización visual. Aunque puedes añadir tu propio logotipo, no puedes cambiar el fondo del formulario de acceso sin código CSS.

Antes de personalizar tu página de inicio, debes activar la extensión necesaria. Para ello abre el panel de administración de WP y sigue estos pasos:

1. Ve al menú de la barra lateral → WPForms → Ajustes.

2. En la pestaña General, busca el campo Clave de licencia en la categoría Licencia.

3. Pega tu clave de licencia y haz clic en Verificar clave.
4. Ve a Extensiones y, a continuación, busca User Registration Addon → Install Addon.

5. Una vez finalizado el proceso de instalación, haz clic en Activar.

Una vez activado, crea tu formulario de acceso personalizado utilizando la plantilla proporcionada. En este tutorial también te mostraremos cómo activar el botón de olvido de contraseña y la redirección:

1. Ve a WPForms → Añadir nuevo.
2. Introduce el nombre de tu formulario en el campo designado.

3. Busca la plantilla Formulario de inicio de sesión de usuario y haz clic en Usar plantilla. Añadirá automáticamente los campos de nombre de usuario y contraseña a tu formulario.
4. Haz clic en el campo Contraseña.

5. En la pestaña Opciones de campo, introduce la siguiente descripción:

¿Olvidaste tu contraseña? <a href={url_lost_password} >Clic aquí</a> para restablecerla.

6. Navega hasta la barra lateral de WPForms → Configuración → Confirmaciones.
7. En el menú desplegable Tipo de confirmación, selecciona Ir a URL (redirigir).
8. Introduce la URL de redirección de confirmación.

9. Haz clic en Guardar para aplicar los cambios.

WPForms te permite incrustar tu formulario personalizado en cualquier lugar del sitio web utilizando un bloque reutilizable o shortcode. Esto significa que también puedes crear varias páginas de inicio de sesión para diferentes roles de usuario.

Por ejemplo, añadiremos el formulario a la página de acceso de un nuevo cliente utilizando un bloque personalizado:

1. Ve a la barra lateral → Páginas → Añadir nueva.

2. En la pantalla del editor, introduce el título de la página.
3. Haz clic en el ícono más (+) para añadir un nuevo bloque y selecciona WPForms.

4. En el menú desplegable elige tu formulario de acceso de usuario.

5. Haz clic en el botón Publicar para activar el formulario.

Cómo personalizar la página de inicio de sesión de WordPress con un creador de páginas

Por defecto, la pantalla hereda la apariencia del tema activo, que por lo general es una página estática. Si quieres personalizarla o crearla desde cero, utiliza un plugin de creador de páginas como SeedProd.

Su creador de solo arrastrar y soltar hace que el plugin sea adecuado para los principiantes de WordPress. Puedes añadir contenido a tu página de inicio de WordPress personalizada y cambiar todos los elementos visuales sin codificación.

La versión gratuita de SeedProd no incluye el formulario de inicio de sesión. Sin embargo, está incluido en los planes premium, que empiezan en 31,60 dólares al año.

A continuación te explicamos cómo utilizarlo para crear una página de inicio de WordPress personalizada:

1. Instala y activa la versión premium de SeedProd.
2. En la barra lateral haz clic en Páginas → Añadir nueva.
3. Introduce el nombre de la nueva página y haz clic en Editar con SeedProd.

4. Elige el filtro Login y escoge una plantilla.

5. Arrastra y suelta el widget de formulario de inicio de sesión desde la pestaña Bloques. Configura la apariencia y funcionalidad de tu formulario de inicio de sesión personalizado de WordPress.
6. Haz clic en Publicar.

Como alternativa, ve a SeedProd → Landing Pages y selecciona Configurar una página de inicio de sesión. Activa la página una vez que hayas terminado de personalizarla.

Cómo tener la página de inicio de WordPress personalizada utilizando CSS

Si no quieres utilizar plugins, escribe código CSS único para personalizar la página de inicio de sesión predeterminada. Sin embargo, no recomendamos este método si no estás familiarizado con la codificación.

Para ello debes añadir código personalizado al archivo functions.php de tu tema. Antes de proceder, crea un child theme para asegurarte de que el código permanece después de una actualización.

¡Importante! Crea una copia de seguridad del archivo functions.php de tu tema antes de hacer cualquier cambio. Esto te permite revertir rápidamente cualquier error.

Puedes estilizar cada elemento HTML de tu pantalla con CSS personalizado. Si quieres escribir tu propio código, lee la página del Codex de WordPress para más detalles.

En este tutorial insertaremos código CSS para cambiar el logotipo predeterminado:

1. Accede a la carpeta de tu sitio web de WordPress utilizando un cliente FTP. Si utilizas el servicio de hosting de Hostinger, ve a hPanel → Panel de control → Administrador de archivos.

2. Ve a public_html → wp-content y, a continuación, accede a la carpeta themes.
3. Abre el tema activo. En nuestro caso es twentytwentytwo.

4. Crea una carpeta para el logotipo haciendo clic en el ícono Nueva carpeta, situado a la izquierda de la pantalla. Nómbralo imágenes y haz clic en Crear.
5. Mueve tu logotipo a la carpeta.
6. Vuelve a la carpeta del child theme y haz doble clic en el archivo functions.php.

7. Copia y pega el siguiente fragmento de código antes de ?>. Sustituye tu-logo.png por el nombre del archivo de tu imagen:

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/your-logo.png);
    height:65px;
    width:320px;
    background-size: 320px 65px;
    background-repeat: no-repeat;
          padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

8. Debajo del fragmento del paso anterior, añade el siguiente código para que el enlace del logotipo apunte a tu sitio web:

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

9. Haz clic en el ícono del disco para guardar los cambios.

Recomendamos crear una hoja de estilo personalizada con el fin de lograr una personalización más avanzada. Te permite organizar los estilos de tu página de inicio de sesión de WordPress en un solo archivo y mantiene limpio el código de functions.php. Aquí te explicamos cómo hacerlo:

1. Accede al directorio de tu child theme activo.
2. Crea un nuevo archivo y nómbralo style-login.css. Aquí es donde añadirás el código CSS personalizado para dar estilo.
3. Localiza y edita el archivo functions.php del child theme.
4. Añade el siguiente fragmento de código. Esto cargará el archivo CSS recién creado y aplicará los estilos:

function my_login_stylesheet() {
       wp_enqueue_style( 'custom-login', 
get_stylesheet_directory_uri() . '/style-login.css' );
wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

5. Haz clic en el ícono del disco para finalizar la edición.

Los mejores plugins para tener la página de inicio de WordPress personalizada

En esta sección vamos a listar los mejores plugins para tener la página de inicio de WordPress personalizada, para que puedas escoger el que se adapte a tus necesidades.

1. LoginPress

Estadísticas del plugin:

• Descargas: 200.000+
• Valoraciones: 4.8/5
• Precio: freemium (a partir de  49 dólares al año)

LoginPress es el plugin ideal si necesitas muchas opciones de personalización visual. Tiene también características extra que mejoran la funcionalidad de la página de inicio de sesión de WordPress.

Todas las opciones de personalización visual son gratuitas. Sin embargo, funciones como reCAPTCHA, inicio con redes sociales, widgets y redireccionamientos personalizados solo los tienes en la versión premium.

Lo mejor de este plugin es su pantalla de edición fácil de usar. Su interfaz es similar a la del editor de WordPress y permite previsualizar los cambios en tiempo real.

También permite importar y exportar la configuración del formulario de acceso para acelerar el proceso de personalización. Este plugin es adecuado para principiantes por su sencillez y sus herramientas intuitivas.

2. Forminator

Estadísticas del plugin:

• Descargas: 400,000+
• Valoraciones: 4.8/5
• Precio: freemium (a partir de  7,50 dólares al mes)

Forminator es la mejor alternativa a WPForms para crear una página de inicio de WordPress personalizada. Ofrece algunas de las funciones premium de WPForms de forma gratuita, incluido el formulario personalizado.

También proporciona una plantilla personalizable para simplificar el proceso de creación del formulario. Además de la apariencia, puedes cambiar cómo funciona el formulario e integrarlo con varias aplicaciones.

Igual que WPForms, Forminator te deja insertar el formulario de inicio de sesión con un bloque personalizado o shortcode usando el editor de páginas. También proporciona mayor seguridad para tu sitio web con reCAPTCHA y sus funciones de protección contra spam como Akismet y Honeypot.

Forminator Pro te ofrece una gran variedad de funciones para tu página de inicio de WordPress personalizada, como el rellenado dinámico y soporte de WordPress Multisitio.

3. Nextend Social

Estadísticas del plugin:

• Descargas: 300,000+
• Valoraciones: 4.9/5
• Precio: freemium (a partir de 49 dólares por un sitio web)

Por comodidad, a muchos usuarios les gusta utilizar métodos alternativos para iniciar sesión, como el uso de sus cuentas en redes sociales. Sin embargo, esta solución normalmente solo está disponible en los plugins premium.

El plugin Nextend Social te permite activar esta función de forma gratuita. Admite la integración con más de 15 plataformas de terceros, pero solo Facebook, Twitter y Google están disponibles en la versión gratuita.

El plugin te permite añadir múltiples métodos de inicio de sesión social en tus formularios para dar más opciones a los visitantes. Además, puedes personalizar rápidamente el aspecto de tu página de inicio de sesión con el preajuste incluido.

A diferencia de otros plugins de inicio de sesión personalizado para WordPress, Nextend no ofrece amplias opciones de personalización. Recomendamos este plugin solo si necesitas la opción de inicio con redes sociales de forma gratuita.

4. Ultimate Member

Estadísticas del plugin:

• Descargas: 200.000+
• Valoraciones: 4.4/5
• Precio: freemium (la suscripción adicional premium cuesta a partir de 249 dólares al año)

Ultimate Member es un plugin todo en uno para formularios personalizados en un sitio web de WordPress con membresía. Por defecto, viene con varias plantillas de formularios para la recuperación de contraseñas perdidas, el inicio de sesión o el registro.

Este plugin es ideal para crear una página de inicio de WordPress personalizada, sencilla y funcional. Pero si quieres una personalización visual más amplia, quizá tengas que usar otros plugins.

Ultimate Member ofrece extensiones gratuitas y premium para ampliar su funcionalidad, como usuarios online, usuarios verificados y opiniones de usuarios. Incluso si solo lo necesitas para hacer una página de inicio de sesión personalizada, estos complementos te pueden ser útiles.

5. RegistrationMagic

• Descargas: 10,000+
• Valoraciones: 4.5/5
• Precio: freemium (a partir de 89 dólares por un sitio web)

El plugin RegistrationMagic te permite implementar en tu sitio web un sistema de inicio de sesión rico en funciones. Dispone de un panel de control en el que puedes gestionar tu formulario de acceso fácilmente a través de una única interfaz.

Este plugin proporciona un gráfico visual que muestra la tasa de éxito y fracaso del inicio de sesión a lo largo del tiempo. Estos datos te ayudan a identificar anomalías, que pueden indicar problemas técnicos o intentos de ciberataque.

RegistrationMagic también ofrece completas funciones de seguridad, como reCAPTCHA, filtros de IP y autenticación de dos factores (2FA).

Comparado con otros plugins, RegistrationMagic no tiene muchas opciones de personalización visual. Lo recomendamos principalmente si necesitas una seguridad sólida y funciones analíticas para tu página de inicio de WordPress.

6. Branda

• Descargas: 20.000+
• Valoraciones: 5/5
• Precio: freemium (a partir de 7,50 dólares al mes)

Branda te permite realizar una personalización sencilla y en profundidad de la página de inicio de sesión del administrador de tu sitio web. Esta flexibilidad hace que el plugin sea adecuado tanto para principiantes como para usuarios avanzados.

Los principiantes pueden elegir las plantillas listas para usar y hacer ediciones sencillas como cambiar el logotipo, el tamaño de la fuente o la imagen de fondo.

Para los usuarios más avanzados, Branda les permite crear una página de inicio de sesión personalizada desde cero. También pueden cambiar los campos, configurar redireccionamientos o añadir código CSS personalizado para una personalización más avanzada.

Este plugin es adecuado para los usuarios que dan prioridad a la personalización visual, ya que carece de funciones de seguridad y de inicio alternativo. Sin embargo, su menú de personalización no previsualiza en tiempo real los cambios que haces.

3 formas de proteger tu página de inicio de WordPress personalizada

Los ciberdelincuentes suelen aprovecharse de la página de inicio de sesión predeterminada de WordPress para acceder a una cuenta mediante fuerza bruta o lanzar un ataque DDoS. Personalizarla te permite añadir una capa adicional de seguridad para ayudar a proteger tu sitio web y los datos de los usuarios.

Configura la autenticación de dos factores (2FA)

2FA es un paso de verificación adicional necesario para acceder a una cuenta. Ayuda a proteger las cuentas de los usuarios cuando sus contraseñas y nombres de usuario se ven comprometidos.

Esta función de seguridad suele enviar un enlace de verificación a los dispositivos conectados por SMS o email. Otro método es utilizar una aplicación como Google Authenticator para generar un código de verificación aleatorio.

Para acceder a una cuenta protegida por 2FA el usuario debe hacer clic en el enlace de verificación o introducir el código, además de introducir las credenciales de acceso. Se trata de una medida de seguridad importante, ya que los piratas informáticos pueden adivinar u obtener fácilmente la información de inicio de sesión mediante phishing, que es un problema de seguridad habitual en WordPress.

Recomendamos activar 2FA incluso si tu sitio web no recopila información confidencial, como números de tarjetas de crédito. Hace que los visitantes se sientan más seguros, lo que aumenta su confianza en tu sitio web.

Para activar 2FA en tu sitio web WordPress utiliza un plugin como Wordfence Security. También le da a los usuarios la opción de registrar sus dispositivos en su sitio web, así pueden acceder sin 2FA por 30 días. Acá te mostramos cómo activarlo:

1. Después de instalar el plugin, ve a Wordfence → Login Security → Two-Factor Authentication.

2. Escanea el código QR con una aplicación de autenticación en tu dispositivo móvil. Alternativamente, escribe el código proporcionado.
3. Introduce el número generado en tu aplicación móvil en el campo correspondiente a la sección de códigos de recuperación.
4. Pulsa el botón ACTIVAR para completar el proceso de configuración.

Utiliza reCAPTCHA

Los hackers que no disponen de credenciales de acceso pueden intentar adivinarlas utilizando bots. Estos programas generan posibles combinaciones de nombre de usuario y contraseña hasta dar con la correcta.

Los bots probarán miles de combinaciones rápidamente, lo que provocará un pico de peticiones. Si tu sitio web no puede atender las peticiones, puede ralentizarse o volverse inaccesible.

Activar reCAPTCHA ayuda a evitar que los bots hagan intentos de inicio de sesión. Se trata de una tarea de seguridad utilizada para verificar si las solicitudes de inicio de sesión proceden de humanos o de usuarios reales, normalmente en forma de un sencillo rompecabezas.

Como los bots no pueden iniciar sesión, no pueden verificar si las credenciales generadas son correctas. Ayuda a minimizar las solicitudes de inicio de sesión, manteniendo el rendimiento y el tiempo de actividad de tu sitio web.

Utiliza plugins como LoginPress y WPForms para activar reCAPTCHA en tu pantalla de inicio de sesión. En el caso de los CAPTCHA de texto, proporciona asistencia de audio y utiliza una paleta de colores adecuada para daltónicos para mejorar la usabilidad.

Reduce el número máximo de intentos de inicio de sesión

Por defecto, WordPress no limita el número de intentos de inicio de sesión que pueden hacer los usuarios. Hace que los sitios web de WordPress con la página de inicio de sesión predeterminada sean vulnerables a ataques de fuerza bruta.

Limitar el número de intentos de inicio de sesión mediante un plugin ayuda a reducir este riesgo. Cuando los hackers no logran iniciar sesión, bloquea temporalmente la cuenta y notifica al administrador del sitio web sobre una posible brecha.

Algunos plugins de páginas de inicio de sesión personalizadas para WordPress ofrecen esta función como complemento premium. Alternativamente, puedes activarlo gratis con Limit Login Attempts Reloaded:

1. Una vez instalado el plugin, ve a la barra lateral de WordPress → Limit Login Attempts.
2. Ve a la pestaña Ajustes.
3. Marca la casilla de cumplimiento con el RGPD y personaliza el mensaje.
4. Haz clic en la casilla Notificar al bloquear e ingresa tu email y el número máximo de bloqueos.

5. Desplázate hasta la sección Ajustes de la aplicación.
6. En los ajustes de bloqueo, introduce los valores que quieras en cada campo.

7. Haz clic en Guardar los ajustes para aplicar los cambios.

Conclusión

Personalizar la página de inicio de WordPress tiene varias ventajas. Además de las mejoras visuales, puedes añadir funciones para mejorar la experiencia del usuario y la seguridad del sitio web. Incluso puedes tener mucho más que una página estática.

En este artículo te explicamos cuatro formas de tener la página de inicio WordPress personalizada. Aquí un breve resumen:

• Utiliza un plugin de página de inicio de WordPress personalizada como LoginPress. Es sencillo y gratuito, lo que resulta ideal si necesitas funciones básicas y opciones de personalización como cambiar el logotipo y la imagen de fondo.
• Habilita el complemento de registro de usuarios de WPForms. Añade un formulario personalizado en cualquier lugar de tu sitio web. Dado que es una solución de pago, utiliza este método si ya tienes una suscripción premium de WPForms.
• Utiliza un creador de páginas. Te permite crear una página de inicio de sesión personalizada desde cero y añadir funciones avanzadas como la posibilidad de utilizar redes sociales.
• Añade código CSS personalizado al archivo functions.php de tu tema de WordPress. Este método es adecuado para los usuarios que están familiarizados con la codificación y no quieren instalar un plugin.

Además, existen varios plugins de páginas de inicio personalizadas para WordPress que ofrecen diferentes funciones. Recomendamos LoginPress si quieres centrarte en la personalización visual y Forminator como el mejor plugin freemium todoterreno.

Recuerda implementar medidas de seguridad adicionales, ya que los ciberdelincuentes podrían aprovecharse de estas para atacar tu sitio web, tu tienda o tu blog, y no quieres desperdiciar el tiempo que dedicaste en el SEO o tus artículos. Los mejores métodos son configurar 2FA, utilizar reCAPTCHA y limitar el máximo de intentos de inicio de sesión con un plugin.