Δημιουργήστε ένα Plugin για Προσαρμοσμένη Φόρμα Εγγραφής

Αρχικά, το Wordpress προσφέρει μια προσαρμοσμένη φόρμα εγγραφής που μπορεί να χρησιμοποιηθεί για να εγγραφεί ένας νέος χρήστης, ή για να προσθέσουμε ένα χρήστη όταν τον προσθέτουμε σε μια ήδη υπάρχουσα εγκατάσταση WordPress. Αλλά τί γίνεται αν θέλετε να υλοποιήσετε μια προσαρμοσμένη φόρμα εγγραφής που δεν εμφανίζει τις επιλογές στον Πίνακα Διαχείρισης του WordPress;

Σε αυτό το σεμινάριο, θα μάθουμε πώς να δημιουργούμε μια προσαρμοσμένη φόρμα εγγραφής στο WordPress χρησιμοποιώντας ένα συνδυασμό από ετικέτες προτύπου και shortcodes.

Η προεπιλεγμένη φόρμα εγγραφής αποτελείται από ακριβώς δύο πεδία φόρμας - όνομα χρήστη και email.

Η παρουσία μόνο των πεδίων ονόματος χρήστη και email κάνουν απίστευτα εύκολη τη διαδικασία εγγραφής. Πρώτα, εισάγετε το όνομα χρήστη και το email και μετά θα σας σταλεί ένας κωδικός πρόσβασης. Στη συνέχεια, συνδέεστε με τον κωδικό πρόσβασης και στη συνέχεια ολοκληρώνετε το προφίλ σας και αλλάζετε του κωδικού πρόσβασης σε κάτι που να θυμάστε.

Αντί να κάνετε το χρήστη να περάσει από όλη την παραπάνω διαδικασία για να εγγραφεί στο site σας, γιατί να μην παρέχετε μια απλή φόρμα εγγραφής που να αποτελείται από κάποια σημαντικά επιπλέον πεδία εκτός από το προεπιλεγμένο όνομα χρήστη και το email όπως έναν κωδικό πρόσβασης, μια διεύθυνση URL προς την ιστοσελίδα τους, μια βιογραφία, ένα ψευδώνυμο και το όνομα και επώνυμό του.

Αυτό είναι ιδιαίτερα χρήσιμο σε μια ιστοσελίδα με πολλούς συγγραφείς όπως το Tuts+.

Σε αυτό το άρθρο, εμείς θα δημιουργήσουμε ένα plugin για προσαρμοσμένη φόρμα εγγραφής με τα εξής πεδία φόρμας:

• όνομα χρήστη
• κωδικό πρόσβασης
• email
• διεύθυνση URL της ιστοσελίδας
• όνομα
• επώνυμο
• ψευδώνυμο
• βιογραφία (ή μια ενότητα "σχετικά")

Η προσαρμοσμένη φόρμα εγγραφής μπορεί ύστερα στο WordPress χρησιμοποιώντας το shortcode του plugin και τη συσχετισμένη ετικέτα προτύπου.

Με το shortcode, μπορείτε να δημιουργήσετε μια σελίδα και να την κάνετε την επίσημη σελίδα εγγραφής του site σας. Μπορείτε επίσης να χρησιμοποιήσετε το shortcode μέσα σε μια δημοσίευση ώστε ο χρήστης να μπορεί να εγγραφεί στο site μετά την ανάγνωση ενός από τα άρθρα σας.

Εάν θέλετε να προσθέσετε στη φόρμα εγγραφής στο sidebar ή μια συγκεκριμένη θέση στην ιστοσελίδα σας και, μπορείτε να επεξεργαστείτε το WordPress θέμα, αλλά τοποθετώντας την ετικέττα προτύπου στην επιθυμητή θέση.

Πριν αρχίσουμε την δημιουργία του plugin της φόρμας εγγραφής, αξίζει να σημειωθεί ότι το όνομα χρήστη, ο κωδικός πρόσβασης και το πεδίο του email είναι απαραίτητα.

Εμείς θα εφαρμόσουμε αυτόν τον κανόνα, όταν γράφουμε τη συνάρτηση επικύρωσης.

Premium Επιλογή

Αυτό το σεμινάριο θα σας διδάξει πώς να φτιάξετε το plugin από το μηδέν, αλλά αν ψάχνετε για μια λύση γρήγορη, plug-and-play, δοκιμάστε το plugin WordPress Registration Form στην αγορά Envato. Μπορείτε να ορίσετε ένα ευρύ φάσμα πεδίων καταχώρησης με έλεγχο επικύρωσης. Μόλις ολοκληρωθεί η εγγραφή, αποστέλλεται ένα μήνυμα ηλεκτρονικού ταχυδρομείου στο νέο μέλος με τα στοιχεία σύνδεσής του. Τα πρότυπα ηλεκτρονικού ταχυδρομείου μπορούν να τροποποιηθούν για εγγραφή, αλλαγή κωδικού πρόσβασης, κλπ.

