Cum să afișezi formularul de înregistrare utilizator în partea din față a site-ului?

Procesul implică 2 pași:

1. afișarea formularului pe frontend
2. salvarea datelor la trimitere

Există 3 abordări diferite care îmi vin în minte pentru afișarea formularului pe frontend:

• utilizarea formularului încorporat de înregistrare, editarea stilurilor etc. pentru a-l face mai "asemănător frontend"
• utilizarea unei pagini/postări WordPress și afișarea formularului folosind un shortcode
• utilizarea unui șablon dedicat, neconectat la nicio pagină/postare, dar apelat printr-un URL specific

Pentru acest răspuns voi folosi ultima variantă. Motivele sunt:

• utilizarea formularului încorporat poate fi o idee bună, dar personalizările profunde pot fi foarte dificile, iar dacă se dorește și personalizarea câmpurilor, dificultatea crește
• utilizarea unei pagini WordPress în combinație cu un shortcode nu este foarte fiabilă și cred că shortcode-urile nu ar trebui utilizate pentru funcționalități, ci doar pentru formatare și altele asemenea

1: Construirea URL-ului

Toți știm că formularul implicit de înregistrare al unui site WordPress este adesea o țintă pentru spammeri. Folosirea unui URL personalizat ajută la rezolvarea acestei probleme. În plus, doresc să folosesc un URL variabil, adică URL-ul formularului de înregistrare să nu fie întotdeauna același, ceea ce face viața spammerilor mai grea. Trucul se realizează folosind un nonce în URL:

/**
* Generează URL dinamic pentru înregistrare
*/
function custom_registration_url() {
  $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
  return home_url( $nonce );
}

/**
* Generează link dinamic pentru înregistrare
*/
function custom_registration_link() {
  $format = '<a href="%s">%s</a>';
  printf(
    $format,
    custom_registration_url(), __( 'Înregistrează-te', 'custom_reg_form' )
  );
}

Folosind aceste funcții este ușor să afișezi în șabloane un link către formularul de înregistrare, chiar dacă acesta este dinamic.

2: Recunoașterea URL-ului, primul stub al clasei Custom_Reg\Custom_Reg

Acum trebuie să recunoaștem URL-ul. În acest scop voi începe să scriu o clasă, care va fi finalizată mai târziu în răspuns:

<?php
// nu salva, doar un stub
namespace Custom_Reg;

class Custom_Reg {

  function checkUrl() {
    $url_part = $this->getUrl();
    $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
    if ( ( $url_part === $nonce ) ) {
      // nu face nimic dacă înregistrarea nu este permisă sau utilizatorul este autentificat
      if ( is_user_logged_in() || ! get_option('users_can_register') ) {
        wp_safe_redirect( home_url() );
        exit();
      }
      return TRUE;
    }
  }

  protected function getUrl() {
    $home_path = trim( parse_url( home_url(), PHP_URL_PATH ), '/' );
    $relative = trim(str_replace($home_path, '', esc_url(add_query_arg(array()))), '/');
    $parts = explode( '/', $relative );
    if ( ! empty( $parts ) && ! isset( $parts[1] ) ) {
      return $parts[0];
    }
  }

}

Funcția verifică prima parte a URL-ului după home_url() și dacă se potrivește cu nonce-ul nostru, returnează TRUE. Această funcție va fi utilizată pentru a verifica cererea noastră și pentru a efectua acțiunile necesare pentru afișarea formularului.

3: Clasa Custom_Reg\Form

Voi scrie acum o clasă care va fi responsabilă pentru generarea markup-ului formularului. O voi folosi și pentru a stoca într-o proprietate calea către fișierul de șablon care ar trebui utilizat pentru afișarea formularului.

<?php 
// fișier: Form.php
namespace Custom_Reg;

class Form {

  protected $fields;

  protected $verb = 'POST';

  protected $template;

  protected $form;

  public function __construct() {
    $this->fields = new \ArrayIterator();
  }

