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

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

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


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

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

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

〈▲ 預設的登入畫面,非常簡潔,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').'/img/logo.png) !important;}
    </style>';  
}
add_action('login_head', 'custom_login_logo');

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

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

〈▲ 圖片尺寸不符,造成遮住問題。〉

 

最後再次回到後台登入畫面看,是不是圖片剛剛好呢?已經順利取代掉原本的Logo,變成屬於自己網站的Logo了。相信案主看了應該會小小開心一下吧!

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

〈▲ 修改設定,讓圖片完美呈現。〉