Μια άλλη επιλογή είναι απλά να κάνετε μια παραγγελία στο Envato Studio. Μπορείτε να επιλέξετε το σωστό άτομο από ένα ευρύ φάσμα από έμπειρους προγραμματιστές WordPress plugin. Στη συνέχεια, μπορείτε να στείλετε τις απαιτήσεις σας και να αφήσετε τον προγραμματιστή να δημιουργήσει το plugin σας μέσα στο συμφωνημένο χρονικό διάστημα.

Για παράδειγμα, ο Alisaleem252 θα αναπτύξει ένα προσαρμοσμένο WordPress plugin που θα είναι συμβατό με την τελευταία έκδοση του WordPress και άλλα plugins στο WordPress Repository σύμφωνα με τις απαιτήσεις σας.

Θα πάρετε:

• προσαρμοσμένο widget, εάν είναι απαραίτητο
• προσαρμοσμέν shortcode εάν είναι απαραίτητο
• προσαρμοσμένο τύπο ανάρτησης, εάν είναι απαραίτητο
• αξιόπιστη εξυπηρέτηση

Η πλήρης υπηρεσία κοστίζει μόνο $300, και το plugin σας θα είναι έτοιμο σε 10 ημέρες. Ο Alisaleem252 έχει μια εκτίμηση έγκρισης 98% από προηγούμενους πελάτες. Οπότε γιατί να μην δοκιμάσετε του δημοφιλή υπηρεσία Ανάπτυξη Προσαρμοσμένου WordPress Plugin!

Δημιουργώντας το Plugin

Aς ξεκινήσουμε όμως με την κωδικοποίηση του plugin. Πρώτα, ας περιλάβουμε την κεφαλίδα του plugin.

1

<?php

2

/*

3

  Plugin Name: Custom Registration

4

  Plugin URI: https://code.tutsplus.com

5

  Description: Updates user rating based on number of posts.

6

  Version: 1.0

7

  Author: Agbonghama Collins

8

  Author URI: http://tech4sky.com

9

 */

Στη συνέχεια, δημιουργούμε μια συνάρτηση PHP που περιέχει τον κώδικα HTML της φόρμας εγγραφής.

1

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

2

    echo '

3

    <style>

4

    div {

5

      margin-bottom:2px;

6

	}

7

8

	input{

9

		margin-bottom:4px;

10

	}

11

	</style>

12

	';

13

14

    echo '

15

    <form action="' . $_SERVER['REQUEST_URI'] . '" method="post">

16

	<div>

17

	<label for="username">Username <strong>*</strong></label>

18

	<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">

19

	</div>

20

21

	<div>

22

	<label for="password">Password <strong>*</strong></label>

23

	<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">

24

	</div>

25

26

	<div>

27

	<label for="email">Email <strong>*</strong></label>

28

	<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">

29

	</div>

30

31

	<div>

32

	<label for="website">Website</label>

33

	<input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">

34

	</div>

35

36

	<div>

37

	<label for="firstname">First Name</label>

38

	<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">

39

	</div>

40

41

	<div>

42

	<label for="website">Last Name</label>

43

	<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">

44

	</div>

45

46

	<div>

47

	<label for="nickname">Nickname</label>

48

	<input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">

49

	</div>

50

51

	<div>

52

	<label for="bio">About / Bio</label>

53

	<textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>

54

	</div>

55

	<input type="submit" name="submit" value="Register"/>

56

	</form>

57

	';

58

}

Παρατηρήσατε το πεδίο εγγραφής που περνιέται στη συνάρτηση παραπάνω ως μεταβλητή; Στον κώδικα της συνάρτησης, θα δείτε στιγμιότυπα του παρακάτω κώδικα, για παράδειγμα:

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

Ο τριαδικός τελεστής ελέγχει τα περιεχόμενα του καθολικού  $_POST πίνακα για να δει εάν η φόρμα περιέχει κάποια τιμή. Εάν περιέχει μια τιμή, συμπληρώνει τα πεδία της φόρμας με την τιμή για να γλιτώσει το χρήστη από την εκ νέου εισαγωγή στο πεδίο εισόδου.

Μια φόρμα εγγραφής δεν είναι ποτέ πλήρης μέχρι να επικυρώσετε και να ελέγξετε την είσοδο του χρήστη. Ως αποτέλεσμα, θα δημιουργήσουμε μια συνάρτηση επικύρωσης με όνομα registration_validation.

Για να απαλύνουμε τον πόνο της επικύρωσης, θα χρησιμοποιήσουμε την κλαση WordPress WP_Error. Ακολουθήστε με όσο γράφουμε τον κώδικα για τη συνάρτηση επικύρωσης:

