Cara Mengembangkan Situs Keanggotaan dengan WordPress: Bagian 3

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product image — What You'll Be Creating

Sebelumnya di dalam serial, kami membahas bagaimana menyesuaikan formulir login dan pendaftaran WordPress. Kami kemudian menambahkan beberapa field kustom ke formulir pendaftaran kami. Saat ini, di bagian ketiga dan terakhir dari serial ini, kami akan membahas bagaimana mengembangkan bagian "my account" untuk pengguna situs Anda sehingga pengguna dapat mengedit informasi profil mereka.

Pengaturan Halaman

Hal pertama yang ingin kita lakukan adalah membuat Template Halaman untuk menampung konten kita. Saya suka memberi awalan template halaman saya dengan kata "template". Jadi file saya disebut template-user-profile.php dan PHP pembuka terlihat seperti ini:

<?php

/**
 * Template Name: User Profile
 */

Saya telah menyimpan ini di root direktori tema saya. Jika Anda tidak terbiasa dengan WordPress Page Templates saya sarankan Anda membaca tautan di atas. Mereka sangat berguna.

Sekarang mari kita menuju ke back-end WordPress dan buatlah sebuah halaman bernama "profile", dan di kotak meta Page Attributes tentukan template halaman yang baru kita buat. Setelah Anda mempublikasikan halaman ini, Anda akan memiliki halaman kosong di front-end: http://yourdomain/profile.

Sekarang untuk menyuntikkan beberapa konten ke dalam halaman kita. Kami ingin strukturnya menjadi konten halaman (yaitu apa pun yang tertulis di WYSIWYG WordPress) dan kemudian diikuti formulir profil kami.

Ini sering membantu untuk mendapatkan kode dari page.php dan menggunakannya sebagai titik awal untuk Template Halaman Anda. Kode ini sedikit berbeda tergantung pada tema Anda, namun kemungkinan besar akan berisi loop yang menampilkan beberapa konten halaman. Bagian konten biasanya diambil menggunakan fungsi WordPress get_template_part(). Tepat di bawah dimana konten telah diambil, mari kita masukkan formulir HTML kita. Jadi untuk rekap:

Copy dan paste kode dari page.php ke dalam Template Halaman kita.
Temukan di mana konten menjadi keluaran.
Tepat di bawahnya, masukkan kode berikut dan kemudian kita akan melewatinya:

<form role="form" action="" id="user_profile" method="POST">
    <?php wp_nonce_field( 'user_profile_nonce', 'user_profile_nonce_field' ); ?>
    <div class="form-group">
        <label for="first_name"><?php _e( 'First name', 'sage' ); ?></label>
        <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; ?>">
    </div>
    <div class="form-group">
        <label for="last_name"><?php _e( 'Last name', 'sage' ); ?></label>
        <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; ?>">
    </div>
    <div class="form-group">
        <label for="twitter_name"><?php _e( 'Twitter name', 'sage' ); ?></label>
        <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; ?>">
    </div>
    <div class="form-group">
        <label for="email"><?php _e( 'Email address', 'sage' ); ?></label>
        <input type="email" class="form-control" id="email" name="email" placeholder="<?php _e( 'Email address', 'sage' ); ?>" value="<?php echo $user_info->user_email; ?>">
    </div>
    <div class="form-group">
        <label for="pass1"><?php _e( 'Password', 'sage' ); ?></label>
        <input type="password" class="form-control" id="pass1" name="pass1" placeholder="<?php _e( 'Password', 'sage' ); ?>">
    </div>
    <div class="form-group">
        <label for="pass2"><?php _e( 'Repeat password', 'sage' ); ?></label>
        <input type="password" class="form-control" id="pass2" name="pass2" placeholder="<?php _e( 'Repeat password', 'sage' ); ?>">
    </div>
    <button type="submit" class="btn btn-default"><?php _e( 'Submit', 'sage' ); ?></button>
</form>

Tidak ada yang gila terjadi di sini: formulirnya menggunakan markup Bootstrap karena tema kami dibangun berdasarkan Bootstrap. Hal lain yang perlu diperhatikan adalah formulirnya dikirim menggunakan metode POST dan kami menyertakan wp_nonce_field—ini adalah jenis token keamanan yang membantu mencegah serangan berbahaya. Jika Anda tidak terbiasa dengan WordPress Nonce, saya sarankan membaca artikel ini.

