如何設計 WordPress 後台登入頁面(使用 LoginPress)?

如何設計 WordPress 後台登入頁面(使用 LoginPress)?

網站架設 完成後,會發現 WordPress 後台 的登入畫面(輸入帳密的地方),是長的比較單調一點,有些人可能想更換成自己的品牌風格。

或者你是從事網頁設計行業,顧客希望能客製化 WordPress 後台登入頁面,當然還有很多原因,都會可能有相關需求。

這篇文章,我會跟大家分享 LoginPress 這款外掛,它是專門做 WordPress 後台登入頁面的設計,功能很多而且是免費的(這裡不討論進階版功能)。

好囉,那我們就開始吧。

LoginPress 完整影片教學

如何設計 WordPress 後台登入頁面(使用 LoginPress)?

1. 安裝 LoginPress 外掛

前往 WordPress 外掛 > 安裝外掛,搜尋 LoginPress,然後安裝+啟用。

安裝 LoginPress 外掛
安裝 LoginPress 外掛

完成後,就會看到側邊欄多了一個 LoginPress 的功能了。


2. 一般設定

前往 LoginPress > 設定,這是 LoginPress 基本設定的地方。可直接使用預設值,有特別需求再調整即可。

LoginPress教學 :一般設定
LoginPress教學 :一般設定
  • 登錄順序:WordPress 會員登入,使用者帳號的輸入方式。分別有「 使用者名稱 or Email 皆可 」、「 只有使用者名稱 」、「 只有 Email 」。
  • Auto Remember Me:自動把「 記住我 」打勾。
  • 卸載時刪除設置:未來刪除外掛後,會把此外掛的相關設定檔案,ㄧ併刪除。

3. 動手設計登入頁面

接下來,就來設計 WordPress 後台登入頁面啦。

前往 LoginPress > 自訂,這裡有非常多可設定的項目,像是更換 Logo、更換背景、自訂表格寬度 / 陰影 / 顏色、歡迎&錯誤訊息、頁尾設定等 ..。

由於大多數都已經中文化是滿容易理解的,尾端也能切換不同的裝置,進行響應式的調整(下圖)。

LoginPress教學 :多種設定選項
LoginPress教學 :多種設定選項

好,下面就挑其中一些功能,進行介紹囉。

更換網站 Logo & 背景圖片

前往「 商標 」,可設定網站 Logo、Logo 寬度 & 高度之類的 ..,也能在圖片加上網址。更多 Logo 設計+網站配色教學

前往「 背景 」,可設定背景圖片或是用純顏色顯示等 ..。

LoginPress教學 :設定網站 Logo&登入背景
LoginPress教學 :設定網站 Logo&登入背景

自訂介面 & 按鈕美容

前往「 自訂 」,可調整表單透明度、寬度、輸入框背景&文字顏色等 ..。

前往「 按鈕美容 」,可調整按鈕相關樣式。

LoginPress教學 :登入介面&按鈕設定
LoginPress教學 :登入介面&按鈕設定

錯誤訊息&頁腳表格

前往「 錯誤訊息 」,這裡是當登入輸入錯誤時,會出現的警告提示,可以把 Error 的英文改為中文。

前往「 頁腳表格 」,這是網站頁尾的相關修改,可以打開版權說明&顏色設定等 ..。

LoginPress教學 :錯誤訊息&頁腳表格
LoginPress教學 :錯誤訊息&頁腳表格

以上都設定完成後,最後來看一下設定的成品吧。

太棒了,跟預設的 WordPress 登入畫面,完全是不同的感覺:)

LoginPress教學 :WordPress 後台登入畫面,設計完成!
WordPress 後台登入畫面,設計完成!

常見問題

適合客製化設計 WordPress 後台登入頁面,是哪一款外掛呢?


我是用 LoginPress 這款外掛,因為一來它有中文化翻譯,二來能夠客製化調整的幅度很大,通常都能做出想要的設計感覺。

有關於網站 Logo,要如何設計+製作呢?


可以使用 Canva 這款線上設計軟體,它提供多種現成的設計版型,能夠做出不同的 Logo 品牌,滿足各行各業的需求。

可參考 網站 Logo 製作+網站配色,應該會幫助你不少。

如果還有更多的 WordPress 後台登入畫面的設計需求,要如何處理呢?


假如現有的 LoginPress 免費版功能,無法滿足你的需求,就可能要考慮使用進階版(但需確認一下是否有你要的功能)。

或是使用 CSS 代碼,針對想修改的地方,用程式碼的方式調整。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

如果你是看我的架站教學,而順利成功架站的,歡迎把作品提交至 WordPress 作品發表會(目前正在大量募集新作品),能幫助你的網站,有更多的曝光機會。

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top