Cómo desarrollar un sitio de membresía con WordPress: Parte 3

Anteriormente en la serie cubrimos cómo personalizar los formularios de registro y registro de WordPress. A continuación, añadimos algunos campos personalizados a nuestro formulario de registro. Hoy, en la tercera y última parte de esta serie, cubriremos cómo desarrollar una sección de "mi cuenta" para los usuarios de su sitio, mediante la cual los usuarios pueden editar la información de su perfil.

Configuración de página

Lo primero que queremos hacer es crear una plantilla de página para alojar nuestro contenido. Me gusta prefijar mis plantillas de página con la palabra "plantilla". Así que mi archivo se llama template-user-profile.php y el PHP de apertura se ve así:

1

<?php

2

3

/**

4

 * Template Name: User Profile

5

 */

Lo he guardado en la raíz de mi directorio de temas. Si no está familiarizado con las plantillas de WordPress le sugiero que lea el enlace anterior. Son extremadamente prácticos.

Ahora vamos a la parte posterior de WordPress y hacer una página llamada "perfil", y en el cuadro de meta Atributos de página asignar a nuestra plantilla de página recién creada. Una vez que haya publicado esta página, debe tener una página en blanco en la parte frontal: http://example.dom/profile.

Ahora para inyectar un poco de contenido en nuestra página. Queremos que la estructura sea el contenido de la página (es decir, lo que se escribe en el WordPress WYSIWYG) y luego nuestro formulario de perfil a seguir.

A menudo es útil obtener el código de page.php y utilizarlo como punto de partida para las plantillas de página. Este código difiere un poco dependiendo del tema, pero probablemente contendrá un bucle que escupe contenido de la página. La parte de contenido se obtiene normalmente mediante la función get_template_part() de WordPress. Justo debajo de donde se ha recuperado el contenido, vamos a insertar nuestro formulario HTML. Así que para recapitular:

1. Copie y pegue el código de page.php en nuestra plantilla de página.
2. Busca dónde se está produciendo el contenido.
3. Justo debajo de eso, inserte el siguiente código y luego lo recorreremos:

1

<form role="form" action="" id="user_profile" method="POST">

2

    <?php wp_nonce_field( 'user_profile_nonce', 'user_profile_nonce_field' ); ?>

3

    <div class="form-group">

4

        <label for="first_name"><?php _e( 'First name', 'sage' ); ?></label>

5

        <input type="text" class="form-control" id="first_name" name="first_name" placeholder="<?php _e( 'First name', 'sage' ); ?>" value="<?php echo $user_info->first_name; ?>">

6

    </div>

7

    <div class="form-group">

8

        <label for="last_name"><?php _e( 'Last name', 'sage' ); ?></label>

9

        <input type="text" class="form-control" id="last_name" name="last_name" placeholder="<?php _e( 'Last name', 'sage' ); ?>" value="<?php echo $user_info->last_name; ?>">

10

    </div>

11

    <div class="form-group">

12

        <label for="twitter_name"><?php _e( 'Twitter name', 'sage' ); ?></label>

13

        <input type="text" class="form-control" id="twitter_name" name="twitter_name" placeholder="<?php _e( 'Twitter name', 'sage' ); ?>" value="<?php echo $user_info->twitter_name; ?>">

14

    </div>

15

    <div class="form-group">

16

        <label for="email"><?php _e( 'Email address', 'sage' ); ?></label>

17

        <input type="email" class="form-control" id="email" name="email" placeholder="<?php _e( 'Email address', 'sage' ); ?>" value="<?php echo $user_info->user_email; ?>">

18

    </div>

19

    <div class="form-group">

20

        <label for="pass1"><?php _e( 'Password', 'sage' ); ?></label>

21

        <input type="password" class="form-control" id="pass1" name="pass1" placeholder="<?php _e( 'Password', 'sage' ); ?>">

22

    </div>

23

    <div class="form-group">

24

        <label for="pass2"><?php _e( 'Repeat password', 'sage' ); ?></label>

25

        <input type="password" class="form-control" id="pass2" name="pass2" placeholder="<?php _e( 'Repeat password', 'sage' ); ?>">

26

    </div>

27

    <button type="submit" class="btn btn-default"><?php _e( 'Submit', 'sage' ); ?></button>

28

</form>

No hay nada loco aquí: el formulario está usando el marcado de Bootstrap, ya que nuestro tema se basa en Bootstrap. Otras cosas a tener en cuenta son que el formulario se está enviando usando el método POST y hemos incluido un wp_nonce_field-este es un tipo de token de seguridad que ayuda a prevenir ataques maliciosos. Si no está familiarizado con Nonces de WordPress, sugeriría tener una lectura de este artículo.