1. Δημιουργήστε τη συνάρτηση και περάστε το πεδίο εγγραφής ως όρισμα της συνάρτησης.
   

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

2. Αρχικοποιήστε την κλάση WP_Error και κάντε τη μεταβλητή στιγμιοτύπου καθολική έτσι ώστε να μπορεί να προσπελαστεί έξω από την εμβέλεια της συνάρτησης.
   

   1	global $reg_errors;
   2	$reg_errors = new WP_Error;

3. Θυμηθείτε: Είπαμε ότι το όνομα χρήστη, ο κωδικός πρόσβασης και το email απαιτούνται και δεν πρέπει να παραβλεφθούν. Για να επιβάλουμε τον κανόνα, θα πρέπει να ελέγξουμε αν οποιοδήποτε από το πεδίο είναι κενό. Εάν είναι άδειο, προσαρτούμε το μήνυμα λάθους στην καθολική κλάση WP_Error.

   1	if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
   2	$reg_errors->add('field', 'Required form field is missing');
   3	}

4. Ελέγχουμε επίσης για να βεβαιωθούμε ότι ο αριθμός των χαρακτήρων του ονόματος χρήστη δεν είναι λιγότερο από 4.

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

5. Ελέγχουμε εάν το όνομα έχει ήδη καταχωρηθεί.

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

6. Χρησιμοποιούμε τις υπηρεσίες της συνάρτησης WordPress validate_username συνάρτηση για να βεβαιωθούμε ότι το όνομα χρήστη είναι έγκυρο.

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

7. Βεβαιωνόμαστε ότι ο κωδικός πρόσβασης που εισάγεται από τους χρήστες δεν είναι μικρότερος από 5 χαρακτήρες.

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

8. Ελέγχουμε αν το email είναι ένα έγκυρο email.

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

9. Ελέγχουμε αν το email είναι ήδη καταχωρημένο.

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

10. Εάν συμπληρωθεί το πεδίο ιστοσελίδας, ελέγχουμε για να δούμε αν είναι έγκυρο.

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

11. Τέλος, εκτελούμε βρόχο μέσα από τα σφάλματα στο στιγμιότυπό μας WP_Error και εμφανίζουμε το μεμονωμένο σφάλμα.
    

    1	if ( is_wp_error( $reg_errors ) ) {
    2
    3	foreach ( $reg_errors->get_error_messages() as $error ) {
    4
    5	echo '<div>';
    6	echo '<strong>ERROR</strong>:';
    7	echo $error . '<br/>';
    8	echo '</div>';
    9
    10	}
    11
    12	}

    Τελειώσαμε με τον κώδικα της συνάρτησης επικύρωσης.

Επόμενη είναι η συνάρτηση του plugin complete_registration() που χειρίζεται την εγγραφή του χρήστη.
Η εγγραφή του χρήστη γίνεται ουσιαστικά από τη συνάρτηση wp_insert_user, η οποία δέχεται μια σειρά από δεδομένα χρήστη.

1

function complete_registration() {

2

    global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;

3

    if ( 1 > count( $reg_errors->get_error_messages() ) ) {

4

        $userdata = array(

5

        'user_login'    => 	$username,

6

        'user_email' 	=> 	$email,

7

        'user_pass' 	=> 	$password,

8

        'user_url' 		=> 	$website,

9

        'first_name' 	=> 	$first_name,

10

        'last_name' 	=> 	$last_name,

11

        'nickname' 		=> 	$nickname,

12

        'description' 	=> 	$bio,

13

		);

14

        $user = wp_insert_user( $userdata );

15

        echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';   

16

	}

17

}

Στη συνάρτηση complete_registration() παραπάνω, κάναμε το στιγμιότυπο της WP_Error, $reg_errors και τη μεταβλητή των πεδίων φόρμας καθολικά έτσι ώστε να μπορούμε να έχουμε πρόσβαση στη μεταβλητή σε global εμβέλεια.

Στη συνέχεια ελέγχουμε αν το στιγμιότυπο χειρισμού σφαλμάτων $reg_errors περιέχει κάποιο σφάλμα. Εάν δεν εντοπιστεί κάποιο σφάλμα, προχωρούμε στη συμπλήρωση του πίνακα $userdata και εισαγάγουμε τα στοιχεία εγγραφής του χρήστη στη βάση δεδομένων του WordPress και εμφανίζουμε ένα μήνυμα Registration Complete με ένα σύνδεσμο στη σελίδα σύνδεσης.

Επόμενη, είναι η υπερ-συνάρτση custom_registration_function() που θέτει όλες τις λειτουργίες που δημιουργήσαμε παραπάνω σε χρήση.

1

