Creando un Plugin de Formulario de Registro Personalizado Para Wordpress

() translation by (you can also view the original English article)

Fuera-de-la-caja, WordPress ofrece un formulario de registro personalizado que puede usarse para configurar un nuevo usuario, o para agregar un nuevo usuario al agregar una instalación de WordPress ya existente. Pero ¿qué pasa si desea implementar un formulario personalizado que no representa las opciones en el tablero de WordPress?

En este tutorial, aprenderemos cómo crear un formulario personalizado en WordPress usando una combinación de etiquetas de plantilla y shortcodes.

El formulario de registro por defecto consisteen dos campos de formulario - nombre de usuario y correo electrónico.

La presencia de sólo los campos de nombre de usuario y correo electrónico en el formulario, facilitan el proceso de registro increíblemente. En primer lugar, tu ingresas tu usuario y tu correo electrónico después de lo cual una contraseña se te enviará. A continuación, haces login en el sitio con la contraseña y luego completas tu perfil y cambias la contraseña a algo recordable.

En lugar de hacer que un usuario pase por el estrés anterior al registrarte en tu sitio, por qué no proporcionas un formulario de inscripción directo al punto que consista de algunos campos extra importantes además de los predeterminados de usuario y correo electrónico, como una contraseña, una dirección URL de su sitio web, una biografía, un apodo y su apellido.

Esto es particularmente útil en una web de varios autores como Tuts +.

En este artículo, construiremos un plugin de formulario de registro personalizado con los siguientes campos:

Nombre de Usuario
Contraseña
Correo electrónico
URL del sitio web
Nombre
Apellido
Apodo
Biografía (o una sección "acerca de")

El formulario de registro personalizado puede integrarse luego en WordPress usando el shortcode del plugin y la etiqueta de la plantilla asociada.

Con el shortcode, puedes crear una página y hacerla la página oficial de registro de tu sitio. También puedes utilizar el código dentro de un post para que un usuario pueda registrarse en tu sitio después de leer uno de tus artículos.

Si deseas agregar el formulario de registro al sidebar o en una ubicación específica en tu sitio web, entonces puedes editar el tema de WordPress pero poner la etiqueta de la plantilla en la ubicación deseada.

Antes de empezar a construir el plugin de formulario de registro, cabe destacar que el campo email, nombre de usuario y contraseña son necesarios.

Estaremos aplicando esta regla al escribir nuestra función de validación.

Opción Premium

Este tutorial te enseñará a construir el plugin desde cero, pero si buscas una solución rápida, lista para usar, prueba el plugin WordPress Registration Form de Envato Market. Con él puedes establecer una amplia gama de campos de registro con control de validación. Una vez terminado el registro, se envía un correo electrónico a los nuevos miembros con sus datos de inicio de sesión. Las plantillas de correo electrónico se pueden modificadar para la inscripción, cambio de contraseña, etcetera.

WordPress Registration Form plugin on Envato Market — Plugin WordPress Registration Form en Envato Market

Otra opción es simplemente hacer un pedido en Envato Studio. Puedes elegir a la persona adecuada entre una amplia gama de desarrolladores experimentados de plugins para WordPress. A continuación, puedes enviar tu brief y permitirle al desarrollador crear tu plugin dentro de los plazos acordados.

Por ejemplo, Alisaleem252 desarrollará un plugin para WordPress personalizado que será compatible con la última versión de WordPress y otros plugins en el repositorio de WordPress según tus requisitos.

Conseguirás:

Un widget personalizado si es necesario
shortcodes personalizados si es necesario
tipos de entradas personalizados si es necesario
servicio confiable

Custom WordPress Plugin Development — Desarrollo de Plugin de WordPress Personalizado

El servicio completo cuesta sólo $300, y el plugin estará listo en 10 días. Alisaleem252 tiene una tasa de aprobación del 98% de clientes anteriores. ¡Así que por qué no probar su popular servicio de desarrollo de Plugin Personalizado para WordPress!

Construcción del Plugin

Dicho esto, vamos a empezar con la programación del plugin. En primer lugar, incluye el encabezado del plugin.

<?php
/*
  Plugin Name: Custom Registration
  Plugin URI: https://code.tutsplus.com
  Description: Updates user rating based on number of posts.
  Version: 1.0
  Author: Agbonghama Collins
  Author URI: http://tech4sky.com
 */

