最後更新：2026/10/13
網站交給客戶之後，客戶每天打開後台的第一個畫面，就是 WordPress 的登入頁：正中間一個 WordPress 的標誌，點下去會跑到 WordPress 官網。對自己架站的人來說無所謂，但如果你是幫臺北的店家、診所、補習班做網站的工作室，或者你的會員也會看到這一頁，換成自己的 Logo 和顏色，整個網站看起來就完整多了。
這件事不需要裝外掛，十幾行程式碼就能做好。比較要注意的是，網路上流傳很久的寫法，放到新版 WordPress 已經沒有效果，下面會說明原因。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress。我想照下面這篇文章，把登入頁換成我的 Logo 和品牌色，Logo 點下去回到我的首頁。
請先問我：我的 Logo 圖片網址、Logo 的長寬比例、品牌色的色碼。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
先準備好 Logo
到後台「媒體」上傳 Logo，建議用橫式、背景透明的 PNG 或 SVG，寬度 400 像素左右就很夠用。上傳後點開圖片，複製「檔案網址」，下面的程式碼會用到。
換 Logo、顏色和連結
把 $logo 換成你剛剛複製的網址，顏色換成你的品牌色：
// 登入頁換成自己的 Logo 和顏色
add_action('login_enqueue_scripts', function () {
$logo = 'https://你的網址/wp-content/uploads/logo.png'; // 換成你的 Logo
$css = '
body.login { background: #fffaf0; }
.login h1 a {
background-image: url("' . esc_url($logo) . '");
background-size: contain;
width: 240px;
height: 80px;
}
.login form { border: 2px solid #1b1b1b; border-radius: 16px; }
.login .button-primary {
background: #2e7d32; border-color: #2e7d32; border-radius: 999px;
}
.login .button-primary:hover { background: #1b5e20; border-color: #1b5e20; }
.login #nav a, .login #backtoblog a { color: #2e7d32; }
';
// 接在 WordPress 的登入樣式後面，才蓋得過去
wp_add_inline_style('login', $css);
});
// Logo 點下去回到自己的首頁，滑鼠移上去顯示網站名稱
add_filter('login_headerurl', function () {
return home_url('/');
});
add_filter('login_headertext', function () {
return get_bloginfo('name');
});width 和 height 照你的 Logo 比例調整，例如 3:1 的橫式 Logo 就用 240 × 80。login_headerurl 讓 Logo 連回你的首頁，不再連到 WordPress 官網；login_headertext 是 Logo 的文字說明，看不到圖的螢幕報讀軟體會唸出這段字。
程式碼放在 Code Snippets 這類外掛或子主題，放法和備份方式見〈WooCommerce 結帳頁改成台灣習慣〉。萬一貼錯，登入頁打不開也進不了後台，這時候用主機的檔案管理把 Code Snippets 的外掛資料夾改名，網站就能先恢復。
為什麼網路上的舊寫法沒有效果
找登入頁的教學，最常看到的寫法是在 login_enqueue_scripts 裡直接印出一段 <style>。我們在測試站照這個寫法做了一次：背景顏色換了，Logo 卻還是 WordPress 的標誌，登入按鈕也還是藍色的。
原因在載入的順序。新版 WordPress 的登入頁，是先執行 login_enqueue_scripts，之後才印出它自己的登入樣式表。你自己印的 <style> 排在前面，WordPress 的樣式排在後面。CSS 遇到兩條規則衝突時，先比哪一條寫得比較具體，一樣具體就聽後面那一條。Logo 和按鈕兩邊都寫 .login h1 a、.login .button-primary，一樣具體，所以排在後面的 WordPress 贏了；背景會變，是因為我們寫的 body.login 比 WordPress 寫的 body 更具體。
wp_add_inline_style('login', $css) 的意思是「把這段樣式接在 login 這份樣式表後面」，不管 WordPress 什麼時候印出登入樣式，你的設定都會排在它之後。改成這個寫法，Logo、按鈕顏色、連結顏色全部正確。這也是改 WordPress 樣式的通用原則：用 wp_add_inline_style 或 wp_enqueue_style 交給 WordPress 排順序，比自己直接印出 <style> 穩定。
要不要順便改登入網址？
很多人換完登入頁的樣子，接著會想把 wp-login.php 改成別的網址，避免被機器人一直嘗試登入。可以做，但建議用專門的外掛（例如 WPS Hide Login），不要自己寫轉址。自己寫很容易漏掉某些情況：忘記密碼的信、WooCommerce 的會員登入、網站的整頁快取，任何一處沒處理好，就可能連自己都進不去。
改登入網址只能減少機器人的騷擾，擋不住真的有心的人。比它更重要的是：管理員帳號不要用 admin、密碼夠長、開啟兩步驟驗證、限制登入失敗的次數。這些做好了，登入網址改不改，差別就不大了。
細節讓網站看起來是你的
登入頁、通知信、錯誤頁，這些平常不會特別注意的地方，客戶和會員都會看到。每一處都換成自己的樣子，網站才像一個完整的品牌，而不是套了一個現成的模板。
如果你想要的不只是換 Logo，而是一個從首頁到後台都照你的品牌設計的網站，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，客製功能網站、會員網站都能從前台到後台一起規劃。MIMI 提供臺北網頁設計服務，臺北的店家、工作室可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
