而這樣的設計有點單調，有沒有什麼方法可以改掉這個登入畫面呢？例如改為自己的品牌logo和底色，傑哥今天就實做修改後台登入頁面的細節，一步步示範給大家 ... 如何在WordPress製作一個客製化的登入頁面WordPress推薦外掛|網站建置進階課程 / 2021-02-26本文最後更新日期：2021-03-09 如何在WordPress製作一個客製化的登入頁面？眾所週知WordPress的後台登入畫面，上方是一個WordPress的Logo，下方則是帳號密碼的表單。

而這樣的設計有點單調，有沒有什麼方法可以改掉這個登入畫面呢？例如改為自己的品牌logo和底色，傑哥今天就實做修改後台登入頁面的細節，一步步示範給大家看。

內容目錄隱藏 1 安裝EridentCustomLoginandDashboard外掛 2 設定登入頁面 2.1 更改後台logo 2.2 更改螢幕背景圖樣（Pattern） 2.3 更改表單樣式 3 查看後台登入頁面的修改成果 4 匯出匯入樣式 5 後台登入頁修改結論安裝EridentCustomLoginandDashboard外掛 WordPress可以透過安裝EridentCustomLoginandDashboard外掛來增加功能。

若要修改後台的登入頁面，就可以透過外掛來達成。

我們到左邊的選單，按外掛→安裝外掛。

搜尋Erident這個字，可以直接找到外掛，然後按立即安裝，安裝完後啟用。

我們將用它來製作後台登入頁面。

此時我們先登出，可以看到目前的登入畫面已經被修改成這個樣子。

看起來有點醜…不過沒關係，這代表我們接下來可以改的地方有很多。

設定登入頁面我們再登入回到後台，在後台設定→CustomLoginandDashboard，在這裡就可以進行登入頁面的設定。

進入後有5個主要的設定： DashboardSettingsLoginScreenBackgroundLoginScreenLogoLoginFormSettingPluginUn-installSettings 更改後台logo 首先到LoginScreenLogo這個區塊，更改logo。

請預先準備一個logo圖檔，寬度在300px左右，最好是透明的png檔。

在LoginScreenLogo→LogoUrl按AddLogo鈕，會連結到媒體庫，請將logo圖檔上傳。

此時，我們注意一下，該logo圖檔的長寬大小為300x61，記起來這個數值，等下可以進行設定。

按下插入鈕，回到剛剛的自訂畫面，將logo的長寬輸入；下方的powerby字樣，是指滑鼠移到logo上時會出現的文字，可以自行更改。

更改螢幕背景圖樣（Pattern）在上一篇文章12個高品質免費設計資源素材下載有介紹一個高級的背景圖樣網站SubtlePatterns，我們在這裡很容易找到一些素雅的背景素材（Pattern）。

我下載其中一個黑色圖樣背景，下載的若是zip壓縮檔，要先解壓縮。

回到後台，點選上方LoginScreenBackground這個區塊，按AddBackgroundImage這個鈕，將剛剛的背景圖檔上傳。

其他的設定都維持預設即可，背景圖會自動拼接起來。

更改表單樣式捲動到下方LoginFormSetting區塊，這裡有一些關於後台登入表單的外觀設定，您可以自己視需要來設定。

以下是我的設定供大家參考： LoginFormBackgroundColor:#f3f3f3（表單背景顏色：淺灰色；透明度0.9）LoginFormBackgroundImage:保持空白（不要背景圖樣）LoginFormLabelTextSize:16（表單說明欄的文字大小）LoginFormInputTextSize:16（表單輸入欄的文字大小）Enablelinkshadow?no（去除鏈結文字的陰影）HideRegister|Lostyourpasswordlink：Yes（隱藏「忘記密碼」鏈結）HideBacktoyourwebsitelink:Yes（隱藏「返回首頁」鏈結）設定完畢後之，按左下方的儲存設定鈕。

這樣就大功告成了！查看後台登入頁面的修改成果滑鼠停在右上角的管理員圖片，可以看到下拉選單，按登出鈕。

此時，我們再回到後台的管理登入畫面，應該可以看到後台畫面整個都不一樣了！匯出匯入樣式這個外掛不但完全免費，而且還佛心來著，有匯出匯入設定的功能。

