it-swarm.com.de

Wie kann ich das WordPress-Benutzerregistrierungsformular im Front-End der Website anzeigen?

Wie kann ich das WordPress-Benutzerregistrierungsformular (das Formular, das auf der Seite "www.mywebsite.com/wp-register.php" angezeigt wird) im Frontend meines Blogs anzeigen?

Ich habe das Anmeldeformular angepasst. Aber ich weiß nicht, wie ich dieses Formular auf der Front-End-Seite aufrufen soll. Jede Unterstützung wird wirklich eine große Hilfe sein.

Danke im Voraus. :)

31
user3476

Der Prozess umfasst 2 Schritte:

  1. zeige das Frontend Formular
  2. speichern Sie die Daten bei der Übermittlung

Es gibt 3 verschiedene Ansätze, die mir einfallen, um das Frontend zu zeigen:

  • verwenden Sie das eingebaute Registrierungsformular, Bearbeitungsstile usw., um es "frontendartiger" zu gestalten.
  • verwenden Sie eine WordPress-Seite/einen WordPress-Beitrag und zeigen Sie das Formular mit einem Shortcode an
  • verwenden Sie eine dedizierte Vorlage, die nicht mit einer Seite/einem Beitrag verknüpft ist, sondern von einer bestimmten URL aufgerufen wird

Für diese Antwort verwende ich letzteres. Die Gründe sind:

  • die Verwendung des eingebauten Registrierungsformulars kann eine gute Idee sein, tiefe Anpassungen können mit dem eingebauten Formular sehr schwierig sein, und wenn man auch Formularfelder anpassen möchte, erhöht sich der Schmerz
  • verwenden Sie eine WordPress-Seite in Kombination mit einem Shortcode, ist nicht so zuverlässig, und ich denke, dass Shorcodes nicht für die Funktionalität verwendet werden sollten, nur für die Formatierung und so

1: Erstellen Sie die URL

Wir alle wissen, dass die Standardregistrierungsform einer WordPress-Site häufig ein Ziel für Spammer ist. Die Verwendung einer benutzerdefinierten URL ist eine Hilfe zur Lösung dieses Problems. Zusätzlich möchte ich auch eine Variable URL verwenden, d. H. Die Registrierungsformular-URL sollte nicht immer gleich sein, dies macht Spammern das Leben schwerer. Der Trick wird mit einem nonce in der URL gemacht:

/**
* Generate dynamic registration url
*/
function custom_registration_url() {
  $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
  return home_url( $nonce );
}

/**
* Generate dynamic registration link
*/
function custom_registration_link() {
  $format = '<a href="%s">%s</a>';
  printf(
    $format,
    custom_registration_url(), __( 'Register', 'custom_reg_form' )
  );
}

Die Verwendung dieser Funktionen ist einfach, in Vorlagen einen Link zum Registrierungsformular anzuzeigen, auch wenn es dynamisch ist.

2: Erkennen Sie die URL, den ersten Stub der Klasse Custom_Reg\Custom_Reg

Jetzt müssen wir die URL erkennen. Zum Zweck beginne ich mit dem Schreiben einer Klasse, die später in der Antwort beendet wird:

<?php
// don't save, just a stub
namespace Custom_Reg;

class Custom_Reg {

  function checkUrl() {
    $url_part = $this->getUrl();
    $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
    if ( ( $url_part === $nonce ) ) {
      // do nothing if registration is not allowed or user logged
      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];
    }
  }

}

Die Funktion betrachtet den ersten Teil der URL nach home_url() und gibt TRUE zurück, wenn er mit unserer Nonce übereinstimmt. Diese Funktion wird verwendet, um unsere Anfrage zu überprüfen und die erforderlichen Aktionen auszuführen, um unser Formular anzuzeigen.

3: Die Custom_Reg\Form Klasse

Ich werde jetzt eine Klasse schreiben, die für die Generierung des Formular-Markups verantwortlich ist. Ich werde es auch verwenden, um in einer Eigenschaft den Pfad der Vorlagendatei zu speichern, der zum Anzeigen des Formulars verwendet werden soll.

<?php 
// file: 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( "Invalid field" );
      }
      $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( "Invalid template" );
    }
    $this->template = $template;
  }

  public function addField( FieldInterface $field ) {
    $hook = 'custom_reg_form_create';
    if ( did_action( $hook ) && current_filter() !== $hook ) {
      throw new \BadMethodCallException( "Add fields before {$hook} is fired" );
    }
    $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( "Invalid verb" );
    }
    $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 =  __('Register', 'custom_reg_form');
    $out = sprintf( '<input type="submit" value="%s" />', $submit );
    $out .= '</form>';
    return $out;
  }

}

Die Klasse generiert eine Formular-Markup-Schleife, in der alle hinzugefügten Felder mit der Methode create für jedes der Felder aufgerufen werden. Jedes Feld muss eine Instanz von Custom_Reg\FieldInterface sein. Ein zusätzliches verstecktes Feld wird zur Überprüfung hinzugefügt. Die Formularmethode ist standardmäßig "POST", kann jedoch mit der Methode "setVerb" auf "GET" gesetzt werden. Sobald das Markup erstellt wurde, wird es in der $form -Objekteigenschaft gespeichert, die von der output()-Methode wiedergegeben wird und in den 'custom_registration_form'-Hook eingebunden ist. In der Formularvorlage wird einfach do_action( 'custom_registration_form' ) aufgerufen und das Formular ausgegeben.

4: Die Standardvorlage

Wie gesagt, die Vorlage für das Formular kann leicht überschrieben werden, wir benötigen jedoch eine grundlegende Vorlage als Fallback. Ich werde hier eine sehr grobe Vorlage schreiben, eher ein Proof of Concept als eine echte Vorlage.

<?php
// file: 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(
    'Thank you, your registration was submitted, check your email.',
    '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: Die Custom_Reg\FieldInterface Schnittstelle

Jedes Feld sollte ein Objekt sein, das die folgende Schnittstelle implementiert

<?php 
// file: FieldInterface.php
namespace Custom_Reg;

interface FieldInterface {

  /**
   * Return the field id, used to name the request value and for the 'name' param of
   * html input field
   */
  public function getId();

  /**
   * Return the filter constant that must be used with
   * filter_input so get the value from request
   */
  public function getFilter();

  /**
   * Return true if the used value passed as argument should be accepted, false if not
   */
  public function isValid( $value = NULL );

  /**
   * Return true if field is required, false if not
   */
  public function isRequired();

  /**
   * Return the field input markup. The 'name' param must be output 
   * according to getId()
   */
  public function create( $value = '');
}

Ich denke, dass Kommentare erklären, welche Klassen diese Schnittstelle implementieren sollten.

6: Hinzufügen einiger Felder

Jetzt brauchen wir ein paar Felder. Wir können eine Datei namens 'fields.php' erstellen, in der wir die Feldklassen definieren:

<?php
// file: 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 __( 'Full Name', 'custom_reg_form' );
  }

}

class Login extends BaseField {

  protected $required = TRUE;

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

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

class Email extends BaseField {

  protected $type = 'email';

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

  public function getLabel() {
    return __( 'Email', '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 __( 'Country', 'custom_reg_form' );
  }
}

Ich habe eine Basisklasse verwendet, um die Standard-Schnittstellenimplementierung zu definieren. Man kann jedoch sehr angepasste Felder hinzufügen, die die Schnittstelle direkt implementieren oder die Basisklasse erweitern und einige Methoden überschreiben.

An diesem Punkt haben wir alles, um das Formular anzuzeigen. Jetzt benötigen wir etwas, um die Felder zu validieren und zu speichern.

7: Die Klasse Custom_Reg\Saver

<?php
// file: 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;
  }

  /**
  * validate all the fields
  */
  public function validate() {
    // if registration is not allowed return false
    if ( ! get_option('users_can_register') ) return FALSE;
    // if no fields are setted return FALSE
    if ( ! $this->getFields() instanceof \ArrayIterator ) return FALSE;
    // first check nonce
    $nonce = $this->getValue( '_n' );
    if ( $nonce !== wp_create_nonce( 'custom_reg_form_nonce' ) ) return FALSE;
    // then check all fields
    $it =  $this->getFields();
    while( $it->valid() ) {
      $field = $it->current();
      $key = $field->getID();
      if ( ! $field instanceof FieldInterface ) {
        throw new \DomainException( "Invalid field" );
      }
      $value = $this->getValue( $key, $field->getFilter() );
      if ( $field->isRequired() && empty($value) ) {
        $this->error = sprintf( __('%s is required', 'custom_reg_form' ), $key );
        return FALSE;
      }
      if ( ! $field->isValid( $value ) ) {
        $this->error = sprintf( __('%s is not 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;
  }

  /**
  * Save the user using core register_new_user that handle username and email check
  * and also sending email to new user
  * in addition save all other custom data in user meta
  *
  * @see register_new_user()
  */
  public function save() {
    // if registration is not allowed return false
    if ( ! get_option('users_can_register') ) return FALSE;
    // check mandatory fields
    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( "Invalid value" );
    }
    $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;
  }

}

Diese Klasse hat 2 Hauptmethoden, eine (validate), die die Felder durchläuft, validiert und gute Daten in einem Array speichert, die zweite (save) speichert alle Daten in der Datenbank und sendet ein Passwort per E-Mail an einen neuen Benutzer.

8: Verwenden definierter Klassen: Beenden der Klasse Custom_Reg

Jetzt können wir wieder an der Klasse Custom_Reg arbeiten und die Methoden hinzufügen, mit denen das definierte Objekt "geklebt" und funktionsfähig gemacht wird

<?php 
// file 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;
  }

  /**
   * Check if the url to recognize is the one for the registration form page
   */
  function checkUrl() {
    $url_part = $this->getUrl();
    $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
    if ( ( $url_part === $nonce ) ) {
      // do nothing if registration is not allowed or user logged
      if ( is_user_logged_in() || ! get_option('users_can_register') ) {
        wp_safe_redirect( home_url() );
        exit();
      }
      return TRUE;
    }
  }

  /**
   * Init the form, if submitted validate and save, if not just display it
   */
  function init() {
    if ( $this->checkUrl() !== TRUE ) return;
    do_action( 'custom_reg_form_init', $this->form );
    if ( $this->isSubmitted() ) {
      $this->save();
    }
    // don't need to create form if already saved
    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 ) { // validate?
      if ( $this->saver->save() ) { // saved?
        global $custom_reg_form_done;
        $custom_reg_form_done = TRUE;
      } else { // saving error
        $err =  $this->saver->getErrorMessage(); 
        $custom_reg_form_error = $err ? : __( 'Error on save.', 'custom_reg_form' );
      }
    } else { // validation error
       $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];
    }
  }

}

Der Konstruktor der Klasse akzeptiert eine Instanz von Form und eine von Saver.

init() method (using checkUrl()) betrachtet den ersten Teil der URL nach home_url() und prüft, ob das Formular bereits gesendet wurde, falls dies mit dem Objekt Saver der Fall ist, andernfalls überprüft und speichert es die Benutzerdaten Einfach das Formular ausdrucken.

Die Methode init() löst auch den Aktions-Hook 'custom_reg_form_init' aus und übergibt die Formularinstanz als Argument: Dieser Hook sollte zum Hinzufügen von Feldern, zum Einrichten der benutzerdefinierten Vorlage und zum Anpassen der Formularmethode verwendet werden.

9: Dinge zusammenfügen

