如何自訂WordPress登入後台的Logo？

發表時間： 2011-11-07

若架設的WordPress網站是接案的，那一些小地方的改變會讓案主有不一樣的體驗。相信很多人是用WordPress來接案，製作一般中小型公司的網站，當然前台的變更並不困難，WordPress提供許多函數可以自由使用，變更版面不是難事，但後台介面往往是最難變更，也不建議變更的地方，那麼就讓我們修改個小地方，讓他感覺不太一樣吧！

修改的小地方是有多小呢？那就是修改後台的登入畫面囉！有用過WordPress的人都知道後台的登入畫面是WordPress的Logo圖案，可是對於有些人來講，他會認為說這是他的網站，為什麼我後台圖案要是WordPress的Logo呢？要變更圖案並不能，最簡單錯法是做一張一模一樣的圖檔，直接取代掉原圖，但是更簡單的做法就是用一段語法輕鬆完成！

雖然用圖片直接去取代就可以解決後台登入畫面的Logo了，但是這樣的做法當你遇到系統升級的時候，就要再去變更一次，實際上並不是這麼方便。既然WordPress有提供自訂函式的功能，那麼何不善用他來變更呢？一段語法搭上一張圖就可以一勞永逸囉！如果要實踐這個做法，就要先請您準備一張後台登入畫面要使用的圖，尺寸約在274×63上下。

前面有提到，一種做法是直接使用取代方式，你可以做一個使吋一模一樣的Logo，直接取代系統圖檔「/wp-admin/images/logo-login.png」，這樣就可以輕鬆達成，但是我們更建議的做法是製作一張圖，透過自訂function的方式，利用CSS去蓋過原始圖片，這樣效果一樣，未來WordPress進行系統更新時，也不必擔心圖檔會被原本的蓋掉！

〈▲ 預設的登入畫面，非常簡潔，Logo即是WordPress。〉

自訂登入後台Logo

如果幫別人接案或是有案主要求後台登入畫面要使用自己的Logo，那麼可以利用以下這段語法來達成效果，首先請準備一張您要使用的Logo圖片，圖片尺寸請大約在274×63左右，當然您要高一點、寬一點都可以，並將將檔案名稱取名為「logo.png」，接著請當前使用的佈景主題中建立一個「img」目錄，將「logo.png」放入。

【註】

圖片名稱或是資料夾名稱其實可以自訂，但為了配合接下來的語法，若您不熟悉語法請跟著步驟做，如果您看懂語法了，那您可以依照自己的需求變動。

請先將以下語法加入到您目前使用的佈景主題中的functions.php檔案，加入語法時，請不要破壞原本檔案內的結構，否則會造成網站出問題，語法加入後，請儲存並上傳到網站。

function custom_login_logo() {
  echo '<style type="text/css">
      .login h1 a {  background-image:url('.get_bloginfo('template_directory').'https://cdn-img.sofree.cc/img/logo.png) !important;}
    </style>';  
}
add_action('login_head', 'custom_login_logo');

接下來到登入後台查看，糟糕！圖片被蓋住了？這該怎麼辦呢？其實你可以將剛剛的語法做一些小變動，如果你懂CSS，其實這只是用同樣名稱的CSS，因為他載入的時間比較後面，所以會把原本載入的CSS特性取代掉，換言之，圖片也做了一個取代的動作。如果圖片被遮蓋住，那你可以在剛剛語法內加入「height:100px」修改圖片顯示高度，100px表示圖片的高度，請您改成您圖檔的高度，這樣就可以了。(畫面測試圖：280 x 105)。

如何自訂WordPress登入後台的Logo？