homefinance blog
La página de autenticación de WordPress no es muy acogedora, ¿no? Es más como una puerta aburrida en un callejón que espectacular. Pero la forma en que inicia a los usuarios en la parte secreta de su sitio es importante, especialmente si tiene algo especial allí. El portal a través del cual las personas ingresan a su mundo ayuda a aumentar la anticipación y esperar su atención a lo que hay dentro. Marcar su página de inicio de sesión de WordPress puede ayudarlo a mejorar su contenido protegido y el panel de administración de WordPress, diciéndole al visitante que este no es un sitio regular de WordPress.
En esta publicación, le mostraré lo que implica la construcción de una página de autenticación de WordPress personalizada. Luego le mostraré cómo hacer los cambios utilizando el código CSS y/o PHP, para aquellos de ustedes que desean el control total o simplemente desean cambiar algo pequeño. Luego, abordaremos cómo hacer cambios en Branda (antiguo complemento Ultimate Branding), que le permitirá personalizar completamente el formulario de autenticación, rápidamente y sin alcanzar ningún código. También tenemos un video rápido que le muestra exactamente cómo configurar Branda, así que manténgase cuidado o sigue adelante.
Contenido Cómo personalizar los diferentes elementos de la página de conexión con CSS y PHP:
Cómo agregar CSS personalizado a su página de inicio de sesión
WordPress Connecting Elements CSS Selector
Un curso intensivo en CSS
Cómo cambiar la página de autenticación de su administrador con PHP
Cómo personalizar los diferentes elementos de la página de conexión utilizando Branda:
Logotipo en la pantalla de inicio de sesión
Los antecedentes de la página de inicio de sesión
Forma de autenticación
Caso de selección de Meri-Messej de error
Enlaces en el formulario de inicio de sesión de WordPress
Redirección de la autenticación
Página de conectación de WordPress La página de autenticación de WordPress es la misma que cualquier otra página en su sitio de WordPress:
Puede cambiar el estilo y los colores editando el artículo con CSS
Puede cambiar la funcionalidad o agregar, disminuir y mover elementos cambiando la apariencia usando ganchos y filtros en el PHP.
Cómo agregar CSS personalizado a su página de autenticación de WordPress Su página de inicio de sesión de WordPress no utiliza la hoja de estilo que se incluye con su tema. Esto significa que si intenta agregar CSS para personalizar la página de conexión en el archivo Styles.css desde su tarea carpeta, los cambios no aparecerán. Deberá agregar sus estilos CSS personalizados al jefe de la página de autenticación de PHP.
Si solo tiene unas pocas filas de CSS, puede crear una función personalizada y usar el gancho login_enqueue_scripts para insertar CSS en la página de conexión.
Cargue la idea 8F5912DC5ED2138803B75B4A4E76A0B1
En el ejemplo anterior, quiero eliminar el enlace de nuevo al formulario de inicio de sesión. Cambio solo una cosa, pero puedes personalizar más elementos entre las etiquetas . Para que este CSS personalizado lo cargue, agregué mi característica personalizada con todos los CSS personalizados al inicio de sesión utilizando login_enqueue_scripts. Agregaría todo el código anterior al archivo Functions.php, solo excluye la apertura <? Php.
Esta es una forma simple de agregar algunos estilos.Si desea realizar muchos cambios, le sugiero que cree una hoja de estilo adicional en los archivos temáticos para que sea más fácil de administrar.Para agregar una hoja de estilo personalizada al cabezal de la página de autenticación, en lugar de usar etiquetas en su función, usará wp_enqueue_style para cargar la hoja de estilo. Cargue la idea fdacb1b790fed115ce8172a2e2f4e2e2e
En el ejemplo anterior, el archivo CSS personalizado de mi tema en el que agregaré las personalizaciones para mi página de conexión se llama style-login.css.Agregaré mi CSS a style-login.css y style-login.css Agregue el código anterior a mi archivo de características para cargarlo.
Los elementos de la página de conexión de WordPress, por lo tanto, así es como se ve la página de autenticación de WordPress predeterminada:
Sin baratijas, sin sensaciones fuertes para personalizar cada elemento con CSS, deberá poder dirigirlo con su selector. En otras palabras, necesitas saber su nombre. Aquí hay algunos selectores específicos para la página de inicio de sesión y lo que controlan: Cambios de selección
un curso intensivo en CSS bien, ¿encontró el elemento al que quieres apuntar?
Bien. Si está familiarizado con CSS, sabe a dónde ir desde aquí, para que pueda omitir esta sección. Todos los demás me siguen. Aquí le mostramos cómo personalizar los elementos con CSS. Si te quedas bloqueado, déjanos un comentario. Si está frustrado y desea una solución fácil, intente Branda. Cómo eliminar un elemento para ocultar un elemento, como el enlace de regreso a, como hice anteriormente, puede usar la pantalla: Ninguno; Aquí le mostramos cómo ocultar el enlace para la contraseña perdida, por ejemplo.
Cargue la idea 8BAF5851DF3D8AAA69A64D65040B0FB9A
Cómo cambiar el fondo para cambiar el color de fondo de un elemento, como el fondo o el fondo de fondo, utilizará el color de fondo:#222222; y reemplace #222222 con el color deseado. En el siguiente ejemplo, utilicé #17A8E3, que es un azul más ligero. ¡También lo uso! Es importante anular el color predeterminado. Si usa un selector muy específico, ¡no necesitará usar! Importante. Pero en algunos casos, si su CSS personalizado no funciona, es posible que deba agregarlo.
La idea se carga 52D80F1C8A5EEB0361F6BEBD2E524561
Si desea agregar una imagen de fondo, utilizará la imagen de fondo: URL (‘Login-Ogo.png’); y reemplace login-logo.pnp con la URL del archivo de imagen. Asegúrese de agregar el archivo de fondo al mismo directorio que la hoja de estilo. Si usa el programa de carga de la biblioteca de medios, no funcionará. En el ejemplo a continuación, verá que hemos cambiado el fondo gris suave de la página de conexión a una imagen home-bg.jpg
La idea se carga 43B5ACF33693153C93A2629AFB4C138A
Para cambiar el logotipo de inicio de sesión de WordPress, usará lo siguiente:
Cargue la idea 2AE179A0BA12280E60E01650D552D60 A ahora para agregar espacio alrededor de un elemento al agregar espacio a un elemento, debe especificar si desea que el espacio esté dentro (revestimiento) o fuera (margen) del elemento. Piense en el botón de envío. Si desea crear más espacio dentro del botón, para que el texto interno tenga un espacio para respirar y no esté tan cerca de los bordes, deberá aumentar el relleno: 10px 10px 10px 10px; . Si desea crear espacio fuera del botón, para que otros elementos no estén tan cerca, aumentará el margen de margen: 10px 10px 10px 10px;
El relleno y el borde tienen cuatro valores. Uno para arriba, uno para la derecha, uno para el fondo y otro para el lado izquierdo, en este orden. Por ejemplo, para un elemento de relleno: 10px 20px 30px 40px:
La superficie superior será de 10 píxeles.
El lado derecho tendrá un relleno de 20 px.
El fondo tendrá un llenado de 30 px.
Y el lado izquierdo tendrá un relleno de 40 px.
El margen funciona de la misma manera. Cómo cambiar el tamaño y el color de la fuente Cambiar el tamaño de la fuente de texto, los enlaces o la forma de forma con el tamaño de la fuente: 16px; . Simplemente reemplace 16px con el tamaño deseado. Puede cambiar el color del texto con color:#222222; , Reemplace solo #222222.
La idea 7BC9B9E348541EF71AADC4B5DDBFA15F está cargada.
Además, tenga en cuenta que puede agregar más estilos a un elemento. Cómo cambiar el borde del borde es un borde: 2px Solid #222222; estilo que consta de tres partes de borde: 2px Solid #222222; . Primero especificará el ancho del borde, luego el estilo (sólido, punteado, etc.) y terminará especificando el color aquí hay un ejemplo con varios estilos.
Cargue la idea 2DF4286A43E99EA1E52BBF9EC54D1FCUC Para cambiar la página de autenticación de su administrador de PHP para cambiar la funcionalidad de la página de autenticación de WordPress, deberá usar PHP. Agregará estas funciones al archivo functions.php. Cambie el mensaje de error de inicio de sesión Además de marcar su mensaje de error, cambiar el mensaje de error puede ayudar a mejorar la seguridad de su sitio si ingresa una contraseña o nombre de usuario incorrecto, WordPress devolverá un mensaje de error muy específico para informarle lo que estaba equivocado. Esto ayuda a los usuarios, pero también ayuda a los piratas informáticos. Puede usar esta función para reemplazar el mensaje de error predeterminado:
Cargue la idea 06250D06F513A9D2DDBD20FFA33FA06F
Puede personalizar el mensaje cambiando el mensaje “Detalles de conexión incorrectos” que está entre comillas. Sin embargo, deje comillas. Cambie la URL de redirección Cuando el usuario se conecta, puede redirigirla al front-end en lugar del tablero, que está sucediendo de forma predeterminada. Para redirigir al usuario a la página inicial, agregue lo siguiente al archivo Functions.php:
Cargue el esencial D31C6F8C031F656D468EA0FCBB09C148
Establecer Recuérdeme para verificar la casilla de verificación Recuerdo que me desinflan de forma predeterminada, pero si tiene usuarios olvidadizos que no lo marcan, puede activarlo automáticamente. Para que siempre deje esta casilla, agregue este fragmento a las funciones.php:
La idea se carga 35449116E96AidABE5B7F27AF2884FA6
Como puede ver, cuando se trata de darle un control supremo sobre el estilo de su página, CSS es el lugar donde está. Pero si desea cambiar el aspecto o cambiar el nombre de los elementos, se vuelve mucho más difícil porque necesita usar PHP. Aquí Branda puede ayudarlo enormemente. Veamos cómo cambiar su página de autenticación usando Branda. Cómo usar Branda para personalizar el sitio de WordPress Branda puede ayudarlo a hacer más que simples personalizaciones. Mire este video sobre cómo usar Branda para revisar completamente la página de inicio de sesión de WordPress. Verá Micah pasando por cada paso para que tenga una buena imagen general y sepa exactamente lo que debe hacer. Luego te mostraré todas las diferentes opciones en detalle a continuación. En primer lugar, deberá instalar el complemento Branda en su sitio. Luego debe activar el módulo personalizado de la pantalla de inicio de sesión desde el tablero de Branda.
Haga clic en el icono del lápiz para activar la pantalla de personalización del módulo de página de personalización se divide en 6 secciones
Plantilla: le permite cambiar la conexión de la página de inicio de sesión
Contenido: aquí puede mostrar/ocultar elementos o cambiar su formulación o cargar imágenes personalizadas
Diseño: cambie los bordes, bordes, opacidad, prácticamente el estilo de diferentes elementos
Colores: cambie el color de cualquier artículo aquí
Redirección: establezca dónde desee dirigir al visitante cuando se conecta o desconecte
CSS personalizado: agregue su propio código o modifique el código que genera Branda a medida que crea su formulario de conexión personalizado. ¿Por qué no usar el CSS que acaba de aprender? Déjame enseñarte cómo hacer algunas personalizaciones comunes usando Branda. Aquí le mostramos cómo personalizar lo siguiente:
Cambiar el logotipo de WordPress
Los antecedentes de la página de inicio de sesión
Forma de autenticación
Seleccione el cuadro Recuérdame
Mensaje de error
Enlaces en el formulario de inicio de sesión de WordPress
Redirección de la autenticación
Cambie el logotipo de inicio de sesión de WordPress a Branda, para cambiar el logotipo de inicio de sesión de WordPress e ingrese su contenido, acceda a la sección de contenido y abra el logotipo y el menú de fondo de pantalla. Desde allí, puede cargar una imagen o ingresar una URL si su imagen está alojada en otro lugar. También puede eliminar completamente el logotipo si desea un aspecto mínimo.
Su logotipo debe tener un ancho de 320 PX. Si tiene un logotipo más grande, consulte la sección a continuación. Si realmente desea empujar su logotipo en un formulario más único, vaya a la sección de diseño de Branda y abra el menú de logotipo desplegable. Desde allí, puede ajustar al ancho del contenedor del logotipo para alojar un logotipo más amplio. También puede cambiar la posición, la opacidad, el radio de esquina y los registros.
¿Tiene un logotipo más grande o menos de 320 px? No hay problema, solo ajuste el contenedor personalizando la página de conexión del sitio de WordPress en Branda, puede cambiar el fondo gris suave a un color. Para cambiar el color, vaya a la sección de color y abra el menú de fondo.
Gray ya no para usar una imagen, accederá a la sección de contenido, luego abrirá el logotipo y el fondo. Desde allí puedes subir una nueva imagen. Branda también le brinda la opción de cargar más imágenes y crear una presentación de diapositivas o mostrar una imagen aleatoria cada vez. Para usar más imágenes, desplácese hacia abajo hasta el diseño y abra el fondo para configurar. Haga un gran impacto con una imagen de fondo personalizada personalizando el formulario de inicio de sesión de WordPress. Desea saber cómo crear una autenticación de clientes en WordPress? ¡Cambie el nombre de las etiquetas de sus campos! En Branda, vaya a Contenido> Formulario para cambiar el nombre de los campos introductorios para el nombre de usuario y la contraseña en el formulario de conexión personalizado. ¡Puede usar la identificación del cliente, el número de membresía o el nombre del superhéroe, lo que sea!
Marque sus campos de formulario Puede personalizar el aspecto del formulario con Branda. Vaya a Diseño> Formulario para editar el borde, el relleno, el borde, el rayo de esquina y la sombra. También puede cambiar el botón en el mismo lugar. Ajuste el radio del borde del botón o ajuste las sombras de los botones.
Cambie la forma de la forma misma para editar los colores de la forma, como los colores del texto, los colores del borde, etc., irá a colores> Formularios
Observe las pestañas para cambiar los colores de los estados activos, el enfoque y el desplazamiento. Cambiar el cuadro de selección de recordarme en la pantalla de inicio de sesión de WordPress Branda facilita el cuadro de verificación o ocultación automática de Remember Me desde el formulario de conexión. Vaya a la sección de contenido y abra la sección del formulario. Allí, podrás mostrar u ocultar la caja, recordarme. Si elige mostrarlo, entonces puede marcar automáticamente el cuadro de selección. Hasta que esté en mis brazos nuevamente, recuerde personalizar el mensaje de error del sitio de WordPress AH, no hay nada como mensaje de error que lo haga sentir como usted. No sé lo que estás haciendo. Afortunadamente, Branda puede ayudarlo a aliviar sus mensajes de error o hacerlos más útiles. En Branda, vaya a Contenido> Mensaje de error para cambiar. Puede usar HTML en el mensaje para mayor claridad o énfasis.
Consejo profesional, si cambia el nombre de los campos de formulario, cambie el mensaje de error para que coincida para cambiar el estilo de mensaje, puede cambiar la opacidad del contenedor accediendo al mensaje de error de diseño>. Para cambiar los colores de los mensajes de error, vaya a Colors> Mensaje de error.
Observe las pestañas para cambiar los colores de los estados activos, el enfoque y el desplazamiento. Personalización de los enlaces en el formulario de conexión de WordPress en Branda, puede elegir ocultar los enlaces en el formulario de conexión personalizado, accediendo a los enlaces de contenido en el formulario. Puede ocultar el enlace de registro/contraseña perdida, el enlace de la política de privacidad o el enlace de regreso al enlace.
No puede esconderse de mí, puede ajustar el color de los enlaces en el formulario de autenticación con Branda accediendo a colores> enlaces bajo el formulario, el enlace personalizando la redirección de WordPress en Branda, puede cambiar el lugar donde el formulario de autenticación redirigirá el Usuario en la sección de redirección.
Cambie donde el visitante irá después de conectar o desconectar esto es como puede ver, hay varias formas de crear una página de conexión. Personalizar la conexión de su sitio es una manera fácil de deleitar a sus usuarios y hacer una declaración. Si desea cambiar algunas cosas y se siente cómodo con PHP y CSS, puede editar sus archivos directamente. Pero si realmente desea hacer todo, Branda puede ayudarlo a llevar su página de autenticación al siguiente nivel. Pero, ¿por qué detenerse aquí, WPMU Dev le ofrece lo que necesita para etiquetar todas las cosas? Es un toque muy agradable para sitios personalizados. Si desea probar Branda y ver lo que he agregado desde que revisé Ultimate Branding, puede descargar el complemento de forma gratuita. Lo amarás. Ella será tu nueva mejor amiga.
¿Has intentado marcar tu página de autenticación? ¿Qué opinas sobre el nuevo complemento de Branda?
Etiquetas:
área administrativa
Brandi
Marca
código
Tags Cómo personalizar completamente la página de inicio de sesión de WordPress