Pengambilan Data

Dengan semua itu di tempatnya, Anda akan memiliki formulir di bagian depan situs, tapi tidak banyak berbuat. Kami ingin ia menampilkan data yang kami miliki untuk pengguna yang login. Anda mungkin telah memperhatikan atribut value dalam formulir kami meng-echo beberapa PHP.

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

Sekarang objek $user_info tidak ada karena kami belum pernah menulis kodenya, jadi mari kita mulai dari sana. Tempel kode berikut sebelum formulir kami di template-user-profile.php.

<?php

/**
 * Gets the user info.
 * Returned in an object.
 * 
 * http://codex.wordpress.org/Function_Reference/get_userdata
 */

$user_id = get_current_user_id();
$user_info = get_userdata( $user_id );

Dengan menggunakan beberapa fungsi asli WordPress, ia mendapatkan ID pengguna saat ini, dan dengan itu kita bisa mendapatkan data pengguna. Ini disimpan dalam objek yang disebut $user_info, dan seperti yang ditunjukkan di atas, kita dapat mengambil data pengguna dengan cukup mudah. Untuk melihat semua data yang tersimpan dalam objek itu, Anda bisa menjalankan var_dump seperti: <?php var_dump($user_info); ?>. Ini bisa berguna untuk debugging atau hanya untuk melihat apa yang bisa Anda akses.

Pengolahan Data

Ada satu bagian terakhir dari teka-teki itu, dan itu untuk memproses data, sehingga memungkinkan pengguna mengedit profil mereka. Untuk menjaga agar tetap teratur, saya memasukkan kode keanggotaan ke dalam sebuah file yang diberi nama membership.php. Ini ada di direktori lib dan telah disertakan dalam file functions.php kita. Setelah Anda melakukan ini, buka file membership.php yang baru Anda buat di editor kode, dan mari kita membuat fungsi yang akan memproses data pengguna.

Pertama, mari kita dengan cepat menjalankan logikanya. Saat tombol kirim ditekan, kami ingin memastikan bahwa field nonce kami telah dikirim—ini memeriksa apakah data berasal dari tempat yang tepat.

Jika kondisi itu terpenuhi, kami ingin mendapatkan ID pengguna saat ini karena kami memerlukan data ini untuk menyimpan data. Kemudian kami ingin mengatur data kami ke dalam struktur yang mirip WordPress—dalam hal ini adalah array dengan kunci tertentu. Sebelum menyimpan datanya, kami juga ingin memvalidasi dan membersihkannya. Dan terakhir kita ingin menampilkan pesan ke pengguna kita, entah sukses atau salah.

Dan kode untuk semuanya terlihat seperti ini:

<?php

/**
 * Process the profile editor form
 */
