Cómo desarrollar un sitio basado en las suscripciones con WordPress: Parte 2

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

Final product image — What You'll Be Creating

En la primera parte de esta serie hemos visto cómo personalizar los formularios de registro e inicio de sesión. Hoy veremos cómo añadir campos personalizados al formulario de registro. Vamos a añadir un texto de entrada para un controlador de Twitter y una casilla de verificación que los usuarios tendrán que marcar para indicar que aceptan los términos antes de registrarse. El trabajo necesario puede dividirse en tres partes:

La adición de los campos en sí
La validación de los campos
El procesado de los datos

También discutiremos muy brevemente las mejores formas de aplicar estilo a nuestros emails salientes. Esto significa que los usuarios recibirán atractivos correos electrónicos cuando se registren.

Comprueba rápidamente antes de empezar que en los ajustes (Ajustes > Generales) de tu instalación de WordPress esté marcada la opción Cualquiera puede registrarse.

Hay mucho por hacer; empecemos

Una de las mejores cosas de WordPress es la forma en la que te proporciona acciones y filtros. Estos nos permiten enganchar a eventos o filtrar contenido, lo que nos da la oportunidad de ampliar fácilmente WordPress.

Así que usando la acción register_form, vamos a enganchar el formulario de registro y a añadir nuestros campos. Copia la siguiente función en el archivo admin.php que creamos en la primera parte de esta serie.

<?php

function tutsplus_register_form_edit() {
    $twitter_name = ( ! empty( $_POST['twitter_name'] ) ) ? trim( $_POST['twitter_name'] ) : ''; ?>
    <p>
        <label for="twitter_name">
        	<?php _e( 'Twitter name', 'sage' ) ?><br />
        	<input type="text" name="twitter_name" id="twitter_name" class="input" value="<?php echo esc_attr( wp_unslash( $twitter_name ) ); ?>" size="25" />
        </label>
    </p>

	<?php $terms = ( ! empty( $_POST['terms'] ) ) ? $_POST['terms'] : ''; ?>
    <p>
        <label for="terms">
        	<input type="checkbox" name="terms" id="terms" class="input" value="agreed" <?php checked( $_POST['terms'], 'agreed', true ); ?> />
        	<?php _e( 'I have read the terms and conditions', 'sage' ) ?>
        </label>
    </p>
    <?php
}
add_action( 'register_form', 'tutsplus_register_form_edit' );

Básicamente estamos incluyendo algunos nuevos campos en nuestro formulario de contacto. El código de marcado utilizado está imitando el de los campos nativos. También queremos mantener los valores si se recarga la página, así que comprobaremos si existen en la super global $_POST. Es posible que te estés preguntando por qué nuestra etiqueta de Twitter está dentro de una función: <?php _e( 'Twitter name', 'tutsplus' ) ?> .

La función _e permite que tenga lugar la traducción, puedes leer más sobre ella en el Códice de WordPress.

Esto es fantástico, pero ¿qué hay sobre la validación? Tal y como está, los usuarios pueden introducir cualquier cosa que deseen ahí o simplemente dejarlo en blanco. Hagamos que nuestros campos sean requeridos y asegurarnos que el campo de texto solo acepte caracteres estándar para prevenir ataques maliciosos. Esta vez usaremos un filtro de WordPress: registration_errors.

<?php

function tutsplus_validate_registration( $errors, $sanitized_user_login, $user_email ) {
    if ( empty( $_POST['twitter_name'] ) || !empty( $_POST['twitter_name'] ) && trim( $_POST['twitter_name'] ) == '' ) {
		$errors->add( 'twitter_name_error', __( '<strong>ERROR</strong>: Please enter your Twitter name.', 'sage' ) );
	}
	if ( preg_match('/[^a-z_\-0-9]/i', $_POST['twitter_name']) ) {
		$errors->add( 'twitter_name_error', __( '<strong>ERROR</strong>: Please use letters, numbers, spaces and underscores only.', 'sage' ) );
	}
	if ( empty( $_POST['terms'] ) ) {
		$errors->add( 'terms_error', __( '<strong>ERROR</strong>: You must agree to the terms.', 'sage' ) );
	}
	return $errors;
}
add_filter( 'registration_errors', 'tutsplus_validate_registration', 10, 3 );

