¿Cómo mostrar el formulario de registro de usuario de WordPress en la parte frontal del sitio web?
-
-
Lamejor solución queencontrées [Plugin Theme My Login] (http://wordpress.org/extend/plugins/theme-my-login/).Best solution i found is [Theme My Login plugin](http://wordpress.org/extend/plugins/theme-my-login/).
- 0
- 2011-02-24
- wyrfel
-
este [artículo] (http://digwp.com/2010/12/login-register-password-code/)proporciona ungrantutorial sobre cómo crear suspropiosformulariosfrontend de registro/inicio de sesión/restauración de contraseña.o siestábuscando un complemento,los he usado antes ypuedo recomendarlos: - [Inicio de sesión/registro de Ajax] (http://wordpress.org/extend/plugins/ajax-loginregister/) - [Iniciar sesión con Ajax] (http://wordpress.org/extend/plugins/login-with-ajax/)this [Article](http://digwp.com/2010/12/login-register-password-code/) provides a greate tutorial on how to create you own frontend register/login/restore password forms. or if you are looking for a plugin then i've used these before and can recomend them: - [Ajax Login/Register](http://wordpress.org/extend/plugins/ajax-loginregister/) - [Login With Ajax](http://wordpress.org/extend/plugins/login-with-ajax/)
- 0
- 2011-02-24
- Bainternet
-
Cristian de Cosmolabs hapublicado unexcelente [tutorial] (http://www.cozmoslabs.com/2010/05/31/wordpress-user-registration-template-and-custom-user-profile-fields/) con archivosfuente quelebrinda laposibilidad de crear unperfil de usuario,plantillas deinicio de sesión y registro defront-end.Cristian from Cosmolabs have post a great [tutorial](http://www.cozmoslabs.com/2010/05/31/wordpress-user-registration-template-and-custom-user-profile-fields/) with source files that give you the ability to build a front-end User Profile, Login and Register templates.
- 0
- 2011-02-24
- Philip
-
5 respuestas
- votos
-
- 2012-01-30
TLDR; Coloqueel siguienteformularioen sutema,los atributos
name
yid
sonimportantes:& lt;form action="& lt;?phpecho site_url ('wp-login.php? action=register','login_post')? >"método="publicar" > & lt;inputtype="text"name="user_login" value="Username"id="user_login" class="input"/> & lt;inputtype="text"name="user_email" value="E-Mail"id="user_email" class="input"/> & lt;?php do_action ('formulario_registro');? > & lt;inputtype="submit" value="Register"id="register"/> & lt;/form >
Encontré unexcelente artículo de Tutsplusen Crear unformulario de registro de Wordpresselegante desde cero . Esto dedica unagranparte de sutiempo a diseñarelformulario,perotiene la siguiente secciónbastante simple sobreel código requerido de WordPress:
Paso 4. WordPress
No haynadaelegante aquí; solo requerimos dosfragmentos de WordPress, oculto dentro del archivo wp-login.php.
Elprimerfragmento:
& lt;?phpecho site_url ('wp-login.php? action=register','login_post')? >
Y:
& lt;?php do_action ('register_form');? >
Editar: agregué lapartefinal adicional del artículoparaexplicar dónde colocar losfragmentos de código anteriores;es solo unformulariopara quepuedairen cualquierplantilla depágina obarra lateral o hacer un shortcodefuera de él. La secciónimportanteesel
formulario
que contiene losfragmentos anteriores y los campos obligatoriosimportantes.El códigofinal debería verse así:
& lt; div style="display:none" > & lt;! - Registro - > & lt; divid="formulario de registro" > & lt; div class="título" > & lt; h1 > Registre su cuenta & lt;/h1 > & lt; span > ¡Regístrese connosotros y disfrute! & lt;/span > & lt;/div > & lt;form action="& lt;?phpecho site_url ('wp-login.php? action=register','login_post')? >"método="publicar" > & lt;inputtype="text"name="user_login" value="Username"id="user_login" class="input"/> & lt;inputtype="text"name="user_email" value="E-Mail"id="user_email" class="input"/> & lt;?php do_action ('formulario_registro');? > & lt;inputtype="submit" value="Register"id="register"/> & lt; hr/> & lt;p class="statement" > Se leenviará una contraseñapor correoelectrónico. & lt;/p > & lt;/form > & lt;/div > & lt;/div > & lt;! -/Registro - >
Tengaen cuenta quees muyimportante ynecesariotener
user_login
comonombre
y comoid
atributoen suentrada detexto; lomismo ocurre con laentrada de correoelectrónico. De lo contrario,nofuncionará.¡Y coneso,hemosterminado!
TLDR; Put the following form into your theme, the
name
andid
attributes are important:<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post"> <input type="text" name="user_login" value="Username" id="user_login" class="input" /> <input type="text" name="user_email" value="E-Mail" id="user_email" class="input" /> <?php do_action('register_form'); ?> <input type="submit" value="Register" id="register" /> </form>
I found an excellent Tutsplus article on Making a fancy Wordpress Register Form from scratch. This spends quite a lot of its time on styling the form, but has the following fairly simple section on the required wordpress code:
Step 4. WordPress
There is nothing fancy here; we only require two WordPress snippets, hidden within the wp-login.php file.
The first snippet:
<?php echo site_url('wp-login.php?action=register', 'login_post') ?>
And:
<?php do_action('register_form'); ?>
Edit: I've added the extra final bit from the article to explain where to put the above code snippets - its just a form so it can go in any page template or sidebar or make a shortcode out of it. The important section is the
form
which contains the above snippets and the important required fields.The final code should look like so:
<div style="display:none"> <!-- Registration --> <div id="register-form"> <div class="title"> <h1>Register your Account</h1> <span>Sign Up with us and Enjoy!</span> </div> <form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post"> <input type="text" name="user_login" value="Username" id="user_login" class="input" /> <input type="text" name="user_email" value="E-Mail" id="user_email" class="input" /> <?php do_action('register_form'); ?> <input type="submit" value="Register" id="register" /> <hr /> <p class="statement">A password will be e-mailed to you.</p> </form> </div> </div><!-- /Registration -->
Please note that it's really important, and necessary, to have
user_login
as aname
and as anid
attribute in your text input; the same is true for the email input. Otherwise, it won't work.And with that, we're done!
-
¡Gran solución!Sencillo yeficaz.¿Pero dóndeponesesosfragmentos?¿En unabarra lateral?Este consejoparecefuncionar solo con unformulario de registro ajax.Great solution ! Simple and efficient. But where do you put those snippets ? In a sidebar ? This tip seams to only work with an ajax registration form.
- 0
- 2014-03-17
- Fabien Quatravaux
-
Gracias @FabienQuatravaux,he actualizado la respuestaparaincluir la última sección del artículo.No debería habernecesidad de unformulario AJAX,es solo unformulario POST que seenvía a lapágina `wp-login.php? Action=register`Thanks @FabienQuatravaux, I've updated the answer to include the last section of the article. There should be no need for an AJAX form - its just a POST form that submits to the `wp-login.php?action=register` page
- 1
- 2014-03-18
- icc97
-
- 2011-02-24
este artículo proporciona ungrantutorial sobre cómo crear supropio registro/inicio de sesión defrontend/restaurarformularios de contraseña.
o siestábuscando un complemento,los he usado antes ypuedo recomendarlos:
this Article provides a greate tutorial on how to create you own frontend register/login/restore password forms.
or if you are looking for a plugin then i've used these before and can recomend them:
-
- 2014-03-12
Creé un sitio web hace algúntiempo quemostraba unformulario de registropersonalizadoen lapartefrontal. Este sitio web yanoestá activo,pero aquí hay algunas capturas depantalla.
Estos son lospasos que he seguido:
1) Active laposibilidad de quetodos los visitantes soliciten unanueva cuenta através de Configuración> General> opción Membresía. Lapágina de registro ahora apareceen la URL/wp-login.php?action=register
2) Personaliceelformulario de registropara que separezca a lainterfaz de usuario de su sitio. Estoesmás complicado y depende deltema queestés usando.
Aquí hay unejemplo con veintitrés:
// include theme scripts and styles on the login/registration page add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles'); // remove admin style on the login/registration page add_filter( 'style_loader_tag', 'user16975_remove_admin_css', 10, 2); function user16975_remove_admin_css($tag, $handle){ if ( did_action('login_init') && ($handle == 'wp-admin' || $handle == 'buttons' || $handle == 'colors-fresh')) return ""; else return $tag; } // display front-end header and footer on the login/registration page add_action('login_footer', 'user16975_integrate_login'); function user16975_integrate_login(){ ?><div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </a> <div id="navbar" class="navbar"> <nav id="site-navigation" class="navigation main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3> <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> <?php get_search_form(); ?> </nav><!-- #site-navigation --> </div><!-- #navbar --> </header><!-- #masthead --> <div id="main" class="site-main"> <?php get_footer(); ?> <script> // move the login form into the page main content area jQuery('#main').append(jQuery('#login')); </script> <?php }
Luego,modifique la hoja deestilo deltemapara queelformulario aparezca como desea.
3) Puedemodificar aúnmáselformulario ajustando losmensajesmostrados:
add_filter('login_message', 'user16975_login_message'); function user16975_login_message($message){ if(strpos($message, 'register') !== false){ $message = 'custom register message'; } else { $message = 'custom login message'; } return $message; } add_action('login_form', 'user16975_login_message2'); function user16975_login_message2(){ echo 'another custom login message'; } add_action('register_form', 'user16975_tweak_form'); function user16975_tweak_form(){ echo 'another custom register message'; }
4) Sinecesita unformulario de registro defront-end,probablementeno querrá que los usuarios registrados veanelback-end cuandoinician sesión.
add_filter('user_has_cap', 'user16975_refine_role', 10, 3); function user16975_refine_role($allcaps, $cap, $args){ global $pagenow; $user = wp_get_current_user(); if($user->ID != 0 && $user->roles[0] == 'subscriber' && is_admin()){ // deny access to WP backend $allcaps['read'] = false; } return $allcaps; } add_action('admin_page_access_denied', 'user16975_redirect_dashbord'); function user16975_redirect_dashbord(){ wp_redirect(home_url()); die(); }
¡Haymuchospasos,peroel resultadoestá aquí!
I made a website some time ago that was displaying a customized registration form on the front end side. This website is not live anymore but here are some screenshots.
Here are the steps I have followed:
1) Activate the possibility for all visitors to request a new account via Settings > General > Membership option. The registration page now appears at the URL /wp-login.php?action=register
2) Customize the registration form so that it looks like your site front-end. This is more tricky and depends on the theme you are using.
Here is an example with twentythirteen :
// include theme scripts and styles on the login/registration page add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles'); // remove admin style on the login/registration page add_filter( 'style_loader_tag', 'user16975_remove_admin_css', 10, 2); function user16975_remove_admin_css($tag, $handle){ if ( did_action('login_init') && ($handle == 'wp-admin' || $handle == 'buttons' || $handle == 'colors-fresh')) return ""; else return $tag; } // display front-end header and footer on the login/registration page add_action('login_footer', 'user16975_integrate_login'); function user16975_integrate_login(){ ?><div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </a> <div id="navbar" class="navbar"> <nav id="site-navigation" class="navigation main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3> <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> <?php get_search_form(); ?> </nav><!-- #site-navigation --> </div><!-- #navbar --> </header><!-- #masthead --> <div id="main" class="site-main"> <?php get_footer(); ?> <script> // move the login form into the page main content area jQuery('#main').append(jQuery('#login')); </script> <?php }
Then modify the theme stylesheet to make the form appear as you want.
3) You can further modify the form by tweaking the displayed messages :
add_filter('login_message', 'user16975_login_message'); function user16975_login_message($message){ if(strpos($message, 'register') !== false){ $message = 'custom register message'; } else { $message = 'custom login message'; } return $message; } add_action('login_form', 'user16975_login_message2'); function user16975_login_message2(){ echo 'another custom login message'; } add_action('register_form', 'user16975_tweak_form'); function user16975_tweak_form(){ echo 'another custom register message'; }
4) If you need a front-end registration form, you will probably don't want that registered users see the backend when they log-in.
add_filter('user_has_cap', 'user16975_refine_role', 10, 3); function user16975_refine_role($allcaps, $cap, $args){ global $pagenow; $user = wp_get_current_user(); if($user->ID != 0 && $user->roles[0] == 'subscriber' && is_admin()){ // deny access to WP backend $allcaps['read'] = false; } return $allcaps; } add_action('admin_page_access_denied', 'user16975_redirect_dashbord'); function user16975_redirect_dashbord(){ wp_redirect(home_url()); die(); }
There are lots of steps, but the result is here !
-
- 2014-08-26
Muchomásfácil: use unafunción de WordPress llamada
wp_login_form()
(página del Codex aquí ).Puede crear supropio complementoparapoder utilizar un código abreviadoen una de suspáginas:
<?php /* Plugin Name: WP Login Form Shortcode Description: Use <code>[wp_login_form]</code> to show WordPress' login form. Version: 1.0 Author: WP-Buddy Author URI: http://wp-buddy.com License: GPLv2 or later */ add_action( 'init', 'wplfsc_add_shortcodes' ); function wplfsc_add_shortcodes() { add_shortcode( 'wp_login_form', 'wplfsc_shortcode' ); } function wplfsc_shortcode( $atts, $content, $name ) { $atts = shortcode_atts( array( 'redirect' => site_url( $_SERVER['REQUEST_URI'] ), 'form_id' => 'loginform', 'label_username' => __( 'Username' ), 'label_password' => __( 'Password' ), 'label_remember' => __( 'Remember Me' ), 'label_log_in' => __( 'Log In' ), 'id_username' => 'user_login', 'id_password' => 'user_pass', 'id_remember' => 'rememberme', 'id_submit' => 'wp-submit', 'remember' => false, 'value_username' => NULL, 'value_remember' => false ), $atts, $name ); // echo is always false $atts['echo'] = false; // make real boolean values $atts['remember'] = filter_var( $atts['remember'], FILTER_VALIDATE_BOOLEAN ); $atts['value_remember'] = filter_var( $atts['value_remember'], FILTER_VALIDATE_BOOLEAN ); return '<div class="cct-login-form">' . wp_login_form( $atts ) . '</div>'; }
Todo lo quetienes que haceres diseñartuformularioen lainterfaz.
Way easier: use a WordPress function called
wp_login_form()
(Codex page here).You can make your own plugin so that you can use a shortcode in on of your pages:
<?php /* Plugin Name: WP Login Form Shortcode Description: Use <code>[wp_login_form]</code> to show WordPress' login form. Version: 1.0 Author: WP-Buddy Author URI: http://wp-buddy.com License: GPLv2 or later */ add_action( 'init', 'wplfsc_add_shortcodes' ); function wplfsc_add_shortcodes() { add_shortcode( 'wp_login_form', 'wplfsc_shortcode' ); } function wplfsc_shortcode( $atts, $content, $name ) { $atts = shortcode_atts( array( 'redirect' => site_url( $_SERVER['REQUEST_URI'] ), 'form_id' => 'loginform', 'label_username' => __( 'Username' ), 'label_password' => __( 'Password' ), 'label_remember' => __( 'Remember Me' ), 'label_log_in' => __( 'Log In' ), 'id_username' => 'user_login', 'id_password' => 'user_pass', 'id_remember' => 'rememberme', 'id_submit' => 'wp-submit', 'remember' => false, 'value_username' => NULL, 'value_remember' => false ), $atts, $name ); // echo is always false $atts['echo'] = false; // make real boolean values $atts['remember'] = filter_var( $atts['remember'], FILTER_VALIDATE_BOOLEAN ); $atts['value_remember'] = filter_var( $atts['value_remember'], FILTER_VALIDATE_BOOLEAN ); return '<div class="cct-login-form">' . wp_login_form( $atts ) . '</div>'; }
All you have to do is to style your form on the frontend.
-
- 2014-03-18
Siestá abierto al uso de complementos,ya utilicéel complemento de registro de usuariopara Gravity Forms,funcionómuybien:
http://www.gravityforms.com/add-ons/user-registration/
Editar:me doy cuenta de queestanoes una soluciónmuy detallada,pero haceexactamente lo quenecesita yes unabuena solución.
Editar: Para ampliarmásmi respuesta,el complemento de registro de usuarioparaformularios degravedad lepermite asignar cualquier campoen unformulario creado conformularios degravedad a camposespecíficos del usuario. Porejemplo,puede crear unformulario connombre,apellido,correoelectrónico,sitio web,contraseña. Traselenvío,el complemento asignaráesasentradas a los campos de usuario relevantes.
Otragran ventajaes quepuede agregar cualquier usuario registrado a una cola de aprobación. Sus cuentas de usuario solo se crearían una vez que un administrador las aprobaraen elbackend.
Sielenlace anterior se rompe,simplemente Google "Complemento de registro de usuarioparaformularios Gravity"
If you're open to the use of plugins, I've used the User Registration add-on for Gravity Forms before, it worked very well:
http://www.gravityforms.com/add-ons/user-registration/
Edit: I realise this isn't a very detailed solution, but it does exactly what you need and is a good solution.
Edit: To expand on my answer further, the User Registration add-on for gravity forms allows you to map any fields in a form created using Gravity Forms, to user-specific fields. For example, you can create a form with First Name, Last Name, Email, Website, Password. Upon submission, the add-on will map those inputs to the relevant user fields.
Another great thing about it, is you can add any registered users into an approval queue. Their user accounts would only be created once approved in the backend by an admin.
If the above link breaks, just Google "User Registration add on for Gravity Forms"
-
¿Ha leído lasnotas que @kaiser agregó a lapregunta (lamíaen negrita): * "Estamosbuscando ** respuestas largas quebrinden algunaexplicación y contexto **. No solo dé una respuesta de una línea;expliquepor qué su respuestaes correcto,idealmente con citas. Las respuestas quenoincluyenexplicacionespuedeneliminarse "*Have you read notes @kaiser added to the question (bold mine): *"We're looking for **long answers that provide some explanation and context**. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed"*
- 2
- 2014-03-18
- gmazzap
-
Lo hice,pero sentí queel complemento aún vale lapenamencionarlo,ya queel OPnomenciona lanecesidad de codificarlo amedida.Feliz demoverlo a un comentario si lo creenecesarioI have, but I felt the add-on is still worth mentioning, as the OP doesn't mention a need to custom code it. Happy to move it to a comment if you feel it's necessary
- 0
- 2014-03-18
- James Kemp
-
No soy unmod,así quenopuedomovermepara comentartu respuesta.Solopuedo votaren contra,perono lo he hechoporque creo que suenlace contieneinformación útil,sinembargo,la respuesta de soloenlacenoes útil,inclusoporqueeseenlace sepuede cambiarfácilmente y,por lotanto,su respuesta lleva a un 404.Intenteinformar aquíel código relevante yexplique qué haceese código,entonces su respuestaestábien,supongo.I'm not a mod, so I can't move to comment your answer. I can only vote down, but I haven't do that because I think that your link contain useful info, however, link-only answer is not useful, even because that link can be easily change and so your answer bring to a 404. Try to report here relevant code and explain waht that code does, then your answer is fine, I guess.
- 0
- 2014-03-18
- gmazzap
-
James,otorgué la recompensapor una respuesta _real_ queincluye código.Si desea una recompensa adicional,separeel complemento ymuéstrenosexactamente lo queestá haciendo.Gracias.James, I awarded the bounty to a _real_ answer that includes code. If you want an additional bounty, please tear the plugin apart and show us exactly what it's doing. Thanks.
- 0
- 2014-03-18
- kaiser
-
Hola Kaiser,nobusco la recompensa,¡solo quería compartirmi conocimiento del complemento!Hi Kaiser, I'm not after the bounty, just wanted to share my knowledge of the plugin!
- 0
- 2014-03-19
- James Kemp
¿Cómomostrarelformulario de registro de usuario de WordPress (elformulario que apareceen lapágina "www.mywebsite.com/wp-register.php")en lapartefrontal demi blog?
Hepersonalizadoelformulario de registro.Perono sé cómo llamar aeseformularioen lapágina deinicio.Cualquier apoyo será degran ayuda.
Gracias de antemano.:)