customer servcice chatbots

Een aangepaste WordPress-inlogpagina maken

9 min


99

Wilt u een aangepaste WordPress-inlogpagina voor uw website maken?

Als u een WordPress-lidmaatschapssite of een online winkel beheert , zullen veel van uw gebruikers vaak de inlogpagina zien. Door de standaard WordPress-inlogpagina aan te passen, kunt u een betere gebruikerservaring bieden.

In deze ultieme gids laten we u verschillende manieren zien om een ​​aangepaste WordPress-inlogpagina te maken. Je kunt deze tutorial ook gebruiken om een ​​aangepaste WooCommerce-inlogpagina te maken.

Hoe u eenvoudig een aangepaste WordPress-inlogpagina voor uw site kunt maken

Waarom een ​​aangepaste WordPress-inlogpagina maken?

WordPress wordt geleverd met een krachtig gebruikersbeheersysteem . Hierdoor kunnen gebruikers accounts aanmaken in e-commerce winkels , lidmaatschapswebsites of op een blog.

Standaard toont de inlogpagina de WordPress-branding en het logo. Dit is prima als u een kleine blog heeft, of als u de enige persoon bent met beheerdersrechten.

Standaard WordPress-inlogscherm

Als uw website gebruikers echter toestaat zich te registreren en in te loggen, biedt een aangepaste inlogpagina een betere gebruikerservaring.

Door uw eigen logo en ontwerp te gebruiken, voelen uw gebruikers zich thuis. Terwijl het omleiden naar het standaard WordPress-inlogscherm dat in niets lijkt op uw website, kan er verdacht uitzien voor uw gebruikers.

Ten slotte bevat het standaard inlogscherm niets anders dan het inlogformulier. Door een aangepaste inlogpagina te maken, kunt u deze gebruiken om andere pagina’s of speciale promoties te promoten.

Dat gezegd hebbende, laten we eens kijken naar enkele voorbeelden van aangepaste WordPress-inlogpagina-ontwerpen.

Voorbeelden van ontwerp van WordPress-aanmeldingspagina’s

Website-eigenaren kunnen de WordPress-inlogpagina aanpassen met verschillende stijlen en technieken.

Sommigen maken een aangepaste inlogpagina die het thema en de kleuren van hun website gebruikt. Anderen wijzigen de standaard aanmeldingspagina door er een aangepaste achtergrond, kleuren en hun eigen logo aan toe te voegen.

1. WPForms

WPForms

WPForms is de beste plug- in voor WordPress-contactformulieren op de markt. Toevallig bevat hun plug-in ook een add-on om prachtige WordPress-aanmeldings- en registratieformulieren te maken, die we u later in dit artikel zullen laten zien.

Hun aangepaste inlogpagina maakt gebruik van een indeling met twee kolommen. De linkerkolom bevat het inlogformulier en de rechterkolom wordt gebruikt om promoties en andere call-to-actions te markeren. In het bovenstaande voorbeeld gebruiken ze de inlogpagina om hun jaarverslag te delen. Het maakt gebruik van aangepaste branding, achtergrondillustratie en merkkleuren om een ​​unieke login-ervaring te creëren.

2. Rock My Wedding

Rock My Wedding

De website van Rock My Wedding maakt gebruik van een pop-upmodus om het login- en registratieformulier weer te geven . Het voordeel van het gebruik van een pop-up is dat gebruikers kunnen inloggen zonder de pagina te verlaten. Het bespaart ze van het laden van een nieuwe pagina en biedt een snellere gebruikerservaring.

3. Jacquelynne Steves

Jacquelynne Steves

Jacquelynne Steeves is een website voor kunstnijverheid waar de auteur inhoud publiceert over het decoreren van huis, het maken van quilts, patronen, borduren en meer. Hun inlogpagina gebruikt een aangepaste achtergrondafbeelding die overeenkomt met het thema van hun website met het inlogformulier aan de rechterkant.

4. Kerk bewegende beelden

Kerk bewegende beelden

De inlogpagina van dit motion graphics-ontwerpbedrijf gebruikt een kleurrijke achtergrond die weergeeft waar het bij hun bedrijf om draait. Het gebruikt dezelfde koptekst, voettekst en navigatiemenu’s op het inlogscherm. Het inlogformulier zelf is vrij eenvoudig met een donkere achtergrond.

