Hoe u op de juiste manier een aangepaste inlogpagina maakt in WordPress (stap voor stap)

hoe je een aangepaste inlogpagina maakt in WordPress


Heb je je ooit afgevraagd of je een aangepaste inlogpagina kon maken in WordPress?

Door een aangepaste inlogpagina te maken, kunt u uw gebruikers een consistent merk laten zien, waardoor uw site er professioneler uitziet.

In dit artikel laten we u zien hoe u een aangepaste inlogpagina maakt in WordPress.

Een aangepaste WordPress-aanmeldingspagina maken – Inhoudsopgave

Waarom een ​​aangepaste aanmeldingspagina maken?

Als u een door de gemeenschap aangedreven website beheert, zoals een forum, lidmaatschapssite, niche sociaal netwerk of een andere website waarvoor gebruikers een account moeten registreren en moeten inloggen, moet u een aangepaste inlogpagina maken.

De standaard WordPress-inlogpagina ziet er generiek en saai uit. Met een aangepaste inlogpagina kunt u alle elementen op de pagina rond het formulier personaliseren.

Als u een aangepaste aanmeldingspagina heeft, kunt u de standaard aanmeldingspagina verbergen als u dat wilt. Het kan inlogspam verminderen en uw WordPress-site veilig houden.

De juiste plug-in kiezen voor het maken van een aangepaste inlogpagina

In de officiële WordPress-plug-in-opslagplaats vindt u tientallen verschillende plug-ins waarmee u eenvoudig een aangepaste inlogpagina kunt bouwen. In dit artikel bekijken we twee verschillende plug-ins: WPForms en Thema Mijn login.

Kies WPForms als u een volledig uitgeruste WordPress-formulierplug-in nodig heeft waarmee u gemakkelijk allerlei soorten online formulieren kunt bouwen, inclusief registratieformulieren, betalingsformulieren, contactformulieren, enz..

Enkele voordelen van WPForms zijn:

  • Pas uw aanmeldingsformulier aan zoals u dat wilt, zonder enige beperking.
  • Publiceer uw aanmeldingsformulier op alle berichten of pagina’s.
  • Sluit uw aanmeldingsformulier in in de zijbalk of zelfs in een widgeted voettekst.

Kies Thema Mijn login als u gemakkelijk een eenvoudige inlogpagina wilt maken.

Hieronder staan ​​enkele kenmerken van Theme My Login:

  • Geen configuratie vereist voor het bouwen van een aangepaste inlogpagina.
  • Verbergt automatisch de standaard inlogpagina en verwijst door naar de zojuist gemaakte inlogpagina.
  • Voeg een inlogpagina-link toe in uw zijbalk met een aangepaste inlogwidget.

Het nadeel is dat, in tegenstelling tot WPForms, Thema Mijn login je niet toestaat je inlogformulier ergens op je site in te sluiten en alleen op je inlogpagina wordt weergegeven. Omdat het geen volledig functionele formulier-plug-in is zoals WPForms, is de mogelijkheid om uw inlogformulier aan te passen beperkt.

Methode 1: WPForms gebruiken om een ​​inlogpagina te maken

WPForms

Laten we eens kijken hoe u een inlogpagina maakt met WPForms.

Stap 1: Installeer WPForms op uw site

Het eerste dat u hoeft te doen, is installeren en activeren de WPForms-plug-in. Zorg ervoor dat u uw licentiesleutel verifieert door naar te navigeren WPForms »Instellingen. U kunt de licentiesleutel verkrijgen via uw account op de WPForms-website.

Om een ​​aangepaste inlogpagina met WPForms te kunnen maken, moet je de Gebruikersregistratie addon door naar te gaan WPForms »Add-ons. Klik Installeer Addon naast Addon voor gebruikersregistratie en klik vervolgens op Activeren.

Zodra de add-on is geactiveerd, kunt u doorgaan en een gebruikersaanmeldingsformulier maken met WPForms.

Stap 2: Maak een aangepast aanmeldingsformulier

Met de krachtige drag-and-drop-builder van WPForms kunt u een aanmeldingsformulier bouwen in slechts een paar minuten, geen uren, zonder een enkele regel code te schrijven.

Ga naar om een ​​inlogformulier te maken WPForms »Nieuw toevoegen. Op de formulierconfiguratiepagina moet u de kiezen Gebruikersaanmeldingsformulier sjabloon om een ​​inlogformulier te maken.

gebruiker login formuliersjabloon

U ziet nu de formulierbouwer waar u inlogformuliervelden kunt toevoegen, aanpassen en verwijderen. Standaard voegt de login-formuliersjabloon de volgende formuliervelden toe: Gebruikersnaam en Wachtwoord.

gebruikersaanmeldingsformulier in WordPress

U kunt elk veld aanpassen door erop te klikken in de paginabuilder. Vervolgens kunt u de gewenste aanpassingen maken in het linkerdeelvenster.

Stap 3: Formulierconfiguratie

Ga naar om algemene instellingen te configureren Instellingen »Algemeen. Op deze pagina kunt u de naam van het formulier, de beschrijving, de knoptekst, enz. Aanpassen.

aanmeldingsformulier algemene instellingen

U hoeft niets te doen in de Kennisgevingen tabblad voor uw aangepaste aanmeldingsformulier. Meldingen zijn standaard uitgeschakeld, dus u ontvangt geen e-mail wanneer iemand inlogt op uw site.

Wanneer een gebruiker inlogt via uw aangepaste inlogformulier, komt hij terecht op de startpagina van uw website. U kunt de omleidings-URL desgewenst wijzigen in de Omleidings-URL voor bevestiging veld-.

