IN DEZE HANDLEIDING:
- 1 Waarom aangepaste WordPress aanmeldpagina maken?
- 2 WordPress Login Pagina Ontwerp Voorbeeld
- 3 WordPress login pagina maken met WordPress plugin
- 4 Ontwerp vormgeving WP inlogformulier pagina aanpassen
- 5 Elementor WordPress page builder handleiding en review
- 6 WP Beaver Builder training pagina’s bouwen met WP plugin
- 7 Divi wordpress thema page builder review en test
- 8 WP Bakery Builder WP Plugin Handleiding Nederlands
- 9 Het WordPress login logo en URL wijzigen
- 10 Menu aanpassen voor ingelogde gebruikers
- 11 Meer handleidingen WordPress logins
Waarom aangepaste WordPress aanmeldpagina maken?
Soms wil je zelf de WordPress login pagina voor gebruikers maken of aanpassen voor website of WooCommerce webshop. Lees hoe je dit kunt doen.
WordPress wordt geleverd met een krachtig user management systeem. Hiermee kunnen gebruikers accounts maken op WooCommerce winkels, lidmaatschapswebsites, of op een blog.
Standaard toont de inlogpagina het WordPress-merk en -logo. Dit is prima als je een kleine blog runt, of als je de enige persoon bent met beheerderstoegang.
Maar als uw website meerdere gebruikers toestaat om te registreren en in te loggen, dan biedt een aangepaste inlogpagina een betere gebruikerservaring.
Door uw eigen logo en ontwerp te gebruiken, voelen uw gebruikers zich thuis. Terwijl het doorverwijzen naar het standaard WordPress login scherm, dat in niets lijkt op uw website, verdacht kan overkomen op uw gebruikers.
Tenslotte bevat het standaard loginscherm niets anders dan het loginformulier. Door een aangepaste login pagina te maken kunt u deze gebruiken om andere pagina’s of speciale promoties te promoten.
Laten we eens kijken naar een aantal voorbeelden van aangepaste WordPress login pagina ontwerpen.
WordPress Login Pagina Ontwerp Voorbeeld
Website eigenaren kunnen de WordPress login pagina met verschillende stijlen en technieken aanpassen.
Sommigen maken een aangepaste login pagina die het thema en de kleuren van hun website gebruikt. Anderen passen de standaard inlogpagina aan door er een eigen achtergrond, kleuren en logo aan toe te voegen.
WPForms is de één van de beste WordPress contactformulier plugin op de markt. Toevallig bevat hun plugin ook een add-on om mooie WordPress login en registratie formulieren te maken, die we je later in dit artikel zullen laten zien.
Beste WordPress contactformulieren plugins
Hun aangepaste login pagina gebruikt een twee koloms layout. De linkerkolom bevat het aanmeldformulier en de rechterkolom wordt gebruikt om promoties en andere call-to-actions te belichten. In het voorbeeld hierboven gebruiken ze de aanmeldingspagina om hun jaarverslag te delen. Er wordt gebruik gemaakt van aangepaste branding, achtergrondillustratie en merkkleuren om een unieke inlogervaring te creëren.
WordPress login pagina maken met WordPress plugin
Het eerste wat u moet doen is het installeren en activeren van de Theme My Login-plugin. Voor meer details, zie onze stap voor stap handleiding over hoe een WordPress plugin te installeren.
Na activering, maakt Theme My Login automatisch URL’s voor uw aangepaste login, logout, registratie, wachtwoord vergeten, en wachtwoord resetten acties.
U kunt deze WordPress login URL’s aanpassen door naar de Theme My Login ” Algemeen pagina te gaan. Scroll naar beneden naar de ‘Slugs’ sectie om deze URL’s aan te passen die door de plugin gebruikt worden voor login acties.
Met Theme My Login kunt u ook shortcodes gebruiken om aangepaste login- en registratiepagina’s te maken. Je kunt gewoon een pagina maken voor elke actie en dan de pagina slug hier toevoegen, zodat de plugin de gebruikers goed kan vinden en doorverwijzen.
Laten we beginnen met de login pagina.
Ga naar Pagina ” Nieuw Toevoegen om een nieuwe WordPress pagina te maken. Je moet je pagina een titel geven en dan de volgende shortcode “[theme-mijn-login]” invoeren in het inhoudsgebied.
U kunt nu uw pagina publiceren en een voorbeeld bekijken om uw aangepaste inlogpagina in actie te zien.
Herhaal het proces om andere pagina’s te maken met behulp van de volgende shortcodes.
[theme-my-login action=”register”] voor inschrijfformulier.theme-my-login action=”lostpassword”] voor de verloren wachtwoord pagina.
[theme-my-login action=”resetpass”] gebruik deze op de reset wachtwoord pagina.Ontwerp vormgeving WP inlogformulier pagina aanpassen
Standaard zal uw aangepaste WordPress aanmeldformulier pagina de paginasjabloon en stijlen van uw thema gebruiken. Het zal de navigatie menu’s, header, footer, en sidebar widgets van uw thema hebben.
Als u de hele pagina volledig vanaf scratch wilt ontwerpen, dan kunt u een WordPress page builder paginabouwer plugin gebruiken. Met een page builder plugin, kunt u een aangepaste pagina lay-out maken en vervolgens een login formulier widget toevoegen die wordt geleverd door Theme My Login of WPForms. Een aantal WordPress page builder plugins op een rijtje:
Elementor WordPress page builder handleiding en review
Elementor is de populairste pagebuilder plugin voor WordPress. Je kunt met de ‘drag-and-drop’ webpagina’s vormgeven. Lees review en handleiding.
WP Beaver Builder training pagina’s bouwen met WP plugin
De WP Beaver Builder is één van de beste page builder op dit moment voor WordPress. Lees de handleidingen, voordelen en tips en volg eventueel een training.
Divi wordpress thema page builder review en test
In deze handleiding en review leg ik uit hoe het Divi thema en de Divi page builder werkt. Daarnaast heb ik het Divi thema getest.
WP Bakery Builder WP Plugin Handleiding Nederlands
WP Bakery Builder is een eenvoudig te gebruiken page builder plugin die je de mogelijkheid bied om mooie webpagina’s te bouwen. Handleidingen vind je onderaan deze pagina. IN DEZE HANDLEIDING:1 WP Bakery Builder voor WordPress2 WordPress thema en design aanpassen met page builder3 WPBakery Page Builder Review | Voordelen en […]
In de schermafbeelding hieronder hebben we de populaire Beaver Builder plugin gebruikt. We hebben een achtergrondafbeelding gebruikt op een fullscreen layout en vervolgens twee kolommen toegevoegd. In de ene kolom hebben we wat tekst en een knop toegevoegd. In de andere kolom hebben we de WPForms widget toegevoegd.
Het voordeel van Beaver Builder is dat het 100% drag and drop oplossing is.
Note:
Omdat je al ingelogd bent, kan het zijn dat zowel de Theme My Login als WPForms plugins geen live preview van het login formulier laten zien. WPForms plugin heeft een optie waar je dit uit kunt zetten in de formulier instellingen.
Als WordPress page builder plugins niet uw ding zijn, dan kunt u aangepaste CSS gebruiken om het formulier en de login pagina zelf op te maken. Als alternatief kunt u ook CSS Hero plugin gebruiken om gemakkelijk aangepaste CSS stijlen toe te voegen. meer over CSS aanpassen:
- CSS Element inspecteren WordPress aanpassen browser
- Zelf simpel HTML en CSS maken leren in WordPress voor beginners
- Responsive Breakpoints pixels mobiel Tablet desktop
Het WordPress login logo en URL wijzigen
U hoeft niet altijd een volledig aangepaste WordPress login pagina voor uw website te maken. In feite vervangen veel websites gewoon het WordPress logo en logo url terwijl ze nog steeds de standaard login pagina gebruiken.
Als u het WordPress logo op het inlogscherm wilt vervangen door uw eigen logo, dan kunt u dit eenvoudig doen met behulp van een WordPress plugin of door het toevoegen van aangepaste code. We zullen je beide methodes laten zien, je kunt er een gebruiken die het beste bij je past.
Meer info over logo’s en WordPress sites:
- Nieuwe huisstijl laten maken ontwerp design logo
- WP login pagina gebruikers maken website webshop
- Logo, huisstijl en identity WP websites en webdesign
Verander WordPress Login Logo en URL met behulp van een Plugin
Het eerste wat u moet doen is het installeren en activeren van de Colorlib Login Customizer. plugin. Na activering, de plugin voegt een nieuw menu item gelabeld ‘Login Customizer’ aan WordPress admin zijbalk. Door erop te klikken wordt de login customizer gestart.
De login customizer zal uw standaard WordPress login scherm laden met aanpassingsopties aan de linkerkant en een live voorbeeld aan de rechterkant.
WordPress logo vervangen door uw eigen logo
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 URL van het logo en de tekst wijzigen.
De plugin staat je ook toe om de standaard WordPress login pagina volledig aan te passen. U kunt kolommen, achtergrondafbeelding, veranderen login vorm kleuren, en nog veel meer. In principe kunt u een aangepaste WordPress login pagina maken zonder de standaard WordPress login URL te wijzigen.
Zodra u klaar bent, klikt u op de knop publiceren om uw wijzigingen op te slaan. U kunt nu de WordPress login pagina bezoeken om uw aangepaste login formulier in actie te zien.
Verander WordPress login logo en URL zonder Plugin (PHP Code)
Met deze methode kunt u handmatig het WordPress-logo op het inlogscherm vervangen door uw eigen aangepast logo.
Eerst moet u uw aangepaste logo uploaden naar de mediabibliotheek. Ga naar de Media ” Nieuwe toevoegen pagina en upload uw aangepaste logo.
Zodra u de afbeelding hebt geüpload, klikt u op de link ‘Bewerken’ naast de afbeelding. Dit zal de bewerk media pagina openen waar u de URL van het bestand moet kopiëren en plakken in een leeg tekstbestand op uw computer.
Vervolgens moet u de volgende code toevoegen aan het functions.php bestand van uw thema of een site-specifieke plugin.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
class=”php keyword“>function wpb_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { achtergrond-afbeelding: url(http://path/to/uw/custom-logo.png); height:100px; breedte:300px; background-size: 300px 100px; background-repeat: no-repeat; padding-bottom: 10px; } </style><?php }add_action( 'login_enqueue_scripts', 'wpb_login_logo' ); |
Vergeet niet om de background-image URL te vervangen door de URL van het bestand dat je eerder hebt gekopieerd. U kunt ook andere CSS eigenschappen aanpassen aan uw aangepaste logo afbeelding.
U kunt nu de WordPress login pagina bezoeken om uw aangepaste logo in actie te zien.
Deze code vervangt alleen het WordPress logo. Het verandert niet de logo link die verwijst naar de WordPress.org website.
WordPress logo link wijzigen en veranderen
Voeg simpelweg de volgende code toe aan het functions.php bestand van je thema of een site-specifieke plugin. Je kunt deze code toevoegen direct onder de code die je eerder hebt toegevoegd.
|
1
2
3
4
5
6
7
8
9
|
function wpb_login_logo_url() { return home_url();}add_filter( 'login_headerurl', 'wpb_login_logo_url' );function wpb_login_logo_url_title() { trefwoord“>return 'Uw sitenaam en -info';}add_filter( 'login_headertitle', 'wpb_login_logo_url_title' ); |
Vergeet niet om ‘Your Site Name and Info’ te vervangen door de echte naam van je site. Het aangepaste logo op uw inlogscherm zal nu verwijzen naar de startpagina van uw site.
Dat was alles. We hopen dat dit artikel u heeft geholpen om verschillende manieren te leren om een WordPress login pagina te maken voor uw website. Misschien wilt u ook onze WordPress handleidingen over beveiligingen bekijken voor tips over het verbeteren van uw WordPress inlogbeveiliging.
- WordPress bestandsrechten beveiliging server instelling
- Beveiligings Audit check test WordPress website monitor
- SSL Certificaat website beveiligen van HTTP naar HTTPS
- Cursus technisch beheer onderhoud WordPress website
Menu aanpassen voor ingelogde gebruikers
Een handige plugin voor ingelogde gebruikers is de User Menus. De plugin geeft u meer controle over uw navigatie menu door zichtbaarheids controles toe te passen op WordPress menu items. Bijvoorbeeld wie kan elk menu item zien (iedereen, uitgelogde gebruikers, ingelogde gebruikers, specifieke gebruikers rollen). Het stelt je ook in staat om ingelogde gebruikersinformatie weer te geven in het navigatiemenu, bijvoorbeeld “Hallo, Wim Jansen”.
De plugin maakt het mogelijk om login, register, en logout links aan je menu toe te voegen. Gebruikers Menu’s kunt u het volgende doen:
- Menu-items tonen aan iedereen
- Menu-items tonen aan alleen uitgelogde gebruikers
- Menu-items tonen aan alleen ingelogde gebruikers
- Menu-items tonen aan gebruikers met of zonder een specifieke gebruikersrol.
- Toon de avatar van een ingelogde gebruiker in een menu-item met aangepaste grootte.
- Toon de gebruikersnaam van een ingelogde gebruiker in een menu-item
- Toon de voornaam van een ingelogde gebruiker in een menu-item
- Laat de achternaam van een ingelogde gebruiker in een menu-item zien
- Toon de display_name van een ingelogde gebruiker in een menu-item
- Toon de bijnaam van een ingelogde gebruiker} in een menu-item
- Toon het email-adres van een ingelogde gebruiker in een menu-item
- Een afmeldlink aan het menu toevoegen (optionele omleidingsinstellingen)
- Een registratielink aan het menu toevoegen (optionele doorverwijzingsinstellingen)
- Een aanmeldlink aan menu toevoegen (optionele doorverwijzingsinstellingen)
wordpress.org/plugins/user-menus
Meer handleidingen WordPress logins
Meer handleidingen om een WordPress login maken voor je webshop:
Hele WordPress afschermen website achter 1 wachtwoord
Hoe scherm je je hele WordPress site af met wachtwoord Op zoek naar een manier om WordPress te beveiligen met een wachtwoord? Er zijn veel manieren om een wachtwoord aan je site toe…
Pagina beveiligen met wachtwoord login zonder WP plugin
Tijdelijk login maken in WordPress zonder wachtwoord
Inloggen zonder wachtwoord met WordPress plugin Maak automatische verlopende login links voor WordPress. Inloggen werkt gewoon door het openen van de link, geen wachtwoord nodig. Dit kan erg handig zijn. Bijvoorbeeld voor: Geef ze…