5. MITSLoan Management Review

MITSLoan Management Review

De MITSLoan Management Review-website gebruikt het standaard WordPress-inlogscherm. Het maakt gebruik van aangepaste CSS met hun eigen logo om de WordPress-branding te verbergen.

Een aangepaste inlogpagina voor de front-end maken in WordPress

Er zijn verschillende WordPress-plug-ins die u kunt gebruiken om een ​​front-end aangepaste inlogpagina in WordPress te maken. We laten u twee verschillende plug-ins zien en u kunt degene kiezen die het beste bij u past.

Video uitleg

https://www.youtube.com/embed/th4wog0xmAU?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparentAbonneer u op WPBeginnerhttps://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=http%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.Rx51stRkYnQ.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCM5XUrLkPZ9aFXqtSLivsifryqsUA#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1448178294715&parent=http%3A%2F%2Fwpbeginner.com

Als je liever schriftelijke instructies hebt, blijf dan gewoon lezen.

Een WordPress-aanmeldingspagina maken met Theme My Login

Het eerste dat u hoeft te doen, is de plug-in Theme My Login installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering maakt Theme My Login automatisch URL’s aan voor uw aangepaste acties voor inloggen, uitloggen, registreren, wachtwoord vergeten en wachtwoord resetten.

U kunt deze aanmeldings-URL’s voor WordPress aanpassen door naar de pagina Thema Mijn aanmelding »Algemeen te gaan . Scrol omlaag naar het gedeelte ‘Slugs’ om deze URL’s te wijzigen die door de plug-in worden gebruikt voor inlogacties.

Thema Mijn aanmeldingspagina's

Met Theme My Login kunt u ook shortcodes gebruiken om aangepaste inlog- en registratiepagina’s te maken. U kunt eenvoudig voor elke actie een pagina maken en vervolgens de paginaslak hier toevoegen, zodat de plug-in gebruikers correct kan vinden en omleiden.

Laten we beginnen met de inlogpagina.

Ga naar Pagina »Nieuwe toevoegen om een ​​nieuwe WordPress-pagina te maken. U moet uw pagina een titel geven en vervolgens de volgende shortcode “[theme-my-login]” invoeren in het inhoudsgebied.

Shortcode toevoegen

U kunt nu uw pagina publiceren en een voorbeeld bekijken om uw aangepaste inlogpagina in actie te zien.

Aangepaste WordPress-inlogpagina

Herhaal het proces om andere pagina’s te maken door de volgende shortcodes te gebruiken.

[theme-my-login action = ”registreren”] voor registratieformulier.

[theme-my-login action = “lostpassword”] voor de pagina met verloren wachtwoord.

[theme-my-login action = ”resetpass”] gebruik het op de pagina wachtwoord opnieuw instellen.

Een aangepaste WordPress-inlogpagina maken met behulp van WPForms

WPForms is de beste plug-in voor het maken van WordPress-formulieren op de markt. Hiermee kunt u eenvoudig aangepaste inlog- en registratieformulieren voor uw website maken.

WPForms is een premium WordPress-plug-in en je hebt op zijn minst hun pro-plan nodig om toegang te krijgen tot de add-on voor gebruikersregistratie. WPBeginner-gebruikers kunnen 50% korting krijgen door onze WPForms-couponcode te gebruiken : SAVE50

Het eerste dat u hoeft te doen, is de WPForms- plug-in installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet u de pagina WPForms »Instellingen bezoeken om uw licentiesleutel in te voeren. U kunt deze informatie vinden onder uw account op de WPForms-website.

WPForms-licentie

Nadat u de licentiesleutel heeft ingevoerd, kunt u add-ons installeren. Ga je gang en bezoek de pagina WPForms »Addons en zoek de Add-on voor gebruikersregistratie.

Installeer de add-on voor gebruikersregistratie

Klik vervolgens op de knop Add-on installeren om de add-on te downloaden en te activeren. U bent nu klaar om uw eigen aangepaste inlogformulieren te maken.

