Anpassad inloggningssida i WordPress

WordPress inloggningssida är helt okej för administratörer och vana WordPress-användare men på en sida med medlemmar, kursdeltagare och andra så kan den kännas tråkig och kanske lite svårtydd.

Det finns en drös av plugin för att snygga till din inloggningssida som fungerar på lite olika sätt. Nackdelarna varierar men också fördelarna, ofta kan jag bli tveksam till dem på grund av att de innehåller mer funktioner än vad som behövs och sen är jag allmänt lite tveksam till plugin. Det blir lätt för många och sidan blir ”tung” och det kan uppstå konflikter.

Egen inloggningssida – nackdelar

Den viktigaste att tänka på är att om man använder en cache-plugin så slå av den för inloggningssidan.

Egen inloggningssida – fördelar

Den viktigaste är utseendet du kan styra allt!

Så här gör du

Den här guiden bygger på genesis – men i grunden så är det samma även i  andra teman.

Steg 1

Skapa en ny fil i din tema-folder och döp den till login-page.php

Klistra in följande kod:

<?php
/*
Template Name: Login/Logout Page
*/

add_action( 'genesis_entry_content', 'ck_do_login_form' );
function ck_do_login_form() {

	$loggedin = is_user_logged_in();
	$user = wp_get_current_user();
	if ( $loggedin ) { ?>
		<h3>Du är redan inloggad</h3>
		<p>Hej, <?php echo $user->user_firstname; ?>! Du har redan loggat in!</p>
		<p>GÃ¥ <a href="/">Hem</a> eller <a href="<?php echo wp_logout_url( get_permalink() ); ?>">Logga ut</a></p>
	<?php
	} else {

		if (isset($_GET['login'])){
	    	echo 'Du har använt felaktiga inloggningsuppgifter.';
		}		
		$args = array(
			'form_id'			=> 'loginform',
			'redirect'			=> get_bloginfo( 'url' ),
			'id_username'		=> 'user_login',
			'id_password'		=> 'user_pass',
			'id_remember'		=> 'rememberme',
			'id_submit'			=> 'wp-submit',
			'label_username'	=> __( 'Username' ),
			'label_password'	=> __( 'Password' ),
			'label_remember'	=> __( 'Remember Me' ),
			'label_log_in'		=> __( 'Log In' ),
		);
		wp_login_form( $args );
	}
}
genesis();

Om du använder ett annat tema så kan du titta på den här sidan för att få koden till din login.php

Steg 2

Det här steget gör du i WordPress.
Först skapar du en ny sida och väljer att använda den nya sidmallen du precis har skapat. Inställningen hittar  du till höger i panelen.

Spara sidan så har du en ny sida som du kan länka till och använda på vanligt sätt.

Anpassning till andra funktioner

Såhär långt kan man fundera på andra saker – visserligen fungerar den här sidan, men möjligheten finns att du har  andra plugin eller funktioner som skickar besökaren till inloggningen istället för till ditt nya formulär. Det finns i grunden två sätt att ordna det på antingen på servernivå i din .htaccess eller genom att lägga till kod i functions.php. I mångt och mycket tycker jag att det är en smaksak vilket man väljer.

<?php
add_action('init','goto_login_page');
function goto_login_page() {
/* Syfte      : Fånga upp och vidarebefodra till en egen login sida
   Författare : Karin H Olsson karin@kobotolo.se 
   WP ver     : -
   URL        : http:/kobotolo.se
   Git rep    : https://bitbucket.org/kaolss/useful/src
*/

	$query = get_pages( array(
    	'meta_key'   => '_wp_page_template',
    	'meta_value' => 'login-page.php',
		) );
 
	if ( $query ) {
	    foreach ( $query as $post ) :
	        setup_postdata( $post ); 
	        $page_id=$post->ID;
      	endforeach;
	}
	$login_page = home_url( '/?page_id='. $page_id. '////' );
	$page = basename($_SERVER['REQUEST_URI']);

	if( $page == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
	   wp_redirect( $login_page  .'/');
	    	exit;
	}
}


add_action( 'wp_login_failed', 'login_failed' );
function login_failed() {
	$query = get_pages( array(
    	'meta_key'   => '_wp_page_template',
    	'meta_value' => 'login-page.php',
	));
	if ( $query ) {
	    foreach ( $query as $post ) :
	        setup_postdata( $post ); 
	        $page_id=$post->ID;
      	endforeach;
	}
	$login_page = home_url( '/?page_id='. $page_id. '/' );
	wp_redirect( $login_page . '&login=failed' );
	exit;
}

function blank_username_password( $user, $username, $password ) {
  
	$query = get_pages( array(
     	'meta_key'   => '_wp_page_template',
    	'meta_value' => 'login-page.php',
	));
	if ( $query ) {
	    foreach ( $query as $post ) :
	        setup_postdata( $post ); 
	        $page_id=$post->ID;
      	endforeach;
	}
	$login_page = home_url( '/?page_id='. $page_id. '/' );	
        if( $username == "" && $password == "" ) {
	   wp_redirect( $login_page  .'/');
	   exit;
	}
        if( $username == "" || $password == "" ) {
	   wp_redirect( $login_page . "&login=blank" );
	   exit;
	}
}

add_filter( 'authenticate', 'blank_username_password', 1, 3);

Koden hanterar tre problem:

• Access till login.php
• Tomma fält
• Felaktig information