意思是說，如果你有多個網站要設定，那麼只需要將目前的成果匯出，保留起來。

若還有其他網站，也可以安裝EridentCustomLoginandDashboard外掛，然後直接匯入，就免去了一一設定的過程，並快速地將後台登入頁改為一模一樣。

（logo與背景圖檔需重新上傳）後台登入頁修改結論今天的教學讓我們用一點點的時間，就能自訂登入頁面的樣式。

能做到同樣效果的WordPress外掛有很多，傑哥會選用EridentCustomLoginandDashboard外掛，除了完全免費之外，主要也是因為自己有點潔癖，考慮外掛的功能不能太多、太龐雜，且要輕量化、簡單化。

因為它的設定快，成效大，不論給自己或業主使用，都能在登入時就看到高雅的登入畫面以及品牌logo，會讓人感到順心滿意，希望也能讓你的網站，更能彰顯品牌的價值。

如果你有其他的意見或建議，也請不吝留言讓我知道。

相關文章12個高品質免費設計資源素材下載WordPress必裝的10個推薦外掛-2021WordPress網站安全的10個注意事項如何將WordPress圖片分類，推薦HappyFiles媒體管理外掛加入FB社團如果你覺得這篇文章對你有益處的話，不要忘記去傑哥架站教室的粉絲專頁按個讚哦！傑哥最近也開啟了FB社團，歡迎大家到社團分享、討論哦！WordPress新手站長|網站建置|SEO優化-傑哥架站教室交流團 WordPress新手站長|網站建置|SEO優化-傑哥架站教室交流團訂閱傑哥架站教室電子報，馬上寄給您長達29頁的《20分鐘-在自己的電腦架設免費網站》教學電子書哦！發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*留言顯示名稱* 電子郵件地址* 個人網站網址在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

有人回覆留言時，以email通知我。

搜尋關鍵字: 訂閱電子報立即贈送29頁的電子書《20分鐘-在自己的電腦免費架設網站》文章分類 SEO WooCommerce WordPress推薦外掛主機相關作品案例新手起步第三方服務網站建置基礎課程網站建置進階課程部落格電腦技巧頁面編輯器最新教學按讚加入粉絲團WordPress傑哥架站教室最新文章如何設定WordPress網站的寄信SMTP？並使用Brizy製作聯絡我們頁面 Brizy編輯器搭配Blocksy佈景主題教學，30分鐘建立WordPress網頁美國飛寶石油官方網站桃園電焊機硬翰科技-焊天下桃園室內設計-浩室設計字畫收購．書畫買賣-崇雅堂吉他教學網站-原作教你彈吉他九五國際商務中心網站建置的必要條件：網址與主機 2021最新Cloudways教學，50張完整圖解VPS主機設定與WordPress架站 WordPress新手教學：選擇內容管理系統的7項要素如何使用Gmail收發Gandi的免費電子郵件如何使用Outlook、Gmail收發虛擬主機的電子郵件如何在WordPress網站埋入GoogleAnalytics追踨碼（GA4） WooCommerce教學(2)-商店的付款方式與運費設定 WooCommerce教學-商店的初始設定與匯入商品範例網站建置費用大解析-抓預算5要點 6個檢查點，優化你的WordPress網站速度如何在WordPress製作一個客製化的登入頁面 12個高品質免費設計資源素材下載中文網址會影響SEO效果嗎？如何自動翻譯為英文 5個有趣的WordPress網站應用實例 WordPress教學：如何網站遷移/搬家/備份/還原到不同網址 WordPress教學-20分鐘新手網站架設流程我的商家優化的6個有效的方法-你的google地圖排名很重要歡迎來到傑哥架站教室現在開始將教學拍成影片，希望您也可以訂閱我的頻道。

將每周推出一支教學影片。

希望得到您的回饋！傑哥的YouTube新手起步第一課：內容管理系統第二課：網址與主機第三課：Cloudways主機教學第四課：形象網站示範架站教學推薦工具網站建置文章網站地圖關於我傑哥介紹提供服務連絡我Email：[email protected] dot-circle-o linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram