homefinance blog
¿Le gustaría crear una página de autenticación de WordPress personalizada para su sitio web? Si está ejecutando un sitio miembro de WordPress o una tienda en línea, muchos de sus usuarios a menudo verán la página de autenticación. Personalizar la página predeterminada de autenticación de WordPress le permite brindar una mejor experiencia al usuario. En esta guía final, le mostraremos diferentes formas de crear una página de autenticación de WordPress personalizada. También puede usar este tutorial para crear una página de inicio de sesión de WooCommerce personalizada.
Esto es lo que aprenderá de esta guía.
Por qué crear una página de autenticación de WordPress personalizada
Ejemplos de diseño de páginas de conexión de WordPress
Creación de una página de autenticación de WordPress utilizando el tema de mi conexión
Creación de una página de autenticación de WordPress personalizada utilizando WPFORMS
Creación de una página de autenticación de WordPress personalizada utilizando SeedProd
Cambiar el logotipo de inicio de sesión a la página de autenticación de WordPress
Cambie el logotipo de WordPress URL y la URL utilizando un complemento
Cambie el logotipo de WordPress y el inicio de sesión de URL sin un complemento (código)
¿Por qué crear una página de autenticación de WordPress personalizada? WordPress viene con un poderoso sistema de administración de usuarios. Esto permite a los usuarios crear cuentas en tiendas comerciales electrónicas, sitios web de miembros o un blog.
De manera predeterminada, la página de autenticación muestra la marca y el logotipo de WordPress. Es bueno si está ejecutando un blog pequeño o si usted es la única persona con acceso al administrador.
Sin embargo, si su sitio permite a los usuarios registrarse y conectarse, entonces una página de autenticación personalizada proporciona una mejor experiencia de usuario. El uso de su propio logotipo y diseño hace que los usuarios se sientan como en casa. Si bien su redirección a la pantalla de autenticación predeterminada de WordPress, que no se parece a su sitio web, puede parecer sospechoso para sus usuarios, la pantalla de autenticación predeterminada no contiene nada más que el formulario de autenticación. Al crear una página de autenticación personalizada, puede usarla para promover otras páginas o promociones especiales. Dicho esto, echemos un vistazo a algunos ejemplos de páginas de autenticación de WordPress personalizadas. Ejemplos de diseño de la página de autenticación de WordPress Los propietarios de sitios web pueden personalizar la página de autenticación de WordPress utilizando diferentes estilos y técnicas. Algunos crean una página de autenticación personalizada que utiliza el tema y los colores de su sitio web. Otros cambian la página de conexión predeterminada agregando un fondo, colores y logotipo personalizados.
1. WPFORMS
WPFORMS es el mejor complemento para el formulario de contacto de WordPress en el mercado. Casualmente, su complemento también incluye un suplemento para crear una hermosa conexión de WordPress y formularios de grabación, que le mostraremos más adelante en este artículo. Su página de conexión personalizada utiliza un aspecto de dos columnas. La columna izquierda contiene el formulario de conexión, y la columna derecha se usa para resaltar las promociones y otro impulso. En el ejemplo anterior, use la página de autenticación para compartir su informe anual. Utiliza marca personalizada, ilustración de fondo y colores de marca para crear una experiencia de conexión única. Rock mi boda
El sitio web de Rock My Wedding utiliza una ventana emergente para mostrar la autenticación y el formulario de registro. La ventaja de usar una ventana emergente es que los usuarios pueden conectarse sin salir de la página. Los guarda de una nueva carga de página y ofrece una experiencia de uso más rápida. 3. Jacquelynne Steves
Jacquelynne Steeves es un sitio de arte y manualidades en el que el autor publica sobre la decoración de la casa, la creación de mantas, modelos, bordados y más. Su página de inicio de sesión utiliza una imagen de fondo personalizada que se adapta al sitio web el sitio web con el formulario de conexión a la derecha.
4. Gráficos en movimiento de la iglesia
La página de autenticación de esta empresa de diseño gráfico de movimiento utiliza un fondo colorido que refleja cuál es su negocio. Use el mismo encabezado del sitio, sótano y menús de navegación en la pantalla de conexión. La forma de autenticación en sí es bastante simple, con un fondo oscuro. 5. Revisión de gestión de mitsloan
El sitio web de Mitsloan Management Review utiliza la pantalla de autenticación predeterminada de WordPress. También utiliza CSS personalizado con su propio logotipo para ocultar la marca WordPress. Ahora, está listo para averiguar cómo crear una página de autenticación personalizada en WordPress? Creando una página de autenticación de WordPress usando mi tema mi tema, mi conexión es un complemento gratuito que cambia su página de conexión para que coincida con su tema de WordPress. No es muy personalizable, pero reemplazará la página de autenticación predeterminada con la marca WordPress y se verá un poco más profesional. Lo primero que debe hacer es instalar y activar el tema mi complemento de inicio de sesión. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, el tema de mi conexión crea automáticamente URL para la autenticación, la desconexión, el registro, la contraseña olvidada y las acciones de contraseña personalizadas.
Puede personalizar esta URL de WordPress URL accediendo a mi conexión »Página general. Desplácese hacia abajo a la sección “Babosas” para modificar estas direcciones de URL utilizadas por complemento para acciones de conexión.
El tema de mi conexión también le permite usar códigos cortos para crear páginas de autenticación y registro personalizadas. Simplemente puede crear una página para cada acción y luego agregar el servidor de la página aquí para que el complemento pueda encontrar y redirigir a los usuarios correctamente. Comencemos con la página de autenticación.
Vaya a la página »Agregue Nou para crear una nueva página de WordPress. Luego debe darle un título a su página e ingresar el siguiente código corto “[Temo-My-Login]” en el área de contenido. Ahora puede publicar su página y obtener una vista previa para ver la página de conexión personalizada en la acción.
Repita el proceso para crear otras páginas utilizando los siguientes códigos cortos. [Temo-My-Login Action = “Registrar”] para el formulario de registro. [Temo-My-Login Action = “Lostpassword”] para la página de contraseña perdida. [Temo-My-Login Action = “ResetPass”] Úselo en la página RESET de contraseña.
Crear una página de autenticación de WordPress personalizada utilizando WPFORMS WPFORMS es el mejor complemento de WordPress para los formularios de mercado. Le permite crear fácilmente formularios de autenticación y registro personalizados para su sitio web. WPFORMS es un complemento premium de WordPress y necesitará al menos su plan profesional para acceder al suplemento de registro de los usuarios. Los usuarios de WPBeginner pueden obtener un descuento del 50% utilizando nuestro código de cupón WPFFORMS: Guardar50 Lo primero que debe hacer es instalar y activar el complemento WPFORMS. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, debe visitar la página WPFFORMS »Configuración para ingresar la clave de licencia. Puede encontrar esta información en su cuenta en el sitio web de WPFORMS.
Después de ingresar la clave de licencia, podrá instalar programas de finalización. Continúe y visite la página WPForms »complementos y localice el registro de complementos.
Luego haga clic en el botón Instalar complemento para descargar y activar complemento. Ahora está listo para crear sus propios formularios de autenticación personalizados. Vaya a WPFORMS »Agregue una nueva página y desplácese hacia abajo a la plantilla” Formulario de conexión de usuario “. Debe hacer clic en el botón “Crear formulario de autenticación de usuario” para continuar. WPFORMS cargará el formulario de autenticación del usuario con los campos obligatorios. Puede hacer clic en los campos para agregar su propia descripción o mensaje de texto a su alrededor.
Puede cambiar otras configuraciones. Por ejemplo, agrega automáticamente “Enviar” como título de botón. Puede hacer clic en él y luego cambiarlo en el inicio de sesión.
También puede decidir qué sucede después de que un usuario está conectado con éxito. Vaya a Configuración »Pestaña Confirmación y seleccione una acción.
Puede redirigir al usuario a cualquier otra URL, redirigirla a la página inicial o simplemente mostrarles un mensaje de que está conectado ahora. Después de estar satisfecho con la configuración del formulario, haga clic en el botón Guardar en la esquina superior derecha y cierre el entrenador de formularios. Agregar su formulario de inicio de sesión personalizado a una página de WordPress WPFFORMS hace que sea muy fácil agregar su formulario de conexión personalizado en cualquier publicación o página de WordPress. Simplemente edite la página donde desea agregar el formulario de autenticación o crear uno nuevo. Luego, en la pantalla de edición de la página, agregue el bloque WPFFORMS al área de contenido.
Luego seleccione el formulario de conexión que ha creado anteriormente, y el bloque WPFFORMS lo cargará automáticamente en el área de contenido.
Ahora puede continuar editando la página de la página de inicio de sesión o puede guardar y publicar los cambios. Creando una página de autenticación de WordPress personalizada utilizando SeedProd predeterminado, su formulario de inicio de sesión de WordPress personalizado utilizará la plantilla y los estilos de página. De navegar por el tema, encabezado, sótano y widgets en la barra lateral. Si desea hacerse cargo de la página completa y diseñar algo desde cero, puede usar un complemento para el generador de página de WordPress. Seedprod es el mejor constructor de páginas de destino para WordPress. Es fácil para principiantes y ofrece un constructor de arrastre y caída para ayudarlo a crear cualquier tipo de página de destino, incluida una página de autenticación, una página pronto, un modo de mantenimiento y más. Para este artículo, utilizaremos la versión Seedprod Pro, ya que incluye una plantilla de página de autenticación y páginas avanzadas para la personalización. También hay una versión gratuita de SeedProd, pero no incluye la opción de crear una página de autenticación para su sitio de WordPress. Primero, deberá instalar el complemento SeedProd en su sitio web. Para obtener más detalles, puede seguir nuestra guía sobre cómo instalar un complemento de WordPress. Una vez que el complemento esté activo, será redirigido a SeedProd en el área de administración de WordPress. Luego deberá ingresar la clave de licencia que pueda obtener fácilmente de la cuenta Seedprod. Después de ingresar a la tecla, haga clic en el botón “Verifique la tecla”.
Después de eso, está listo para crear su página de inicio de sesión de logprod. Para comenzar, vaya a las páginas de SeedProd y luego seleccione la opción Página de autenticación haciendo clic en “Configurar una página de autenticación”. En la siguiente pantalla, puede seleccionar una plantilla para su página de autenticación. También hay una opción para crear una página desde cero usando la plantilla vacía. Sin embargo, le sugerimos que use una plantilla, porque es más fácil y más rápido personalizar la página de inicio de sesión como desee.
Al seleccionar una plantilla, aparecerá una ventana emergente para ingresar un nombre de página para su inicio de sesión. Seedprod usará el nombre de la página como URL para su página de destino. Después de ingresar estos detalles, continúe y haga clic en “Guardar y comenzar a editar la página”.
Ahora, puede editar su página de inicio de sesión utilizando el generador DrappRod Drag & Drag & DredProd. El generador le permite agregar fácilmente cualquier bloque de página a la página, simplemente deslizándolo desde el menú izquierdo y colocándolo en cualquier lugar de la página. Por ejemplo, puede agregar un texto a su página de inicio de sesión, un nuevo video o botón. Hay varias opciones de personalización en la sección de bloque avanzado, donde puede agregar un cronómetro inverso, íconos de intercambio social y más. Incluso le permite eliminar los bloques de las páginas existentes en la plantilla. Todo lo que tiene que hacer es hacer clic en el icono de basura para eliminar el bloque de página.
Luego, si hace clic en cualquier sección en la página de autenticación, verá más opciones de personalización. Por ejemplo, puede cambiar el texto y el color de los campos, elegir una fuente diferente, cambiar el color del botón y muchos más. Cuando esté satisfecho con el diseño del inicio de sesión, continúe y haga clic en la pestaña de conexión en la parte superior. Ahora puede conectar diferentes servicios de marketing de correo electrónico, como Constant Contact, Drip, SeringBlue y muchos más.
Después de eso, puede ir a la pestaña Configuración de la página. En la configuración general, SeedProd le permite editar el título de la página y cambiar la condición del boceto para publicar. También puede seleccionar la opción de usar el enlace SeedProd y agregar el enlace de afiliado de SeedProd para ganar más dinero en línea.
Si desea optimizar su página de inicio de sesión de inicio de sesión, vaya a la configuración de SEO. Aquí puede agregar un título y una descripción de SEO para su página, puede elegir un favicon y miniaturas para las redes sociales. También hay una opción para activar la falta de índice para la página de autenticación. Al activar esta opción, puede desactivar los motores de búsqueda para indexar y clasificar su página de inicio de sesión en los resultados de búsqueda.
Después de eso, también puede agregar diferentes fragmentos de código a su página de conexión, en la configuración del script.
Ahora que ha cambiado la configuración de la página, continúe y haga clic en el botón Guardar en la parte superior. Entonces necesitará activar su página de inicio de sesión. Para hacer esto, puede salir del generador de páginas de destino y luego acceder a las páginas Seedprod. Después de eso, haga clic en el interruptor para cambiar la condición de la página inactiva al activo.
Ahora puede acceder a la URL de su página de autenticación y verla en la acción. Si los complementos para el generador de páginas de WordPress no le pertenecen, entonces puede usar CSS personalizado para estilizar el formulario y la página de autenticación. Alternativamente, también puede usar el complemento CSS Hero para agregar fácilmente estilos CSS personalizados. Cambie el logotipo de WordPress URL y la URL no siempre tienen que crear una página de autenticación de WordPress totalmente personalizada para su sitio web. De hecho, muchos sitios web reemplazan solo el logotipo de WordPress y la URL del logotipo, mientras usa la página de autenticación predeterminada. Si desea reemplazar el logotipo de WordPress en su propio logotipo, puede usar fácilmente un complemento de WordPress o agregar código personalizado. Le mostraremos ambos métodos que puede usar uno que mejor le convenga. Cambie el logotipo de URL de WordPress y la URL utilizando un complemento Lo primero que debe hacer es instalar y activar ColoriB Login Customizer. conecta. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Tras la activación, el complemento agrega un nuevo elemento de menú etiquetado como “Personalizador de inicio de sesión” a la barra administradora del lado de WordPress. Al hacer clic en él, se iniciará la Connecting Custom.
El personalizador de inicio de sesión cargará su pantalla de autenticación de WordPress predeterminada con opciones de personalización de la izquierda y vista previa en vivo. Para reemplazar el logotipo de WordPress con el suyo, haga clic en la pestaña “Opciones de logotipo” a la derecha. Desde aquí, puede ocultar el logotipo de WordPress, puede cargar su propio logotipo personalizado, puede cambiar la URL y el texto del logotipo. La placa también le permite personalizar completamente la página de autenticación de WordPress predeterminada. Puede agregar columnas, imágenes de fondo, puede cambiar los colores del formulario de conexión y más. Básicamente, puede crear una página de autenticación de WordPress personalizada sin cambiar la URL de WordPress predeterminada. Después de haber terminado, hacer clic en el botón de publicación para guardar los cambios. Ahora puede visitar la página de inicio de sesión de WordPress para ver su formulario de inicio de sesión personalizado en acción.
Cambie el logotipo de URL de WordPress No Plugin (código) y el logotipo de WordPress en el logotipo de WordPress con su propio logotipo personalizado. Primero, debe cargar el logotipo personalizado en la biblioteca de medios. Access Media »Agregue una nueva página y cargue su logotipo personalizado. Después de haber cargado la imagen, haga clic en el enlace “Editar” al lado. Esto abrirá la página de edición de medios, donde necesita copiar la URL del archivo e insertarla en un archivo de texto vacío en su computadora. Luego, debe agregar el siguiente código al archivo Functions.php de su base o a un complemento específico para el sitio. Función WPB_LOGIN_LOGO () {?>
#login h1 a, .login h1 a {
background-image: url (http: //path/to/your/custom-logo.png); altura: 100px;
Ancho: 300px;
Tamaño de fondo: 300px 100px;
Background-Read: No-Reed;
Bottom: 10px;
}
<? Php}
add_action ('login_enqueue_scripts', 'wpb_login_logo');
Recuerde reemplazar la URL de la imagen de fondo con la URL del archivo que copió anteriormente. También puede ajustar otras propiedades CSS para que coincidan con la imagen del logotipo personalizada. Ahora puede visitar la página de autenticación de WordPress para ver el logotipo personalizado en acción.
Este código solo reemplaza el logotipo de WordPress. No cambia el enlace del logotipo, lo que indica el sitio web de WordPress.org. Cambiemos eso. Simplemente agregue el siguiente código al archivo Functions.php de su base o un complemento específico para el Sitio. Puede agregar este código directamente en el código que agregó anteriormente.
regresar home_url ();
}
add_filter ('login_headurrl', 'wpb_login_logo_url');
Función wpb_login_logo_url_title () {
devolver 'nombre e información de su sitio';
}
add_filter ('login_headertitle', 'wpb_login_logo_url_title');