  public function create() {
    do_action( 'custom_reg_form_create', $this );
    $form = $this->open();
    $it =  $this->getFields();
    $it->rewind();
    while( $it->valid() ) {
      $field = $it->current();
      if ( ! $field instanceof FieldInterface ) {
        throw new \DomainException( "Câmp invalid" );
      }
      $form .= $field->create() . PHP_EOL;
      $it->next();
    }
    do_action( 'custom_reg_form_after_fields', $this );
    $form .= $this->close();
    $this->form = $form;
    add_action( 'custom_registration_form', array( $this, 'output' ), 0 );
  }

  public function output() {
    unset( $GLOBALS['wp_filters']['custom_registration_form'] );
    if ( ! empty( $this->form ) ) {
      echo $this->form;
    }
  }

  public function getTemplate() {
    return $this->template;
  }

  public function setTemplate( $template ) {
    if ( ! is_string( $template ) ) {
      throw new \InvalidArgumentException( "Șablon invalid" );
    }
    $this->template = $template;
  }

  public function addField( FieldInterface $field ) {
    $hook = 'custom_reg_form_create';
    if ( did_action( $hook ) && current_filter() !== $hook ) {
      throw new \BadMethodCallException( "Adaugă câmpuri înainte de apelarea {$hook}" );
    }
    $this->getFields()->append( $field );
  }

  public function getFields() {
    return $this->fields;
  }

  public function getVerb() {
    return $this->verb;
  }

  public function setVerb( $verb ) {
    if ( ! is_string( $verb) ) {
     throw new \InvalidArgumentException( "Verb invalid" );
    }
    $verb = strtoupper($verb);
    if ( in_array($verb, array( 'GET', 'POST' ) ) ) $this->verb = $verb;
  }

  protected function open() {
    $out = sprintf( '<form id="custom_reg_form" method="%s">', $this->verb ) . PHP_EOL;
    $nonce = '<input type="hidden" name="_n" value="%s" />';
    $out .= sprintf( $nonce,  wp_create_nonce( 'custom_reg_form_nonce' ) ) . PHP_EOL;
    $identity = '<input type="hidden" name="custom_reg_form" value="%s" />';
    $out .= sprintf( $identity,  __CLASS__ ) . PHP_EOL;
    return $out;
  }

  protected function close() {
    $submit =  __('Înregistrează-te', 'custom_reg_form');
    $out = sprintf( '<input type="submit" value="%s" />', $submit );
    $out .= '</form>';
    return $out;
  }

}

Clasa generează markup-ul formularului parcurgând toate câmpurile adăugate prin apelarea metodei create pe fiecare dintre ele. Fiecare câmp trebuie să fie o instanță a Custom_Reg\FieldInterface. Este adăugat un câmp ascuns suplimentar pentru verificarea nonce-ului. Metoda formularului este implicit 'POST', dar poate fi setată la 'GET' folosind metoda setVerb. Odată creat, markup-ul este salvat în proprietatea obiectului $form, care este afișat prin metoda output(), conectată la cârligul 'custom_registration_form': în șablonul formularului, simplul apel do_action( 'custom_registration_form' ) va afișa formularul.

4: Șablonul implicit

După cum am spus, șablonul pentru formular poate fi ușor suprascris, dar avem nevoie de un șablon de bază ca rezervă. Voi scrie aici un șablon foarte simplu, mai mult o demonstrație decât un șablon real.

<?php
// fișier: default_form_template.php
get_header();

global $custom_reg_form_done, $custom_reg_form_error;

if ( isset( $custom_reg_form_done ) && $custom_reg_form_done ) {
  echo '<p class="success">';
  _e(
    'Vă mulțumim, înregistrarea dvs. a fost trimisă, verificați-vă e-mailul.',
    'custom_reg_form'
  );
  echo '</p>';
} else {
  if ( $custom_reg_form_error ) {
    echo '<p class="error">' . $custom_reg_form_error  . '</p>';
  }
  do_action( 'custom_registration_form' );
}

get_footer();

5: Interfața Custom_Reg\FieldInterface

Fiecare câmp ar trebui să fie un obiect care implementează următoarea interfață

<?php 
// fișier: FieldInterface.php
namespace Custom_Reg;

interface FieldInterface {

  /**
   * Returnează ID-ul câmpului, utilizat pentru a denumi valoarea cererii și pentru parametrul 'name' al
   * câmpului de input HTML
   */
  public function getId();

  /**
   * Returnează constanta de filtrare care trebuie utilizată cu
   * filter_input pentru a obține valoarea din cerere
   */
  public function getFilter();

  /**
   * Returnează true dacă valoarea utilizată transmisă ca argument ar trebui acceptată, false dacă nu
   */
  public function isValid( $value = NULL );

  /**
   * Returnează true dacă câmpul este obligatoriu, false dacă nu
   */
  public function isRequired();

  /**
   * Returnează markup-ul de input al câmpului. Parametrul 'name' trebuie afișat
   * conform getId()
   */
  public function create( $value = '');
}

Cred că comentariile explică ce ar trebui să facă clasele care implementează această interfață.

6: Adăugarea unor câmpuri

Acum avem nevoie de câteva câmpuri. Putem crea un fișier numit 'fields.php' în care definim clasele de câmpuri:

<?php
// fișier: fields.php
namespace Custom_Reg;

abstract class BaseField implements FieldInterface {

  protected function getType() {
    return isset( $this->type ) ? $this->type : 'text';
  }

  protected function getClass() {
    $type = $this->getType();
    if ( ! empty($type) ) return "{$type}-field";
  }

  public function getFilter() {
    return FILTER_SANITIZE_STRING;
  }

  public function isRequired() {
    return isset( $this->required ) ? $this->required : FALSE;
  }

  public function isValid( $value = NULL ) {
    if ( $this->isRequired() ) {
      return $value != '';
    }
    return TRUE;
  }

  public function create( $value = '' ) {
    $label = '<p><label>' . $this->getLabel() . '</label>';
    $format = '<input type="%s" name="%s" value="%s" class="%s"%s /></p>';
    $required = $this->isRequired() ? ' required' : '';
    return $label . sprintf(
      $format,
      $this->getType(), $this->getId(), $value, $this->getClass(), $required
    );
  }

  abstract function getLabel();
}


class FullName extends BaseField {

  protected $required = TRUE;

  public function getID() {
    return 'fullname';
  }

  public function getLabel() {
    return __( 'Nume complet', 'custom_reg_form' );
  }

}

class Login extends BaseField {

  protected $required = TRUE;

  public function getID() {
    return 'login';
  }

  public function getLabel() {
    return __( 'Nume de utilizator', 'custom_reg_form' );
  }
}

class Email extends BaseField {

  protected $type = 'email';

  public function getID() {
    return 'email';
  }

  public function getLabel() {
    return __( 'E-mail', 'custom_reg_form' );
  }

  public function isValid( $value = NULL ) {
    return ! empty( $value ) && filter_var( $value, FILTER_VALIDATE_EMAIL );
  }
}

class Country extends BaseField {

  protected $required = FALSE;

  public function getID() {
    return 'country';
  }

  public function getLabel() {
    return __( 'Țară', 'custom_reg_form' );
  }
}

Am folosit o clasă de bază pentru a defini implementarea implicită a interfeței, totuși, se pot adăuga câmpuri foarte personalizate implementând direct interfața sau extinzând clasa de bază și suprascriind unele metode.

În acest moment avem totul pentru a afișa formularul, acum avem nevoie de ceva pentru a valida și salva câmpurile.

7: Clasa Custom_Reg\Saver

<?php
// fișier: Saver.php
namespace Custom_Reg;

class Saver {

  protected $fields;

  protected $user = array( 'user_login' => NULL, 'user_email' => NULL );

  protected $meta = array();

  protected $error;

  public function setFields( \ArrayIterator $fields ) {
    $this->fields = $fields;
  }

  /**
  * validează toate câmpurile
  */
  public function validate() {
    // dacă înregistrarea nu este permisă, returnează false
    if ( ! get_option('users_can_register') ) return FALSE;
    // dacă nu sunt setate câmpuri, returnează FALSE
    if ( ! $this->getFields() instanceof \ArrayIterator ) return FALSE;
    // mai întâi verifică nonce-ul
    $nonce = $this->getValue( '_n' );
    if ( $nonce !== wp_create_nonce( 'custom_reg_form_nonce' ) ) return FALSE;
    // apoi verifică toate câmpurile
    $it =  $this->getFields();
    while( $it->valid() ) {
      $field = $it->current();
      $key = $field->getID();
      if ( ! $field instanceof FieldInterface ) {
        throw new \DomainException( "Câmp invalid" );
      }
      $value = $this->getValue( $key, $field->getFilter() );
      if ( $field->isRequired() && empty($value) ) {
        $this->error = sprintf( __('%s este obligatoriu', 'custom_reg_form' ), $key );
        return FALSE;
      }
      if ( ! $field->isValid( $value ) ) {
        $this->error = sprintf( __('%s nu este valid', 'custom_reg_form' ), $key );
        return FALSE;
      }
      if ( in_array( "user_{$key}", array_keys($this->user) ) ) {
        $this->user["user_{$key}"] = $value;
      } else {
        $this->meta[$key] = $value;
      }
      $it->next();
    }
    return TRUE;
  }

  /**
  * Salvează utilizatorul folosind register_new_user care gestionează verificarea numelui de utilizator și a e-mailului
  * și trimite și e-mailul către noul utilizator
  * în plus salvează toate celelalte date personalizate în meta-ul utilizatorului
  *
  * @see register_new_user()
  */
  public function save() {
    // dacă înregistrarea nu este permisă, returnează false
    if ( ! get_option('users_can_register') ) return FALSE;
    // verifică câmpurile obligatorii
    if ( ! isset($this->user['user_login']) || ! isset($this->user['user_email']) ) {
      return false;
    }
    $user = register_new_user( $this->user['user_login'], $this->user['user_email'] );
    if ( is_numeric($user) ) {
      if ( ! update_user_meta( $user, 'custom_data', $this->meta ) ) {
        wp_delete_user($user);
        return FALSE;
      }
      return TRUE;
    } elseif ( is_wp_error( $user ) ) {
      $this->error = $user->get_error_message();
    }
    return FALSE;
  }

  public function getValue( $var, $filter = FILTER_SANITIZE_STRING ) {
    if ( ! is_string($var) ) {
      throw new \InvalidArgumentException( "Valoare invalidă" );
    }
    $method = strtoupper( filter_input( INPUT_SERVER, 'REQUEST_METHOD' ) );
    $type = $method === 'GET' ? INPUT_GET : INPUT_POST;
    $val = filter_input( $type, $var, $filter );
    return $val;
  }

  public function getFields() {
    return $this->fields;
  }

  public function getErrorMessage() {
    return $this->error;
  }

}

Această clasă are 2 metode principale, una (validate) care parcurge câmpurile, le validează și salvează datele corecte într-un array, iar a doua (save) salvează toate datele în baza de date și trimite parola prin e-mail către noul utilizator.

8: Utilizarea claselor definite: finalizarea clasei Custom_Reg

Acum putem lucra din nou la clasa Custom_Reg, adăugând metodele care "leagă" obiectele definite și le fac să funcționeze

<?php 
// fișier Custom_Reg.php
namespace Custom_Reg;

class Custom_Reg {

  protected $form;

  protected $saver;

  function __construct( Form $form, Saver $saver ) {
    $this->form = $form;
    $this->saver = $saver;
  }

