自定義WordPress登錄界面

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

1 – 編輯Functions.php文件

先檢查下當前主題是否有functions.php這個文件，如果有的話就直接將下面的代碼粘貼到該文件的最下方。如果沒有這個文件，只要用記事本新建一個空白的文件粘貼下面的代碼并將它命名為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 –編輯主題文件

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

在主題文件夾里創建一個新的文件夾，并將它命名 為“custom-login“。

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

3 – 添加新的CSS規則

每次加載登錄頁面時，custom-login.css文件都會被加載，這意味著在此添加的任何css規則都將運用到登錄頁面。

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

而如果你想要再次使用主題中的圖片，你只要用下面的CSS規則就可以調用主題圖片文件夾中的圖片。(這樣一來，瀏覽器就不要再次加載該圖片，因為它已經對圖片進行了緩存)。

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

一個簡單的模板示例

下面就是我用來創建新的登錄表單樣式，非常簡單也非常實用。我都有注釋，歡迎大家在自己的網站上使用。

/* 自定義登錄樣式*/    
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}/* 頁面背景，這個不能使用body標簽 */ 
h1 a { /* 標題圖片 ( "WordPress Logo")。記得根據實際圖片尺寸更改高度和寬度 */
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;} /* 頂欄翻轉鏈接效果 */

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