上次說到不用插件也可以修改WordPress登陸注冊界面，不過只是簡單的修改了CSS，缺少很多元素，例如header、導航、footer等，為了增加這些元素，我們可以采取另一種方式，將WordPress登陸注冊界面做成page模板，用page來展示登陸/注冊/找回密碼。進一步，我們可以將登注冊、找回密碼放在一個頁面，用選項卡切換，效果如下(Based on twentyeleven)

顯示wp登陸表單的函數

如果只需要顯示wp的登陸表單，有一個現成的函數可以用

這里我們要把登陸、注冊和找回密碼放到一個模板里，所以需要手動寫這三個表單的代碼。

實現方法

下述文件均放置在主題根目錄下

1. 建立一個新的page模板，命名為page-login.php，內容如下：<?php

/*

Template Name:Login Template

*/

wp_enqueue_style('custom-login.css', get_stylesheet_directory_uri() . '/custom-login.css');

get_header();

?>

>

<?php the_title(); ?>

get_currentuserinfo();

if (!$user_ID) { ?>

• <?php _e('登陸'); ?>
• <?php _e('注冊'); ?>
• <?php _e('找回密碼'); ?>

$reset = $_GET['reset'];

if ($register == true) { ?>

<?php _e('Username'); ?>:

<?php _e('Password'); ?>:

<?php _e('用戶名'); ?>:

<?php _e('郵箱'); ?>:

if ($register == true) {

echo ' 密碼已發送至您的郵箱，請查看 ';

}

?>

<?php _e('用戶名或郵箱'); ?>:

if ($reset == true) {

echo '信息將會發送至您的注冊郵箱 ';

}

?>

<?php _e('歡迎'); ?>, <?php echo $user_identity; ?>

get_currentuserinfo();

echo get_avatar($userdata->ID, 60); ?>

<?php _e('登出'); ?>

if (current_user_can('manage_options')) {

echo '' . __('控制板') . '';

} else {

echo '' . __('編輯個人資料') . '';

}

?>

2. 在文件開頭引入了custom-login.css，建立該文件，并將下面的樣式表拷貝進去/* tabbed list */

ul.tabs_login {

padding: 0; margin: 20px 0 0 0;

position: relative;

list-style: none;

font-size: 14px;

z-index: 1000;

float: left;

}

ul.tabs_login li {

border: 1px solid #E7E9F6;

-webkit-border-top-right-radius: 10px;

-khtml-border-radius-topright: 10px;

-moz-border-radius-topright: 10px;

border-top-right-radius: 10px;

-webkit-border-top-left-radius: 10px;

-khtml-border-radius-topleft: 10px;

-moz-border-radius-topleft: 10px;

border-top-left-radius: 10px;

line-height: 28px; /* = */ height: 28px;

padding: 0; margin: 0 5px 0 0;

position: relative;

background: #fff;

overflow: hidden;

float: left;

}

ul.tabs_login li a {

text-decoration: none;

padding: 0 10px;

display: block;

outline: none;

}

html ul.tabs_login li.active_login {

border-left: 1px solid #E7E9F6;

border-bottom: 1px solid #fff;

-webkit-border-top-right-radius: 10px;

-khtml-border-radius-topright: 10px;

-moz-border-radius-topright: 10px;

border-top-right-radius: 10px;

-webkit-border-top-left-radius: 10px;

-khtml-border-radius-topleft: 10px;

-moz-border-radius-topleft: 10px;

border-top-left-radius: 10px;

background: #fff;

color: #333;

}

html body ul.tabs_login li.active_login a { font-weight: bold; }

.tab_container_login {

background: #fff;

position: relative;

margin: 0 0 20px 0;

border: 1px solid #E7E9F6;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-radius-bottomleft: 10px;

-moz-border-radius-bottomleft: 10px;

border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-khtml-border-radius-bottomright: 10px;

-moz-border-radius-bottomright: 10px;

border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-radius-topright: 10px;

-moz-border-radius-topright: 10px;

border-top-right-radius: 10px;

z-index: 999;

float: left;

width: 100%;

top: -1px;

}

.tab_content_login {

padding: 7px 15px 15px 15px;

padding-top: 10px;

}

.tab_content_login ul {

padding: 0; margin: 0 0 0 15px;

}

.tab_content_login li { margin: 5px 0; }

/* global styles */

#login-register-password {}

#login-register-password h3 {

border: 0 none;

margin: 10px 0;

padding: 0;

}

#login-register-password p {

margin: 0 0 15px 0;

padding: 0;

}

/* form elements */

.wp-user-form {}

.username, .password, .login_fields {

margin: 7px 0 0 0;

overflow: hidden;

width: 100%;

}

.username label, .password label { float: left; clear: none; width: 25%; }

.username input, .password input {

font: 12px/1.5 "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;

float: left; clear: none; width: 200px; padding: 2px 3px; color: #777;

}

.rememberme { overflow: hidden; width: 100%; margin-bottom: 7px; }

#rememberme { float: left; clear: none; margin: 4px 4px -4px 0; }

.user-submit { padding: 5px 10px; margin: 5px 0; cursor:pointer; }

.userinfo { float: left; clear: none; width: 75%; margin-bottom: 10px; }

.userinfo p {

margin-left: 10px;

}

.usericon { float: left; clear: none; width: 15%; margin: 0 0 10px 22px; }

.usericon img.avatar {

border: 1px solid #F4950E;

padding: 1px;

}

3. 選項卡切換效果通過jQuery實現，建立一個js文件叫custom-login.js，拷貝下面的代碼jQuery(document).ready(function() {

jQuery(".tab_content_login").hide();

jQuery("ul.tabs_login li:first").addClass("active_login").show();

jQuery(".tab_content_login:first").show();

jQuery("ul.tabs_login li").click(function() {

jQuery("ul.tabs_login li").removeClass("active_login");

jQuery(this).addClass("active_login");

jQuery(".tab_content_login").hide();

var activeTab = jQuery(this).find("a").attr("href");

if (jQuery.browser.msie) {

jQuery(activeTab).show();

}

else {

jQuery(activeTab).show();

}

return false;

});

});

4. 到后臺建立一個新的頁面，模板選擇Login Template，保存發布后就可以看到效果。不同的主題效果不同，需要根據具體情況修改css樣式。

集成到主題

如果不想為css和js建立單獨的文件，可以將custom-login.css中的內容拷貝到主題的style.css中，將custom-login.js的內容拷貝到footer.php

總結

以上是生活随笔為你收集整理的php注册页面模板,选项卡式WordPress登陆注册模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。