制作個(gè)性化的WordPress登陸界面的實(shí)例教程
更新時(shí)間：2016年05月21日 12:02:14 作者：Kayo Lee
隨著WordPress多用戶功能的日益完善,也有越來越多的開發(fā)者開始著手于WordPress登陸界面部分的自定義制作,接下來我們就來看制作個(gè)性化的WordPress登陸界面的實(shí)例教程
個(gè)性化登陸界面的方法有兩種，第一種是替換登陸背景，這個(gè)算是小型個(gè)性化吧：
在/wp-admin/images找到login-bkg-tile.gif和login-bkg-bottom_new.gif兩張圖片，用自己定制的圖片（大小最好相同）替換就行了。
當(dāng)然這個(gè)不能改變登陸框的布局，顯然對(duì)于追求完美的處女座來說是不夠的，于是第二種方法出現(xiàn)了：
首先在functions.php中添加一個(gè)函數(shù)：
// custom login for theme
// folder themes/theme_name/custom-login/
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />';
}
add_action('login_head', 'custom_login');
通過一個(gè)簡單的“勾子”，現(xiàn)在你的主題已經(jīng)可以開啟個(gè)性化登陸界面了，接下來要做的，是為你的登陸界面寫css樣式，命名為custom-login.css，然后再把css文件放到主題文件夾里就行了。
以下是本站的css，供大家參考（由于我的custom-login.css是放在主題文件夾的子文件里，所以background里的url要寫成如../images/login-bg-body.jpg的形式，熟悉MCS的人就會(huì)知道 ".." 代表上一級(jí)目錄）
/* 頁面css */
html,body,#wpbody,.form-table .pre{background: #ffffff url("../images/login-bg-body.jpg");? font-size: 13px; font-family: 微軟雅黑,宋體;}
a{text-decoration: none;}
body.login,body{border: none;}
h1 a{display: none;}
/* 登陸框主體部分css */
#login{background: url("../images/login-bg.jpg") no-repeat;? width: 650px;? height: 500px;? position: relative; margin: 50px auto;}
#loginform {padding-left: 110px;? float: right;? border-left: 2px solid #e3e3d3}
#loginform #user_login , #loginform #user_pass {border: 2px dotted #666666}
form{width: 280px;? height: 166px;? padding: 45px 0px 0px 0px;? background: url() no-repeat; margin: 60px 0 0 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
#user_pass,#user_login,#user_email{width: 190px; height: 20px; margin-bottom: 10px;}
/* 登陸框各組成css */
label {font-size: 13px; color: #fff;}
form .forgetmenot label {font-size: 13px;? color: #666666;}
.login #nav a{color: #666666 !important;}
input.button-primary, button.button-primary, a.button-primary{background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family: 微軟雅黑,宋體;}
form .submit input {color: #666666;}
input.button-primary: active, button.button-primary: active, a.button-primary: active {background: none;}
/* 其他 */
#nav{margin: 0; padding: 0; position: absolute; text-shadow: none;}
送上效果圖
看到效果后就會(huì)發(fā)現(xiàn)，雖然我們不能改變頁面的html元素，但包括登陸框結(jié)構(gòu)在內(nèi)的整個(gè)登陸頁面都可以自定義，只要你知道每個(gè)部分的css選擇器名稱即可。所以只要用firebug等工具查看所有css的id或class，就可以制作出一個(gè)完全自己作主的登陸界面。
相關(guān)文章
這篇文章主要介紹了開源PHP缺陷管理平臺(tái)mantis安裝、配置和使用中的問題小結(jié),mantis是一個(gè)PHP的開源缺陷管理平臺(tái),需要的朋友可以參考下2014-07-07
Zend Framework入門教程之Zend_Session會(huì)話操作詳解
這篇文章主要介紹了Zend Framework入門教程之Zend_Session會(huì)話操作,結(jié)合實(shí)例形式詳細(xì)分析了Zend_Session會(huì)話操作的具體使用技巧,需要的朋友可以參考下2016-12-12
本篇文章是對(duì)PHP中的Error函數(shù)與Logging函數(shù)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了在IIS下安裝PHP擴(kuò)展的方法，非常簡單，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了PHP上傳圖片類顯示縮略圖功能的相關(guān)資料,重點(diǎn)強(qiáng)調(diào)下帶有縮鏍圖，但是感覺不全面，后續(xù)還會(huì)繼續(xù)修改，需要的朋友可以參考下2016-06-06
Laravel 5.5 的自定義驗(yàn)證對(duì)象/類示例代碼詳解
Laravel 5.5 將提供一個(gè)全新的自定義驗(yàn)證規(guī)則的對(duì)象，以作為原來的 Validator::extend 方法的替代。接下來通過示例代碼給大家介紹laravel 自定義驗(yàn)證對(duì)象和類，需要的朋友參考下吧2017-08-08
PHP保留兩位小數(shù)并且四舍五入及保留兩位小數(shù)并且不四舍五入該如何實(shí)現(xiàn)，不會(huì)的朋友可以詳細(xì)參考下本文，希望對(duì)大家有所幫助2013-09-09
這篇文章主要介紹了thinkPHP5.0框架環(huán)境變量配置方法,結(jié)合實(shí)例形式分析了thinkPHP5.0中環(huán)境變量的功能、定義、配置與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
要求實(shí)現(xiàn)一個(gè)7個(gè)元素的數(shù)組，取出這個(gè)數(shù)組中的5個(gè)元素，生成新的數(shù)組，這些數(shù)組是唯一的2014-01-01
最近寫的一個(gè)PHP 分頁分組類，寫完后才看到，網(wǎng)上有太多的了，但是這個(gè)比較簡單，記到此處，備用，對(duì)于學(xué)習(xí)php的朋友也是一個(gè)不錯(cuò)的參考。2009-12-12