bevestigingsinstellingen aangepaste inlogpagina

Stap 4: publiceer uw WordPress-formulier

Een van de belangrijkste voordelen van het gebruik van WPForms voor het maken van een aanmeldingsformulier is dat u uw formulier overal op uw site kunt insluiten, inclusief berichten, pagina’s, zijbalkwidgets of widgeted voettekstgebieden.

Laten we eens kijken hoe u uw formulier kunt publiceren in berichten of pagina’s.

Maak een nieuwe post of pagina in WordPress en klik vervolgens op de + pictogram in de Gutenberg-blokeditor. U kunt zoeken naar het WPForms-blok en erop klikken.

Formulieren toevoegen

Selecteer vervolgens uw inlogformulier in het WPForms-blok en het wordt automatisch geladen in uw bericht / pagina.

Selecteer inlogformulier

Nadat je het formulier hebt toegevoegd, kun je je bericht / pagina publiceren.

U kunt het aanmeldingsformulier ook als volgt toevoegen aan uw zijbalkwidget. Ga naar Uiterlijk »Widgets en voeg de WPForms-widget toe aan uw zijbalk.

Inlogformulier widget

Selecteer uw aangepaste aanmeldingsformulier in de instellingen van de widget en klik op de Opslaan knop om wijzigingen op te slaan.

Methode 2: Thema Mijn login gebruiken om een ​​inlogpagina te maken

thema mijn login plugin

De Thema Mijn login plug-in maakt het super eenvoudig om een ​​aangepast aanmeldingsformulier op uw WordPress-site te publiceren. Om een ​​eenvoudige inlogpagina te maken, volstaat het om de plug-in Theme My Login te installeren en te activeren.

De plug-in werkt standaard zonder verdere configuratie.

Als u echter de instellingen van de plug-in moet aanpassen, kunt u op het menu Thema Mijn login in uw WordPress-dashboard klikken.

thema mijn login-instellingen

Vervolgens kunt u de aanmeldings- en registratietypen wijzigen. U kunt ook de URL-slugs aanpassen voor de login-, logout-, registratie-, verloren wachtwoord- en wachtwoordpagina’s.

Methode 3: Pas de bestaande WordPress-inlogpagina aan zonder een plug-in

Als u liever wijzigingen aanbrengt of aangepaste styling toevoegt aan uw bestaande inlogpagina dan een geheel nieuwe te maken, kunt u dit als volgt doen.

Voeg eenvoudig deze code toe aan het functies.php-bestand van uw thema of in een sitespecifieke plug-in:

Als dit de eerste keer is dat u codefragmenten toevoegt in WordPress, raadpleeg dan onze handleiding over het correct toevoegen van codefragmenten in WordPress, zodat u uw site niet per ongeluk breekt.

// Aangepaste inlogpagina
functie clp_login_head () {

echo ”; // Begin aangepaste stijlen
echo ‘.login #nav a, .login #backtoblog a {color: #! important; } ‘; // Linkkleur inlogpagina
echo ‘.login h1 a {achtergrond: url ("’. get_bloginfo (‘stylesheet_directory’). ‘/ images / IMAGE GAAT HIER"); breedte: px; hoogte: px; } ‘; // Login pagina logo
echo ‘.login .button-primary {achtergrond: #; rand kleur:#; } ‘; // Inlogpagina knopkleur
echo ”; // Beëindig aangepaste stijlen

}
add_action (‘login_head’, ‘clp_login_head’);

U kunt de CSS- en afbeeldings-URL in de bovenstaande code wijzigen om uw aangepaste stijl toe te voegen voor de WordPress-inlogpagina.

Methode 4: WordPress-aanmeldingsformulier overal weergeven zonder een plug-in

Als u het WordPress-aanmeldingsformulier op een pagina, zijbalk of voettekstgebied wilt weergeven, kunt u deze code toevoegen aan het sjabloonbestand van uw thema:

Net als de bovenstaande methode, als u voor de eerste keer codefragmenten aan WordPress toevoegt, raadpleeg dan onze handleiding over hoe u codefragmenten op de juiste manier toevoegt aan WordPress, zodat u niet per ongeluk uw site breekt.

<?php
wp_login_form ();
?>

De bovenstaande code geeft alleen de algemene inlogpagina van WordPress weer op de locatie waar u de code toevoegt. In het geval dat u een aangepaste WordPress-formulierpagina met extra velden en opties kunt toevoegen, kunt u deze code gebruiken:

<?php $ args = array (
‘echo’ => waar,
‘redirect’ => ‘http://wpsnipp.com’,
‘form_id’ => ‘login formulier’,
‘label_username’ => __ (‘Gebruikersnaam’),
‘label_password’ => __ (‘Wachtwoord’),
‘label_remember’ => __( ‘Onthoud me’ ),
‘label_log_in’ => __( ‘Log in’ ),
‘id_username’ => ‘gebruiker login’,
‘id_password’ => ‘gebruikerspas’,
‘id_remember’ => ‘Onthoud me’,
‘id_submit’ => ‘wp-indienen’,
‘onthouden’ => waar,
‘waarde_gebruikersnaam’ => NUL,
‘value_remember’ => false);
wp_login_form ($ args);
?>

Dat is het!

We hopen dat deze gids je heeft geholpen bij het maken van een aangepaste inlogpagina in WordPress. Als je dit artikel leuk vond, wil je misschien ook ons ​​artikel lezen over de beste contactformulier-plug-ins voor WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map