Recuperación de los datos

Con eso en su lugar, usted debe tener un formulario en la parte delantera del sitio, pero no está haciendo mucho. Queremos que muestre los datos que tenemos para el usuario que ha iniciado sesión. Es posible que haya notado que los atributos de valor en nuestro formulario son eco de PHP.

value="<?php echo $user_info->first_name; ?>"

Ahora que $user_info el objeto no existe ya que no hemos escrito el código todavía, así que vamos a empezar allí. Pegue el código siguiente antes de nuestro formulario en template-user-profile.php.

1

<?php

2

3

/**

4

 * Gets the user info.

5

 * Returned in an object.

6

 * 

7

 * http://codex.wordpress.org/Function_Reference/get_userdata

8

 */

9

10

$user_id = get_current_user_id();

11

$user_info = get_userdata( $user_id );

Usando algunas funciones nativas de WordPress, obtiene el ID del usuario actual y con eso podemos obtener los datos del usuario. Esto se almacena en un objeto llamado $user_info, y como se demostró anteriormente podemos recuperar datos de usuario con bastante facilidad. Para ver todos los datos almacenados en ese objeto, puede ejecutar un var_dump de la siguiente manera: <?php var_dump($user_info); ?>. Esto puede ser útil para depurar o simplemente para ver a lo que puede acceder.

Procesamiento de los datos

Hay una última pieza en el rompecabezas, y eso es para procesar los datos, lo que permite a los usuarios editar sus perfiles. Con el fin de mantener las cosas organizadas, he puesto el código de membresía en un archivo acertadamente llamado membership.php. Esto está en el directorio lib y ha sido incluido en nuestro archivo functions.php. Una vez hecho esto, abra su archivo membership.php recientemente creado en un editor de código, y hagamos la función que procesará los datos de los usuarios.

En primer lugar, vamos a ejecutar rápidamente a través de la lógica. Cuando se pulsa el botón Enviar, queremos comprobar que nuestro campo nonce ha sido enviado, esto comprueba que los datos vienen del lugar correcto.

Si se cumple esta condición, queremos obtener el ID del usuario actual, ya que necesitaremos esto para almacenar los datos. Entonces queremos organizar nuestros datos en una estructura que le gusta a WordPress, en este caso es una matriz con claves específicas. Antes de guardar los datos, también queremos validarlos y sanitizarlos. Y por último queremos mostrar mensajes a nuestro usuario, ya sea de éxito o errores.

Y el código para todo lo que se parece a algo así:

1

<?php

2

3

/**

4

 * Process the profile editor form

5

 */

6

function tutsplus_process_user_profile_data() {

7

8

    if ( isset( $_POST['user_profile_nonce_field'] ) && wp_verify_nonce( $_POST['user_profile_nonce_field'], 'user_profile_nonce' ) ) {

9

10

        // Get the current user id.

11

        $user_id = get_current_user_id();

12

13

        // Put our data into a better looking array and sanitize it.

14

        $user_data = array(

15

            'first_name' => sanitize_text_field( $_POST['first_name'] ),

16

            'last_name' => sanitize_text_field( $_POST['last_name'] ),

17

            'user_email' => sanitize_email( $_POST['email'] ),

18

            'twitter_name' => sanitize_text_field( $_POST['twitter_name'] ),

19

            'user_pass' => $_POST['pass1'],

20

        );

21

22

        if ( ! empty( $user_data['user_pass'] ) ) {

23

24

            // Validate the passwords to check they are the same.

25

            if ( strcmp( $user_data['user_pass'], $_POST['pass2'] ) !== 0 ) {

26

27

                wp_redirect( '?password-error=true' );

28

29

                exit;

30

            }

31

32

        } else {

33

34

            // If the password fields are not set don't save.

35

            unset( $user_data['user_pass'] );

36

        }

37

38

        // Save the values to the post.

39

        foreach ( $user_data as $key => $value ) {

40

41

            $results = '';

42

43

            // http://codex.wordpress.org/Function_Reference/wp_update_user

44

            if ( $key == 'twitter_name' ) {

45

46

                $results = update_user_meta( $user_id, $key, $value );

47

                unset( $user_data['twitter_name'] );

48

49

            } elseif ( $key == 'user_pass' ) {

50

51

                wp_set_password( $user_data['user_pass'], $user_id );

52

                unset( $user_data['user_pass'] );

53

54

            } else {

55

56

                // Save the remaining values.

57

                $results = wp_update_user( array( 'ID' => $user_id, $key => $value ) );

58

59

            }

60

61

            if ( ! is_wp_error( $results ) ) {

62

63

                wp_redirect( '?profile-updated=true' );

64

65

            }

66

        }

67

68

        wp_redirect( '?profile-updated=false' );

69

70

        exit;

71

    }

72

}