function tutsplus_process_user_profile_data() {
    
    if ( isset( $_POST['user_profile_nonce_field'] ) && wp_verify_nonce( $_POST['user_profile_nonce_field'], 'user_profile_nonce' ) ) {
        
        // Get the current user id.
        $user_id = get_current_user_id();
        
        // Put our data into a better looking array and sanitize it.
        $user_data = array(
            'first_name' => sanitize_text_field( $_POST['first_name'] ),
            'last_name' => sanitize_text_field( $_POST['last_name'] ),
            'user_email' => sanitize_email( $_POST['email'] ),
            'twitter_name' => sanitize_text_field( $_POST['twitter_name'] ),
            'user_pass' => $_POST['pass1'],
        );
        
        if ( ! empty( $user_data['user_pass'] ) ) {
            
            // Validate the passwords to check they are the same.
            if ( strcmp( $user_data['user_pass'], $_POST['pass2'] ) !== 0 ) {

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

                exit;
            }

        } else {

            // If the password fields are not set don't save.
            unset( $user_data['user_pass'] );
        }

        // Save the values to the post.
        foreach ( $user_data as $key => $value ) {

            $results = '';
            
            // http://codex.wordpress.org/Function_Reference/wp_update_user
            if ( $key == 'twitter_name' ) {

                $results = update_user_meta( $user_id, $key, $value );
                unset( $user_data['twitter_name'] );

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

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

            } else {

                // Save the remaining values.
                $results = wp_update_user( array( 'ID' => $user_id, $key => $value ) );

            }

            if ( ! is_wp_error( $results ) ) {
                
                wp_redirect( '?profile-updated=true' );
                
            }
        }

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

add_action( 'tutsplus_process_user_profile', 'tutsplus_process_user_profile_data' );

Sekarang Anda mungkin memperhatikan bahwa datanya sedang disimpan menggunakan tiga fungsi WordPress yang berbeda:

update_user_meta() untuk nama Twitter
wp_set_password() untuk kata sandinya
wp_update_user() untuk data yang tersisa

Dan Anda berhak mempertanyakan ini. Pada dasarnya data meta kustom (nama Twitter) perlu diolah menggunakan fungsi relatif dan bukan fungsi pengguna pembaruan umum. Sedangkan untuk kata sandi, karena ia bisa bekerja dengan wp_update_user(), saya memiliki masalah dengan hal itu dan lebih memilih untuk menggunakan metode ini. Ingat ini hanya panduan, dan seringkali kode ini ditujukan untuk menunjukkan metode yang berbeda untuk memenuhi kebutuhan Anda.

Oke, jadi sekarang fungsi kita mengolah datanya, tapi tidak dipanggil dimana-mana. Di akhir fungsi kami, Anda bisa melihat ada tindakan yang terkait dengannya. Jadi untuk memanggil fungsi itu kita hanya perlu menggunakan yang disediakan WordPress: do_action();. Jadi tempelkan baris ini di atas formulir Anda di template halaman profil pengguna yang telah kami buat sebelumnya:

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

Dengan itu di tempatnya, ketika kita mengirimkan formulir kita, itu harus berjalan melalui fungsi kita dan mengolah datanya.

Pesan Kesalahan dan Sukses

Formulir profil kami harus menyimpan atau menolak data sekarang. Mungkin kedua password itu tidak sama dan tidak menyimpannya. Tidak ada pesan untuk memberikan umpan balik kepada pengguna. Mari selamatkan kesedihan dan beberapa pengguna kita dan berikan beberapa pesan kepada mereka.

Dalam fungsi tutsplus_process_user_profile(), Anda mungkin telah menyadarinya menambahkan string kueri yang berbeda ke URL bergantung pada hasil pemrosesan. Jadi jika semuanya tersimpan dan berhasil maka URL kita akan ditambahkan dengan ?profile-updated=true, dan ini bervariasi berdasarkan hasilnya. Yang perlu kita lakukan adalah memicu pesan berdasarkan tanggapan ini.

Di bawah ini saya telah menggunakan filter untuk meraih konten, dan melalui keajaiban $_GET kita dapat memeriksa parameter dan mengeluarkan apa yang kita butuhkan.

<?php

/**
 * Display the correct message based on the query string.
 *
 * @param string $content Post content.
 *
 * @return string Message and content.
 */
function tutsplus_display_messages( $content ) {

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

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

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

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

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

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

    }

    return $message_markup . $content;
}

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

Oke, tidak cukup di sana—kita menggunakan fungsi yang disebut tutsplus_get_message_markup() di atas, tapi kita belum mendefinisikannya. Itu membutuhkan dua parameter:

sebuah string: pesan yang akan ditampilkan
sebuah string: tingkat keparahan peringatan untuk ditunjukkan berdasarkan Bootstrap

Jadi, mari tentukan fungsi tutsplus_get_message_markup() kita:

<?php

/**
 * A little helper function to generate the Bootstrap alerts markup.
 *
 * @param string $message Message to display.
 * @param string $severity Severity of message to display.
 * 
 * @return string Message markup.
 */
function tutsplus_get_message_markup( $message, $severity ) {

    $output = '<div class="alert alert-' . $severity . ' alert-dismissable">';
        $output .= '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">';
            $output .= '<i class="fa fa-times-circle"></i>';
        $output .= '</button>';
        $output .= '<p class="text-center">' . $message . '</p>';
    $output .= '</div>';

    return $output;
    
}

Hebat. Sekarang anggota kita bisa melihat apakah data mereka tersimpan atau tidak.

Kredit Tambahan

Jadi sekarang kita memiliki prototipe yang berfungsi untuk situs keanggotaan. Sebagian besar fungsi ini dikirimkan bersama WordPress, namun kita telah menata dan men-tweak-nya untuk membuatnya menjadi pengalaman yang lebih baik bagi pengguna kita. Jadi sekarang mari kita tandai 'I' dan menyilang 'T' kita untuk memperbaiki pengalamannya sedikit lebih.

Pertama, kami ingin agar pengguna yang tidak login tidak bisa mengakses halaman profil. Pengalihan sederhana ke beranda akan dilakukan. Saya telah membuat fungsi yang melakukan hal itu, dan saya memanggilnya di halaman yang ingin saya akses secara eksklusif oleh pengguna yang login.

Inilah fungsinya, yang ditempatkan di membership.php:

<?php

/**
 * Makes pages where this function is called only
 * accessible if you are logged in.
 */
function tutsplus_private_page() {

    if ( ! is_user_logged_in() ) {
        
        wp_redirect( home_url() );
        
        exit();
        
    }
    
}

Sekarang kita bisa memanggil fungsi di bagian atas template halaman Profil Pengguna kita.

Selanjutnya kami ingin menjaga pengguna—yah, pelanggan—keluar dari area admin. Dan selain itu, mari kita hapus bar admin untuk pengguna yang login. Sekali lagi mari kita menempatkan ini di membership.php kita.

<?php

/**
 * Stop subscribers from accessing the backed
 * Also turn off the admin bar for anyone but administrators.
 */
function tutsplus_lock_it_down() {
    
    if ( ! current_user_can('administrator') && ! is_admin() ) {
        
        show_admin_bar( false );
        
    }
    
    if ( current_user_can( 'subscriber' ) && is_admin() ) {
        
        wp_safe_redirect( 'profile' );
        
    }
    
}

add_action( 'after_setup_theme', 'tutsplus_lock_it_down' );

Dan akhirnya, tidak mudah menavigasi layar login/logout. Mari tambahkan beberapa navigasi khusus pengguna. Apa yang telah saya lakukan adalah membuat sebuah fungsi yang mengeluarkan kode yang relevan, dan ini kemudian dipanggil dalam templates/header.php dimana navigasi utama di-render.

<?php

/**
 * Outputs some user specific navigation.
 */
function tutsplus_user_nav() {

    $user_id = get_current_user_id();
    $user_name = get_user_meta( $user_id, 'first_name', true );
    $welcome_message = __( 'Welcome', 'sage' ) . ' ' . $user_name;

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

        if ( is_user_logged_in() ) {

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

        } else {

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

        }

    echo '</ul>';
    
}

Ringkasan

WordPress adalah pondasi yang menakjubkan untuk aplikasi keanggotaan. Ini sudah memiliki begitu banyak fungsi yang terkait dengan jenis aplikasi ini. Selain itu, orang-orang di WordPress telah membuatnya cukup mudah untuk menghubungkan peristiwa dan menyaring konten sehingga kita dapat memperpanjang apa yang sudah ada di sana.

Saya harap ini telah memberi Anda metode, gagasan dan pengetahuan untuk mengembangkan situs keanggotaan Anda sendiri. Ini sama sekali bukan panduan lengkap tentang topik ini, melainkan berfungsi sebagai pondasi.

Setiap umpan balik akan diterima, dan saya akan melakukan yang terbaik untuk menjawab pertanyaan apapun di komentar

Hal yang Perlu Diperhatikan

Harap diperhatikan: jika Anda mengunduh kode dari repositori GitHub, itu mencakup semua file agar tema Anda aktif dan berjalan. Idenya adalah bahwa Anda dapat mengambil repo-nya dan cukup menjalankan perintah Gulp dan Bower yang diperlukan dan Anda akan pergi! Jika Anda hanya menginginkan file yang berisi kode khusus untuk serial ini, file-file tersebut tercantum di bawah ini: