\n\n\n\n\n\n\n<\/p>
Cómo crear una página de inicio de WordPress personalizada (4 métodos)<\/h2>
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.<\/p>
Cómo personalizar la página de inicio de sesión con un plugin gratis<\/h3>
La forma más sencilla es utilizar un plugin. Instalar un plugin<\/u><\/a> es fácil y te permite personalizar la página de inicio de sesión directamente a través del panel de WordPress.<\/p> 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.<\/p> Para este tutorial utilizaremos el plugin más popular: LoginPress<\/u><\/a>. Te permite editar varias áreas de tu pantalla:<\/p> Además de la personalización visual, este plugin tiene funciones que mejoran la seguridad, como reCAPTCHA.<\/p> 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<\/u><\/a>, sigue estos pasos:<\/p> Para la personalización no visual, ve a LoginPress <\/strong>→ Configuración<\/strong>. Aquí puedes activar varias funciones, restablecer la configuración predeterminada del complemento y cambiar las credenciales de inicio de sesión necesarias.<\/p> El plugin WPForms<\/u><\/a> 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.<\/p> Para utilizar este complemento debes adquirir el plan Pro<\/u><\/a> de 199,50 dólares al año<\/strong>. En sí, recomendamos este método para aquellos que ya tienen el plan premium de WPForms.<\/p> 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:<\/p> 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<\/u><\/a>.<\/p> 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:<\/p> 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<\/strong> y la redirección:<\/p> \n\n\n ¡Importante!<\/strong> Ten en cuenta que el enlace de restablecimiento de contraseña solo funciona si tienes un formulario de registro de usuario hecho con WPForms.<\/p><\/div>\n\n\n\n<\/p> 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.<\/p> Por ejemplo, añadiremos el formulario a la página de acceso de un nuevo cliente utilizando un bloque personalizado:<\/p> 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<\/u><\/a> como SeedProd<\/a>.<\/p> 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.<\/p> La versión gratuita de SeedProd no incluye el formulario de inicio de sesión<\/strong>. Sin embargo, está incluido en los planes premium, que empiezan en 31,60 dólares al año<\/strong>.<\/p> A continuación te explicamos cómo utilizarlo para crear una página de inicio de WordPress personalizada:<\/p> Como alternativa, ve a SeedProd → Landing Pages<\/strong> y selecciona Configurar una página de inicio de sesión. Activa la página una vez que hayas terminado de personalizarla.<\/p> 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.<\/p> Para ello debes añadir código personalizado al archivo functions.php <\/strong>de tu tema. Antes de proceder, crea un child theme<\/u><\/a> para asegurarte de que el código permanece después de una actualización.<\/p> ¡Importante!<\/strong> Crea una copia de seguridad del archivo functions.php<\/strong> de tu tema antes de hacer cualquier cambio. Esto te permite revertir rápidamente cualquier error.<\/p> 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<\/u><\/a> para más detalles.<\/p> En este tutorial insertaremos código CSS para cambiar el logotipo predeterminado:<\/p> 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.<\/strong> Aquí te explicamos cómo hacerlo:<\/p> 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.<\/p> Estadísticas del plugin:<\/strong><\/p> 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.<\/p> 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.<\/p> 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.<\/p> 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.<\/p> Estadísticas del plugin:<\/strong><\/p> 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.<\/p> 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.<\/p> 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<\/strong> y Honeypot<\/strong>.<\/p> Forminator Pro<\/u><\/a> 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.<\/p> Estadísticas del plugin:<\/strong><\/p>\n
\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/loginpress-1-1024x381.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/subir-imagen-1024x475.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/clic-en-publicar-1024x501.png\")
<\/figure>Cómo personalizar la página de inicio de sesión de WordPress con WPForms<\/h3>
\n
\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/ajustes-de-wpforms-1024x470.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/clave-de-licencia-wpforms-1024x481.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-202.png\")
<\/figure>\n
\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-203.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-204.png\")
<\/figure>\n
¿Olvidaste tu contraseña? <a href={url_lost_password} >Clic aquí<\/a> para restablecerla.<\/pre>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-205.png\")
<\/figure>\n
\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/an%CC%83adir-nueva-pa%CC%81gina-1024x477.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/wpform-1024x492.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/selecciona-un-form-1024x353.png\")
<\/figure>\n
Cómo personalizar la página de inicio de sesión de WordPress con un creador de páginas<\/h3>
\n
\n
\n
Cómo tener la página de inicio de WordPress personalizada utilizando CSS<\/h3>
\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/administrador-de-archivos-hPanel-1024x489.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/tema-instalado-en-WordPress-1024x496.png\")
<\/figure>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/functions-archivo-1024x489.png\")
<\/figure>\n
function my_login_logo() { ?>\n <style type=\"text\/css\">\n #login h1 a, .login h1 a {\n background-image: url(<?php echo get_stylesheet_directory_uri(); ?>\/images\/your-logo.png);\n height:65px;\n width:320px;\n background-size: 320px 65px;\n background-repeat: no-repeat;\n padding-bottom: 30px;\n }\n <\/style>\n<?php }\nadd_action( 'login_enqueue_scripts', 'my_login_logo' );<\/pre>\n
function my_login_logo_url() {\n return home_url();\n}\nadd_filter( 'login_headerurl', 'my_login_logo_url' );\nfunction my_login_logo_url_title() {\n return 'Your Site Name and Info';\n}\nadd_filter( 'login_headertext', 'my_login_logo_url_title' );<\/pre>\n
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-195.png\")
<\/figure>\n
function my_login_stylesheet() {\n wp_enqueue_style( 'custom-login', \nget_stylesheet_directory_uri() . '\/style-login.css' );\nwp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '\/style-login.js' );\n}\nadd_action( 'login_enqueue_scripts', 'my_login_stylesheet' );<\/pre>\n
Los mejores plugins para tener la página de inicio de WordPress personalizada<\/h2>
1. LoginPress<\/u><\/a><\/h3>
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-189.png\")
<\/figure>\n
2. Forminator<\/u><\/a><\/h3>
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-190.png\")
<\/figure>\n
3. Nextend Social<\/u><\/a><\/h3>
![\"\"](\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/05\/image-191.png\")
<\/figure>