Jetzt müssen wir die Haupt-Plugin-Datei schreiben, wo wir können

  • benötigen Sie alle Dateien
  • laden Sie die Textdomain
  • starten Sie den gesamten Prozess, indem Sie die Klasse Custom_Reg instanziieren und die Methode init() mit einem relativ frühen Hook aufrufen
  • verwenden Sie 'custom_reg_form_init', um die Felder zur Formularklasse hinzuzufügen

So:

<?php 
/**
 * Plugin Name: Custom Registration Form
 * Description: Just a rough plugin example to answer a WPSE question
 * 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; // this plugin is all about frontend

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

/**
* Generate dynamic registration url
*/
function custom_registration_url() {
  $nonce = urlencode( wp_create_nonce( 'registration_url' ) );
  return home_url( $nonce );
}

/**
* Generate dynamic registration link
*/
function custom_registration_link() {
  $format = '<a href="%s">%s</a>';
  printf(
    $format,
    custom_registration_url(), __( 'Register', 'custom_reg_form' )
  );
}

/**
* Setup, show and save the form
*/
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 = 'Exception on  ' . __FUNCTION__;
      $msg .= ', Type: ' . get_class( $e ) . ', Message: ';
      $msg .= $e->getMessage() ? : 'Unknown error';
      error_log( $msg );
    }
    wp_safe_redirect( home_url() );
  }
}, 0 );

/**
* Add fields to form
*/
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: Fehlende Aufgaben

Jetzt ist alles ziemlich erledigt. Wir müssen nur die Vorlage anpassen und fügen wahrscheinlich eine benutzerdefinierte Vorlagendatei in unser Design ein.

Auf diese Weise können wir der benutzerdefinierten Registrierungsseite nur bestimmte Stile und Skripte hinzufügen

add_action( 'wp_enqueue_scripts', function() {
  // if not on custom registration form do nothing
  if ( did_action('custom_reg_form_init') ) {
    wp_enqueue_style( ... );
    wp_enqueue_script( ... );
  }
});

Mit dieser Methode können wir einige js-Skripte in die Warteschlange einreihen, um die clientseitige Validierung durchzuführen, z. dieses . Das für die Ausführung des Skripts erforderliche Markup kann einfach bearbeitet werden, indem die Klasse Custom_Reg\BaseField bearbeitet wird.

Wenn wir die Registrierungs-E-Mail anpassen möchten, können wir Standardmethode verwenden und benutzerdefinierte Daten auf Meta speichern, um sie in der E-Mail zu verwenden.

Die letzte Aufgabe, die wir wahrscheinlich implementieren möchten, ist das Verhindern der Anforderung eines Standardregistrierungsformulars, so einfach wie:

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

Alle Dateien finden Sie in einem Gist hier .

32
gmazzap

TLDR; Fügen Sie das folgende Formular in Ihr Thema ein. Die Attribute name und id sind wichtig:

<form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
    <input type="text" name="user_login" value="Username" 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="Register" id="register" />
</form>

Ich fand einen ausgezeichneten Tutsplus-Artikel über Erstellen eines ausgefallenen Wordpress-Registrierungsformulars von Grund auf neu . Dies nimmt viel Zeit in Anspruch, um das Formular zu gestalten, enthält jedoch den folgenden recht einfachen Abschnitt zum erforderlichen WordPress-Code:

Schritt 4. WordPress

Hier ist nichts Besonderes; Wir benötigen nur zwei WordPress-Schnipsel, die in der Datei wp-login.php versteckt sind.

Der erste Ausschnitt:

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

Und:

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

Edit: Ich habe das letzte zusätzliche Bit aus dem Artikel hinzugefügt, um zu erklären, wo die obigen Code-Schnipsel abgelegt werden sollen. Es ist nur ein Formular, damit es in eine beliebige Seitenvorlage oder Seitenleiste eingefügt oder einen Shortcode daraus erstellt werden kann . Der wichtige Abschnitt ist die form, die die obigen Ausschnitte und die wichtigen erforderlichen Felder enthält.