A continuación, creamos una función en PHP que contiene el código HTML del formulario de inscripción.

function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
    echo '
    <style>
    div {
      margin-bottom:2px;
	}
	
	input{
		margin-bottom:4px;
	}
	</style>
	';

    echo '
    <form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
	<div>
	<label for="username">Username <strong>*</strong></label>
	<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">
	</div>
	
	<div>
	<label for="password">Password <strong>*</strong></label>
	<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">
	</div>
	
	<div>
	<label for="email">Email <strong>*</strong></label>
	<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">
	</div>
	
	<div>
	<label for="website">Website</label>
	<input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">
	</div>
	
	<div>
	<label for="firstname">First Name</label>
	<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">
	</div>
	
	<div>
	<label for="website">Last Name</label>
	<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">
	</div>
	
	<div>
	<label for="nickname">Nickname</label>
	<input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">
	</div>
	
	<div>
	<label for="bio">About / Bio</label>
	<textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>
	</div>
	<input type="submit" name="submit" value="Register"/>
	</form>
	';
}

¿Notas que el campo de registro se pasa a la función anterior como variable? En el código de la función, verás instancias del siguiente código, por ejemplo:

(isset ($_POST ['lname'])? $last_name: null)

El operador ternario está comprobando el contenido de la matriz global de $_POST para ver si el formulario contiene un valor. Si contiene un valor, rellena los campos del formulario con el valor para salvar al usuario de volver a entrar a la entrada del campo.

Un formulario de inscripción nunca está completo hasta que lo validas y saneas la entrada del usuario. Como resultado, creamos una función de validación con el nombre registration_validation.

Para aliviar el dolor de la validación, vamos a usar la clase de WordPress WP_Error. Sígueme en la codificación de la función de validación:

Crea la función y pasa el campo de registro como el argumento de la función.

1	function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {

Instancia la clase WP_Error y haz la variable de la instancia global así se puede acceder fuera del ámbito de la función.
1

global $reg_errors;
2

$reg_errors = new WP_Error;
Recuerda: Dijimos que el nombre de usuario, contraseña y correo electrónico son necesarios y no deben quedar por fuera. Para aplicar la regla, tenemos que comprobar si alguno de los campos está vacío. Si está vacío, agrega el mensaje de error a la clase WP_Error global.
1

if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
2

$reg_errors->add('field', 'Required form field is missing');
3

}

También verificamos que el número de caracteres de nombre de usuario no sea inferior a 4.

1	if ( 4 > strlen( $username ) ) {
2	$reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );
3	}

Comprueba si el nombre de usuario ya está registrado.

1	if ( username_exists( $username ) )
2	$reg_errors->add('user_name', 'Sorry, that username already exists!');

Emplea los servicios de la función de WordPress validate_username para asegurarte de que el nombre de usuario es válido.

1	if ( ! validate_username( $username ) ) {
2	$reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );
3	}

Asegúrate de que la contraseña introducida por los usuarios no es menos de 5 caracteres.

1	if ( 5 > strlen( $password ) ) {
2	$reg_errors->add( 'password', 'Password length must be greater than 5' );
3	}

Comprueba si el email es un email válido.

1	if ( !is_email( $email ) ) {
2	$reg_errors->add( 'email_invalid', 'Email is not valid' );
3	}

Comprueba si el email ya está registrado.

1	if ( email_exists( $email ) ) {
2	$reg_errors->add( 'email', 'Email Already in use' );
3	}

Si el campo de sitio web está lleno, comprueba si es válido.

if ( ! empty( $website ) ) {
    if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
        $reg_errors->add( 'website', 'Website is not a valid URL' );
    }
}

Finalmente, hacemos un bucle por los errores en nuestra instancia WP_Error y mostramos el error individual.

if ( is_wp_error( $reg_errors ) ) {

    foreach ( $reg_errors->get_error_messages() as $error ) {
    
        echo '<div>';
        echo '<strong>ERROR</strong>:';
        echo $error . '<br/>';
        echo '</div>';
        
    }

}

Hemos hecho el código de validación de la función.

La siguiente es la función del plugin complete_registration() que controla el registro de usuario.
El registro de usuarios se hace realmente por la función wp_insert_user que acepta una matriz de datos del usuario.