  /**
   * Verifică dacă URL-ul de recunoscut este cel pentru pagina de formular de înregistrare
   */
  function checkUrl() {
    $url_part = $this->getUrl();
    $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
    if ( ( $url_part === $nonce ) ) {
      // nu face nimic dacă înregistrarea nu este permisă sau utilizatorul este autentificat
      if ( is_user_logged_in() || ! get_option('users_can_register') ) {
        wp_safe_redirect( home_url() );
        exit();
      }
      return TRUE;
    }
  }

  /**
   * Inițializează formularul, dacă este trimis, validează și salvează, dacă nu, doar îl afișează
   */
  function init() {
    if ( $this->checkUrl() !== TRUE ) return;
    do_action( 'custom_reg_form_init', $this->form );
    if ( $this->isSubmitted() ) {
      $this->save();
    }
    // nu este nevoie să creezi formularul dacă a fost deja salvat
    if ( ! isset( $custom_reg_form_done ) || ! $custom_reg_form_done ) {
      $this->form->create();
    }
    load_template( $this->getTemplate() );
    exit();
  }

  protected function save() {
    global $custom_reg_form_error;
    $this->saver->setFields( $this->form->getFields() );
    if ( $this->saver->validate() === TRUE ) { // validare?
      if ( $this->saver->save() ) { // salvat?
        global $custom_reg_form_done;
        $custom_reg_form_done = TRUE;
      } else { // eroare la salvare
        $err =  $this->saver->getErrorMessage(); 
        $custom_reg_form_error = $err ? : __( 'Eroare la salvare.', 'custom_reg_form' );
      }
    } else { // eroare de validare
       $custom_reg_form_error = $this->saver->getErrorMessage();
    }
  }

  protected function isSubmitted() {
    $type = $this->form->getVerb() === 'GET' ? INPUT_GET : INPUT_POST;
    $sub = filter_input( $type, 'custom_reg_form', FILTER_SANITIZE_STRING );
    return ( ! empty( $sub ) && $sub === get_class( $this->form ) );
  }

  protected function getTemplate() {
    $base = $this->form->getTemplate() ? : FALSE;
    $template = FALSE;
    $default = dirname( __FILE__ ) . '/default_form_template.php';
    if ( ! empty( $base ) ) {
      $template = locate_template( $base );
    }
    return $template ? : $default;
  }

   protected function getUrl() {
    $home_path = trim( parse_url( home_url(), PHP_URL_PATH ), '/' );
    $relative = trim( str_replace( $home_path, '', add_query_arg( array() ) ), '/' );
    $parts = explode( '/', $relative );
    if ( ! empty( $parts ) && ! isset( $parts[1] ) ) {
      return $parts[0];
    }
  }

}

Constructorul clasei acceptă o instanță a Form și una a Saver.

Metoda init() (folosind checkUrl()) verifică prima parte a URL-ului după home_url(), iar dacă se potrivește cu nonce-ul corect, verifică dacă formularul a fost deja trimis, dacă da, folosind obiectul Saver, validează și salvează datele utilizatorului, altfel doar afișează formularul.

Metoda init() declanșează și cârligul de acțiune 'custom_reg_form_init' trecând instanța formularului ca argument: acest cârlig ar trebui utilizat pentru a adăuga câmpuri, pentru a configura șablonul personalizat și, de asemenea, pentru a personaliza metoda formularului.

9: Punerea laolaltă a componentelor

Acum trebuie să scriem fișierul principal al pluginului, unde putem

• include toate fișierele
• încărca textdomain-ul
• porni întregul proces folosind instanțierea clasei Custom_Reg și apelarea metodei init() pe ea folosind un cârlig suficient de devreme
• folosi 'custom_reg_form_init' pentru a adăuga câmpuri la clasa formularului

Deci:

<?php 
/**
 * Plugin Name: Formular personalizat de înregistrare
 * Description: Doar un exemplu simplu de plugin pentru a răspunde la o întrebare WPSE
 * Plugin URI: https://wordpress.stackexchange.com/questions/10309/
 * Author: G. M.
 * Author URI: https://wordpress.stackexchange.com/users/35541/g-m
 *
 */

