在 WordPress 中，網站 Logo 圖片是透過「外觀 → 自訂 → 網站識別」功能來設定的。不少開發者或設計師在製作佈景主題時，會想要直接抓取這個 Logo 圖片的網址（src），以便自由控制 HTML 結構或加上自訂樣式。

本篇教學帶你一步步了解，該如何在 WordPress 樣板中抓取這張 Logo 圖片！

一、確認佈景主題有啟用自訂 Logo 功能

首先，在你的 functions.php 中確認有啟用 custom-logo 支援：

add_theme_support('custom-logo');

這樣，後台「網站識別」功能才會出現「網站標誌」的上傳選項。

 

二、後台設定網站標誌

路徑：

後台 → 外觀 → 自訂 → 網站識別 → 網站標誌

上傳後，WordPress 會將這張圖存進媒體庫並產生對應的 ID。

 

三、樣板中抓取 Logo 圖片網址

程式碼範例：

$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');

if ($logo) {
    echo esc_url($logo[0]); // 這就是 Logo 圖片的 URL
}

接著就可以把圖片網址設定到 WordPress Template 內了。

 

透過 get_theme_mod('custom_logo') 搭配 wp_get_attachment_image_src()，你可以：

  • 自由控制 Logo 輸出的 HTML
  • 加入自訂 class、alt、lazy loading 等
  • 更靈活整合 CSS Framework 或 RWD 設計

這樣寫法更符合現代網站開發需求，比 the_custom_logo() 更彈性！