function custom_registration_function() {

2

    if ( isset($_POST['submit'] ) ) {

3

        registration_validation(

4

        $_POST['username'],

5

        $_POST['password'],

6

        $_POST['email'],

7

        $_POST['website'],

8

        $_POST['fname'],

9

        $_POST['lname'],

10

        $_POST['nickname'],

11

        $_POST['bio']

12

    	);

13

14

		// sanitize user form input

15

        global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;

16

        $username	= 	sanitize_user( $_POST['username'] );

17

        $password 	= 	esc_attr( $_POST['password'] );

18

        $email 		= 	sanitize_email( $_POST['email'] );

19

        $website 	= 	esc_url( $_POST['website'] );

20

        $first_name = 	sanitize_text_field( $_POST['fname'] );

21

        $last_name 	= 	sanitize_text_field( $_POST['lname'] );

22

        $nickname 	= 	sanitize_text_field( $_POST['nickname'] );

23

        $bio 		= 	esc_textarea( $_POST['bio'] );

24

25

		// call @function complete_registration to create the user

26

		// only when no WP_error is found

27

        complete_registration(

28

        $username,

29

        $password,

30

        $email,

31

        $website,

32

        $first_name,

33

        $last_name,

34

        $nickname,

35

        $bio

36

		);

37

    }

38

39

    registration_form(

40

    	$username,

41

        $password,

42

        $email,

43

        $website,

44

        $first_name,

45

        $last_name,

46

        $nickname,

47

        $bio

48

		);

49

}

Επιτρέψτε μου να εξηγήσω τον κώδικα στη συνάρτηση custom_registration_function().

Πρώτα, καθορίζουμε αν η φόρμα έχει υποβληθεί ελέγχοντας αν το $_POST ['submit'] έχει οριστεί. Εάν η φόρμα έχει υποβληθεί, καλούμε τη συνάρτηση registration_validation για να επικυρώσουμε τη φόρμα που υπέβαλε ο χρήστης.

Ύστερα καθαρίζουμε τα δεδομένα της φόρμας και ορίζουμε τα δεδομένα σε μια μεταβλητή που ονομάζεται όπως το πεδίο της φόρμας. Τέλος, καλούμε την complete_registration για να καταχωρήσουμε το χρήστη.

Πρέπει να καλέσουμε τη συνάρτηση registration_form για να εμφανίσουμε τη φόρμα εγγραφής.

Θυμάστε που ανέφερα ότι πρόκειται να παρέχουμε υποστήριξη shortcode για το plugin εγγραφής; Παρακάτω είναι ο κώδικας για την υποστήριξη του shortcode.

1

// Register a new shortcode: [cr_custom_registration]

2

add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );

3

4

// The callback function that will replace [book]

5

function custom_registration_shortcode() {

6

    ob_start();

7

    custom_registration_function();

8

    return ob_get_clean();

9

}

Σε αυτό το σημείο είμαστε έτοιμοι με τον κώδικα του plugin. Παρακάτω είναι μια εικόνα που δείχνει πώς θα μοιάζει η φόρμα εγγραφής.

Σημειώστε ότι δεν μπορείτε να πάρετε ακριβώς την ίδια εμφάνιση στο WordPress site σας ως αποτέλεσμα των διαφορετικών στυλ CSS.

 Χρήση του Plugin

Για να υλοποιήσετε το plugin σε μια σελίδα ή ανάρτηση του WordPress, χρησιμοποιήστε το shortcode [cr_custom_registration].

Για να υλοποιήσετε τη φόρμα εγγραφής σε μια συγκεκριμένη πλευρά του θέματός σας, προσθέστε την εξής ετικέτα προτύπου - <?php custom_registration_function(); ? >.
Μπορείτε να βρείτε το αρχείο του plugin από τα συνημμένα σε αυτό το άρθρο.

Περίληψη

Σε αυτό το άρθρο, πέρασαμε από τη διαδικασία της δημιουργίας ενός plugin που προσθέτει μια προσαρμοσμένη φόρμα εγγραφής στο WordPress. Μπορείτε να επεκτείνετε περαιτέρω τη φόρμα εγγραφής για να συμπεριλάβετε επιπλέον πεδία όπως ο ρόλος χρήστη, λογαριασμό AOL IM, αλλά βεβαιωθείτε ότι το πεδίο φόρμας περίεχει έγκυρα μετα δεδομένα για το wp_insert_user.

Εάν έχετε τυχόν απορίες και προτάσεις, μη διστάσετε να τις αφήσετε στα σχόλια!

Να θυμάστε ότι αν δυσκολευτήκατε να ακολουθήσετε αυτό το σεμινάριο και θέλετε μια απλή λύση, μπορείτε να δοκιμάσετε το plugin WordPress Registration Form που βρίσκεται στην αγορά Envato.