function complete_registration() {
    global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
    if ( 1 > count( $reg_errors->get_error_messages() ) ) {
        $userdata = array(
        'user_login'    => 	$username,
        'user_email' 	=> 	$email,
        'user_pass' 	=> 	$password,
        'user_url' 		=> 	$website,
        'first_name' 	=> 	$first_name,
        'last_name' 	=> 	$last_name,
        'nickname' 		=> 	$nickname,
        'description' 	=> 	$bio,
		);
        $user = wp_insert_user( $userdata );
        echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';   
	}
}

En la función complete_registration() anterior, hicimos la instancia de WP_Error $reg_errors y la variable de campos de forma global por lo que podemos acceder a la variable en el ámbito global.

Luego comprobamos si la instancia de control de errores de $reg_errors contiene algún error. Si no se encuentra ningún error, se procede a rellenar la matriz $userdata e Introduce los detalles del registro de usuario a la base de datos de WordPress y muestrar un mensaje de registro completo con un enlace a la página de inicio de sesión.

A continuación, es la super función custom_registration_function() que pone todas las funciones que hemos creado anteriormente en uso.

function custom_registration_function() {
    if ( isset($_POST['submit'] ) ) {
        registration_validation(
        $_POST['username'],
        $_POST['password'],
        $_POST['email'],
        $_POST['website'],
        $_POST['fname'],
        $_POST['lname'],
        $_POST['nickname'],
        $_POST['bio']
    	);
		
		// sanitize user form input
        global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
        $username	= 	sanitize_user( $_POST['username'] );
        $password 	= 	esc_attr( $_POST['password'] );
        $email 		= 	sanitize_email( $_POST['email'] );
        $website 	= 	esc_url( $_POST['website'] );
        $first_name = 	sanitize_text_field( $_POST['fname'] );
        $last_name 	= 	sanitize_text_field( $_POST['lname'] );
        $nickname 	= 	sanitize_text_field( $_POST['nickname'] );
        $bio 		= 	esc_textarea( $_POST['bio'] );

		// call @function complete_registration to create the user
		// only when no WP_error is found
        complete_registration(
        $username,
        $password,
        $email,
        $website,
        $first_name,
        $last_name,
        $nickname,
        $bio
		);
    }

    registration_form(
    	$username,
        $password,
        $email,
        $website,
        $first_name,
        $last_name,
        $nickname,
        $bio
		);
}

Me explico lo que es el código de la función custom_registration_function().

En primer lugar, determinamos si el formulario ha sido enviado para comprobar si $_POST ['submit'] fue establecido. Si el formulario ha sido enviado, llamamos a la función registration_validation para validar el usuario enviado en el formulario.

Luego limpie los datos del formulario y configure los datos de limpieza en una variable con el nombre del campo del formulario. Por último, llamamos a complete_registration para registrar el usuario.

Tenemos que llamar a la función registration_form para mostrar el formulario de inscripción.

¿Recuerdas que mencioné que vamos a darle soporte para shortcodes al plugin de registro? Abajo está el código de soporte para shortcodes.

// Register a new shortcode: [cr_custom_registration]
add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );

// The callback function that will replace [book]
function custom_registration_shortcode() {
    ob_start();
    custom_registration_function();
    return ob_get_clean();
}

En este punto, hemos terminado de programar el plugin. Debajo está una imagen que muestra cómo se ve el formulario de inscripción.

Ten en cuenta que podrías no conseguir el mismo aspecto exacto en su sitio de WordPress, esto como resultado de las variaciones de estilo en el CSS.

Uso del Plugin

Para implementar el plugin en un post de WordPress o una página, utiliza el shortcode [cr_custom_registration].

Para implementar el formulario de inscripción en un aspecto específico de tu tema, agrega la siguiente etiqueta de plantilla - <? php custom_registration_function();? >.
Puedes obtener el archivo del plugin desde el archivo adjunto en este artículo.

Resumen

En este artículo, caminamos a través del proceso de creación de un plugin que agrega un formulario personalizado en WordPress. Puede ampliar la forma de registro para incluir campos adicionales tales como rol del usuario, cuenta de AOL IM, pero asegúrate de que el campo de formulario es un meta dato válido para wp_insert_user.

Si tienes cualquier pregunta y sugerencia, ¡déjame saberlo en los comentarios!

Recuerda que si luchaste para seguir este tutorial y quieres una solución más simple, puedes probar el plugin WordPress Registration Form en Envato.Market.