if ( is_admin() ) return; // acest plugin este dedicat frontend-ului

load_plugin_textdomain(
  'custom_reg_form',
  FALSE,
  plugin_dir_path( __FILE__ ) . 'langs'
); 

require_once plugin_dir_path( __FILE__ ) . 'FieldInterface.php';
require_once plugin_dir_path( __FILE__ ) . 'fields.php';
require_once plugin_dir_path( __FILE__ ) . 'Form.php';
require_once plugin_dir_path( __FILE__ ) . 'Saver.php';
require_once plugin_dir_path( __FILE__ ) . 'CustomReg.php';

/**
* Generează URL dinamic pentru înregistrare
*/
function custom_registration_url() {
  $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
  return home_url( $nonce );
}

/**
* Generează link dinamic pentru înregistrare
*/
function custom_registration_link() {
  $format = '<a href="%s">%s</a>';
  printf(
    $format,
    custom_registration_url(), __( 'Înregistrează-te', 'custom_reg_form' )
  );
}

/**
* Configurare, afișare și salvare a formularului
*/
add_action( 'wp_loaded', function() {
  try {
    $form = new Custom_Reg\Form;
    $saver = new Custom_Reg\Saver;
    $custom_reg = new Custom_Reg\Custom_Reg( $form, $saver );
    $custom_reg->init();
  } catch ( Exception $e ) {
    if ( defined('WP_DEBUG') && WP_DEBUG ) {
      $msg = 'Excepție la  ' . __FUNCTION__;
      $msg .= ', Tip: ' . get_class( $e ) . ', Mesaj: ';
      $msg .= $e->getMessage() ? : 'Eroare necunoscută';
      error_log( $msg );
    }
    wp_safe_redirect( home_url() );
  }
}, 0 );

/**
* Adaugă câmpuri la formular
*/
add_action( 'custom_reg_form_init', function( $form ) {
  $classes = array(
    'Custom_Reg\FullName',
    'Custom_Reg\Login',
    'Custom_Reg\Email',
    'Custom_Reg\Country'
  );
  foreach ( $classes as $class ) {
    $form->addField( new $class );
  }
}, 1 );

10: Sarcini lipsă

Acum totul este aproape gata. Trebuie doar să personalizăm șablonul, probabil adăugând un fișier de șablon personalizat în tema noastră.

Putem adăuga stiluri și scripturi specifice doar pentru pagina de înregistrare personalizată în acest fel

add_action( 'wp_enqueue_scripts', function() {
  // dacă nu este pe formularul de înregistrare personalizat, nu face nimic
  if ( did_action('custom_reg_form_init') ) {
    wp_enqueue_style( ... );
    wp_enqueue_script( ... );
  }
});

Folosind această metodă putem încărca niște scripturi JS pentru a gestiona validarea pe partea de client, de exemplu acesta. Markup-ul necesar pentru a face acest script să funcționeze poate fi gestionat ușor editând clasa Custom_Reg\BaseField.

Dacă dorim să personalizăm e-mailul de înregistrare, putem folosi metoda standard și având date personalizate salvate în meta, le putem folosi în e-mail.

Ultima sarcină pe care probabil o vom dori să o implementăm este prevenirea cererilor către formularul implicit de înregistrare, la fel de simplu ca:

add_action( 'login_form_register', function() { exit(); } );

Toate fișierele pot fi găsite într-un Gist aici.

TLDR; Puneți următorul formular în tema dumneavoastră, atributele name și id sunt importante:

<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
    <input type="text" name="user_login" value="Nume utilizator" id="user_login" class="input" />
    <input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
    <?php do_action('register_form'); ?>
    <input type="submit" value="Înregistrare" id="register" />
</form>

Am găsit un articol excelent pe Tutsplus despre Crearea unui formular de înregistrare Wordpress atrăgător de la zero. Acesta petrece destul de mult timp pe partea de stilizare a formularului, dar are următoarea secțiune destul de simplă despre codul necesar în Wordpress:

Pasul 4. WordPress

Nu este nimic special aici; avem nevoie doar de două fragmente de cod WordPress, ascunse în fișierul wp-login.php.

Primul fragment:

<?php echo site_url('wp-login.php?action=register', 'login_post') ?>  

Și:

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

Editare: Am adăugat partea finală din articol pentru a explica unde să puneți fragmentele de cod de mai sus - este doar un formular, așa că poate fi plasat în orice șablon de pagină sau sidebar sau puteți crea un shortcode din el. Secțiunea importantă este form care conține fragmentele de mai sus și câmpurile obligatorii necesare.

Codul final ar trebui să arate astfel:

<div style="display:none"> <!-- Înregistrare -->
        <div id="register-form">
        <div class="title">
            <h1>Înregistrează-ți Contul</h1>
            <span>Înscrie-te la noi și Bucură-te!</span>
        </div>
            <form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
            <input type="text" name="user_login" value="Nume utilizator" id="user_login" class="input" />
            <input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
                <?php do_action('register_form'); ?>
                <input type="submit" value="Înregistrare" id="register" />
            <hr />
            <p class="statement">O parolă va fi trimisă prin e-mail.</p>


            </form>
        </div>
</div><!-- /Înregistrare -->

Vă rugăm să rețineți că este foarte important și necesar să aveți user_login ca atribut name și id în câmpul de text; același lucru este valabil și pentru câmpul de e-mail. Altfel, nu va funcționa.

Și cu asta, am terminat!

acest Articol oferă un tutorial excelent despre cum să îți creezi propriile formulare pentru înregistrare/autentificare/recuperare parolă în frontend.

sau dacă cauți un plugin, am folosit acestea înainte și le pot recomanda:

• Autentificare/Înregistrare Ajax
• Autentificare cu Ajax

Am creat un site acum ceva timp care afișa un formular de înregistrare personalizat pe partea de front-end. Acest site nu mai este online, dar iată câteva capturi de ecran.

Iată pașii pe care i-am urmat:

1) Activează posibilitatea ca toți vizitatorii să solicite un cont nou prin Setări > General > Opțiunea Membri. Pagina de înregistrare va apărea acum la URL-ul /wp-login.php?action=register

2) Personalizează formularul de înregistrare astfel încât să se potrivească cu aspectul front-end al site-ului tău. Acest lucru este mai complicat și depinde de tema pe care o folosești.

Iată un exemplu cu tema twentythirteen:

// include scripturile și stilurile temei pe pagina de autentificare/înregistrare
add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles');

// elimină stilul de admin de pe pagina de autentificare/înregistrare
add_filter( 'style_loader_tag', 'user16975_remove_admin_css', 10, 2);
function user16975_remove_admin_css($tag, $handle){
    if ( did_action('login_init')
    && ($handle == 'wp-admin' || $handle == 'buttons' || $handle == 'colors-fresh'))
        return "";

    else return $tag;
}

// afișează header-ul și footer-ul front-end pe pagina de autentificare/înregistrare
add_action('login_footer', 'user16975_integrate_login');
function user16975_integrate_login(){
    ?><div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>

            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Meniu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Sari la conținut', 'twentythirteen' ); ?>"><?php _e( 'Sari la conținut', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                    <?php get_search_form(); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
        </header><!-- #masthead -->

        <div id="main" class="site-main">
    <?php get_footer(); ?>
    <script>
        // mută formularul de autentificare în zona principală de conținut a paginii
        jQuery('#main').append(jQuery('#login'));
    </script>
    <?php
}

Apoi modifică fișierul CSS al temei pentru a face ca formularul să apară așa cum dorești.

3) Poți modifica în continuare formularul ajustând mesajele afișate:

add_filter('login_message', 'user16975_login_message');
function user16975_login_message($message){
    if(strpos($message, 'register') !== false){
        $message = 'mesaj personalizat de înregistrare';
    } else {
        $message = 'mesaj personalizat de autentificare';
    }
    return $message;
}

