Medienbeckerei Blog

Mir gefiel die Art und Weise des normalen Wordpress Logins in einem meiner aktuellen Projekte nicht. Also habe ich mich umgeschaut, welche Formen es noch gibt. Da bin ich auf die Idee gestoßen, eine Art Overlay (wie man es von Thickbox, Lightbox, Slimbox, etc kennt)  dafür zu nutzen.

Dann habe ich den Artikel gelesen, in dem jQuery, Thickbox und Wordpress dafür vereinigt werden. Um nicht im Header rumfummeln zu müssen, habe ich mir kurzerhand ganz bequem das Thickbox Plugin installiert.

Dazu mußte ich dann noch folgende Schritte erledigen:

In dem aktivierten Themes Verzeichnis hab ich in die sidebar.php den Code für das Formular aus meiner wp-login.php reinkopiert:

<div id=”form” style=”display:none;”>

<form name=”loginform” id=”loginform” action=”<?php echo site_url(‘wp-login.php’, ‘login_post’) ?>” method=”post”>
<p>
<label><?php _e(‘Username’) ?><br />
<input type=”text” name=”log” id=”user_login” value=”<?php echo esc_attr($user_login); ?>” size=”20″ tabindex=”10″ /></label>
</p>
<p>
<label><?php _e(‘Password’) ?><br />
<input type=”password” name=”pwd” id=”user_pass” value=”" size=”20″ tabindex=”20″ /></label>
</p>
<?php do_action(‘login_form’); ?>
<p><label><input name=”rememberme” type=”checkbox” id=”rememberme” value=”forever” tabindex=”90″ /> <?php esc_attr_e(‘Passwort speichern’); ?></label></p>
<p>
<input type=”submit” name=”wp-submit” id=”wp-submit” value=”<?php esc_attr_e(‘Anmelden’); ?>” tabindex=”100″ />
<input type=”hidden” name=”redirect_to” value=”<?php echo esc_attr(admin_url()); ?>” />
<input type=”hidden” name=”testcookie” value=”1″ />
</p>
</form>
</div>

Dann habe ich etwas über diesem Code in der sidebar.php den Standardeintrag von Wordpress durch folgendes ersetzt, damit das neue Formular auch korrekt aufgerufen wird, jedoch während des eingeloggten Zustands das “normale” Standardelement (Admin und Abmelden) dennoch vorhanden ist:

<?php if ( !is_user_logged_in() ) {
echo “<li><a href=\”#TB_inline?height=180&amp;width=200&amp;inlineId=form\” class=\”thickbox\” title=\”Dein Loginformular\” rel=\”nofollow\”>Login</a></li>”;
}else{
echo “<li>”.wp_loginout().”</li>”;
} ?>

In meinem ausgesuchten Theme gab es oben in der header.php noch ein Anmelde-Icon, welches ich auch kurzerhand etwas modifiziert habe:

<?php if ( !is_user_logged_in() ) { echo “<a href=\”".get_bloginfo(‘url’).”/wp-content/themes/purple/sidebar.php#TB_inline?height=180&amp;width=200&amp;inlineId=form\” class=\”thickbox\” title=\”Dein Loginformular\” id=\”login\” rel=\”nofollow\”>Login</a>”; } ?>

Daran denken, dass Google immer den Login indiziert, was natürlich unnötig ist. Somit rel=”nofollow” mit in dem Link angeben (wie oben geschehen).

Sodann hat man ein fesches Ajax Anmeldeformular und alles wird gut.

Kleine Anmerkung: damit man beim Logout nicht doch das “normale” Standard Anmeldeformular sieht, benötigt man ab Zeile 312 in wp-login.php noch folgende Ergänzung:

case ‘logout’ :
check_admin_referer(‘log-out’);
wp_logout();

//$redirect_to = ‘wp-login.php?loggedout=true’;
//if ( isset( $_REQUEST['redirect_to'] ) )
//    $redirect_to = $_REQUEST['redirect_to'];

//wp_safe_redirect($redirect_to);
wp_safe_redirect(“/”);
exit();