0%

正威網路行銷工作室,專注於基隆、台北與全台客製化網頁設計,提供專業 RWD 響應式、SEO 搜尋引擎優化、品牌形象設計與網站維護託管服務。

搜尋文章
聯絡資訊
地址基隆市仁二路 220 號 5 樓
追蹤我們

WordPress 登入頁換成自己的 Logo 和品牌色:自動抓網站 Logo(免外掛)

WordPress 登入頁換成自己的 Logo 和品牌色:自動抓網站 Logo(免外掛) 封面

WordPress 的登入頁(你的網址/wp-login.php)預設長這樣:上面是 WordPress 的 W 標誌,點下去會連到 WordPress 官網,滑鼠移上去顯示「本站採用 WordPress 建置」。

自己用沒關係,但如果網站有會員、或要請客戶登入後台更新內容,登入頁換成自己的品牌,看起來就專業很多。這篇的程式碼不用另外貼 Logo 網址,會自動抓網站已經設定好的 Logo,以後換 Logo,登入頁也跟著換。

程式碼

放在子佈景主題的 functions.php,或用 Code Snippets 這類外掛新增:

PHP
// 登入頁:自動用網站設定好的 Logo,按鈕換成品牌色
add_action( 'login_enqueue_scripts', function () {
	$brand = '#1e8a8a'; // 品牌主色
	$hover = '#16696a'; // 滑鼠移上去的顏色(主色再深一點)

	// 先找網站 Logo,沒有就用網站圖示
	$logo_id = get_theme_mod( 'custom_logo' ) ?: get_option( 'site_icon' );
	$logo    = $logo_id ? wp_get_attachment_image_url( $logo_id, 'medium_large' ) : '';

	$css = "
		body.login { background: #f4f7f7; }
		.login form { border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
		.login .button-primary { background: {$brand}; border-color: {$brand}; }
		.login .button-primary:hover,
		.login .button-primary:focus { background: {$hover}; border-color: {$hover}; }
		.login input[type=text]:focus,
		.login input[type=password]:focus { border-color: {$brand}; box-shadow: 0 0 0 1px {$brand}; }
		.login .button.wp-hide-pw .dashicons,
		.login #nav a, .login #backtoblog a { color: {$brand}; }
	";
	if ( $logo ) {
		$css .= '.login h1 a { background-image: url("' . esc_url( $logo ) . '"); background-size: contain;'
			. ' background-position: center; width: 100%; max-width: 280px; height: 90px; }';
	}
	wp_add_inline_style( 'login', $css );
} );

// Logo 連到自己的首頁,文字是網站名稱
add_filter( 'login_headerurl', function () {
	return home_url( '/' );
} );
add_filter( 'login_headertext', function () {
	return get_bloginfo( 'name' );
} );

// 拿掉登入頁下方的語言選單(網站只有中文時用不到)
add_filter( 'login_display_language_dropdown', '__return_false' );

每一段在做什麼

Logo 從哪裡來

程式碼依序找兩個地方:

  1. 網站 Logo:傳統佈景主題在「外觀 → 自訂 → 網站識別」設定;區塊佈景主題(例如 Twenty Twenty-Five)是在網站編輯器裡的「網站標誌」區塊設定。兩種設定,get_theme_mod( 'custom_logo' ) 都抓得到。
  2. 網站圖示:沒有設定 Logo,就用「設定 → 一般」裡的網站圖示(瀏覽器分頁上那個小圖)。
  3. 兩個都沒有:維持 WordPress 原本的標誌,畫面不會開天窗。

圖片用 medium_large 尺寸,最寬 768 像素。Logo 在登入頁顯示約 280 像素寬,用大一點的圖,在手機和高解析度螢幕上才不會模糊;原圖比 768 小,就直接用原圖。

顏色

  • $brand 換成你的品牌主色,$hover 是滑鼠移上去的顏色,通常選主色再深一點。
  • 登入按鈕、輸入框選取時的外框、顯示密碼的眼睛圖示、下方「註冊|忘記密碼?」和「前往網站」的連結,都會變成品牌色。
  • 登入框改成圓角加淡淡的陰影,背景換成很淺的灰綠色。

wp_add_inline_style( 'login', ... ) 會把這段 CSS 接在 WordPress 登入頁原本的樣式後面,所以蓋得過去,不用加 !important。

Logo 的連結和文字

  • login_headerurl:Logo 點下去回到自己的首頁,不會跑去 WordPress 官網。
  • login_headertext:Logo 的文字改成網站名稱。螢幕閱讀器會念這段文字,所以要放有意義的內容。

語言選單

網站裝了中文語言,登入頁最下面會多一個語言下拉選單,讓登入的人切換介面語言。只有中文使用者的網站用不到,login_display_language_dropdown 回傳 false 就不會顯示。

實際測試的結果

在測試站的 Twenty Twenty-Five、Twenty Twenty-One 各測三種情況:

  • 沒有 Logo、沒有網站圖示:維持 WordPress 原本的標誌,按鈕和連結換成品牌色。
  • 只有網站圖示:顯示網站圖示。
  • 有 Logo,也有網站圖示:顯示 Logo。

三種情況下,Logo 都連到自己的首頁、文字是網站名稱,語言選單都不見了。電腦寬度 1280 和手機寬度 390 都看過,Logo 置中、不變形,登入框不會超出畫面。

不會改到的地方

這段程式碼只改 wp-login.php 這一頁(登入、註冊、忘記密碼都在這頁)。WooCommerce 的「我的帳號」登入表單是網站前台的頁面,樣式跟著佈景主題走,不受影響。

延伸閱讀

登入頁也是品牌的一部分。正威網路行銷是 25 年經驗的基隆網頁設計工作室,建站方案都包含後台操作教學,台北與全台客戶也歡迎來聊聊。

分享這篇文章

返回文章列表更多「Wordpress代碼教學」文章

發表留言

還沒有人留言,歡迎第一個分享你的想法或問題。留言經審核後才會顯示,Email 不會公開。

讓我們一起打造
您的專屬網站!