Ga naar WPForms »Nieuwe pagina toevoegen en scrol omlaag naar het sjabloon ‘Gebruikersaanmeldingsformulier’. U moet op de knop ‘Gebruikersaanmeldingsformulier maken’ klikken om door te gaan.

Maak een aanmeldingsformulier aan

WPForms laadt het gebruikersaanmeldingsformulier met de vereiste velden. U kunt op de velden klikken om uw eigen beschrijving of tekst eromheen toe te voegen.

WPForms-formulierbouwer

U kunt ook andere instellingen wijzigen. Het voegt bijvoorbeeld automatisch ‘Verzenden’ toe als de knoptitel. U kunt erop klikken en het vervolgens wijzigen in Inloggen.

Formulierinstellingen

U kunt ook beslissen wat er gebeurt als een gebruiker succesvol is ingelogd. Ga naar Instellingen »Bevestiging tabblad en selecteer een actie.

Omleiden ingelogde gebruikers

U kunt de gebruiker omleiden naar een andere URL, hem omleiden naar de homepagina of hem gewoon een bericht laten zien dat hij nu is ingelogd.

Als u tevreden bent met de formulierinstellingen, klikt u op de knop Opslaan in de rechterbovenhoek van het scherm en sluit u de formulierbouwer.

Uw aangepaste aanmeldingsformulier toevoegen aan een WordPress-pagina

WPForms maakt het supereenvoudig om uw aangepaste inlogformulier toe te voegen aan elke WordPress-post of -pagina.

Bewerk eenvoudig de pagina waar u het inlogformulier wilt toevoegen of maak een nieuw formulier. Voeg op het paginabewerkingsscherm het WPForms-blok toe aan uw inhoudsgebied.

WPForms-blok aan een bericht toevoegen

Selecteer vervolgens het aanmeldingsformulier dat u eerder hebt gemaakt en het WPForms-blok laadt het automatisch in het inhoudsgebied.

Voorbeeld van aanmeldingsformulier

U kunt nu doorgaan met het bewerken van de aanmeldingsformulierpagina of uw wijzigingen opslaan en publiceren.

Het ontwerp van uw WordPress-inlogformulierpagina aanpassen

Standaard gebruikt uw aangepaste WordPress-inlogformulierpagina de paginasjabloon en stijlen van uw thema. Het heeft de navigatiemenu’s, koptekst, voettekst en zijbalkwidgets van uw thema.

Als je de hele pagina volledig wilt overnemen en iets helemaal opnieuw wilt ontwerpen, dan kun je een plug-in voor WordPress-paginabuilder gebruiken .

Met een paginabuilder-plug-in kunt u een aangepaste paginalay-out maken en vervolgens een inlogformulierwidget toevoegen die wordt geleverd door Theme My Login of WPForms.

In de onderstaande schermafbeelding hebben we de populaire Beaver Builder- plug-in gebruikt. We gebruikten een achtergrondafbeelding op een volledig scherm en voegden vervolgens twee kolommen toe. In één kolom hebben we wat tekst en een knop toegevoegd. In de andere kolom hebben we de WPForms-widget toegevoegd.

Een aangepaste inlogpagina maken met de plug-in voor het maken van pagina's

Het voordeel van Beaver Builder is dat het een 100% drag-and-drop-oplossing is.

Opmerking: aangezien u al bent aangemeld, tonen zowel Theme My Login- als WPForms-plug-ins mogelijk geen live voorbeeld van het inlogformulier. De WPForms-plug-in heeft een optie waarmee u dit kunt uitschakelen in de formulierinstellingen.

Als plug-ins voor WordPress-paginabuilder niet jouw ding zijn, dan kun je aangepaste CSS gebruiken om het formulier en de inlogpagina zelf op te maken. Als alternatief kunt u ook de CSS Hero-plug-in gebruiken om eenvoudig aangepaste CSS-stijlen toe te voegen.

U hoeft niet altijd een volledig aangepaste WordPress-inlogpagina voor uw website te maken. In feite vervangen veel websites gewoon het WordPress-logo en de logo-URL terwijl ze nog steeds de standaard inlogpagina gebruiken.

