Paano Bumuo ng pagiging miyembro sa pamamagitan ng WordPress: bahagi 3

Maaaga kanina sa ating serye ating sinakop ang kung papaano mag-customize ng WordPress login at form ng pagpaparehistro. Tayo ngayon ay nagdagdag ng ilang mga pasadyang larangan sa ating form ng pagpaparehistro. Ngayon, sa ikatlo at huling parte ng seryeng ito, tatalakayin natin kung paano bumuo ng “my account” seksyon para sa mga gumagamit ng sites kung saan ang mga gumagamit ay maaring i-edit ang kanilang impormasyon sa profile.

Page Setup 

Ang una nating gustong gawin ay lumikha ng Page Template upang mailagay ang ating mga nilalaman. Gusto kong lapian ang aking page templates ng salitang “template”. Kung kaya’t ang aking file ay tintawag na template-user-profile.php at ang pambungad na PHP ay may ganitong itsura:

1

<?php

2

3

/**

4

 * Template Name: User Profile

5

 */

Nai-save ko na ito sa pinanggalingan ng aking theme directory. Kung ikaw ay hindi bihasa sa WordPress Page Templates iminumungkahi ko na iyong basahin ang link sa itaas. Ito ay napaka-galing.

Ngayon ay magtungo tayo sa WordPress back end at gumawa ng pahina na ang ngalan ay “profile”, at sa pahinang Attributes meta box ay italaga ito bilang ating bagong nilikhang page template. Sa sandaling iyong nailathala ang pahinang ito, mayroon kang dapat na blankong pahina sa pinaka-unahan: http://yourdomain/profile.

Ngayon upang lagyan ng nilalaman ang ating pahina. Gusto natin na ang kaayusan ay bilang pahina ng nilalaman (i.e. anuman ang nakasulat sa WordPress WYSIWYG) at pagkatapos ay ang profile form na susundan.

Madalas ay nakakatulong na makuha ang code sa page.php at gamitin iyon bilang isang panimula para sa iyong Page templates.  Ang code na ito ay naiiba ng kaunti depende sa iyong tema, ngunit ito sa malamang ay naglalaman ng loop na maglalabas ng ilan pang page content. Ang parte na may nilalaman ay karaniwang nakukuha gamit ang Wordpress function get_template_part ( ).  Sa ilalim kung saan ang nilalaman ay nakuhang muli, isingit natin ang ating form HTML. Sa pagbabalik-tanaw:

1. Kopyahin at i-paste ang code mula sa page.php sa ating Page Template.
2. Hanapin kung saan ang nilalaman ay nailalabas.
3. Sa ilalim nito, isingit ang mga sumusunod na code at pagkatapos itoý ating papasadahan:

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>

Walang kahibangan nangyayari dito: ang form ay gumagamit ng Bootstrap markup bilang ating tema kung saan itoý nabuo sa Bootstrap. Ang iba pang mga bagay na dapat tandaan ay ang form ay naipapadala gamit ang POST method at mayroon tayong isinamang wp_nonce_field — ito ay isang uri ng security token na nakakatulong upang mapigilan ang mga malicious attacks. Kung ikaw ay hindi bihasa sa WordPress’s Nonces, aking iminumungkahi na magbasa ng artikulo ayon dito.

Pagkuhang muli ng mga Data 

Naka-ayon sa pagkaka-lagak, ikaý dapat na mayroong form sa harap ng site, ngunit itoý walang gaanong nagagawa.  Gusto natin na idisplay nito ang data na mayroon tayo para sa logged-in user. Maaring napansin mo ang halaga ng katangian ng ating form na umaalingawngaw halos ng PHP.

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

Sa ngayon ang $user_info object ay hindi umiiral sa dahilang hindi pa natin naisusulat ang code, kung kaya’t ating simulan duon.  I-paste ang mga sumusunod na code bago ang ating form sa 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 );

