自定義WordPress登錄界面

是否有想過修改WordPress的登錄頁(yè)面？其實(shí)WordPress登錄頁(yè)面的自定義是非常容易的。通過這篇文章的代碼，你就可以添加個(gè)性化的登錄頁(yè)面，而且這篇文章的自定義方法都是在主題文件里完成的，這樣當(dāng)更新WordPress版本時(shí)就不用擔(dān)心這次更改會(huì)消失。

1 – 編輯Functions.php文件

先檢查下當(dāng)前主題是否有functions.php這個(gè)文件，如果有的話就直接將下面的代碼粘貼到該文件的最下方。如果沒有這個(gè)文件，只要用記事本新建一個(gè)空白的文件粘貼下面的代碼并將它命名為functions.php

<?php  function custom_login() {   echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';}  add_action('login_head', 'custom_login');  ?>

2 –編輯主題文件

我們需要一個(gè)可以保存新CSS式樣以及可能使用到圖片的地方，考慮到這些東西并不是主站的組成部分，所以建議你新建個(gè)文件夾。

在主題文件夾里創(chuàng)建一個(gè)新的文件夾，并將它命名 為“custom-login“。

接著，在這個(gè)文件夾里創(chuàng)建一個(gè)新的樣式文件并命名為 “custom-login.css”。

3 – 添加新的CSS規(guī)則

每次加載登錄頁(yè)面時(shí)，custom-login.css文件都會(huì)被加載，這意味著在此添加的任何css規(guī)則都將運(yùn)用到登錄頁(yè)面。

如果需要添加新的圖片，你可以將它們保存在custom-login文件夾里。

而如果你想要再次使用主題中的圖片，你只要用下面的CSS規(guī)則就可以調(diào)用主題圖片文件夾中的圖片。(這樣一來，瀏覽器就不要再次加載該圖片，因?yàn)樗呀?jīng)對(duì)圖片進(jìn)行了緩存)。

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

一個(gè)簡(jiǎn)單的模板示例

下面就是我用來創(chuàng)建新的登錄表單樣式，非常簡(jiǎn)單也非常實(shí)用。我都有注釋，歡迎大家在自己的網(wǎng)站上使用。

/* 自定義登錄樣式*/    
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}/* 頁(yè)面背景，這個(gè)不能使用body標(biāo)簽 */ 
h1 a { /* 標(biāo)題圖片 ( "WordPress Logo")。記得根據(jù)實(shí)際圖片尺寸更改高度和寬度 */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}  

body.login {border-top-color:#dff4fc;} /* 頂欄背景顏色*/
.login p#backtoblog a:link,
.login p#backtoblog a:visited {color:#17272d;} /* 頂欄鏈接效果*/
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* 頂欄翻轉(zhuǎn)鏈接效果 */

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)