add_action('login_form', 'user16975_login_message2');
function user16975_login_message2(){
    echo 'alt mesaj personalizat de autentificare';
}

add_action('register_form', 'user16975_tweak_form');
function user16975_tweak_form(){
    echo 'alt mesaj personalizat de înregistrare';
}

4) Dacă ai nevoie de un formular de înregistrare pe front-end, probabil nu vei dori ca utilizatorii înregistrați să vadă backend-ul când se autentifică.

add_filter('user_has_cap', 'user16975_refine_role', 10, 3);
function user16975_refine_role($allcaps, $cap, $args){
    global $pagenow;

    $user = wp_get_current_user();
    if($user->ID != 0 && $user->roles[0] == 'subscriber' && is_admin()){
        // refuză accesul la backend-ul WordPress
        $allcaps['read'] = false;
    }

    return $allcaps;
}

add_action('admin_page_access_denied', 'user16975_redirect_dashbord');
function user16975_redirect_dashbord(){
    wp_redirect(home_url());
    die();
}

Sunt mulți pași, dar rezultatul este aici!

Mult mai ușor: folosește funcția WordPress numită wp_login_form() (pagina Codex aici).

Poți crea propriul tău plugin pentru a folosi un shortcode într-una din paginile tale:

<?php
/*
Plugin Name: WP Login Form Shortcode
Description: Folosește <code>[wp_login_form]</code> pentru a afișa formularul de autentificare WordPress.
Version: 1.0
Author: WP-Buddy
Author URI: http://wp-buddy.com
License: GPLv2 or later
*/

add_action( 'init', 'wplfsc_add_shortcodes' );

function wplfsc_add_shortcodes() {
    add_shortcode( 'wp_login_form', 'wplfsc_shortcode' );
}

function wplfsc_shortcode( $atts, $content, $name ) {

$atts = shortcode_atts( array(
        'redirect'       => site_url( $_SERVER['REQUEST_URI'] ),
        'form_id'        => 'loginform',
        'label_username' => __( 'Nume utilizator' ),
        'label_password' => __( 'Parolă' ),
        'label_remember' => __( 'Ține-mă minte' ),
        'label_log_in'   => __( 'Autentificare' ),
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_remember'    => 'rememberme',
        'id_submit'      => 'wp-submit',
        'remember'       => false,
        'value_username' => NULL,
        'value_remember' => false
), $atts, $name );

// echo este întotdeauna false
$atts['echo'] = false;

// convertește în valori booleene reale
$atts['remember']       = filter_var( $atts['remember'], FILTER_VALIDATE_BOOLEAN );
$atts['value_remember'] = filter_var( $atts['value_remember'], FILTER_VALIDATE_BOOLEAN );

return '<div class="cct-login-form">' . wp_login_form( $atts ) . '</div>';

}

Tot ce trebuie să faci este să stilizezi formularul pe frontend.

Dacă ești deschis la utilizarea de plugin-uri, am folosit anterior add-on-ul User Registration pentru Gravity Forms și a funcționat foarte bine:

http://www.gravityforms.com/add-ons/user-registration/

Edit: Îmi dau seama că aceasta nu este o soluție foarte detaliată, dar face exact ce ai nevoie și este o soluție bună.

Edit: Pentru a dezvolta mai mult răspunsul meu, add-on-ul User Registration pentru Gravity Forms îți permite să mapezi orice câmp dintr-un formular creat cu Gravity Forms la câmpuri specifice utilizatorului. De exemplu, poți crea un formular cu First Name, Last Name, Email, Website, Password. La trimitere, add-on-ul va mapa acele intrări la câmpurile relevante ale utilizatorului.

Un alt lucru grozav despre el este că poți adăuga utilizatori înregistrați într-o coadă de aprobare. Conturile lor de utilizator vor fi create doar după aprobarea în backend de către un administrator.

Dacă link-ul de mai sus nu funcționează, caută pe Google "User Registration add on for Gravity Forms".