Hoe een aangepaste WordPress-inlogpagina te maken (Ultieme gids)

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


Als u een WordPress-lidmaatschapssite of een online winkel heeft, 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 voor het maken van een aangepaste WooCommerce-inlogpagina.

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

Dit is wat u uit deze gids zult leren.

    Waarom een ​​aangepaste WordPress-inlogpagina maken?

    WordPress wordt geleverd met een krachtig gebruikersbeheersysteem. Hiermee kunnen gebruikers accounts maken op eCommerce-winkels, lidmaatschapswebsites of op een blog.

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

    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 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 een paar voorbeelden bekijken van aangepaste WordPress-inlogpagina-ontwerpen.

    Voorbeelden van WordPress inlogpagina-ontwerp

    Website-eigenaren kunnen de inlogpagina van WordPress 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 inlogpagina 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 login- en registratieformulieren te maken, die we u later in dit artikel zullen laten zien.

    Hun aangepaste inlogpagina gebruikt een lay-out 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 gebruikt aangepaste branding, achtergrondillustratie en merkkleuren om een ​​unieke inlogervaring te creëren.

    2. Rock My Wedding

    Rock My Wedding

    De website van Rock My Wedding gebruikt een pop-upmodaal om het aanmeldings- 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 kunst- en handwerkwebsite waar de auteur inhoud publiceert over het inrichten 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. Church Motion Graphics

    Church Motion Graphics

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

    5. MITSLoan Management Review

    MITSLoan Management Review

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

    Een front-end aangepaste aanmeldingspagina maken in WordPress

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

    Een WordPress-inlogpagina 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 voor uw aangepaste login, logout, registratie, wachtwoord vergeten, en reset wachtwoordacties.

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

    Thema Mijn inlogpagina's

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

    Laten we beginnen met de inlogpagina.

    Ga naar Pagina »Nieuw 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 met behulp van de volgende shortcodes.

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

    [theme-my-login action = ”lostpassword”] ​​voor de verloren wachtwoordpagina.

    [theme-my-login action = ”resetpass”] gebruik het op de reset-wachtwoordpagina.

    Een aangepaste WordPress-aanmeldingspagina maken met WPForms

    WPForms is de beste plug-in voor WordPress-formulierbouwers op de markt. Hiermee kunt u eenvoudig aangepaste aanmeldings- 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: BESPAAR 50

    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 je bezoeken WPForms »Instellingen pagina om uw licentiesleutel in te voeren. U kunt deze informatie vinden onder uw account op de WPForms-website.

    WPForms-licentie

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

    Installeer de gebruikersregistratie-add-on

    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 aanmeldingsformulieren te maken.

    Ga naar WPForms »Nieuw toevoegen pagina en scrol omlaag naar de sjabloon ‘Gebruikersaanmeldingsformulier’. U moet op de knop ‘Een aanmeldingsformulier voor gebruikers maken’ klikken om door te gaan.

    Aanmeldingsformulier maken

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

    WPForms-formulierbouwer

    Je kunt ook andere instellingen wijzigen. Het voegt bijvoorbeeld automatisch ‘Verzenden’ toe als de titel van de knop. U kunt erop klikken en in plaats daarvan wijzigen in Inloggen.

    Formulierinstellingen

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

    Omgelogde gebruikers omleiden

    U kunt de gebruiker omleiden naar een andere URL, deze omleiden naar de startpagina of eenvoudig een bericht laten zien dat ze nu zijn 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 super eenvoudig om uw aangepaste inlogformulier toe te voegen aan een WordPress-bericht of pagina.

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

    WPForms-blok toevoegen aan een bericht

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

    Voorbeeld aanmeldingsformulier

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

    Het aanpassen van uw WordPress-inlogformulier pagina-ontwerp

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

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

    Met een plug-in voor paginabuilder kunt u een aangepaste pagina-indeling maken en vervolgens een aanmeldingsformulier-widget toevoegen die wordt aangeboden 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 schermvullende lay-out 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 paginabuilder

    Het voordeel van Beaver Builder is dat het een 100% oplossing voor slepen en neerzetten is.

    Notitie: Aangezien u al bent aangemeld, is het mogelijk dat zowel de plug-ins Theme My Login als WPForms geen live preview van het inlogformulier tonen. 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 te stylen. Als alternatief kunt u ook de CSS Hero-plug-in gebruiken om eenvoudig aangepaste CSS-stijlen toe te voegen.

    Verander het WordPress Login Logo en URL

    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 u het WordPress-logo op het inlogscherm wilt vervangen door uw eigen logo, dan kunt u dat eenvoudig doen met een WordPress-plug-in of door aangepaste code toe te voegen. We laten u beide methoden zien die u kunt gebruiken die het beste bij u past.

    Verander WordPress Login Logo en URL met behulp van 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 zijbalk van WordPress. Als u erop klikt, wordt de aanmeldingsaanpasser gestart.

    Aanpassingsaanpassing

    De inlogaanpasser 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 op het tabblad ‘Logo-opties’ aan de rechterkant. 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, achtergrondafbeelding toevoegen, inlogformulierkleuren wijzigen en meer.

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

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

    Aangepaste WordPress-inlogpagina met aangepast logo

    Verander WordPress Login Logo en 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 »Nieuw toevoegen pagina en upload uw eigen logo.

    Nadat je de afbeelding hebt geüpload, klik je 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 functies.php-bestand van uw thema of een sitespecifieke plug-in.

    functie wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    achtergrondafbeelding: url (http: //path/to/your/custom-logo.png);
    hoogte: 100px;
    breedte: 300px;
    achtergrondformaat: 300px 100px;
    achtergrondherhaling: geen herhaling;
    opvulling-onderkant: 10px;
    }

    <?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 aanmeldingspagina 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 functies.php-bestand van uw thema of een sitespecifieke plug-in. U kunt deze code direct onder de code toevoegen die u eerder heeft toegevoegd.

    functie wpb_login_logo_url () {
    terugkeer home_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    functie wpb_login_logo_url_title () {
    retourneer ‘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 verschillende manieren te leren om een ​​WordPress-inlogpagina voor je website te maken. Misschien wilt u ook onze ultieme WordPress-beveiligingsgids bekijken voor tips over het verbeteren van uw WordPress-inlogbeveiliging.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me