自訂 WordPress 登入頁面 Logo 與連結設定教學

前言

WordPress 預設的登入頁面 Logo 通常是 WordPress 自身標誌，對於品牌一致性或客製化需求來說，常常需要替換成自家 Logo。這篇文章針對有基本 PHP 與 WordPress 鉤子（Hook）概念的工程師，說明如何透過簡單的程式碼修改登入頁面 Logo 及其連結與標題。

修改登入頁面 Logo 的方法

WordPress 提供了 login_enqueue_scripts 動作鉤子，可以在登入頁面載入自訂 CSS。利用這個鉤子，我們可以注入 CSS 來改變 Logo 背景圖。

主要程式碼片段

function ks_custom_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url('/wp-content/uploads/login-logo.svg');
            width: 200px;        /* 依你的 SVG 比例調整 */
            height: 80px;        /* 依你的 SVG 比例調整 */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding-bottom: 0;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'ks_custom_login_logo' );

這段程式碼將登入頁面中 Logo 的背景圖片改為指定路徑的 SVG，並調整尺寸與顯示方式，確保圖片完整且置中。

自訂 Logo 點擊連結與標題

預設 WordPress 登入頁 Logo 點擊會導向 wordpress.org，且滑鼠移到 Logo 上會顯示 “Powered by WordPress”。若想改為導向自己網站首頁，並顯示網站名稱，可以使用以下兩個過濾器：

function ks_custom_login_logo_url( $url ) {
    return home_url( '/' );
}
add_filter( 'login_headerurl', 'ks_custom_login_logo_url' );

function ks_custom_login_logo_title( $title ) {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'ks_custom_login_logo_title' );

這樣使用者點擊 Logo 就會回到網站首頁，且滑鼠懸停時顯示網站名稱，提升品牌辨識度。

實務應用與優化建議

• Logo 圖片路徑：請確保 background-image 的 URL 是正確且可存取的路徑，通常放在 WordPress 媒體庫或主題資料夾。
• 尺寸調整：根據 Logo 圖檔比例調整 width 與 height，避免變形。
• 響應式設計：可進一步用媒體查詢調整不同裝置的尺寸。
• 安全性：避免在登入頁面加入過多外部資源，確保載入速度與安全。

常見問題與注意事項

• 若修改後 Logo 不顯示，請檢查圖片路徑是否正確，並清除瀏覽器快取。
• 使用 SVG 時，確保檔案安全且無惡意程式碼。
• 若有快取外掛或 CDN，請同步清除快取。

完整程式碼

<?php
// 修改 WordPress 登入頁 Logo
function ks_custom_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url('/wp-content/uploads/login-logo.svg');
            width: 200px;        /* 依你的 SVG 比例調整 */
            height: 80px;        /* 依你的 SVG 比例調整 */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding-bottom: 0;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'ks_custom_login_logo' );

// 自訂 Logo 點擊連結為首頁
function ks_custom_login_logo_url( $url ) {
    return home_url( '/' );
}
add_filter( 'login_headerurl', 'ks_custom_login_logo_url' );

// 自訂 Logo 滑鼠懸停標題為網站名稱
function ks_custom_login_logo_title( $title ) {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'ks_custom_login_logo_title' );