So erstellen Sie eine Anmeldeseite in WordPress ohne Plugin zu verwenden

Veröffentlicht: 2022-01-03

So erstellen Sie eine Anmeldeseite in WordPress ohne Plugin Suchen Sie nach der besten Möglichkeit, eine Anmeldeseite in WordPress ohne Plugin und ohne Anpassung der Standard-WordPress-Anmeldeseite zu erstellen? Wenn Sie eine Anmeldeseite in WordPress erstellen möchten, ohne die beliebten WordPress-Anmelde-Plugins zu verwenden, können Sie dies tun, indem Sie den Anmeldecode in einem Shortcode oder in einer benutzerdefinierten Seitenvorlage hinzufügen.

In diesem Tutorial werde ich zeigen, wie Sie eine Anmeldeseite in WordPress mit einer Shortcode-Funktion erstellen können und wie Sie eine Anmeldeseite in WordPress mit einer Anmeldefunktion in einer benutzerdefinierten Seitenvorlage erstellen können.

Jede dieser Möglichkeiten sollte nahtlos mit jedem WordPress-Theme oder jeder WordPress-Hosting-Umgebung funktionieren.

Anmeldeseite in WordPress ohne Plugin erstellen

Das Ziel dieses Tutorials ist es, Ihnen dabei zu helfen, eine Anmeldeseite wie die standardmäßige WordPress-Anmeldung zu erstellen, mit der Sie nach der Anmeldung auf das WordPress-Dashboard zugreifen können.

Idealerweise sollte diese benutzerdefinierte Anmeldeseite eine Frontend-Anmeldeseite sein, auf der sich Ihre Site-Benutzer anmelden. Wie ich in der Einführung erwähnt habe, gibt es zwei Möglichkeiten, die wir in diesem Tutorial behandeln werden;

  1. Shortcode der Anmeldeseite
  2. Anmeldung für benutzerdefinierte Seitenvorlage

Shortcode für Anmeldeseite erstellen

Der erste Schritt, wenn wir irgendwo in WordPress eine Anmeldeseite erstellen möchten, ist die Verwendung eines Shortcodes. Der Shortcode kann zu jeder Seite oder jedem Beitrag oder sogar einem Widget und einer benutzerdefinierten Seitenvorlage hinzugefügt werden.

In diesem Schritt erstellen wir einen Shortcode für das Anmeldeformular, der verwendet wird, um das Anmeldeformular auf jeder Seite in WordPress oder in einem Beitrag zu veröffentlichen. Dieser Ansatz gibt dem Benutzer die Flexibilität, in jedem Bereich seiner Website eine Anmeldeseite zu erstellen.

Um den Shortcode zu erstellen, verwenden wir den folgenden Code:

 // Shortcode für Anmeldeformular erstellen

Funktion njengah_add_login_shortcode() {

                add_shortcode( 'njengah-login-form', 'njengah_login_form_shortcode' );

}

Wir haben den Shortcode in einer Funktion hinzugefügt, damit wir ihn später initialisieren können. Die Funktion add_shortcode erstellt einen Shortcode in WordPress. Der allgemeine Ausdruck der Funktion add_shortcode() lautet wie folgt:

 add_shortcode( string $tag, aufrufbarer $callback )

Wie Sie sehen können, hat diese Funktion zwei Parameter, die wie folgt lauten:

Parameter Beschreibung
$tag Dies ist der Text, der im Post- oder Seiteneditor verwendet wird, um den Shortcode zu veröffentlichen. In diesem Fall haben wir es zum Beispiel als „njengah-login-form“. Wenn wir es auf der Seite hinzufügen, wird es in eckige Klammern eingeschlossen: [njengah-login-form]
$Rückruf Dies ist die Callback-Funktion, die die Funktionen des Shortcodes rendert. In diesem Fall fügen wir beispielsweise den Code hinzu, um das Anmeldeformular in dieser Rückruffunktion anzuzeigen, wie im folgenden Code geteilt

 //Schritt 2: Shortcode-Rückruf
Funktion njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
	return '<p>Willkommen. Sie sind angemeldet!</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php return wp_login_form( 
		Reihe ( 
			'echo' => falsch ,
			'label_username' => __( 'Ihr Benutzername ' ),
			'label_password' => __( 'Ihr Passwort' ),
			'label_remember' => __( 'Erinnere dich an mich' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

Wenn Sie den Code genau prüfen, werden Sie feststellen, dass wir die Funktion verwendet haben, um zu prüfen, ob der Benutzer angemeldet ist, wie ich in dem Beitrag erklärt habe, wie man prüft, ob der Benutzer in WordPress angemeldet ist .

Wenn der Benutzer nicht angemeldet ist, verwenden wir die Funktion wp_login_form(), um das Anmeldeformular anzuzeigen. Wenn der Benutzer angemeldet ist, zeigen wir bedingt die Willkommensnachricht auf dieser Seite an, anstatt das Anmeldeformular anzuzeigen.

WP-Funktion wp_login_form()

wp_login_form() ist eine WordPress-Funktion, die Theme-Entwicklern die Möglichkeit bietet, WordPress-Formulare überall anzuzeigen. Diese Funktion kann allgemein wie folgt ausgedrückt werden:

 wp_login_form( array $args = array() )

Die $args können ein Array von Optionen sein, die steuern, wie das Formular angezeigt wird.

Im Folgenden sind die Argumente aufgeführt, die Sie im Array verwenden können, um die Anzeige des Formulars zu ändern.

Argument $arg Beschreibung
Echo Wenn das Anmeldeformular angezeigt oder der HTML-Code des Formulars zurückgegeben werden soll. Voreinstellung wahr (Echo).
umleiten URL, auf die umgeleitet werden soll. Muss absolut sein, wie in „<a href=“https://example.com/mypage/“>https://example.com/mypage/</a>“. Standardmäßig wird zum Anforderungs-URI zurückgeleitet.
form_id Der ID-Attributwert für das Formular. Standard 'Loginform'.
label_benutzername Bezeichnung für das Feld Benutzername oder E-Mail-Adresse. Standardmäßig „Benutzername oder E-Mail-Adresse“.
label_passwort Beschriftung für das Passwortfeld. Voreingestelltes Paswort'.
label_erinnern Bezeichnung für das Merkfeld. Standardeinstellung „An mich erinnern“.
label_login Bezeichnung für die Schaltfläche „Senden“. Standardmäßig „Anmelden“.
id_benutzername Der ID-Attributwert für das Benutzernamenfeld. Standard 'user_login'.
id_passwort Der ID-Attributwert für das Kennwortfeld. Standard 'user_pass'.
id_erinnern Der ID-Attributwert für das Merkfeld. Standard 'rememberme'.
id_submit Der ID-Attributwert für die Senden-Schaltfläche. Standard 'wp-submit'.
merken Überprüft, ob das Kontrollkästchen „Rememberme“ im Formular angezeigt werden soll
Wert_Benutzername Der Standardwert für das Feld Benutzername.
value_remember Überprüft, ob das Kontrollkästchen „Remember Me“ standardmäßig aktiviert werden soll. Standard falsch (nicht aktiviert)

Beispielsweise können Sie das Argumentarray festlegen und wie folgt an diese Funktion übergeben:

 <?php 

wp_login_form( 

	 Reihe (
			'echo' => wahr,
			// Der Standardwert 'redirect' bringt den Benutzer zurück zum Anfrage-URI.
			'umleiten' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => 'Anmeldeformular',
			'label_username' => __( 'Ihr Benutzername' ),
			'label_password' => __( 'Ihr Passwort' ),
			'label_remember' => __( 'Erinnere dich an mich' ),
			'label_log_in' => __( 'Anmelden' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'rememberme',
			'id_submit' => 'wp-submit',
			'erinnern' => wahr,
			'value_username' => '',
			// Setzen Sie 'value_remember' auf true, um das Kontrollkästchen "Remember me" standardmäßig zu aktivieren.
			'value_remember' => falsch,
		);
		
); ?>

Das Formular wird mit den neuen Labels angezeigt, die Sie dem Array hinzugefügt haben, im Gegensatz zu den standardmäßigen WordPress-Login-Formular-Labels. Im obigen Code habe ich den Benutzernamen in Your Username und das Passwort in Your Password geändert.

Anmeldeseite in WordPress ohne Plugin-Anmeldeseitenvorlage erstellen

Nachdem wir den Shortcode und die Callback-Funktion erstellt haben, müssen wir sie initialisieren, damit wir den Shortcode jetzt überall auf WordPress-Beiträgen oder -Seiten verwenden können, um das benutzerdefinierte Anmeldeformular hinzuzufügen.

Das Folgende ist der Code, der den Shortcode des Anmeldeformulars initialisiert: 

 // Schritt 3: Initialisieren Sie die Shortcode-Funktion

add_action( 'init', 'njengah_add_login_shortcode' );

Vollständiges Code-Snippet zum Erstellen des Login-Formular-Shortcodes in WordPress

Jetzt können wir all diese Code-Snippets zu einem Code-Snippet zusammenfügen und den Code zur functions.php des aktiven WordPress-Themes hinzufügen und dann das WordPress-Anmeldeformular mit dem Shortcode – [ njengah-login-form] anzeigen.

Das Folgende ist das vollständige Code-Snippet, das Sie der Datei functions.php hinzufügen sollten, um den Shortcode für das WordPress-Anmeldeformular hinzuzufügen:

 /**
 * Erstellen Sie ein benutzerdefiniertes WordPress-Anmeldeformular ohne Plugin [WordPress-Anmeldeformular Shortcode] 
 * @Autor Joe Njengah 
 * @ gist - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Schritt 1: Shortcode erstellen
Funktion njengah_add_login_shortcode() {
	add_shortcode( 'jay-login-formular', 'njengah_login_form_shortcode' );
}

//Schritt 2: Shortcode-Rückruf
Funktion njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
		return '<p>Willkommen. Sie sind angemeldet!</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php return wp_login_form( 
							Reihe ( 
								'echo' => falsch ,
								'label_username' => __( 'Ihr Benutzername ' ),
								'label_password' => __( 'Ihr Passwort' ),
								'label_remember' => __( 'Erinnere dich an mich' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// Schritt 3: Initialisieren Sie die Shortcode-Funktion
add_action( 'init', 'njengah_add_login_shortcode' );

//Schritt 4: Verwenden Sie den Shortcode [njengah-login-form], um das Anmeldeformular auf einer Seite oder einem Beitrag einzubetten

Wenn Sie diesen Code zur functions.php hinzufügen, sollten Sie eine Anmeldeseite erstellen und den Shortcode [ njengah-login-form] hinzufügen, um das Anmeldeformular zu veröffentlichen. Das Anmeldeformular sollte wie im Bild unten angezeigt werden:

Anmeldeseite in WordPress ohne Plugin-Anmeldeseitenvorlage erstellen

Gestaltung des WordPress-Anmeldeformulars

Ich habe die folgenden Stile hinzugefügt, um das Anmeldeformular ansprechend zu gestalten und das Design des von mir verwendeten Themas zu übernehmen:

 .njengah-login-tutorial {
    Hintergrund: #6379a4;
    Polsterung: 20px;
    maximale Breite: 70 %;
    Rand: 0 automatisch;
    Farbe: #fff;
}

.login-Passwort-Label {
    Rand rechts: 120px;
}

.Login Benutzername {
    Polsterung oben: 30px;
}

Erstellen Sie eine benutzerdefinierte Seitenvorlage für das Anmeldeformular

Eine alternative Möglichkeit zum Erstellen einer Anmeldeseite in WordPress ohne Plugin besteht darin, eine benutzerdefinierte Seitenvorlage zu erstellen und die Funktion wp_login_form() zu verwenden, um das Anmeldeformular auf dieser Seite zu veröffentlichen.

Im Folgenden finden Sie den Code zum Erstellen der benutzerdefinierten Anmeldeseite, die sich in der benutzerdefinierten Seitenvorlage befindet:

 <?php
/**
 * Vorlagenname: Anmeldeseite 
 */
 
 get_header(); 
 
 
 if (is_user_logged_in()){
	 
	     echo '<p>Willkommen. Sie sind angemeldet!</p>'; 
		 
 }anders{ 
	 
	 wp_login_form( 

		 Reihe (
				'echo' => wahr,
				// Der Standardwert 'redirect' bringt den Benutzer zurück zum Anfrage-URI.
				'umleiten' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => 'Anmeldeformular',
				'label_username' => __( 'Ihr Benutzername' ),
				'label_password' => __( 'Ihr Passwort' ),
				'label_remember' => __( 'Erinnere dich an mich' ),
				'label_log_in' => __( 'Anmelden' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'rememberme',
				'id_submit' => 'wp-submit',
				'erinnern' => wahr,
				'value_username' => '',
				// Setzen Sie 'value_remember' auf true, um das Kontrollkästchen "Remember me" standardmäßig zu aktivieren.
				'value_remember' => falsch,
			)
						
		);
    }			
	
get_footer();

Speichern Sie diesen Code in einer Datei und nennen Sie ihn login-page.php und stellen Sie sicher, dass er im Stammordner Ihres WordPress-Themes gespeichert ist.

Erstellen Sie eine neue Seite und Sie werden sehen, dass die Anmeldevorlage jetzt in der Vorlagenoption für Seitenattribute verfügbar ist, wie unten gezeigt:

Anmeldeseite in WordPress ohne Plugin-Anmeldeseitenvorlage erstellen

Wählen Sie die Vorlage aus und veröffentlichen Sie die Seite. Wenn Sie das Frontend überprüfen, sollten Sie sehen, dass das Anmeldeformular für die nicht angemeldeten Benutzer und die Willkommensnachricht für die angemeldeten Benutzer angezeigt wird.

So erstellen Sie eine WordPress-Anmeldeseitenvorlage

Fazit

In diesem Beitrag habe ich die zwei Möglichkeiten beschrieben, wie Sie das Anmeldeformular auf der WordPress-Seite hinzufügen können. Sie können eine Shortcode-Funktion verwenden, um einen WordPress-Anmeldeformular-Shortcode zu erstellen, oder Sie können eine benutzerdefinierte Seitenvorlage verwenden, um eine Anmeldeseite in WordPress ohne Plugin zu erstellen. Ich hoffe, Sie können jetzt eine dieser Methoden implementieren, um ein benutzerdefiniertes Frontend-Anmeldeformular auf Ihrer WordPress-Site zu erstellen.

Ähnliche Artikel

  1. So erstellen Sie eine WordPress-Paginierung für benutzerdefinierte Beitragstypen
  2. Die 30 besten WordPress-Sicherheits-Plugins zum Schutz Ihrer Website
  3. So erstellen Sie eine Seite in WordPress programmgesteuert
  4. So greifen Sie auf das WordPress Admin Dashboard zu oder melden sich bei Ihrem WordPress Dashboard an
  5. So erstellen Sie eine benutzerdefinierte Bestelleingangsseite WooCommerce
  6. So verbindest du Printful mit WooCommerce
  7. So aktualisieren Sie WooCommerce-Erweiterungen
  8. So fügen Sie ein Suchfeld oben auf der Storefront-Theme hinzu
  9. Über 40 der besten WordPress-Kontaktformular-Plugins für einfachen Kontakt
  10. So entfernen Sie nicht kategorisierte Kategorien in WordPress WooCommerce
  11. So entfernen Sie die Seitenleiste von der WordPress-Seite oder blenden die WordPress-Seitenleiste aus
  12. So erstellen Sie eine benutzerdefinierte Paginierung für Abfragen in WordPress anhand eines Beispiels
  13. WooCommerce vs. Magento: Welches ist die beste E-Commerce-Plattform?
  14. So sichern Sie die WooCommerce-Datenbank
  15. Top 30+ der besten WordPress-Formular-Plugins » Bestes WordPress-Formular-Plugin
  16. So erstellen Sie separate Anmelde- und Registrierungsseiten in WooCommerce
  17. 35+ Bestes Freiform-Plugin für WordPress
  18. So migrieren Sie von Shopify zu WooCommerce