Gamit ang ilang WordPress native functions, nakukuha nito ang kasalukuyang user’s ID, at kasabay nito ay maari nating makuha ang user’s data.  Ito ay naka-imbak sa isang bagay na tinatawag na $user_info, at gaya nang ipinakita sa itaas maari nating makuhang muli ang user data nang madali lan. Upang makita ang lahat ng data na nakatago sa bagay na ito, maari kang mag-run ng var_dump gaya: <?php var_dump ($user_info); ?> Ito ay kapaki-pakinabang para sa debugging o para lang iyong makita ang mga maari mong mabuksan.

Pagpoproseso ng Data 

May isang kahuli-hulihan na bubuo ng palaisipan, at itoý para iproseso ang data, sa gayon ay pinapayagan nito ang mga gumagamit na baguhin ang kanilang mga profiles. Upang mapanatiling maayos ang mga bagay bagay, kailangan kong ilagay ang membership code sa file na may pangalang membership.php.  Ito ay nasa lib directory at itoý kasama sa ating functions.php file. Kapag itoý nagawa mo na, buksan ang iyong bagong ginawang membership.php file sa code editor, at tayoý gumawa ng function na magpoproseso ng user’s data.

Una, mabilisan nating pasadahan ang logic.  Kapag ang submit button ay napindot, gusto nating suriin kung ang nonce field ay naipadala - itoý nagsusuri na ang data ay galing sa tamang lugar.

Kung ang kundisyon na ito ay nakamit, gusto nating makuha ang kasalukuyang user’s ID dahil itoý ating kakailanganin upang magtago ng data. Pagkatapos ay gusto nating iayos ang ating mga data gaya ng istraktura sa WordPress – sa ganitong kaso itoý ayos na mayroong particular na teklado.  Bago natin i-save ang data, gusto nating patunayan at i-sanitize ito. At ang pinaka-huli gusto natin ipakita ang mga mensahe sa ating mga user, ito man ay matagumpay o mali. 

At ang code para sa lahat ay halos ganito ang itsura:

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' );

Maari mong mapansin na ang data na isini-save ay gumagamit ng tatlong magkakaibang WordPress functions : 

• update_user_meta() para sa pangalan ng Twitter
• wp_set_password() para sa password
• wp_update_user() para sa mga natitira pang data

At ikaw ay tama na kwestyunin ito.  Karaniwan ang custom meta data ( the Twitter name ) ay kailangan maiproseso gamit ang relative function at hindi ang general update user function.  At para naman sa password, habang ito naman ay gumagana sa pamamagitan ng wp_update_user(), Nagkaroon ako ng mga isyu sa mga ito at nais ko pa rin gamitin ang ganitong pamamaraan. Tandaan ito ay isa lamang gabay, at madalas ang code ay naglalayong ipakita ang iba’t-ibang pamamaraan upang makamit ang iyong mga kinakailangan. 

Okay, sa ngayon ay meron na tayong function para iproseso and data, ngunit itoý hindi pansin kahit saan. Sa katapusan ng ating function makikita mo na mayroong aksyon na kaugnay ito. Upang matawag ang function na ito kailangan lang natin gamitin ang WordPress na nakalaan: do_action();. I-paste ang linyang ito sa iyong form sa User profile page template na nagawa natin kanina:

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

Batay na ang mga ito ay nasa tampok na ayos, kapag isusumite natin ang ating form itoý dapat na dumaan sa ating function at iproseso ang data. 

Mali at Matagumpay na mga Mensahe

Ang ating profile form ay dapat na mag-save o hindi tinatanggap ang data ngayon.  Marahil ay ang dalawang passwords ay hindi magkaparehas at hindi nai-save. Walang mga mensahe na makapagbibigay ng user feedback. Ating iadya ang ating mga users sa pagpighati at bigyan sila ng mga mensahe. 

Sa ating tutplus_process_user_profile() function maaring napansin mo na may kalakip itong kakaibang hanay na mga pag-uusisa sa URL depende sa resulta ng proseso. Kaya’t kung ang lahat ay nai-save at matagumpay samakatuwid ang ating URL ay magkakaroon ng kalakip na ?profile – updated = true, at ito ay magkakaiba ayon sa magiging mga resulta.  Ang kailangan nating gawin ay pamulatan ng mensahe base sa mga tugon.