73

74

add_action( 'tutsplus_process_user_profile', 'tutsplus_process_user_profile_data' );

Ahora puede notar que los datos se guardan utilizando tres funciones diferentes de WordPress:

• update_user_meta() para el nombre de Twitter
• wp_set_password() para la contraseña
• wp_update_user() para los datos restantes

Y tienes razón en cuestionar esto. Básicamente, los metadatos personalizados (el nombre de Twitter) deben procesarse utilizando la función relativa y no la función de actualización general del usuario. En cuanto a la contraseña, mientras que puede trabajar con wp_update_user(), he tenido problemas con él y prefieren utilizar este método. Recuerde que esto es sólo una guía, ya menudo el código está dirigido a demostrar diferentes métodos para lograr sus necesidades.

Bueno, ahora tenemos nuestra función de procesar los datos, pero no se llama a ninguna parte. Al final de nuestra función se puede ver que hay una acción asociada con ella. Así que para llamar a esa función sólo necesitamos usar el WordPress proporcionado: do_action();. Así que pegue esta línea sobre su formulario en la plantilla de página de perfil de usuario que creamos anteriormente:

<?php do_action( 'tutsplus_process_user_profile' ); ?>

Con eso en su lugar, cuando presentamos nuestro formulario debe funcionar a través de nuestra función y procesar los datos.

Mensajes de error y de éxito

Nuestro formulario de perfil debe guardar o rechazar los datos ahora. Tal vez las dos contraseñas no eran las mismas y no guardó. No hay mensajes para proporcionar comentarios a los usuarios. Vamos a salvar a nuestros usuarios un poco de pena y darles algunos mensajes.

En nuestra función tutsplus_process_user_profile() es posible que haya notado que agrega diferentes cadenas de consulta a la URL dependiendo del resultado del procesamiento. Así que si todo se guarda y tiene éxito entonces nuestra URL será añadida con ?profile-updated=true, y estos varían en función de los resultados. Lo que necesitamos hacer es activar un mensaje basado en estas respuestas.

A continuación he utilizado un filtro para agarrar el contenido, ya través de la magia de $_GET podemos comprobar los parámetros y escupir lo que necesitamos.

1

<?php

2

3

/**

4

 * Display the correct message based on the query string.

5

 *

6

 * @param string $content Post content.

7

 *

8

 * @return string Message and content.

9

 */

10

function tutsplus_display_messages( $content ) {

11

12

    if ( 'true' == $_GET['profile-updated'] ) {

13

14

        $message = __( 'Your information was successfully updated', 'sage' );

15

        $message_markup = tutsplus_get_message_markup( $message, 'success' );

16

17

    } elseif ( 'false' == $_GET['profile-updated'] ) {

18

19

        $message = __( 'There was an error processing your request', 'sage' );

20

        $message_markup = tutsplus_get_message_markup( $message, 'danger' );

21

22

    } elseif ( 'true' == $_GET['password-error'] ) {

23

24

        $message = __( 'The passwords you provided did not match', 'sage' );

25

        $message_markup = tutsplus_get_message_markup( $message, 'danger' );

26

27

    }

28

29

    return $message_markup . $content;

30

}

31

32

add_filter( 'the_content', 'tutsplus_display_messages', 1 );

Bueno, no muy bien, estamos usando una función llamada tutsplus_get_message_markup() anterior, pero aún no la hemos definido. Tiene dos parámetros:

• una cadena: el mensaje a mostrar
• una cadena: la gravedad de la alerta para mostrar basada en Bootstrap

Así que definamos nuestra función tutsplus_get_message_markup():

1

<?php

2

3

/**

4

 * A little helper function to generate the Bootstrap alerts markup.

5

 *

6

 * @param string $message Message to display.

7

 * @param string $severity Severity of message to display.

8

 * 

9

 * @return string Message markup.

10

 */

11

function tutsplus_get_message_markup( $message, $severity ) {

12

13

    $output = '<div class="alert alert-' . $severity . ' alert-dismissable">';

14

        $output .= '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">';

15

            $output .= '<i class="fa fa-times-circle"></i>';

16

        $output .= '</button>';

17

        $output .= '<p class="text-center">' . $message . '</p>';

18

    $output .= '</div>';

19

20

    return $output;

21

22

}