Al anterior filtro se le pasan tres parámetros:

Los errores que han sido procesados
La dirección de correo electrónico del usuario
El nombre de usuario sanitizado

La función es disparada después de que el formulario sea enviado pero antes de que los datos lleguen a la base de datos. En nuestro caso estamos comprobando si los campos están vacíos y si existe cualquier carácter extraño en nuestro campo de entrada con el nombre de Twitter. Si cualquiera de estos casos es cierto, pasamos un mensaje de error al objeto $error que es devuelto.

Nota: si recibes un cajetín de error de campos vacíos, no te preocupes. Este plugin de seguridad que instalamos en la primera parte tiene un ajuste predeterminado que lo oculta. Dentro de la sección de Modificaciones de WordPress, desmarca la opción Deshabilitar los errores de inicio de sesión.

Ahora la parte final de nuestro puzzle: procesar los datos de manera que sean guardados en nuestra base de datos para nuestro usuario. De nuevo, estaremos usando una acción definida en WordPress (user_register) para enganchar este proceso. Es necesario un parámetro, el ID del usuario (user_id), de esta forma sabrá de quién guardó los datos. Asumiendo que la superglobal $_POST contiene nuestros datos, podemos guardarlos usando update_user_meta.

<?php

/**
 * Process the additional fields.
 *
 * @param user_id
 */
function tutsplus_process_registration( $user_id ) {
    if ( ! empty( $_POST['twitter_name'] ) ) {
		update_user_meta( $user_id, 'twitter_name', trim( $_POST['twitter_name'] ) );
	}
	if ( ! empty( $_POST['terms'] ) ) {
		update_user_meta( $user_id, 'terms', trim( $_POST['terms'] ) );
	}
}
add_action( 'user_register', 'tutsplus_process_registration' );

Campos personalizados en el Área de administración

Acabamos de recopilar los datos del usuario, incluyendo nuestros campos personalizados, pero no podemos editar estos valores desde el área de administración de WordPress. Conectemos esto. En nuestro archivo admin.php, añade la siguiente función:

<?php
/** Display in the wp backend
 * http://codex.wordpress.org/Plugin_API/Action_Reference/show_user_profile
 *
 * Show custom user profile fields
 * @param  obj $user The WP user object.
 * @return void
 */
function tutsplus_custom_user_profile_fields( $user ) {
?>
<table class="form-table">
    <tr>
		<th>
			<label for="twitter_name"><?php __e( 'Twitter name','sage' ); ?></label>
		</th>
		<td>
			<input type="text" name="twitter_name" id="twitter_name" value="<?php echo esc_attr( get_the_author_meta( 'twitter_name', $user->ID ) ); ?>" class="regular-text" />
		</td>
	</tr>
</table>
<?php
}
// Hooks near the bottom of profile page (if current user)
add_action('show_user_profile', 'tutsplus_custom_user_profile_fields');
// Hooks near the bottom of the profile page (if not current user)
add_action('edit_user_profile', 'tutsplus_custom_user_profile_fields');

Usando algunas acciones de WordPress podremos añadir campos personalizados con facilidad.

Ahora para procesar los datos meta personalizados del usuario.

<?php
/** Update the custom meta
 * https://codex.wordpress.org/Plugin_API/Action_Reference/personal_options_update
 * https://codex.wordpress.org/Plugin_API/Action_Reference/edit_user_profile_update
 *
 * Show custom user profile fields
 * @param  int user_id.
 */