Sa ibaba ay mayroon akong ginamit na filter upang makuha ang nilalaman, at sa pamamagitan ng panghalina ng $_GET magagawa natin na suriin ang mga parameters at masabi ang lahat na kailangan gawin.

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 );

Okay, hindi pa ganap na abot doon – tayo ay gumagamit ng function na tinatawag na tutsplus_get_messahe_markup () sa itaas, ngunit hindi pa natin ito naturingan. Itoý nangangailangan ng dalawang parameters :

• Isang hanay : ang mensahe para ipakita ay 
• Isang hanay : ang pagkapayak ng alerto upang ipakita ay base sa Bootstrap

Kung kaya’t ating turingan ang ating tutsplus_get_message_markup() function :

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

}

Kahanga-hanga. Ngayon ay makikita na ng ating mga miyembro kung ang data nila ay nagagawang mai-save o hindi.

Karagdagang kredito

Sa ngayon ay mayroon na tayong gumaganang prototype para sa membership site. Higit pa nitong functionality ships sa pamamagitan ng WordPress, ngunit atin nang na-istiluhan at na-tweak upang maging mas makabuti sa karanasan ng ating mga users. Sa ngayon atin nang lagyan ng tuldok ang ating ‘I’ s at ekisan ang ating  ’T’s  upang mas mapabuti ang karanasan nang kaunti pa. 

Unang una, gusto nating panatilihin ang non – logged – in users na magkaroon ng access sa profile page. Isang simpleng pag-redirect sa home page ay pwede na. Gumawa ako ng function na ginagawa yan, at ito ay inilalagay ko sa mga pahina na gusto kong eksklusibong ma-access ng logged-in users lamang.

Narito ang function, kung saan ay nakalagay sa 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

}

Ngayon ay maari na natin isangay ang function sa pinaka-itaas nang ating User Profile page template.

Sunod ay gusto natin na panatilihing users-well, subscribers-out sa admin area. At sa pinaka-itaas, Ating tanggalin ang admin bar para sa logged – in users. Muli nating ilagay ito sa ating 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' );

Sa wakas, hindi madaling mag-navigate ng login/logout screens. Tayoý magdagdag ng user - specific navigation. Ang aking ginawa ay gumawa ako ng function na naglalabas ng relevant code, at ito ay isinasangay sa ating templates/header.php kung saan ang main navigation ay nakagawad.

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

}

Buod

WordPress ay kahanga-hangang pundasyon para sa membership application. Ito ay halos marami nang functionality na nauugnay sa ganitong klaseng application. Ang pinakamagaling pa dyan, ang mga tao sa WordPress ay ginawa itong madali na mai-kabit sa mga pangyayari at salain ang mga nilalaman upang palawigin pa ang kung anong andun na.

Umaasa akong itoý nakapag-bigay sa iyo ng pamamaraan, mga ideya at kaalaman upang linangin ang sarili mong membership sites. Ito ay hindi nangangahulugang buong gabay sa topic na ito, bagkus ito ay magsisilbing isang pundasyon.

Anumang katugunan ay malugod na tinatanggap, at gagawin ko ang lahat ng aking makakaya upang masagot ang inyong mga katanungan na nasa mga komento.

Mga bagay na dapat tandaan

Mangyaring tandaan : kung ikaw ay nag-dodownload ng code na galing sa GitHub repository, kasama nito ang lahat ng files upang makuhang ang iyong theme ay maayos at umaandar. Ang ideya dito ay maari mong i-grab ang repo at magpatuloy na umandar ang kinakailangang Gulp at Bower commands at ikaw ay makakalayo! Kung ang gusto mo ay ang files lamang na naglalaman ng code na partikular sa seryeng ito, ang mga files ay nakalista sa ilalim:

• lahat ng files sa admin directory 
• lib/admin.php
• lib/membership.php
• template-user-profile.php