Personalizar wp_login_form

Un usuario preguntó 👇

Hola, como usuario que no ha iniciado sesión, debería ver un formulario de inicio de sesión en el encabezado del sitio web al que vinculé este hilo. Usé este código para lograrlo:

<?php if ( is_user_logged_in() ) { ?>
    <?php } 
else { ?>
    <?php wp_login_form( $args ); ?>
<?php 
} ?>

Ahora quiero personalizar la apariencia. Algunas cosas que podría cambiar: alinee el texto y la forma a la derecha con este CSS:

#loginform{
	text-align: right; 
	float: right;
}
#loginform #label{
	display: none;
}

Aún me gustaría eliminar el informe «Benutzername und E-Mailadresse» y «Passwort» y colocar estos textos como un lugar dentro del nombre de usuario y en el cuadro de contraseña.

Desafortunadamente, no sé cómo hacer esto. Estaría muy agradecido por tu ayuda. Gracias.

(@bcworkz)

Hace 1 año, 9 meses

Su código no muestra los $ args reenviados a wp_login_form (). Puede cambiar las etiquetas de los formularios mediante el uso de elementos de matriz específicos en $ args. Consulte https://codex.wordpress.org/Customizing_the_Login_Form#Make_a_Custom_Login_Page

Lanzador de hilos

(@ bb23)

Hace 1 año, 9 meses

Gracias por su ayuda. Ahora pude quitar las etiquetas. Ahora, mientras quitaba las etiquetas, faltaba un ocupante en el cuadro de nombre de usuario y contraseña. ¿Alguna idea de cómo lograr esto?

(@crouchingbruin)

Hace 1 año, 9 meses

Puedes probar este jQuery:

<script type="text/javascript">
jQuery(document).ready(function( $ ){
	$("#user_login").val('User ID');
	$("#user_login").on("focus", function(){this.value='';});
	$("#user_pass").val('Password');
	$("#user_pass").on("focus", function(){this.value='';});
});
</script>

Esto establecerá el valor del campo ID de usuario en «ID de usuario» y el campo Contraseña en «Contraseña», así como un controlador de eventos que borrará los campos cuando el campo reciba el foco. Sin embargo, el problema es que el campo de contraseña es un tipo de contraseña, por lo que el ocupante está oculto.

Esta respuesta fue modificada hace 1 año, 9 meses por. Esta respuesta fue modificada hace 1 año, 9 meses. Lanzador de hilos

(@ bb23)

Hace 1 año, 9 meses

gracias por la respuesta. Desafortunadamente, no me funciona. Pero tal vez no pueda poner jQuery correctamente. Creé un archivo en mi directorio Themes / “myTheme” / assets / js, llamé al archivo script_new.js y pegué su código en él. Luego, con mi functions.php agregué este código al final:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'script_new', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/assets/js/script_new.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Esto no me hace ningún cambio. Yo tambien lo probé script_new.js en mi functions.php ¿Instalé jQuery correctamente?

Esta respuesta fue modificada hace 1 año, 9 meses.

(@bcworkz)

Hace 1 año, 9 meses

Se ve bien siempre que no esté utilizando un tema hijo. Verifique que jQuery esté cargado buscando etiquetas de script con URL de atributo src que lleven a /wp-includes/js/jquery/jquery.js y jquery-migrate.js en el código fuente HTML de la página.

También habrá un atributo src para su archivo JS. Asegúrese de que su archivo real provenga de la URL.

Si todo eso está comprobado, consulte la consola JS de su navegador para obtener sugerencias adicionales.

Lanzador de hilos

(@ bb23)

Hace 1 año, 9 meses

Algo que nunca hice cuando analicé el código fuente HTML. Pero encontré las URL de las que vino /wp-includes/js/jquery/jquery.js e incluso mi script_new:
https://imgur.com/a/N1IoD4N
La comprobación de la consola puede haber revelado el error.
https://imgur.com/a/0IjPuNb
Cambié el código a:

jQuery(document).ready(function( $ ){
	$("#user_login").val('User ID');
	$("#user_login").on("focus", function(){this.value='';});
	$("#user_pass").val('Password');
	$("#user_pass").on("focus", function(){this.value='';});
});

ahora muestra el marcador de posición para el nombre de usuario. La contraseña está censurada para la contraseña. ¿Existe alguna posibilidad de hacer visible al ocupante censurando la entrada del usuario? Gracias

Esta respuesta fue modificada hace 1 año, 9 meses.

(@crouchingbruin)

Hace 1 año, 9 meses

Cambie el código a:

jQuery(document).ready(function( $ ){
	$("#user_login").val('User ID');
	$("#user_login").on("focus", function(){this.value='';});
	$("#user_pass").attr('type', 'text');
	$("#user_pass").val('Password');
	$("#user_pass").on("focus", function(){this.value='';document.getElementById('user_pass').type = 'password';});
});

Lanzador de hilos

(@ bb23)

Hace 1 año, 9 meses

¡Muchos gracias! Exactamente lo que estaba buscando

Esta respuesta fue modificada hace 1 año, 9 meses por.