Estupendo. Ahora nuestros miembros pueden ver si sus datos están siendo guardados o no.

Crédito adicional

Así que ahora tenemos un prototipo de trabajo para un sitio de membresía. Gran parte de esta funcionalidad viene con WordPress, pero hemos diseñado y modificado para que sea una experiencia mejor para nuestros usuarios. Así que ahora vamos a poner nuestro 'yo' y cruzar nuestro 'T' para mejorar la experiencia sólo un poco más.

En primer lugar, queremos evitar que los usuarios no registrados puedan acceder a la página de perfil. Un simple redireccionamiento a la página de inicio hará. He hecho una función que hace exactamente eso, y lo llamo en las páginas que quiero ser alcanzado exclusivamente por los usuarios registrados.

Aquí está la función, que se coloca en membership.php:

1

<?php

2

3

/**

4

 * Makes pages where this function is called only

5

 * accessible if you are logged in.

6

 */

7

function tutsplus_private_page() {

8

9

    if ( ! is_user_logged_in() ) {

10

11

        wp_redirect( home_url() );

12

13

        exit();

14

15

    }

16

17

}

Ahora podemos simplemente llamar a la función en la parte superior de nuestra plantilla de página de perfil de usuario.

A continuación queremos mantener a los usuarios, así, a los suscriptores, fuera del área de administración. Y encima de eso, vamos a eliminar la barra de administración para los usuarios que han iniciado sesión. De nuevo vamos a poner esto en nuestra membership.php.

1

<?php

2

3

/**

4

 * Stop subscribers from accessing the backed

5

 * Also turn off the admin bar for anyone but administrators.

6

 */

7

function tutsplus_lock_it_down() {

8

9

    if ( ! current_user_can('administrator') && ! is_admin() ) {

10

11

        show_admin_bar( false );

12

13

    }

14

15

    if ( current_user_can( 'subscriber' ) && is_admin() ) {

16

17

        wp_safe_redirect( 'profile' );

18

19

    }

20

21

}

22

23

add_action( 'after_setup_theme', 'tutsplus_lock_it_down' );

Y, por último, no es muy fácil navegar por las pantallas de inicio de sesión / cierre de sesión. Vamos a añadir algunos de navegación específica del usuario. Lo que he hecho es crear una función que genere el código relevante, y esto se llama en nuestras templates/header.php donde se representa la navegación principal.

1

<?php

2

3

/**

4

 * Outputs some user specific navigation.

5

 */

6

function tutsplus_user_nav() {

7

8

    $user_id = get_current_user_id();

9

    $user_name = get_user_meta( $user_id, 'first_name', true );

10

    $welcome_message = __( 'Welcome', 'sage' ) . ' ' . $user_name;

11

12

    echo '<ul class="nav navbar-nav navbar-right">';

13

14

        if ( is_user_logged_in() ) {

15

16

            echo '<li>';

17

                echo '<a href="' . home_url( 'profile' ) . '">' . $welcome_message . '</a>';

18

            echo '</li>';

19

            echo '<li>';

20

                echo '<a href="' . wp_logout_url( home_url() ) . '">' . __( 'Log out', 'sage' ) . '</a>';

21

            echo '</li>';

22

23

        } else {

24

25

            echo '<li>';

26

                echo '<a href="' . wp_login_url() . '">' . __( 'Log in', 'sage' ) . '</a>';

27

            echo '</li>';

28

29

        }

30

31

    echo '</ul>';

32

33

}

Resumen

WordPress es una base increíble para una aplicación de membresía. Ya tiene tanta funcionalidad asociada con este tipo de aplicación. Además de eso, la gente de WordPress ha hecho bastante fácil enganchar a eventos y filtrar contenido para que podamos ampliar lo que ya está allí.

Espero que esto le ha proporcionado los métodos, ideas y conocimientos para desarrollar sus propios sitios de membresía. Esto no es de ninguna manera una guía completa sobre este tema, sino que más bien sirve como una base.

Cualquier comentario es bienvenido, y haré todo lo posible para responder a cualquier pregunta en los comentarios.

Cosas a tener en cuenta

Tenga en cuenta que si está descargando el código del repositorio de GitHub, incluye todos los archivos para que su tema funcione. La idea es que usted puede tomar el repo y acaba de ejecutar los comandos Gulp y Bower necesarios y usted estará ausente! Si sólo desea que los archivos que contienen código específico de esta serie, los archivos se enumeran a continuación:

• todos los archivos en el directorio de administración
• lib/admin.php
• lib/membership.php
• template-user-profile.php