Der endgültige Code sollte folgendermaßen aussehen:

<div style="display:none"> <!-- Registration -->
        <div id="register-form">
        <div class="title">
            <h1>Register your Account</h1>
            <span>Sign Up with us and Enjoy!</span>
        </div>
            <form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
            <input type="text" name="user_login" value="Username" 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="Register" id="register" />
            <hr />
            <p class="statement">A password will be e-mailed to you.</p>


            </form>
        </div>
</div><!-- /Registration -->

Bitte beachten Sie, dass es sehr wichtig ist und erforderlich ist, user_login als name und als id-Attribut in Ihrer Texteingabe zu haben. Gleiches gilt für die E-Mail-Eingabe. Andernfalls funktioniert es nicht.

Und damit sind wir fertig!

12
icc97

dieser Artikel enthält eine kurze Anleitung zum Erstellen eigener Frontend-Registrierungs-/Anmelde-/Passwort-Formulare.

oder wenn Sie nach einem Plugin suchen, dann habe ich diese bereits verwendet und kann sie empfehlen:

6
Bainternet

Ich habe vor einiger Zeit eine Website erstellt, auf der ein benutzerdefiniertes Registrierungsformular auf der Vorderseite angezeigt wurde. Diese Website ist nicht mehr live, aber hier sind einige Screenshots. login formregistration formlost password form

Hier sind die Schritte, denen ich gefolgt bin:

1) Aktivieren Sie die Möglichkeit für alle Besucher, über Einstellungen> Allgemein> Mitgliedschaft einen neuen Account anzufordern. Die Registrierungsseite wird jetzt unter der URL /wp-login.php?action=register angezeigt

2) Passen Sie das Registrierungsformular so an, dass es wie das Front-End Ihrer Website aussieht. Dies ist schwieriger und hängt vom verwendeten Thema ab.

Hier ist ein Beispiel mit dreizehn:

// include theme scripts and styles on the login/registration page
add_action('login_enqueue_scripts', 'twentythirteen_scripts_styles');

// remove admin style on the login/registration page
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;
}

// display front-end header and footer on the login/registration page
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( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', '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>
        // move the login form into the page main content area
        jQuery('#main').append(jQuery('#login'));
    </script>
    <?php
}

Ändern Sie dann das Design-Stylesheet, damit das Formular wie gewünscht angezeigt wird.

3) Sie können das Formular weiter modifizieren, indem Sie die angezeigten Meldungen optimieren:

add_filter('login_message', 'user16975_login_message');
function user16975_login_message($message){
    if(strpos($message, 'register') !== false){
        $message = 'custom register message';
    } else {
        $message = 'custom login message';
    }
    return $message;
}

add_action('login_form', 'user16975_login_message2');
function user16975_login_message2(){
    echo 'another custom login message';
}

add_action('register_form', 'user16975_Tweak_form');
function user16975_Tweak_form(){
    echo 'another custom register message';
}

4) Wenn Sie ein Front-End-Registrierungsformular benötigen, möchten Sie wahrscheinlich nicht, dass registrierte Benutzer das Back-End sehen, wenn sie sich anmelden.

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()){
        // deny access to WP backend
        $allcaps['read'] = false;
    }

    return $allcaps;
}

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

Es gibt viele Schritte, aber das Ergebnis ist da!

4

Einfacher geht es nicht: Verwenden Sie eine WordPress-Funktion namens wp_login_form() ( Codex-Seite hier ).

Sie können Ihr eigenes Plugin erstellen, um einen Shortcode für eine Ihrer Seiten zu verwenden:

<?php
/*
Plugin Name: WP Login Form Shortcode
Description: Use <code>[wp_login_form]</code> to show WordPress' login form.
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' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in'   => __( 'Log In' ),
        '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 is always false
$atts['echo'] = false;

// make real boolean values
$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>';

}

Alles was Sie tun müssen, ist Ihr Formular im Frontend zu gestalten.

0
Flow