Als je het WordPress-logo op het inlogscherm wilt vervangen door je eigen logo, dan kan dat eenvoudig met een WordPress-plug-in of door aangepaste code toe te voegen. We laten u beide methoden zien, zodat u er een kunt gebruiken die het beste bij u past.

Wijzig het WordPress-aanmeldingslogo en de URL met een plug-in

Het eerste dat u hoeft te doen, is de Colorlib Login Customizer installeren en activeren . inpluggen. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering voegt de plug-in een nieuw menu-item met de naam ‘Login Customizer’ toe aan de WordPress admin-zijbalk. Als u erop klikt, wordt de aanmeldingsaanpasser gestart.

Login customizer

De login-aanpasser laadt uw standaard WordPress-inlogscherm met aanpassingsopties aan de linkerkant en live preview aan de rechterkant.

Om het WordPress-logo te vervangen door uw eigen logo, klikt u aan de rechterkant op het tabblad ‘Logo-opties’. Vanaf hier kunt u het WordPress-logo verbergen, uw eigen aangepaste logo uploaden, de logo-URL en tekst wijzigen.

Upload een aangepast logo naar de inlogpagina

Met de plug-in kunt u ook de standaard WordPress-inlogpagina volledig aanpassen. U kunt kolommen en een achtergrondafbeelding toevoegen, de kleuren van het aanmeldingsformulier wijzigen en meer.

In principe kunt u een aangepaste WordPress-inlogpagina maken zonder de standaard WordPress-inlog-URL te wijzigen.

Als u klaar bent, klikt u eenvoudig op de publicatieknop om uw wijzigingen op te slaan. U kunt nu de inlogpagina van WordPress bezoeken om uw aangepaste inlogformulier in actie te zien.

Aangepaste WordPress-inlogpagina met aangepast logo

Wijzig het WordPress-aanmeldingslogo en de URL zonder plug-in (code)

Met deze methode kunt u het WordPress-logo op het inlogscherm handmatig vervangen door uw eigen aangepaste logo .

Eerst moet u uw aangepaste logo uploaden naar de mediabibliotheek. Ga naar Media »Nieuwe pagina toevoegen en upload uw eigen logo.

Nadat u de afbeelding heeft geüpload, klikt u op de link ‘Bewerken’ ernaast. Hierdoor wordt de mediapagina voor bewerken geopend waar u de bestands-URL moet kopiëren en in een leeg tekstbestand op uw computer moet plakken.

Vervolgens moet u de volgende code toevoegen aan het functions.php- bestand van uw thema of een site-specifieke plug-in .

12345678910111213function wpb_login_logo() { ?><style type="text/css">#login h1 a, .login h1 a {background-image: url(http://path/to/your/custom-logo.png);height:100px;width:300px;background-size: 300px 100px;background-repeat: no-repeat;padding-bottom: 10px;}</style><?php }add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Vergeet niet de URL van de achtergrondafbeelding te vervangen door de bestands-URL die u eerder hebt gekopieerd. U kunt ook andere CSS-eigenschappen aanpassen aan uw aangepaste logo-afbeelding.

U kunt nu de inlogpagina van WordPress bezoeken om uw aangepaste logo in actie te zien.

WordPress-inlogpagina met aangepast logo

Deze code vervangt alleen het WordPress-logo. Het verandert niets aan de logolink die naar de WordPress.org-website verwijst.

Laten we dit veranderen.

Voeg eenvoudig de volgende code toe aan het functions.php-bestand van uw thema of een site-specifieke plug-in. U kunt deze code direct onder de code toevoegen die u eerder heeft toegevoegd.

123456789function wpb_login_logo_url() {return home_url();}add_filter( 'login_headerurl', 'wpb_login_logo_url' ); function wpb_login_logo_url_title() {return 'Your Site Name and Info';}add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Vergeet niet ‘Uw sitenaam en info’ te vervangen door de werkelijke naam van uw site. Het aangepaste logo op uw inlogscherm verwijst nu naar de startpagina van uw site.

Dat is alles. We hopen dat dit artikel je heeft geholpen bij het leren van verschillende manieren om een ​​WordPress-inlogpagina voor je website te maken. 


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format