function tutsplus_update_extra_profile_fields( $user_id ) {

   if ( current_user_can( 'edit_user', $user_id ) )

      update_user_meta( $user_id, 'twitter_name', $_POST['twitter_name'] );
}
// Hook is used to save custom fields that have been added to the WordPress profile page (if current user)
add_action( 'personal_options_update', 'tutsplus_update_extra_profile_fields' );

// Hook is used to save custom fields that have been added to the WordPress profile page (if not current user)
add_action( 'edit_user_profile_update', 'tutsplus_update_extra_profile_fields' );

Redirigir al iniciar sesión

Por último, queremos redireccionar a nuestros usuarios hacia páginas concretas una vez hayan iniciado sesión. La configuración predeterminada los dirige al back end de WordPress. Olvídate de eso. Enviémoslos a la página “mi cuenta”. Así que primero tendrás que crear esta página en el back end. No te preocupes por el contenido de momento, llegaremos a ello en la siguiente parte de la serie.

Ahora que tenemos nuestra página, pega el código de abajo en ___.php y pruébalo. Suponiéndo que tu página “Mi cuenta” tenga el slug my-account debería funcionar. De nuevo hemos utilizado un filtro de WordPress para conseguir esta magia.

En pocas palabras, el código comprueba un usuario, y si es un usuario admin es dirigido al lugar predeterminado, si tiene cualquier otro rol, es redirigido a la página my-account. Todo esto es disparado usando el filtro login_redirect cuando el usuario inicia sesión.

<?php

/**
 * Redirect user after successful login.
 *
 * @param string $redirect_to URL to redirect to.
 * @param string $request URL the user is coming from.
 * @param object $user Logged user's data.
 * @return string
 */
function tutsplus_redirect_on_login( $redirect_to, $request, $user ) {
    //is there a user to check?
	global $user;
	if ( isset( $user->roles ) && is_array( $user->roles ) ) {
		//check for admins
		if ( in_array( 'administrator', $user->roles ) ) {
			// redirect them to the default place
			return $redirect_to;
		} else {
			return home_url('profile');
		}
	} else {
		return $redirect_to;
	}
}
add_filter( 'login_redirect', 'tutsplus_redirect_on_login', 10, 3 );

Una breve nota sobre los correos electrónicos salientes

Cuando los usuarios se registran en tu sitio recibirán un correo electrónico de confirmación. Además, si un usuario se olvida de su contraseña, pueden recuperarla a través de un correo electrónico. Así que es importante que les demos un poco de amor y atención si queremos que nuestro sitio de suscripciones lo reciba.

Ciertamente existen algunas distintas formas de hacer esto. Para aquellos de vosotros que seáis unos puristas, se pueden usar los filtros de WordPress para cambiar el tipo de contenido del correo electrónico y para aplicar estilo a los mismos, consulta el Códice de WordPress. Como alternativa, existen un montón de plugins por ahí diseñados para cumplir este objetivo.

A mí personalmente me gusta usar Mandrill de WordPress para enviar correos electrónicos desde mis sitios WordPress. No es demasiado complejo configurarlo y está lleno de funcionalidades, una de las cuales es capaz de aplicar plantillas/estilos a nuestros emails salientes.

¿Qué viene a continuación?

En la siguiente y última parte de la serie crearemos una básica sección de cuenta en la que los usuarios que hayan iniciado sesión serán capaces de editar sus datos. También queremos que los administradores sean capaces de editar estos datos desde el área de administración de WordPress, así que añadiremos estos detalles también ahí.

Si tienes alguna sugerencia o consulta, por favor, deja un comentario. Intentaré responder lo antes posible.

Cosas a tener en cuenta

Por favor, ten en cuenta que si estás descargando el código del repositorio de GitHub, en él se incluyen todos los archivos para tener preparado tu propio tema. La idea es que puedas usar el repositorio y sencillamente ejecutar los comandos de Gulp y Bower ¡y listo! Si solo quieres los archivos que contienen código concreto de esta serie de archivos, los tienes listados a continuación.